Extract time period from selected choice on "type: energy-date-selection" UI element?

I am a huge fan of the new energy cards in the latest release of HA, and have used them to incorporate into my existing Solar-PV page, which consists of a Grafana graph showing the production and consumption for the previous 16 hours.

I would like to be able to dynamically change the length of time of the Grafana graph (top one) to match with with chosen time period of the energy-date-selection UI element. This way, both the Grafana graph and the HA energy usage graph are on the rough same time scale.

The Grafana graph is setup as an iFrame, who’s URL has a time period embedded.

http://192.168.15.33:3000/d-solo/Ks-CXKlGk/farm-power?orgId=1&from=now-16h&to=now&theme=light&panelId=2" width=“450” height=“200” frameborder="0

is there a way to change the iframe url based of the following on energy date selection ?

Day
Week
Month
Year

now-16h
now-7d
now-30d
now-365d

Then have the iframe auto-refresh to reflect the selection.

Cheers!

1 Like