Range / scale limits

[alexruffell]

I am trying to refine the Plotly cards for Temperature and Humidity but can't figure out a couple things:

1. I don't want my temperature scale to adjust too closely to the measured values being displayed because it makes the various measurements look wildly different (far apart) even though they are not. I'd like to default the minimum scale to span about 10-20C (just a guess for now) and be centered on the temperatures being displayed. The scale could increase if the temperature range being displayed were to require it but not decrease below my configured minimum.
2. As I have it configured right now, if I use the mouse wheel to see more days, I end up with a temperature scale that makes no sense... I guess it is zooming in and out instead of compressing the y axis and adjusting the x axis as needed for the data to fit in the scale.

Example:

3. For the Humidity graph I settled showing 0 to 100% but that results in the lower 0 to 20-30% never being used. If I change the range to go from 30 to 100, then it cuts off when it actually goes under (will it? Not sure). If I don't set a range at all, then I have the same issues as 1 and 2.

4. For both, is there a way for the last data point to always stick to the right? Sometimes, when interacting with the graphs, I end up with the last data point in the middle... and it is undesirable. Would be nice if I could pin it, so to speak, to the right edge.

Example:

My existing YAML:

Temperature

  - type: custom:plotly-graph
    title: Temperature
    entities:
      - entity: sensor.front_porch_motion_sensor_temperature
        name: Porch
        yaxis: y1
        connectgaps: true
        show_value: false
        line:
          shape: spline
      - entity: sensor.patio_motion_sensor_temperature
        name: Patio
        yaxis: y1
        connectgaps: true
        show_value: false
        line:
          shape: spline
      - entity: sensor.outdoor_sensor_temperature
        name: Outdoors
        yaxis: y1
        connectgaps: true
        show_value: false
        line:
          shape: spline
      - entity: sensor.front_porch_multi_sensor_temperature
        name: Porch Multi
        yaxis: y1
        connectgaps: true
        show_value: false
        line:
          shape: spline
    hours_to_show: 24
    refresh_interval: 10
    config:
      displayModeBar: false
    layout:
      staticPlot: true
      scrollZoom: false
      showlegend: true
      yaxis:
        range:
          - -5
          - 40
    defaults:
      fixedrange: true

Humidity

  - type: custom:plotly-graph
    title: Humidity
    entities:
      - entity: sensor.outdoor_sensor_humidity
        name: Outdoors
        yaxis: y1
        connectgaps: true
        show_value: false
        line:
          shape: spline
      - entity: sensor.front_porch_multi_sensor_humidity
        name: Porch Multi
        yaxis: y1
        connectgaps: true
        show_value: false
        line:
          shape: spline
      - entity: sensor.indoor_humidity
        name: Indoor
        yaxis: y1
        connectgaps: true
        show_value: false
    hours_to_show: 24
    refresh_interval: 10
    config:
      displayModeBar: false
    layout:
      title:
        font:
          color: red
      staticPlot: true
      showlegend: true
      yaxis:
        range:
          - 0
          - 100
      scrollZoom: false
    defaults:
      yaxes:
        fixedrange: true
    }

[dbuezas]

Plotlyjs does unfortunately not natively support zoom limits, but there are dome tricks we can do

1. Zoom limits through universal functions: Zoom limits #233
2. Using a fixed range (search for fixedrange) to disable zoom in an axis
3. Applying the idea in Zoom limits #233 to the x axis
4. Using double click to rescale after zoom

I may add this functionality as a yaml option if there are feature requests an multiple people needs it, until then ser the linked discussion.

I hope it works well for you!

[alexruffell]

@dbuezas I believe #233 is very close to what I was looking for. The temperatures are no longer spread out making them look very different when they are all within 1C from each other since it scales automatically to top temperature in range and 0 as a minimum regardless of the range shown. Is the minimum at 0 intentional or a bug?

I changed the code to adjust the range from -15 to +45C as those are the min/max I've seen (actual records are -31C to +49C) in this area. I don't have data to verify that it is working but am wondering why the graph is sticking to 0 as a minimum even when the range being displayed is in the 20s.

and a few days earlier

    layout:
      scrollZoom: false
      staticPlot: true
      showlegend: true
      uirevision: $fn () => Math.random() // force rescale on scroll
      yaxis:
        range: |
            $fn ({ getFromConfig }) => {
              const all = getFromConfig("entities").flatMap(({ y }) => y);
              return [
                Math.max(-15, Math.min(...all)), // cap to lowest value, but at least -15
                Math.min(45, Math.max(...all)), // cap to highest value, but at most 45
              ]
            }

[dbuezas]

it could be that there are null y values (unavailable) in some trace. try this:

const all = getFromConfig("entities").flatMap(({ y }) => y).filter(y => y !== null);