[Deprecated] Interactive history explorer custom card

I’ll see if I can install an iOS emulator on Xcode on one of our Macs in the office next week. I’d really like to fix this annoying rendering bug on iPhones.

Lovely card!
Is it possible somehow to autoscale Y-axis while zooming-in on hour level also?
When I zoom graph into a sub-day region (f.e. hours) Y-axis is not autoscaled anymore. It looks like for sub-day autoscale card keeps using 24h min/max entities values.
If the entities values are close enough with selected period it would be great to see the difference on the graph.

That’s actually on purpose. The thing is, in one of the first versions of the card I had this. It would autoscale anytime at any time scale. It was unusable. After every little scroll left or right, the graphs would jump around like crazy, adjusting to the new values. It was very confusing and you lost any kind of context while scrolling.

Maybe a dedicated rescale button could be added in the future.

1 Like

Hi, since state attributes aren’t supported - and probably never will be, could someone please provide a sample template syntax to create a sensor from a temperature attribute in a thermostat?

Agreed, dedicated rescale button would be solution.

V1.0.28 is up !

New features include value dependent color coding for bar graphs:

https://user-images.githubusercontent.com/60828821/197369661-9c75c9fe-e33f-4790-8348-8ae103880bfb.png

Also customizations of the CSV export format, new time line state color fallback defaults and some nice rendering optimizations for time lines and arrow lines !

I changed this behavior a little in V1.0.28. Now if you click on the current date, it will take you there but without changing the range you currently have active. If you double click the current date, it will take you there and reset to 1 day. I think this should be more consistent.

2 Likes

Not using this graph to anywhere near its ability for this card, but using the timeline on my energy dashboard to show the off-peak electricity slots I have been given by my supplier in the last 48 hours.

Given its pretty binary, I’d like to hide the values of the states in the timeine (in my example they are “on” and “off”). Is there anyway to do this for a timeline?

Thanks!

Screenshot 2022-10-25 at 20.17.37

type: custom:history-explorer-card
defaultTimeRange: 2d
header: ' '
uimode: dark
uiLayout:
  toolbar: hide
  selector: hide
labelsVisible: false
stateColors:
  'off': darkred
  'on': darkgreen
graphs:
  - type: timeline
    title: Off-Peak History
    entities:
      - entity: binary_sensor.octopus_intelligent_slot

Right now, no, you can’t turn them off.

But in the next version of the card, there’s a feature that could achieve this as a side effect. There will be an option to switch the state values in the time line from displaying the raw state (as it is now) to localized and device class dependent states (so for example, instead of on/off it would display Detected/Clear for a motion sensor). The YAML setting to enable this feature will also support the hide option, which will effectively remove all the text.

This was a quick one ! I got into an optimization rage and V1.0.29 got some massive performance optimizations on the rendering backend ! All graph types were improved, but it is especially noticeable on timeline charts with many state changes and on line charts covering time range of 2 days or more.

This release also introduces device class dependent state names in timelines (for example, show Opened or Closed for a door rather than on or off). See Timeline charts in the readme on info how to enable this. You can also hide the state texts entirely (@Dave888).

Finally, there are some important fixes for some mathematical corner cases for total_increasing bar charts. So if you use these, it’s a good idea to upgrade. Oh and performance ! So yeah, you should definitely upgrade to V1.0.29 :slight_smile:

3 Likes

Thanks @HeyImAlex, thats great!

New V1.0.30 release is out ! This is a somewhat experimental release, so I hope it won’t break too many things :sweat_smile:

Support for long term statistics

When enabled, the card will try to pull in long term statistics for an entity, if the limit of the history data is reached. The integration is entirely seamless. You keep scrolling and zooming in or out of your data, as usual. The statistics and history data will be combined on the fly at all time ranges. This obviously only works for entities that have long term statistics available. Graphs for all other entities will just become blank as soon as you reach the history data limit, as it was before.

Example:

In the screenshot above, the blue graph is the outdoor temperature, the red graph is the temperature of a workshop / barn. The outdoor temperature has statistics available, the barn temperature does not. So you see the red line stopping where the history database retention period ends (Oct 11th). The outdoor temperature continues way past this point, as the card will turn to long term statistics. Note that the card will always prefer history data over long term statistics data if available, because it’s more precise.

This is still an experimental feature. It may fail and may have some rendering and refresh glitches. Feedback is welcome !

To enable this feature, add the following to the card YAML:

type: custom:history-explorer-card
statistics:
  enabled: true
  mode: mean

The (optional) mode parameter controls how the statistics data is processed before being integrated into the history stream. mean = use the average value, min= minimum value, max = max value. This does not apply to total_increasing values like energy sensors, which are calculated differently. This option is ignored for them.

Sticky toolbars

If you have a lot of graphs visible, it’s really annoying to scroll up or down in order to reach the toolbar, for example to change zoom levels or time range. This version introduces sticky toolbars. When enabled, this option will make your top, bottom or both toolbars sticky, so they keep floating on top (or bottom) of your graphs when you scroll.

Caveats: there are some rendering glitches with this mode when you are in the card configuration popup or when you are in Lovelace edit mode. These will disappear as soon as you exist the edit mode. For mobile usage, don’t make the bottom toolbar sticky if it contains a entity search / selector field, because the entity dropdown list will be clipped.

To enable:

type: custom:history-explorer-card
uiLayout:
  sticky: top   # can be top, bottom or both

image

3 Likes

just one word: AWESOME! And another two: THANK YOU!

Hey Alex,

just ran into an issue after having enlarged (zoomed in ) a lot, and moved way back in history… it was rather a large swipe to go back to current…

Would you allow a FR for a ‘Now’ button? that would be so comfortable, simply clicking and be back to the momentary time…?

Oh there is : just click the date button ! Single click will get you to the current time and keep your zoom level, double click will get you to current time and reset zoom to 24H.

Edit: I should probably explain that in the readme.

1 Like

thx, I didnt realize that indeed…

Hi Alex, thanks for the card, I,m finding it really useful.
I am trying to monitor 16 entities, would like to reduce the line width for each entity to 1.
When I do I get streaks from the left side for each entity.
This just with one entity configured.

type: custom:history-explorer-card
cardName: historycard-81506360
lineGraphHeight: 600
recordedEntitiesOnly: true
combineSameUnits: true
uiLayout:
  toolbar: top
  selector: hide
graphs:
  - type: line
    options: null
    entities:
      - entity: sensor.givtcp_bg2136g192_battery_cell_1_voltage
        name: Cell 1
        width: 1
        fill: rgba(0,0,0,0)

Thanks

Weird. Does that only happen with a line width of 1 ?

It happened on my laptop, using the latest version of chrome.
Have just readded the “width: 1” using the android HA app and it all looks ok.
Will have to try it again on my laptop and let you know.

OK, so I added them using the HA android app, gone and opened the page in Chrome on my laptop and got this

Yes, but you didn’t really answer the important question here: does that only happen with width of 1 ? Does it go away if you remove the width setting ?