[Under New Management] Interactive history explorer custom card

Anyone having problems with filll option? It stopped to work me (not sure at what moment). None of my graphs fill in space below the line. I’ve seen no changes in card configuration on github…

Known issue (Regression with explicitly defined fill colours · Issue #62 · alexarch21/history-explorer-card · GitHub).

Temporary workaround is to downgrade to 1.0.25.

Maybe I missed something: Wind bearing is not showing.

  - type: line
    entities:
      - entity: sensor.owm_wind_bearing

image

So I went to check what I would see in the developer tool on the same entity:

It’s not critical… but any pointer would be great. I just want to know whether I have a bigger problem somewhere.

===
EDIT: adding extra info… a couple minutes later the state of the entity does change. So at least we know it is not some dead/stale entity:

Impossible to say with this little information I’m afraid. Could be anything. First try to add it using the UI instead of the YAML. Make sure that this entity is actually recorded in the history.

Hi all. Loving the card so far!

Any way to set entities to show in “graphs:” dynamically? I have a nomenclature system for my sensors and wanted the card to grab them automatically based on that. Got it to work for “filterEntities” but not for “graphs:”

EDIT: after some searching, found this comment: New interactive history explorer custom card - #276 by HeyImAlex
It’s a shame it’s not possible, but I’m glad it’s something that’s being considered. It would really help in creating history graphs for different categories of entities, especially when there’s a nomenclature applied to their names like I have

V1.0.27 is out !

This release comes with a big new feature, the visualization of entities with monotonically increasing totals, like energy, water, gas usage, rainfall, network usage, and many more. You can select the time interval you want to display the data at on the fly, the card will do all the required differential calculations in realtime. Example screenshots below, example configs are in the readme (Bar graphs for total increasing entities).

image

In other news, this release should also fix the regression we had on the V1.0.26 release with the fill color going MIA on YAML defined entities (@mirekmal).

5 Likes

Since I don’t use any energy sensors myself, I couldn’t test the above new visualizations on real life energy entities (I use it only with my rainfall sensor). Any feedback on if/how this works with actual energy sensors would be greatly appreciated :slight_smile:

Is is working really great. :+1:

image

Great, thanks for the feedback ! I noticed that the time interval selector is at the bottom of the graph. Did you put it there ? Because by default it’s supposed to be on the top right.

No, didn’t put it there. At the most this comes from other CSS, but I don’t think so.

image

In the DOM it is in one div and after the canvas, so it seams that it is there by implementation.

Nah, the position in the DOM doesn’t really matter, as element positioning is absolute and the layout is calculated on the fly. It’s supposed to be on the top right, like in my screenshots above.

What browser and OS are you using ? Does it also happen with dynamically added entities ? I’ll try to reproduce this.

Yes and no. If there is an absolute setting, but no position, then the DOM does matter. And here in this case e.g. top is not set.

In the dynamically added, you are doing this kind of positioning with a negativ margin-top.

image

But for yaml-set option, this is not set either.

image

That’s correct, but the YAML generated graphs should set the margin-top the same way as the dynamic ones do (they do for me). It’s the same code. Weird. Mind moving this over to github ? I’ve created a temporary issue here:

Would be great if you could post the part of your YAML that defines that graph and give some basic info about your browser / OS combo on that issue. I’d like to chase that one down. Thanks !

FYI, time interval selector is on the top right in my case.

This custom card is amazing! Thanks a lot! I installed it yesterday and see lots of possibilities. I need to play a little bit and come back with suggestions if you don’t mind.
PS: I haven’t seen any “Buy me a coffee” button; not in the first post, neither in the github page. Maybe you would like to reconsider this :slight_smile:

Yeah, with some more research from @arganto, we determined that the culprit was another custom card (vertical stack in card) that was overwriting the styles of that selector button. The functionality is not affected though.

Thanks ! Sure, suggestions are always welcome.

Some other people also asked for this lol… I added one on the github readme :slight_smile:

Great card, is there any way to quickly align NOW to the right of the x-axis? When I change the amount of history displayed it would be good to just click a button to re-align it.

Also, I love that you can turn off a series by clicking on it in the legend, any chance you might be considering having a double-click or long-click turn off all the other series so you could quickly focus on one in a graph with lot showing?

Yeah, just click the current date on the date selector button !
image

Interesting idea. Feel free to add it as an enhancement request on github !

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.

Will do, thanks

It does if the displayed range is below 24H. It doesn’t if it’s above that. I don’t really remember, but I think the rationale behind this behavior was to easily return to a zoom state where you would see a meaningful amount of data, after having zoomed waaaay in. Not sure if that behavior is desirable or not. I haven’t really used it that way myself. Maybe it would be best to make the behavior consistent across time ranges and simply move the graphs to the current date without changing zoom level. But then again, a zoom reset function isn’t a bad thing either.

Been using this card but how do I make the card itself not cut off?