[Under New Management] Interactive history explorer custom card

[HeyImAlex (Alex)]

V1.0.28 is up !

New features include value dependent color coding for bar graphs:

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 !

@eggman

That also sets the amount of history to one day (unless I’m doing something wrong). The “issue” I have is, when I’ve been showing a day and then select, for example, 2hrs, it takes a bit of scrolling to get to the end of the data again. Not a big deal, in the grand scheme of things.

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.

[Dave888]

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!

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

[HeyImAlex (Alex)]

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.

[HeyImAlex (Alex)]

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

[Dave888]

Thanks @HeyImAlex, thats great!

[HeyImAlex (Alex)]

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

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

[dm82m (Dirk)]

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

[Mariusthvdb (Marius)]

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…?

[HeyImAlex (Alex)]

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.

[Mariusthvdb (Marius)]

thx, I didnt realize that indeed…

[godfreym29]

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

[HeyImAlex (Alex)]

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

[godfreym29]

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.

[godfreym29]

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

[HeyImAlex (Alex)]

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 ?

[godfreym29]

I changed the width to 2 and the streaks were gone
same when I removed the width setting all together

[HeyImAlex (Alex)]

Try:

width: 1.001

[godfreym29]

With width: 1.001 - they disappear

width: 1.01 - Don’t see them
width: 1.1 - Don’t see them
width: 1.0 - Streaking effect
width: 0.1 - Streaking effect
width: 0.01 - Less streaking
width: 0.001 - No visible streaking effect

[HeyImAlex (Alex)]

Probably some form of floating point instability around 1.0. It only happens on Chrome. No big deal, just keep it at 1.001 for now. Visually it should be the same as 1.

[HeyImAlex (Alex)]

Need some feedback on an idea I have been playing around with for a while now. You know these history graphs that open when you click an entity on your dashboard ? They’re very convenient - but extremely limited. I understand that they’re going to change them somewhat in 2022.12. Edit: with what they did in 2022.11, I’m definitely adding this to the card.

Anyway, I played around with overriding their code from within the history explorer card and automatically replacing them all with the respective slim versions of the history explorer. Which you can swipe, zoom, etc, just as with the normal HE card. It also combines history and statistics, like the latest version of the normal HE card does.

Is this something you guys would be interested in ? I mean, I’ll probably going to do it anyway for myself, but it could move up priorities if lots of people want that.