[Under New Management] Interactive history explorer custom card

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?

please let me ask something entirely different, for which I have been looking for some time now. Silly me, there’s no way I can imagine how to do what I am looking for…

having these sunchance forecast sensors for the next few days, they are actual entities, and not attributes. I would love to represent them in a way, that shows 1 graph, with a line connecting them. Would this be possible with a detailed setting in a HE card? (aware they are not historic values, but current…)

  - type: custom:bar-card
    title: Kans op zon
#     hours_to_show: 24
#     update_interval: 30
#     smoothing: true
    show:
      labels: true
    severity:
      - color: Grey
        from: 0
        to: 25
      - color: Skyblue
        from: 26
        to: 50
      - color: Gold
        from: 51
        to: 100
    entities:
      - sensor.buienradar_sunchance_1d
      - sensor.buienradar_sunchance_2d
      - sensor.buienradar_sunchance_3d
      - sensor.buienradar_sunchance_4d
      - sensor.buienradar_sunchance_5d

showing as:

but looking for something like:

or a meteogram like this:

if not possible with History-explorer, maybe you have an idea how to realize it using other tools.

By using ‘Enable history info panel’ in the UI dropdown menu, from the HE card you have the infoPanel config attached to. From your iOS app.

OK, let me try to explain this. The info panel override is a global component. It affects the entire frontend, regardless of whether or not you have a HE card somewhere on it. But due to the way the HA frontend is designed code wise, there is no way for a global component to get any kind of user config. None. Nothing. Nada.

Only custom cards get YAML config. So you have to tie the global component to a custom card somehow, even if conceptually it doesn’t make sense. So to get the user config. But the problems don’t end there. Again, due to another weird design choice of the HA frontend, custom cards can only read their user YAML when they’re visible, ie. when you navigate to the dashboard and tab that contains the custom card. So in this case, it would mean for the override to be customized, you would need a HE card on every single tab of every single dashboard you have. And all of these HE cards would have to have a copy of the infoPanel section. Not really practical.

So the only way to configure a global frontend component at any time and any place, is to store the user config in the browser, locally. When a HE card loads its infoPanel section, it will copy it into a special config space in your browser. Which in turn will then be used by the global more info override code. This copying process is initially activated by using the ‘Enable history info panel’ option. This will prepare the local storage on your browser for the config and copy it over from the YAML. 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.

Complicated and annoying, yes. But the way the frontend is designed, there’s no other way to do this.

1 Like

Not without very extensive modifications of the card, I’m afraid.

got it…
because I had set that dropdown menu to ‘hide’, I couldn’t…

fixed that now, and showing the HE more-info panels. Understand the local_storage, just had not seen the tool to enable it. sorry…

still seeing this on iOS companion app though:

on a regular card:

and on a more-info panel: