[Deprecated] Interactive history explorer custom card

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'

My theme changes just more-info box sizes, nothing more. But: when the theme (any theme) is active the selector changes to black background. It then seems to take it from my browser’s (Edge) dark mode setting. If I change browser to light mode, then also the selector is shown in light mode. But I like to keep web browser in dark mode but still like to have HA in light mode.

So, I think my theme needs something added but not sure what…

I understand that the empty space at the end of the graph looked weird. But in my case, now you actually hide some of the latest data, I believe that’s even worse.

Maybe this show it better:
history-explorer-card-data-cutoff

You could implement the following rule and actually fulfill both requirements:
If the dropdown is set to 10min / hourly / daily / monthly, show all data of the current 10min / hour / day / month.

I was referring to what you also did before…

I was so consumed with my own problems, I forgot to really read that thoughtfully. Sorry.
Yet I believe that Alex answered they are set to a fixed color but in a future update will be configurable?

btw, I dont use dark/light mode in my themes (because I dont use it on my devices, its way too black for my eyes, and set all colors manually.

besides that, I did try to add that uiColors: option, but wouldn’t know how to ‘update’ that yaml config. I ofc refreshed, and dd look for the enable/disable option in the dropdown, but its no longer showing…
otoh, I believe that is not required because:

Then, every time you modify the infoPanel YAML on the HE card, the card will update the local browser storage to match your changes. You could even delete the infoPanel section entirely and the override would keep its last config on that browser.

SO why it doesnt work, I have t find out:

  - type: custom:history-explorer-card
    header: 3 Fase totaal
    cardName:  3-Fase-totaal
    uiLayout:
#       toolbar: hide
      selector: hide
    uiColors:
      toolbar: red # <--- seems to have no effect....
    lineMode: stepped
    graphs:
      - type: line
        entities:
          - entity: sensor.calculated_totaal_l1_power
          - entity: sensor.calculated_totaal_l2_power
          - entity: sensor.calculated_totaal_l3_power
# globally used in more-info panels
    infoPanel:
      lineMode: stepped

right, so this works (on a regular card)

#     uiLayout:
#       toolbar: hide
#       selector: hide
    uiColors:
      selector: red

the uiLayout has no effect on the more-info’s though, and likewise for the color ofc.

It’s

uiColors: 
  buttons: red

See the readme under confuguring the UI.

The white interval selector dropdown in the more info card is a bug. The fix ia actually on github already, I just haven’t created a release yet, as I wanted to test the iOS layout changes on the iPhone emulator first.

The thing with the selector background Timo has is different. The card doesn’t style it at all by default, so it’s entirely up to the browser. Different browsers handle dark / light modes differently.

1 Like

You can manually set a color, like arganto mentioned above.

Thx Alex,

I see that now:

    uiLayout:
#       toolbar: hide
      selector: hide
    uiColors:
      buttons: red

gives:

on a regular card.

on the more-info.

none of the settings stick for that?

Yes, already did that and it works. Entity dropdown list is still in dark theme, is there a color setting for it?

No it uses your theme. Theres’ no way to override it. Best approach is to avoid mixing modes and stick with either dark.or light.