[Under New Management] Interactive history explorer custom card

Two things I’d like to see that are approaching on nit-picking:

  1. Any easy card-level method for more subdued colors in general or color palette? Current explorer card defaults look a little “neon” compared to the stock history-graph card.

  2. Disable (or set default) fill at the card level.

You mean the background color for the interval selector ? Yes, it’s supposed to be a bit darker.

That’s actually a bug lol. A good looking one, I admit, but still a bug :slight_smile: I don’t have any total increasing sensors that go back that far, so I didn’t notice this.

That’s Safari adding this. It’s really ugly. Can you try to go into dev mode on Safari, select one of the dropdowns (they’re <select> tags) and add this to their css styles:

-webkit-appearance:none;

Does the weird gloss things go away ? It might take the dropdown arrow with it too, that may or may not be a problem.

confess I never do that on Safari, because I can not see any option to do so.

If I need to test that, I do it in Chrome. where we see the column on the right to enter those variables

and, because of you pushing us (me)… I now discover we can simply double click that and edit…

so you are right, it takes out the gloss, but also the arrow…
Scherm­afbeelding 2022-11-18 om 07.41.20

I did try to set that in my theme, using the only reference I could find:

--paper-input-container-shared-input-style_-_-webkit-appearance: none

but that has no effect. Maybe it’s already obsolete, since the ‘paper’ variables are phased out? anyways, there’s nonsuch thing overridden in frontend/src/resources/ha-style.ts at c6386284d1e4efbf4e4f320b46dc7134f6dbdbc9 · home-assistant/frontend · GitHub so it must be a browser wide setting beyond HA’s interference? In frontend/src/resources/styles.ts at c6386284d1e4efbf4e4f320b46dc7134f6dbdbc9 · home-assistant/frontend · GitHub only webkit-font-smoothing is used.

I tested as well. I only had to pull to refresh and the new version was used.

Selectors are nor in one line in infopanel. :+1:
Interval selector is not white anymore. :+1:

But as Marius saw as well, it is darker than all the other yaml color defined ones and darker than in my theme. It is not taking buttons and selector yaml defintions? Would be great to have it used there as well to have a fitting view and everywhere the same appearance.

ad 1. I played around further and saw now:

  • that the line is not hidden, but in black instead of blue the rest of the time.

  • that it is not only happening reproducable when moving to the end/future, but on every day-break as well. The same spot, where desktop chrome is changing the auto-zoom in the background before releasing the mouse button. In this spot, the line is black and stays black if I release my finger in this sport. If I more a little bit more in the days before or current day, the line is blue and stays blue if I release there. See video with some examples.

RPReplay_Final1668758657

For whatever this info could be helpful.

ad 2. Her I have not seen other helpfull information. Gut feeling: Not that often anymore not hidden and visible. Even on the same entity, the line is there or not. Sometime 10 in a row not there and only on opening the 11th time. Sometimes on 2nd opening already ann on 3rd gone again. :see_no_evil:

Update: It is directly hidden, when initially not hidden on open, if I start dragging.

Ok I give up. My goal is to get an immediate glance of the latest consumption data —without interaction. This is shown on a wall display, so I don’t want to play with the data or do a deep dive.

Anyway, thanks for your answers @HeyImAlex. I will probably switch to another solution that is also capable of stacking multiple entities into one graph. Seems I have to go the Grafana route. :woozy_face:

I’m not using these classes on the UI. These things change all the time in the frontend code, so it’s best not to rely on any of that stuff if you don’t want your custom card to break out of the blue after an update (as you experienced yourself with your custom-ui card). The metallic thing is the native styling for dropdown / selector buttons that browsers apply. All browsers do this, but yours is just particularly ugly. Maybe that’s a setting in your browser ? Worst case I can add the style and recreate the dropdown arrow myself.

It uses the close button color (uiColors: closeButton). At least on a normal card it does. On the info panel it doesn’t, because there are no close buttons. That’s a bug.

About the render glitches. Just to be sure: that only happens on iOS ? Gonna be very hard to debug without being able to reproduce and run it on the debugger locally. I’ll try on the iOS emulator when I get a minute, but I didn’t notice anything anormal last time. Does anyone else with iOS get this behavior ?

I personally prefer the more vivid colors, but colors are a very subjective thing I guess. From your screenshot it looks like your entities are YAML defined. You could assign them your own custom colors then.

Doesn’t the new domain wide rule work for you here ? For example:

entityOptions:
  sensor:
    fill: rgba(0,0,0,0)

will remove the fill for all dynamically added sensors. Or do you also want this for manually defined YAML graphs ? (you can already override it there for every graph).

Sorry to hear it won’t fit your needs, but I can’t just add things without considering their effects on the primary function of the card, which is analysis and debugging of your history, not being a general purpose graphing card. I’m sure you’ll find another custom graphing card that better fits your usecase.

If you have the time in far future… Nothing that is urgent of course.

Yes. Only there on ios and ipad os. I know that it is hard to debug and find, esp. without devices. Therefor my tests as well to narrow that down. Esp as I now find the same glich at day breaks at the same time as the auto resize takes place. So I wondered, if it could be related to this. At least think so now. If it is possible to improve or correct it, I dont know.

But of course, I’m interested if I’m the only one with this behavior. That would be curious, because I have it on every device, on every enttty and in ever theme, even with the standard ones.

Could you open a github issue on that ? So we can continue discussion there over this particular issue. Thanks.

1 Like

hehe, always me, sorry…

tbh, I wouldnt know what/why. only thing remotely ‘shiny’ is what I use in my themes, like:

lovelace-background: radial-gradient(var(--primary-color),var(--card-background-color))

but as you say, that is not used in the HE card.
I havent seen it elsewhere though, its only appearing in this card

It’s a default thing your browser does in the absence of full styling around the element. The rest of paper probably does a full restyle of all elements. Or maybe the frontend just doesn’t use select tags at all.

Yes, yaml, but I’m lazy.

I have to add the fill line for every entity. Not a big deal, but again, the laziness factor.

I have the explorer card showing outside and inside temperatures. My system went offline and the temperature went to 275 degrees. Now, even a day after that has happened, the graph will not reset to show the normal temperature range of 50 to 70. Did I miss a setting or does it take time for it to scale down?

The caching system operates on 24h boundaries, so it will take a minimum of 24h and a maximum of 48h for a rogue value to stop affecting the auto scaling at the current time. Of course it will reaffect the scaling when you scroll back, within a ±24h window around the outlier value.

If it bothers you (especially when scrolling around), you can set a ymax value to limit the damage of the incorrect value (maybe a ymax of 80 or 90).

Wonderful, thank you! I’ll look at that ymax value

now this might be a long shot, but here goes:
having hot water boiler (Quooker) that switches off an on. With regular toggles/binaries, we can see the ‘for x minutes’ in the history graph. Not so for this power sensor:

since this is an almost ‘binary’ sensor, I’d love to be able to see that ‘for x minutes’ too. Is there any chance this could be done?
am aware I could use a binary ‘active’ based on a certain threshold, but would rather do it on the entity directly than on a derivative entity

The problem being the almost part here :wink:

When doing this on numerical graphs, it’s always going to involve some form of thresholds and/or epsilons. Getting these right for all corner cases and data types is notoriously difficult and they would have to be configurable, but still with a somewhat useful default, etc etc. There’s also the question about sensor update granularity - like for example a sensor updating every ten minutes would basically show 10 minute duration on every single sample, hardly useful. There’s also the question how that would work with data decimation at longer date ranges.

There’s another unrelated update I’m currently implementing that might help here though: user defined equations and/or JS functions to process data before it is displayed. You could use that to derive a binary graph on the fly using your entities data (by coding the thresholds into the YAML) and display it as a timeline.

It would work something like this:

graphs:
  - type: timeline
    entities:
      - entity: sensor.whatever
        process: "( state < threshold ) ? 'off' : 'on'"

Edit: I just tried it in my current dev build and it works perfectly:

graphs:
  - type: line
    entities:
      - entity: sensor.outside_temperature
  - type: timeline
    entities:
      - entity: sensor.outside_temperature
        process: '( state >= 10 ) ? "on" : "off"'
2 Likes

wow, thats exactly what I need! its just like the binary threshold sensor settings, and might even allow me to dump those :wink:
and the would also have the hover popups with the period in it?
btw, from the sight of it, I take it this would be yaml only? meaning a fixed permanent graph?