[Deprecated] Interactive history explorer custom card

Sorry !, while i was typing i saw above, that another had the same experience, and solved my confusing “state” :slight_smile: , looks great, thanks for this awesome card , i also find the default “history” section a bit of clutter-section, and was thinking of removing it from side-menu

I’m not sure I understand what you mean by this. The bug I fixed was that the add (plus) button was unresponsive for a few seconds when trying to add a first entity to an empty card, ie. clicking it would not add the entity for several tries (and it would eventually succeed after some tries). This would only happen on the first entity added. Are you still observing this behavior ?

Yes that’s by design. The card won’t try to second guess, sort or be too smart for its own good. It’s going to add the entities you’re asking for, in the order you do. When I find some time, I’ll add a drag’n’drop way to rearrange the chart order. But the card won’t do it on its own.

Thanks for reporting, I’ll have to check why it does that.

What browser are you on ? Do you manage your dashboards over the UI or manual YAML ? Some people reported similar behavior when switching dashboards, also with color changes. I haven’t been able to reproduce any of this so far on any browser I tried.

Overlooked :wink:

Looks like you need to refresh the page once after adding the card for now.

are thought you made it change looks, (showing its responsiveness), but now understand you made it respond sooner :wink: my misunderstanding, no problem.

this clear, all on the user.

D&D would be awesome, at some point in time

thanks±!

yep, im ahead already, just adjusted, label-color, and so i wont get any gaps in my graphs, and figuring out why i have problems with 2-3 cards in 1 view, seems like “selector box” won’t get along, so i was about to add entities manually in second n third card…Thanks

Browser is Chrome.
Dashboard over UI.

2 or 3 explorer cards in a single view ? I think that might be related to the dashboard switching thing people have issues with. I will investigate.

Ah okay, nah, it’s just a dumb plus sign :yum:

yes, i can refresh page, and get the list i the box(in second card), but cant add, when i click on the + sign … but if i click on edit-mode i see that the specific entity is there(with the graph) but nothing shows up in the card(after entering view-mode) … even tried to add it in “raw configuration editor” … the card is there, with the configuration(entity, color etc., but no graphs … but first added card is still looking good
… Same thing happens if i choose to “duplicate card”, card show up with specific configuration, but no graphs

… but if i choose to delete the initial card, all settings and the graphs shows up in second card , seems like there are some cross-linking here … where does the first card initially store it’s configuration ( i.e which entity/entities added/configured ? , i can only see those “entities” i add manually(in edit-mode), not the ones added through the “box” … so these (added through the box) seems like ending up in the initial card-configuration, and not in yalm(somewhere) , so every time you add a “new” card, it will have same settings as the first( and maybe even ID )

Maybe this can help you further

2022-01-19 14:11:16 ERROR (MainThread) [frontend.js.latest.202112291] http://192.168.50.25:8123/hacsfiles/history-explorer-card/history-explorer-card.js?hacstag=4403747941011:1:225811 TypeError: a.chart.data.datasets[e] is undefined

2022-01-19 14:13:42 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443576942160] Connection closed by client

2022-01-19 14:16:24 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443577101520] Connection closed by client

2022-01-19 14:32:33 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443626426128] Connection closed by client

2022-01-19 14:48:51 ERROR (MainThread) [frontend.js.latest.202112291] http://192.168.50.25:8123/hacsfiles/history-explorer-card/history-explorer-card.js?hacstag=4403747941011:1:235884 TypeError: _hass.states[e.entity] is undefined

2022-01-19 15:17:27 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443570272000] Connection closed by client

2022-01-19 15:26:48 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443570128736] Connection closed by client

2022-01-19 15:27:13 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443576995552] Connection closed by client

2022-01-19 15:28:55 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443627172288] Connection closed by client

2022-01-19 15:29:33 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443577125472] Connection closed by client

2022-01-19 15:30:58 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443724725744] Connection closed by client

2022-01-19 15:33:09 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443577954016] Connection closed by client

2022-01-19 15:37:04 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443577836208] Connection closed by client

2022-01-19 15:44:05 INFO (MainThread) [homeassistant.components.websocket_api.http.connection] [140443626801280] Connection closed by client

… dont know if its related … or just a matter of my “trail and error” approach :laughing:

New version v1.0.12 is up. It should fix most of the issues people had when using multiple cards and/or when switching around views and dashboards. It also fixes the selector field being empty when the card is first installed without refreshing the page. The automatic graph colors should also be more stable across views now (they can still switch around under certain circumstances, but much less than before).

If you have multiple cards, every card needs its own ID / name now. HA doesn’t provide a way to uniquely identify multiple instances of the same card sadly. So you need to provide one in the YAML if you use more than one card. If you add a new card over the UI, a unique (random) name will be automatically suggested. If you manage your Lovelace manually, you’ll need to add the card name yourself if you use multiple history explorer cards. See readme under Multiple cards for more details.

If you only use a single history explorer card, the name is optional. You can just ignore it and an internal default is used.

This was more work than expected. Sorry if I introduced new bugs, it’s quite a large refactor. I’m fighting the system a bit here. It’s pretty clear that Lovelace was never designed with this use case in mind. It’s geared towards static configuration over YAML, not entirely on-thy-fly configs. Oh well, the new framework should now handle this much better now.

2 Likes

:slight_smile: , good initiative , you should have introduced it as a “New History View” , so people (like me) didn’t try to “replace” Grafana :grin: … but i find this card very useful, Thanks again

It’s getting greater and greater again. Thanks so much for your effort.

Unfortunately I see performance problems in safari/ios if you drag charts with a lot of data points. I think, it is drawn to often during dragging and should be perhaps reduced?

E.g.

If I drag the bottom chart, the dragging is smooth and as soon I release the dragging, the chart above is directly drawn again.

If I drag the top card, on Windows/Chrome it is already jerky. But on ios/safari (with powerful ipad pro), it lets the whole UI and app stuck completely and I have to close and reload the companion app.

The performance issues are not unexpected on charts with a massive amount of points per unit time. I’m using chartjs as a backend for the chart drawing and that is unfortunately not very optimized at all. So it can become jerky and slow on lower end CPU/GPUs, like phones. There are only two ways to address this. Increase decimation to get the amount of data down or rewrite an entire chart rendering backend using WebGL. The latter is a huge amount of work and is not gonna happen :wink: The former would definitely help, but can lead to data deformation when applied to smaller timescales. This is why it’s switched off when you view time scales of a day or less.

I could add a decimation strength setting (maybe replacing the current on/off one), so people could play around with it. This won’t solve all problems, but it could definitely help with things like you have. It’s hard to come up with generic default values for these things, because people will use all kind of different hardware and sensor sample rates.

Oh and kinda OT, but it’s also worth thinking about if you really need that many data points for a metric like your CPU usage. It’s going to cause more database writes and generally more strain on the system. If you’re looking for short high spikes, then it might be worthwhile to use a max filter in HA with a lower sampling rate to get the amount of data down.

Understood. Thought and assumed, that there is a setting in the framework (here chartjs), after which time of dragging the chart is redrawn, so not every millisecond or mm of dragging, because I think this is the problem here. Or to switcih of (optionally) the re-drawing while dragging until release (same as it is happening when I drag the other chart, then the above is only redrawn, if I release the dragging on the one below).

The dragging isn’t done by chartjs, which doesn’t really support these kind of realtime operations. It’s done by the card itself and I kinda hacked support into chartjs for it. The redrawing is not done on a fixed time delta but every time you drag over a certain distance. Increasing the distance will reduce the amount of redraws but at the same time decrease fps. Which will in turn make it choppy on higher performance systems, while not necessarily making it much better on low end ones. The only really good ways is to either push more on the GPU (WebGL) or to reduce the data set to be drawn (more aggressive decimation). Javascript is not a good language for these kind of low level data driven optimizations. If this were C++, there would be a ton of things we could do to make it faster. But not on JS.

If you switch off the redrawing while you drag, you don’t know where you’re dragging to :slight_smile:

Thought about only the graph, not the grid or x-axis. But if all this is not in the framework, I understand, that it is hard to improve.

The problem is, that the whole browser/app is really getting stuck and only a shut down and restart of it solves the issue, until the next dragging. Perhaps if I would wait for 10 minutes or so. So I wonder, what the chartjs guys think on this problems with webkit (but of course than this is not your problem). An iPad pro should have enough power, so I think it is more webkit problem, than the device.

Anyway, thanks for the help.

I still wonder, why it is happening in Safari with this big issues. Even if I try to drag really fast and release directly, it gets stuck where I thought it would only draw perhaps 2 times. It seems that webkit still draws every intermediate position and then only showed the last at the end.

I suggest you open an issue about this on Github and we can do some more tests and see why that happens on Webkit/iOS. On Safari OSX (both BigSur and Monterey) things are really smooth, so it’s probably an iOS thing.

Excellent work, thank you so much for this card.

One simple question at this point: Is possible to change the card title from “History explorer” to something else?

see above same question already in the thread and in the advanced example. header is your friend.

I love this card. I mainly use it to track humidity in my home.
Is it possible to chose the range of the value on the y-axis? Sometimes my sensors drop out of my zigbee network and are recorded as 0, so the y-axis range goes from -20% to 100% and im really only interested in the range of 40% to 90% as this covers the values 99.9% of the time.