[Under New Management] Interactive history explorer custom card

Please always read the doc first. It helps Alex to focus on great new stuff. :wink:

Link to the answer

1 Like

[OFFTOPIC]
thanks in public too :wink: much appreciated!

I’ve added your post to 2022.9: hide_attributes no longer functional · Issue #64 · Mariusthvdb/custom-ui · GitHub so we can reference that in the repo

[OFFTOPIC]

No, they’re right where they should be :slight_smile: Keep in mind that the bars do not represent a point in time, they represent a time range. In daily mode, and that applies to other intervals too, a bar represents the data from, for example, November 14th at midnight to November 15th at midnight (or actually Nov 14th at 23:59:59.999 to be precise). So showing the bars between two date labels at midnight is the correct thing to do. Note that when you hover over a bar, the tooltip will show you midday. That’s technically a bug, it should show the range instead.

Funny thing is, it used to be like that up to a few months ago, when I changed it because everybody was complaining about it (it does look a little weird with graphs other than bars, as it creates whitespace for future values not yet filled during the current day). I didn’t really mind either way personally, so I changed it to what most people wanted. Can’t please everybody I guess :slight_smile:

Just find out this amazing custom card that should be the default HA history card.
Thank you @HeyImAlex for this great work.

Two questions:

  1. Can I somehow define a “minimum y-axis interval”? Usecase?
    When I look at an entity that has changes +/- 0,4 degrees, it may still look dramatic, since the scale is just 11,4 - 12,4. When I compare that to next temperature entity that has changed 4 degrees, it looks the same at a first glance (but the scale on this one is 5,0 - 10,0). Therefore, I would like to define a minimum interval rather than a specific range. So I guess what I’m looking for is something like this:
  temperature:
    ymindelta: 5

Maybe one of those lovely edge cases, but anyway.

  1. I love using history-explorer in more-info, but for one specific entity, I would like no graph at all. Is it possible to show nothing at all for a specific entity?

Was this the answer to the white grouping drop down

image

or that the line disappear when having only some future on the screen

image

Or to the line break for the control items

image

BTW (on iOS as well) the additional line is back, which we had in the past already (wen displaying only one entity). Not on every open and, but in 50-60% of the opens. See in the last screenshot as well. Don’t know what the chart is calculation and why it seems that it thinks, that there are two entities andis drwaing one line too much. It’s is not binded behavior to a special entity. It comes on every entity on radnom random open only. Best cases to fix, I know. :joy:

No, these things aren’t possible at this time. You can always open an FR on Github. No guarantees though, especially about your point 1, this can be pretty involved to implement (lots of corner cases).

Yeah. The white background in menus is fixed and will be in the next release.

The two others are iOS specific rendering problems. I haven’t seen them on any other browser or OS. It looks like it’s not correctly interpreting the colors used to draw either the graph or the grid lines. For the timeline, the horizontal line was never removed. It was set invisible with an alpha of zero to hide it when showing only a single bar. It seems iOS is ignoring this.

[OT] Developing for Apple hardware is a major PITA tbh. We’re coming across this a lot at work too, Apples’ OpenGL implementation is weird in similar ways. They’re interpreting the standard differently from any other manufacturer on the planet (or they’re right out ignoring it). Special snowflake effect. We need to have separate code paths in our engine, one for Apple and one for everyone else…

must be missing the obvious… sorry if so.

using the more-info on this annual entity

I wanted to see how it performed throughout the passed year. However, we can only select the previous day in the dropdown? I did set it to Monthly in the right dropbox, but that was not very useful.

Please help me out if I missed the correct setting. If I didnt, would this be a valid FR…?

can select 6 months (or zoom out to) and monthly and see this

image

But I would still like to have an option to switch to increasing in this entities via a boolean switch or another select option in the dropdown. Whatever I set, I can not see what and when something happens exactly (if I need to check it directly). Same as for the changes in HA standard - one of the reasons to have this more than great replacement.

As said, not always, but at least in 50% of the cases. Perhaps a timing problem. Are you applying the alpha to hide asynchronously?

Same as for the other topic (lost of line, but there always, when in the future). Funny thing is, that the line is back, when I select on datapoint. Then it re-appears with the tooltip. To whatever can lead this information. :rofl:

And THANKS already for the white background in advance. :slight_smile:

Regarding this screnshot from my iphone

image

I think some less somewhere in padding or width would already bring it in one line on (at least tested so in chrome developer tools with iPhone SE). Funny thing is, that I have a 12 and developer tools already shows it in one line, but my phone not.

When I compare to the developer tools screenshot it look s different.

image

Much more margin/paddings in real live in first screenshot. Whyever.

I’m not really sure I understand. What exactly are you trying to achieve ? What do you mean by previous day ? You can display up to the last 6 months without scrolling.

Yeah I think that’s a good idea.

Ok, I was able to reproduce this spacing issue on the XCode iOS simulator at work. Safari definitely adds both additional margins and additional padding around buttons by default. I think I can fix this by explicitly specifying the margins in the CSS.

I was not able to reproduce your rendering issues. Does anyone else experience these while on iOS ?

O!
I completely did not see that. I can indeed set it to 6 months, and see the usage per month.
Is 6 months limited by HA, or my HE…

I’d love to see the full year back, and scrolling wont do that either

(see Arganto’s post now saying the same… thx)

yes, see: New interactive history explorer custom card - #421 by Mariusthvdb

No, it’s just a hardcoded limit in the HE card. I had to set the limit somewhere, mostly for controlling memory usage of the cache. But I can add a one year option, no big deal.

I meant the rendering glitches on the graph lines and gridlines (see arganto’s screenshots here). The layout problem with the buttons I was able to reproduce on an emulator and I know how to fix.

1 Like

magician!

one year would be very convenient, and much appreciated. Seems for the energy entities to be the most important period to check/compare…

not sure if this is possible, but could the date picker be adaptive there too? if one selects 6 months in the right selector, and monthly in the white dropdown

Scherm­afbeelding 2022-11-16 om 19.20.00

I would be cool if the left side dropdown would show the months, instead of dated days

(btw, I see the white box also in argantos screenshot. is that a frontend issue, or a css setting in HE we need to fix)

Why is entity selector using black theme? I seem to recall it wasn’t like this in previous versions. I have tried to put uimode: light but it makes no difference.

select

The selector background is not modified by this card, unless you specifically override it with uiColors. uimode will do nothing on that. It’s set by your browser. The dropdown list background color is set by HA’s theme. There’s something wrong with your theme.

would this also apply to the secondary dropdown below the period picker? Ive checked my themes, and they do set the

      input-fill-color: var(--card-background-color)
      input-ink-color: var(--primary-text-color)

but that does not change that dropdown. In inspector, I could not find the correct variable for this, its just using
Scherm­afbeelding 2022-11-17 om 13.56.43
?
btw, this might be something special after all because the main HE view in Both Safari and Chrome shows correctly (Hourly):

a dark theme

a lighter theme:

same entity in more-info:

The “Type to search for an …”?

You can use

    uiColors:
      selector: '#2e2e2e'