[Deprecated] Interactive history explorer custom card

But did you define it for more-info as well? E.g.

infoPanel:
  lineMode: stepped
  uimode: dark
  showUnavailable: false
  uiColors:
    gridlines: '#212121'
    labels: '#BAC0C6'
    buttons: '#2e2e2e'
    selector: '#2e2e2e'
  statistics:
    enabled: true
    mode: mean
  tooltip:
    size: compact
    showColorsLine: false
    showColorsTimeline: false
    showDuration: true
    showLabel: false

If yes, try to switch the more-info replacement off and on again.

1 Like


please ignore me… having a bad day.
consider that fixed.

V1.0.37 should take care of a few issues we had. It should fix the background color for the interval selector in dark mode. I also did some changes to the layout on mobile device (both for the card as well as for the info panel), so to fit iOS rendering preferences a bit better… Could you guys with iPhones test this and report back please.

This version also supports time ranges up to one year now.

2 Likes

Doing this would come with a lot of problematic side effects. Imagine showing a time range of 24h (or a couple of days, even a week) and then switching to monthly intervals. The view would then jump to the end of the current month, to fit the current monthly bar, way beyond the time range and making the card virtually unusable. Having the card jump over the end in certain conditions only (when time scales and intervals ‘kinda’ match empirically) and not in others would be random and inconsistent.

Is scrolling past the end to see the the other half of current day bar(s) really that much of an issue ? Personally, it doesn’t really bother me.

happens :grin:

hmm, afraid this says it all:

Look like you didn’t properly update. Check the version string on the console.

right, restarted and now it took.

fixed on desktop more-info (though there’s this metallic shiny look to it, I have nowhere else in my cards):

not fixed on mobile more-info I am afraid:

and the update took, as this new layout proves (with the new legend circles)

I did reload the frontend cache on the mobile device. Will hit that a few more times…

Your cache is not cleared on mobile. The new version omits the year (2022) in the date button when on mobile, to make more space. Yours is still there. You are still on the old version.

The legend with the circles was always there.

Grrr… notoriously difficult to get that to update and refresh.

did another forced clear frontend cache in the app settings, and it still was there. after that I swiped till I fried… and lo and behold:

yea…!

is Hourly supposed to look darker than 1Day?

check this, I love the way these columns grow/shrink when sliding in and out of the view:
Nov-17-2022 23-16-10
,
Nice 1 year period, per month.
Do wish they weren’t as tall as they were, but hey, let’s remain positive this evening…

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.