No Range Buttons when date is not on axis

[bj00rn]

Describe the bug Range selector buttons are not rendering.

Im trying to reproduce the mould risk index chart from https://github.com/Strixx76/mold_risk_index/blob/master/plot.png

The chart has temperature in x-axis, and humidity on x-axis and I use functions to map values from sensors accordingly.

Here is my attempt:

The problem i am experiencing is that range selector buttons are not rendering when using raw_plotly_config: true

Screenshots If applicable, add screenshots to help explain your problem.

yaml

type: custom:plotly-graph
title: Mould risk
raw_plotly_config: true
hours_to_show: 1y
entities:
  - entity: sensor.lumi_lumi_weather_temperature_5
    internal: true
    statistic: mean
    fn: $fn ({ ys, vars }) => {vars.temp = ys }
  - entity: sensor.lumi_lumi_weather_humidity_5
    internal: true
    statistic: mean
    fn: $fn ({ ys, vars }) => vars.rf = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temp
    'y': $fn ({ vars }) => vars.rf
    mode: markers
    name: index
    marker:
      color: red
      size: 1
    type: scatter
  - entity: ''
    internal: true
    name: Now
    showlegend: true
    line:
      width: 1
      dash: dot
      color: deepskyblue
    fn: |-
      $fn ({vars}) => {
        function r(start, stop, step) {
          return Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step))
        }
        vars.temp_x = r(-10, 60, 1)
      }
  - entity: ''
    x: $fn ({vars}) => vars.temp_x
    'y': |-
      $fn ({vars}) => {
        function p(x) {
          if (0 <= x <= 50) {
              var limit = 20 * Math.exp( -x * 0.15 ) + 73
              return Math.max(Math.min(100,limit),72)
          } else {
              return 100
          }
        }
        return vars.temp_x.map(x => p(x))
      }
    name: lvl1
  - entity: ''
    x: $fn ({vars}) => vars.temp_x
    'y': |-
      $fn ({vars}) => {
        function p(x) {
          if (0 <= x <= 50) {
          limit = 17 * Math.exp( -x * 0.11 ) + 80
          return Math.max(Math.min(100,limit),79)
          } else {
              return 100
          }
        }
        return vars.temp_x.map(x => p(x))
      }
    name: lvl2
  - entity: ''
    x: $fn ({vars}) => vars.temp_x
    'y': |-
      $fn ({vars}) => {
        function p(x) {
          if (0 <= x <= 50) {
           limit = 15 * Math.exp( -x * 0.10 ) + 85
           return Math.max(Math.min(100,limit),84)
          } else {
              return 100
          }
        }
        return vars.temp_x.map(x => p(x))
      }
    name: lvl3
  - entity: ''
    x:
      - 50
      - 50
    'y':
      - 50
      - 100
    name: Too hot
  - entity: ''
    x:
      - 0
      - 0
    'y':
      - 50
      - 100
    name: Too cold
layout:
  xaxis:
    title:
      text: Temperature (Degrees)
    rangeselector:
      'y': 1.2
      buttons:
        - count: 1
          step: minute
        - count: 1
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day
        - count: 7
          step: day
    zeroline: false
  yaxis:
    title:
      text: Humidity
    tick: 1
    zeroline: true

Additional context Add any other context about the problem here. The example from https://github.com/dbuezas/lovelace-plotly-graph-card#range-selector-buttons works fine

[dbuezas]

The x axis is internally used to decide what to fetch, you'll need to add an entity that uses it and maybe hide it.

[bj00rn]

The x axis is internally used to decide what to fetch, you'll need to add an entity that uses it and maybe hide it.

Thanks for quick reply! Could you give me a hint on how to do that, I would be eternally grateful 😽

[dbuezas]

I've never done such a thing. Don't the custom range buttons in the readme work by any chance?

[bj00rn]

I've never done such a thing. Don't the custom range buttons in the readme work by any chance?

The buttons seem to disappear as soon as i set raw_plotly_config: true. Is this expected behaviour?

[dbuezas]

It's probably because the x axis is not defined. Here aare the defaults raw_plotly_config removes : https://github.com/dbuezas/lovelace-plotly-graph-card/blob/eb2145598330cdab4825f902493adafe9993c1ba/src/parse-config/defaults.ts#L82

Maybe you can try reading some

[bj00rn]

It's probably because the x axis is not defined. Here aare the defaults raw_plotly_config removes :

https://github.com/dbuezas/lovelace-plotly-graph-card/blob/eb2145598330cdab4825f902493adafe9993c1ba/src/parse-config/defaults.ts#L82

Maybe you can try reading some

Thanks, I guess my question should be, is there a way of interactively slicing the data when using raw_plotly_config?

Given the histogram example from the readme

type: custom:plotly-graph
entities:
  - entity: sensor.openweathermap_temperature
    x: $ex ys
    type: histogram
title: Temperature Histogram last 10 days
hours_to_show: 10d
raw_plotly_config: true
layout:
  margin:
    t: 0
    l: 50
    b: 40
  height: 285
  xaxis:
    autorange: true

Adjusting the hours_to_show seems to do exactly what im looking for.

Thanks again for taking time to answer, I wasn't really trying to file this as a bug, more of a general question.

Awesome card BTW!