[Under New Management] Interactive history explorer custom card

Wow! Great Job!! This not only resolves a very common complaint with 2022.11, but adds a whole bunch of really useful functionality. Clearly this was written by someone who actually uses the system. That doesn’t always seem to be the case lately.

I assume the documentation will be updated to include this new option at some point. I’d help with that but I haven’t really figured out all the things this custom card can do yet myself.

Hallo Alex, thank you for the fast answer, maybe I want too much :slight_smile: sorry, I understand that full customization is not possible and we can never meet the expetactions of all.
I did read the readme and tried the slim option for tooltip, what unfortunately doesn’t affect the horizontal bar charts anyhow positive in my case (the tooltip itself looks better so I will keep this option). Also tried changing the color, what of-course only forces to disapear the axes (but not remove the empty spaces around barcharts) - and there is even some small bug, since all axes (when color set to zero) blink for a shot time when hovering with mouse pointer in some particular points…

I am trying the card mod indeed, considering this as probably the only way how to reduce some space… I would applreciate some hint, - could you plz. help - what “keys” shoul I modify in the card mod in order to reduce the space between horizontal bars? (I only can reduce the area below the graph or above, what is becoming slowly to apear closer to my wishes…)

thank you
W.
below the intermediate result:

Here it is autorezised even after scrolling, etc. Until now always and everywhere on every entity. Sure that you don’t have this set in your config by accident?

well, I think so… its not happening on all entities, but have a look t this:

when I click the days to 2:

really odd.

this is all I have set on the card that should steer the more-info panel now:

  - type: custom:history-explorer-card
    header: 3 Fase totaal
    cardName:  3-Fase-totaal
    uiLayout:
#       toolbar: hide
      selector: hide
    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

Got it working an so far love it. A few questions

Does it have a longer period of time than the 7 day history?

Can it only work in the desktop / web app and not the mobile app?

How do you add multiple charts in the same box? Like graph temperature and humidity in the same XY axis

Btw @arganto do you see the HE more info on mobile?
Using the iOS companion app not a single More info is showing the override.

And yes, the custom card itself is shown correctly, albeit with the controls a bit displaced

I’m not really sure I fully understand your issue. Multiple HE cards should never influence each other as long as they have a unique card name, as explained under multiple cards.. This is not optional if you have multiple cards. Without unique names, the cards cannot differentiate their config from your browser cache. When creating cards over the UI, a unique name is auto generated. If you do it manually in the Lovelace YAML, you need to add a unique name yourself.

Correct.

Yeah I think I know where the problem is. I think it’s something stupid I did. That’s from doing this late when tired :wink: Should be an easy fix.

In the general card, you can override the graph type using entityOptions or in the YAML. In the more info, that’s currently not possible, due to the weird way the HA popup dialog separates rendering and updating.

Unfortunately, that’s not technically possible. A custom frontend card has only access to its own config. It cannot access any other config.

Yeah, not all entity options work yet. More will come in the next release.

Indeed.

Not at this time.

It does auto resize. Is there a very large value somewhere right outside of the view if you scroll left or right ? The auto resize will sometimes take in some values that are out of view of ± 24h. That’s unavoidable.

When I find some time, yeah :slight_smile:

Well, it’s not really in the scope of this card, sorry.

It uses whatever your recorder is set to. If you want more, either increase your recorder retention period or enable long term statistics, which will be merged in realtime with your recorder in the graph:

type: custom:history-explorer-card
infoPanel:
  statistics:
    enabled: true

Card works in mobile. The more info panel override might not work in all mobile browsers or app yet.

1 Like

I’ve got two separate graphs here, and would like to temp and humidity be in one graph. I’ve named the card with a specific name. What am I doing wrong?

You can’t merge graphs with different units of measure into a single graph.

OK, but you could merge two temperature graphs together though?

Yes. It’s in the readme, pretty prominently if I may say :slight_smile:

Thanks, was confusing that and another part of the read me. Honestly hadn’t gotten to that part of it yet. Don’t have a second temp sensor yet but when I do I’ll try out the multiple lines

Just noticed this. Not sure if related, but keep in mind that the override on/off is a per-browser setting. You will have to explicitly enable it on every browser (or app) you use HA on, as it is stored in the browser local storage.

Here ios is working.

AWESOME!!! Thank you for the more info feature.

V1.0.33 should fix some problems encountered with the more info panel override:

  • The problem with the more info config and multiple history explorer cards should have improved. If you have multiple HE cards, then make sure to only add the infoPanel option to a single HE card. Don’t add it to multiple cards, not even an empty infoPanel key. @Mariusthvdb, can you check if this improves your situation (after having given each card a unique name) ? You might have to reenable the override in the menu after applying the update.

  • Better layout on mobile browsers (toolbar should not overlap anymore)

  • entityOptions should now support settings like ymin and ymax (@derflob).

1 Like

Can I somehow adjust infopanel label area width? It’s too narrow and texts are cut.
.
labels

Open an issue on Github, make sure to mention your OS, browser, HA version and HE card version.

More fixes in V1.0.34. If the more info panel override didn’t properly activate on your system, please update.

tbh, I dont understand that… how do I set it explicitly on iOS app browser? The config is a per card setting isnt it in the Yaml mode config? not a per browser setting?

As I showed above, the setting is activated because of the card it uses in that dashboard, what more could I do to explicitly enable that? (see below for exact yaml)

btw, Ive just updated to 1.0.34, and still see the oddly placed toolbar dropdown in the iOS app too. And no HE more info panel anywhere. I did refresh, kill app, even refresh frontend cache via the settings/app/error-tracking menu option

full disclosure:

I have 1 dashboard view panel HE card (has a unique name):

- title: History
  icon: mdi:history
  path: history
  type: panel
  cards:

    - type: custom:history-explorer-card
      cardName:  history-panel-view
      showUnavailable: false
      recordedEntitiesOnly: true
      lineMode: stepped
      uiLayout:
        selector: top
        toolbar: both

and 1 HE card inside another dashboard, also with a unique name:

  - type: custom:history-explorer-card
    header: 3 Fase totaal
    cardName:  3-Fase-totaal
    uiLayout:
#       toolbar: hide
      selector: hide
    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

this last card is supposed to take care of the more-info panel override, at least as far as I understand it?