[Deprecated] Interactive history explorer custom card

New build is up.

The charts should now be correctly restored on page reload on Chrome.

About the colors, that’s due to a bug in the Slate theme. While it is a dark theme from the colors, it does not set the dark mode flag in HA. To mitigate these kind of problems (Slate is probably not the only theme with that issue), you can now manually override the dark or light setting for the card. Just add this into the global YAML for the card:

uimode: dark

This will force dark mode. Replace dark with light if you want to force light mode. If the setting is not present or on auto, the card will use the HA dark mode flag.

thanks for sticking with me on this.

I just wanted to pop in and let you know I’m still working with the card to try to narrow down the issues I’m still having. Part of it is my browser but I think partly it’s the card…maybe.

I downloaded the latest update so I’m working from a fresh install of the card.

IRL is keeping me from playing with it too much right now tho. I’ll try to get you a detailed report as soon as I can organize it in my head and on paper and sort out which are my PC issues and which aren’t.

Today, the outdoor temperature remained steady at -2 C from about 1:30 PM but the graph disappears at that time and then reappears a few hours later (at the current local time), with a value of -2 C.

Shouldn’t it just flatline, at a constant -2 C? Or is this some sort of expected artifact produced by the decimation process?

The card will automatically reduce the data shown in the charts and remove details that would not be visible or useful at a given time range.

NOTE
I’m using the latest version: 1.0.5

Data decimation only kicks in when you view over 2 days or more. I think that’s just a stupid rounding error on the y-scale calculations. The flat line is there, but just above the visible area (maybe internally it’s something like -1.999999999), so it gets clipped. The fun of floating point rounding errors :yum:

Should be an easy fix.

Edit: ah no, it’s because of the spline interpolation overshooting a little. Still an easy fix.

1 Like

Okay, new build is up.

Couple of things. I changed the way the Y axis margins are calculated to give them a little headroom at the minimum and maximum ranges. That should fix the disappearing lines. The amount of padding applied depends a bit on the displayed range. It will try to keep the value labels on the left nice and consistent.

I also added a way to specify the type of line or curve you prefer. The default is a cubic spline. That will typically give the nicest looking curvy charts, but in certain circumstances they can slightly overshoot. Only visually mind you, the actual datapoints you can hover over will never be interpolated. They’re always real true data that was acquired. If you don’t like the look of the curve, you can choose between two other alternative representations: straight line segments connecting your data points or stepped charts (like the original HA history panel). This can be defined globally for all entities you dynamically add or per YAML predefined entity.

Example for global line segment mode:

type: custom:history-explorer-card
lineMode: lines

Possible options are stepped, lines or curves (or nothing, which defaults to curves).

If you use predefined YAML entities, the lineMode key replaces the stepped key, which has been made obsolete. I still need to update the docs.

Hope that helps with your issue. If not, let me know !

Edit: I updated the docs with the new options, including some example images.

1 Like

HI, thanks for making this, eager to explore the options!

I can make the input section appear in a panel (in Yaml, and my first, so maybe I am creating user errors here) but I can not click the + to show graphs consistently. Or maybe I should say, only saw a graph once…

also, the dropdown doesnt seem to respect the recorder settings? it allows me to select any entity, even though they are not recorded?

my view:

  - title: History
    icon: mdi:history
    path: history
    type: panel
    cards:
      - type: custom:history-explorer-card

thanks for having a look!

btw, while I am trying my system locks, and I see this in the log:

2022-01-12 14:13:31 WARNING (MainThread) [homeassistant.core] Timed out waiting for shutdown stage 1 to complete, the shutdown will continue
2022-01-12 14:13:33 WARNING (Thread-106) [homeassistant.util.executor] Thread[SyncWorker_2] is still running at shutdown: File "/usr/local/lib/python3.9/threading.py", line 930, in _bootstrap
    self._bootstrap_inner()
  File "/usr/local/lib/python3.9/threading.py", line 973, in _bootstrap_inner
    self.run()
  File "/usr/local/lib/python3.9/threading.py", line 910, in run
    self._target(*self._args, **self._kwargs)
  File "/usr/local/lib/python3.9/concurrent/futures/thread.py", line 75, in _worker
    work_item = work_queue.get(block=True)

Thanks for trying it out ! That’s a strange error you got. It’s unlikely to be YAML related. If the card locked up, being Javascript and running on your local browser, it would simply lock up the browser tab and not all of HA. So it’s probably related to the database query API calls. I do use them in a way that may be somewhat uncommon, in order to get fast background loading. Would you mind opening an issue on github over this ? It might take a little more work to catch that one :slight_smile:

Unfortunately yes. HA doesn’t provide any obvious way to see if an entity is being recorded or not, other than making an actual database call and check if it failed or not. Which is extremely inefficient and not always correct (you could have removed an entity from the recorder but there is still data in the DB that hasn’t been purged yet). I’ll see if I can find something by browsing around the HA source code when I get home tonight.

sure will do thanks for your swift response.

wouldn’t the recorder info be available system wide somehow? I mean, it’s also used in the statistics page (where I see hundreds of ‘this entity is no longer being recorded’ or ‘this entity is excluded from being recorded’ …

Thanks. Yeah but those components of HA are integrations and interface with HA directly over Python. They pretty much have access to anything in HA. A custom card is written in pure Javascript and does not have access to all of that. It communicates with HA over a small restricted subset of functions and the state machine and over the limited REST API. But there’s lots of undocumented stuff too, so maybe it’s possible. I’ll have to reverse engineer a little more.

More than great this card.

Minior question: Any chance, that the colors are remembered if I do not set them manually? If I jump to another lovelace view and then return, the charts get a new/different color. This is not happening, if I reload the page or only change the tab inside a loveleace view.

And a second unimportant wish for those, where the fixed colors do not match their themes: yaml-options to style the color of the toolbars, buttons, input box, etc.
image
background and font-color.

and perhaps yaml-options for colors for grid, graph text, etc. as well. :slight_smile:

Do you mean you jump to another dashboard ? Lovelace views are the little tabs on top of a dashboard. And does your other dashboard also have an instance of the history explorer card ? If so, then I know what the problem is.

Some styling options were added to V1.0.9 :slight_smile: More will probably follow in the future. You can customize chart label colors, grid lines and the toolbar backgrounds. Check the readme for the yaml syntax.

Yes, Dashboard. Change ov views is fine, reload as well, jump to another dashboard and back changes the colors. Not history explorer card in the other dashboard.

Wonderful. Thanks so much. Looking forward, which option to style will come! :slight_smile:

E.g. for the close buttons. Or that they take the button-color, you have introduced as well.

Can I overrule this? E.g. the minimum of my sensor is technically 0. And has the value 0 sometimes. Therefor the graph now always display -0.1 as minimum and I see always a gap below the graph and this without fill color.

image

Oops, unintended consequences haha :slight_smile: Introducing a toggle to override this would be my last resort, I’ll see if I can find a way to deal with these situations a bit better. What sensor is that graph from ? Could it technically go below zero or is that physically impossible ? Maybe we can have a toggle for sensors that can’t technically go negative (or positive for that matter).

It only delivers values between 0 and 1 (aka %, but here without %). Or is it possible, that I can set min or max?

That wouldn’t work with dynamically added entities. A more generic approach would be needed, but generic approaches will never be perfect for every possible scenario. To be fair, the main reason of this card is to show all your data as-is, mainly for debugging and data analysis. It’s more important to see all data (clipped curves are bad !) than for the presentation to be all perfect and neat in all situations. Cards like the mini graph card or the Apexcharts card are more appropriate if you want a chart for everyday use.

That said, I think there may be some ways to handle the special case of the zero-line a bit better.

1 Like

Thanks. Understood your approach. The problem is, that your card is that much better than the other mentioned ones. :wink:

For min max, I only thought about the yaml predefined ones of course. Anyway, can live without. Perhaps you can improve the case above anyhow to show there 0 oder fill it till x axis.

Hi @HeyImAlex

Quick question, which may arise from reading the docs too quickly. How do I get two (or more) entities on one graph. They all come up separately, even with the same unit. Maybe I have to use yaml?

Yeah, right now you’d have to use YAML to merge multiple entities into a single line chart. Timeline charts will auto-aggregate (if possible) for dynamically added entities, but line charts won’t yet.

I’d love to add this feature for dynamically added entities too. But it shouldn’t be all automatic. I can imagine lots of scenarios where you wouldn’t want to merge all compatible entities into a single chart (looking at you, temperature chart in the original history panel, with so many sensors in a single chart I can’t see anything anymore). There should be more control over what you’d like to merge and what not.

The backend is easily capable of this, but I’d have to come up with a clean and intuitive UI around the feature. From the top of my head, this simple solution comes to mind. Adding a second button next to the ‘add entity’ button, which would add-and-merge instead of just add. The button would only appear if the selected sensor can be merged into the last chart. Quick mockup:
image

There could be other more powerful ways, like having additional buttons next to each chart for adding or selectively removing entities from individual charts and customize colors, etc. Eventually it’ll come to that. But that would need a more complete overhaul of the UI first, like drag’n’drop to change chart order on the fly.

Suggestions / opinions welcome !

3 Likes

Dragging and dropping one chart onto another to combine?

2 Likes

Interesting thought. Probably not that trivial to implement, especially on mobile / touch.

1 Like