[Under New Management] Interactive history explorer custom card

The entities are stored in your browsers local storage. Make sure the browser doesn’t clear this data when you close it. If you use multiple different browsers (or profiles) to visit the page, each will have their own independent entity list.

Alternatively you can preconfigure a fixed entity list manually in the YAML that will stay consistent between browsers.

I am not closing the browser (Chrome), just logging out of the Home Assistant Web-GUI.

No browser cache clearing at all.

When I log out and back into the Home Assistant “Dashboard/View” all of the entities are gone from the chart(s)…

Both Chrome and Edge browsers do the same disappearing entities thing…

I could not find any rerefence to a “save” feature in the dashboard/view containing the beautiful history chart(s)

Also re: “Alternatively you can preconfigure a fixed entity list manually in the YAML that will stay consistent between browsers.”:

** Which file is this done in and what is the syntax for adding one or more fixed entities and (common) chart “date/duration”?

Is it “Edit Dashboard/Raw Configuration Editor”?

I read your github documentation page but could not find any example of manually added entities for the history graph.

Thanks.

OK… I found the syntax elsewhere:

graphs:
  - type: line
    entities:
      - entity: sensor.sm_n960u_battery_level
        color: orangered
      - entity: sensor.sm_n960u_battery_temperature
        color: steelblue
        fill: rgba(151,187,205,0.15)

This DOES remember the entities…but the browser never saves the dynamically added entities (at least for me) odd…

While it looks like the Option “defaultTimeRange” is rather a UI Setting (you can e.g. set 3d, but still scroll back more in Time), noticed that LTS are always cut after the last 365 Days independently from that Setting.

It isn’t possible to extend that max. Timespan, is it?
It is no real big Thing - my Usecase would have been to compare Temperature/Power consumption of the last Month with that one (or maybe two) years ago.

PS: Thanks for that nice Update recently! While keeping my fingers crossed for the statistics settings, the Wildcard Feature e.g. is a pretty cool new Option! :+1: :sunglasses:

Yeah the client side cache size is 365 days, so you can’t really see anything prior to that time frame. To be honest, in the dev version of the card I use on my system, I set the cache size to 3 years, because I have exactly the same use case as you. That comes with a number of problems, mostly around memory use on the client browser (mobile !). The cache uses quite some memory and the access patterns are not very CPU cache friendly. This is mostly problematic on lowend devices, such as cheap tablets. But a lot of people use these for things like wall panels. That’s why I haven’t done this in the release version.

Two possibilities:

  • Make cache size configurable in YAML. Easy, but requires user intervention for timeframes >1year.
  • Make the cache auto-grow as needed. That would be my preferred option, but it’s (a little) more work.

There are multiple examples in the readme.

It’s not the cache. It’s what is called ‘Local Storage’. Check your browser privacy settings. When surfing in private mode, or with strict privacy presets, local storage may be cleared on close or logout. This is a browser thing, there’s nothing the card can really do about this.

That’s too bad, because you had a real winner there, aesthetically speaking. :+1:

Well, i think the Point regarding Memory/CPU usage on low-end-devices is valid.

Personally, i think lifting the Limit via YAML would preferable.
If using such a low-end Device, it wouldn’t make sense to make it auto-grow, as it would lead to Performance-Issues anyway, wouldn’t it?

Oh my, this is such a great Card! Just love it. And still, there are so many Things more possible to think of :smiley: Ever thought about Offsetting Date on Entity-Base? :wink: This way, one could overlay e.g. last Years Values for easy comparison, or compare Yesterdays Temperature with todays… I wish i could not only suggest Features, but contribute…

Only if you actually went back that far. A hard limit in the YAML would just cut off the graph at the limit (pretty much the same as it currently does after a year). A soft limit would autogrow once you go past the limit and would possibly become a bit less smooth on a low end device once you pass the limit.

That’s actually an existing FR. It’s not that trivial, as it requires multiple disjoint database requests for the offset time parts. But it would be nice to have at some point.

Yeah well, the visual rendering part is trivial to add. Getting the data in entity attributes is a bit more problematic performance wise. Requesting attributes from the DB used to be excruciatingly slow. But there have been lots of performance improvements on the database backend in recent HA versions, so maybe this will need to be reevaluated.

Perhaps could be overcomed by creation of template sensor that would use attribute of other entity as its state? I know, unnecessary multiplication of entities, but if it helps…

Thanks a lot for this card! It is great!!!

However, I have some issues with combining graphs with the same units. Any idea why the two graphs are not combined?
image

This is the card:

type: custom:history-explorer-card
cardName: historycard-71279600
defaultTimeRange: 1w
combineSameUnits: true
recordedEntitiesOnly: true
statistics:
  enabled: true
  mode: mean
  period: hour

and the two sensors:

state_class: total_increasing
unit_of_measurement: kWh
device_class: energy
friendly_name: Power meter Consumption
state_class: total_increasing
unit_of_measurement: kWh
device_class: energy
friendly_name: Power meter Exported

Nevermind! I should have fully read the readme first.

When adding the two graphs in the card configuration it works as expected.

type: custom:history-explorer-card
cardName: historycard-71279600
defaultTimeRange: 1w
combineSameUnits: true
recordedEntitiesOnly: true
statistics:
  enabled: true
  mode: mean
  period: hour
graphs:
  - type: bar
    title: Power Meter
    options:
      interval: hourly
    entities:
      - entity: sensor.power_meter_consumption
      - entity: sensor.power_meter_exported

1 Like

I notice that when I open a pop-up window that uses the history explorer card and the default is 1 day everything shows up as expected (which I’m OK with as the default and want to stay) but as soon as I click the drop down to select a shorter time frame (ex 1 hour) the card doesn’t show the last hour from now. It pops back in time to about 12 hours earlier and shows that hour. I then have to scroll all the way to the right to see the data for the current hour.

is that the expected behavior? can that be changed somehow?

the scrolling to get to where I want to see the data gets a bit tedious if I’m looking at several graphs.

1 Like

Hi, any idea what could cause this? Been breaking my head around it.

history-explorer-card.js?hacstag=4403747941047:9:6161 Uncaught TypeError: Cannot read properties of undefined (reading ‘state’)

You can just single click the date selector button instead of scrolling.

1 Like

thanks. I didn’t know that would do that. It definitely saves some scrolling time.

But why is the default behavior to show a time in the past when changing the time scale to a smaller slice of time? Is there some technical limitation that requires it?

Logically I think making the default to always show the most recent time (now) for the graph when changing the scale would make the most sense.

1 Like

Hey guys, love this Card!
Is it possible to configure the grid?

For example for my temperature value graph i have specified ymin and ymax from 16 to 28 degrees. Now i get horizontal gridlines on the yaxis at 16,18,20,22,24,26 and 28 degrees. Is it possible to have a grid line at every single degree?

There is no technical limitation, as far as I remember it just uses the center point for zoom in/out operations. I need to check in the source when I get home, I’m at sea right now with limited access to the internet.

1 Like

You can’t manually configure the individual scale values I’m afraid.

Of course this is correct!
If the display has the current time at it’s right hand point (i.e. the end of the available data), then clicking the + button should zoom in and keep the current time at the right hand end.
This is so obvious I can’t see why it isn’t designed to do this.
For example:

1 Like