Would it be possible to use the existing datepicker for Plotly-Graph?

[LiBe-net]

I am monitoring the development of Home Assistant and saw that the developers are currently working on a way to use the energy date picker for the history graph card.
Plotly-Graph is worlds ahead of the integrated HA cards. But one thing is still missing: a date picker. Would it be technically possible to use the existing energy date picker to select the time range, similar to the history graph approach?
home-assistant/frontend#23478
Supporting the existing date picker would have the advantage that Plotly-Graph could be integrated seamlessly and could synchronize the time status with other cards in the future.

[dbuezas]

You could create a helper date entity and use that to change the global offset or range of the x axis

[LiBe-net]

ok, thank you. The mentioned pull request is now in the dev Version. If i find time i will take a look at it.

[andreamag00]

Hi @LiBe-net

I implemented what was requested in this post, namely:

• a dynamic time picker (i.e. a date selector to choose which day to display in a Plotly graph)
• a dynamic zoom picker (i.e. a zoom selector that allows adjusting the hours_to_show parameter directly from the UI)

Prerequisites:

• Plotly
• Config Template Card (https://github.com/iantrich/config-template-card)

I created the following input_datetime helper (to manage the date selector):

input_datetime:
  teatrino_1_blu_grafico_potenza_data:
    name: "teatrino 1 (blu) - grafico potenza - data"
    has_date: true
    has_time: false

The UI code for the date selector (tile card) is very simple and looks like this:

type: tile
entity: input_datetime.teatrino_1_blu_grafico_potenza_data
name: Data
hide_state: false
state_content: state
vertical: false
features:
  - type: date-set
features_position: inline

I then created the following input_select helper (to manage the zoom selector):

input_select:
  teatrino_1_blu_grafico_potenza_zoom:
    name: "teatrino 1 (blu) - grafico potenza - zoom"
    options:
      - "1 ora"
      - "3 ore"
      - "6 ore"
      - "12 ore"
      - "1 giorno"
      - "2 giorni"

The UI code for the zoom selector (tile card) is also very simple and looks like this:

type: tile
entity: input_select.teatrino_1_blu_grafico_potenza_zoom
name: Zoom
hide_state: true
vertical: false
tap_action:
  action: none
icon_tap_action:
  action: none
features:
  - type: select-options
features_position: inline

Finally, I created the following graph using config-template-card + Plotly:

type: custom:config-template-card
entities:
  - input_select.teatrino_1_blu_grafico_potenza_zoom
  - input_datetime.teatrino_1_blu_grafico_potenza_data
card:
  type: custom:plotly-graph
  refresh_interval: 60
  autorange_after_scroll: true
  layout:
    yaxis:
      fixedrange: true
  config:
    scrollZoom: false
    displayModeBar: false
    doubleClick: false
  hours_to_show: |-
    ${({
      '1 ora': 1,
      '3 ore': 3,
      '6 ore': 6,
      '12 ore': 12,
      '1 giorno': 24,
      '2 giorni': 48
    })[states['input_select.teatrino_1_blu_grafico_potenza_zoom'].state]}
  time_offset: |-
    ${
      (() => {
      
        // recupera la data impostata se no seleziona offset su 0
        const dateStr = states['input_datetime.teatrino_1_blu_grafico_potenza_data'].state;
        if (!dateStr) return 0;
        
        // aggiungiamo alla data l'orario 00:00:00
        const selected = new Date(dateStr + 'T00:00:00');
        const now = new Date();
        
        // differenza in h tra l'orario attuale e la data selezionata
        // la differenza è calcolata in millisecondi quindi bisogna convertire da ms in ore dividento i ms per 1000*60*60
        const diffHours = (now - selected) / (1000*60*60);

        // parti da mezzanotte del giorno selezionato tenendo conto del parametro hours_to_show del grafico
        const hoursToShow = ({
          '1 ora': 1,
          '3 ore': 3,
          '6 ore': 6,
          '12 ore': 12,
          '1 giorno': 24,
          '2 giorni': 48
        })[states['input_select.teatrino_1_blu_grafico_potenza_zoom'].state] || 24;
        const offset = diffHours - hoursToShow;
        
        // arrotonda per eccesso a 1 decimale perchè plotly accetta un solo decimale
        const rounded = Math.ceil(offset * 10) / 10;
        
        // costruisci la stringa finale invertendo il segno e aggiungendo h
        return -rounded+'h';
      })()
    }
  entities:
    - entity: sensor.shelly_pro_em_teatrino_1_blu_totale_power
      name: Totale
      statistics: >-
        ${['1 giorno','2
        giorni'].includes(states['input_select.teatrino_1_blu_grafico_potenza_zoom'].state)
          ? 'max'
          : '' }
      period: >-
        ${['1 giorno','2
        giorni'].includes(states['input_select.teatrino_1_blu_grafico_potenza_zoom'].state)
          ? '5minute'
          : '' }
grid_options:
  columns: full

The main characteristics of the graph are:

1. Manual zoom is disabled (reason: zoom is fully controlled via the dedicated zoom selector; the user can still scroll the graph forward and backward using touch or mouse)

2. hours_to_show is dynamic and changes according to the selection made in the zoom selector

3. time_offset is dynamic and changes according to the date selected in the date selector (it is configured so that the graph always starts at 00:00 of the selected day; time_offset is rounded upwards to one decimal (Plotly limitation), ensuring that the selected day always starts at 00:00 without cutting off the beginning of the graph. The user can still scroll the graph forward and backward using touch or mouse)

4. statistics and period are dynamic and change according to the zoom selection (the goal is to automatically use statistics for wider time ranges, in order to avoid overloading the graph and the system)

If anyone is trying to build something similar, I hope this post can be helpful.

Cheers!

[LiBe-net]

thank you, i will try it. Maybe in future we find a way to use energy-cards collection_key? to sync plottly to other default cards and use the integrated timepicker.