[Under New Management] Interactive history explorer custom card

I don’t understand the question. Can you explain what exactly the problem is ?

Auto-entities is a plugin that auto populates the entities: section of a card based on filters. It allows for dynamically-populated cards. As an example, I have an Entities card that is a list of all the lights that are on. When a light gets turned off, it disappears off the card.

On a page where I track energy usage, I have a History card that shows the timeline for each device that my Sense power monitor detects. Since the Sense will randomly detect new devices, this is not a hard-coded list of devices but instead a dynamically populated list. It looks like this:

  - type: custom:auto-entities
    show_empty: false
    sort:
      method: name
    card:
      show_header_toggle: false
      state:
        - color: red
          value: 'on'
        - color: grey
          value: 'off'
      title: Sense Detected Devices
      type: history-graph
    filter:
      include:
        - attributes:
            device_class: power

I would love to convert this to a history-explorer-card, since it is better than a history-graph in a couple dozen different ways. ((Thank you, again. I am really loving this card.))

When I try to use auto-entities with a history-explorer-graph card, like this (in a stripped-down simplified example):

  - type: custom:auto-entities
    card:
      type: custom:history-explorer-card
      graphs:
        - type: timeline
    filter:
      include:
        - entity_id: sun.sun

I get this:

(!) undefined is not an object (evaluating 'i.graphs[e].entities')
entities:
  - entity: sun.sun
type: custom:history-explorer-card
graphs:
  - type: timeline

Auto-entities is creating the card with the populated entities: section, but it creates it at the card level whereas this specific card really needs the entities: to be under graphs: > type:.

To be honest, this sounds more like a limitation of the auto entities integration, which I guess should be a bit more configurable on where/how it generates its entities. The problem is that you can’t just dump a list of entities into the history explorer card, as it supports multiple type of graphs and the type cannot always be automatically deduced from just the entity_id.

Can’t you somehow configure the auto entity thing to change the hierarchical indentation level of its generated YAML ? Instead of just dumping everything at root level.

Most other cards populate their entities: at the card level rather than under another tag, so this works 98% of the time.

What makes your card different is doing multiple graphs with different entity lists in a single card. If the entities: was at card level and the graph_type: was set for the desired output, we would only get one graph per card and would then repeat that for multiple cards to get the multiple graphs. This would break the linkage between the multiple graphs, which is counter what makes this awesome. So, that’s a nonstarter.

The other solution is to liberally plagiarize the filter.ts file from the auto-entities source code and implement filters within this card. This would be a less-than-trivial amount of work, so it would take some thought and effort to even decide if it was worth it.

I’ll fork your GitHub thing and take a swing at it. If I get it working, I’ll submit it back to you. My free time is near zero lately, so it may take me a while.

Nah, I wouldn’t try to shoehorn the filter thing into it.

There’s another way I can think of. The card is able to partially auto determine the type. That’s needed for dynamic entity adding. If the type can’t be determined, it can be manually specified for domains or entities under EntityOptions. This explicitly also works for entities that are not (yet) added to the graph list, because it targets dynamic entity management over the UI.

Now if you take this logic and apply it to an entities list found at the YAML card root, then the auto entities would work the same way as dynamically managed entities. Like 99% of the code for that is already in the card and can be reused. It would probably just be a loop over the entities setting and calling the appropriate methods to add them. If you’d like to take a try at it, let me know. I can assist if needed.

Did you try to template it and solve it with the existing options in auto entities card?

Eg. 🔹 Auto-entities - Automatically fill cards with entities - #566 by gigatexel

Idea: Let auto entities generate only one card, but populate the different entities via template in this one card? Generating the needed JSON.

I’m just starting to use the card & I have a couple questions:

I want my graphs to cover 36 hours:

  1. is there a way of reducing the tick marks from every 2 hours to more hours? At 36 hours they’re impossibly small. Six hours would be great. Or even 12.

  2. When I put in 36 hours it gave me 36 hours from now; I assume with a little patience over a couple days it will populate properly, but that seems weird behavior if it’s using recorded histories.

  3. I haven’t tried this yet, but will Thomas Loven’s card-mod work in yours?

Thanks!

36 hours is not a supported time range. If you use that as default, the card will error out, look strange and be non-functional. Try 24h or 48h instead.

I don’t know, but I think some people have successfully used them together.

Yes. Did it.

Thanks, but at 2 days the timeline is unreadable. Again, is there a way of reducing the marked hours, without eliminating them altogether?

Not at this time. Are you viewing this on a phone in portrait mode ?

Do you see something like in different zoom levels here?

1 Like

On a laptop, three columns filling the whole screen. At two columns still barely legible. Comparison with basic history card. (I’m not sure whether the image will come through.

Ah I see the problem. It looks like this is mostly happening with the 2 day range ? The other ranges are less affected. The 48h one is a little unbalanced on the tick distance right now, it should be 4 hours between ticks, not 2. But it’s true that the main intended use case for this card is/was as a full screen panel. That said, I’m going to rebalance the 48h range.

@arganto, your issue is something different (and considerably more complicated), since it affects even wide screen sizes. Now what I can do, and this would help with both your case and the small card issue @Gnat54 is facing, is to add a general tick density control to the YAML. Something like low/med/high or maybe a numeric multiplier to make it more or less dense. It can’t be a direct hour distance though, because that changes depending on the active time range.

Thanks, HeyImAlex!!

V1.0.22 is out. Small bugfix and feature release. Adds dynamic time tick adjustments, so it will look less crowded on small screens. You can now optionally invert the zoom button behavior, if you prefer it that way. And explicit 12h / 24h modes are now supported.

@Gnat54 @arganto
Could you guys try out V1.0.22 with respect to your issues with time tick labels ? By default, the tick density will now auto adjust to your screen size. You can also manually limit the density to a general lower level if you prefer:

type: custom:history-explorer-card
timeTickDensity: high     # high, medium or low. high is the default.

Tried it this morning. Rebooted, etc. I now show a fairly low density timeline, but no change visible between low, medium & high-density.

Tested as well. Much better than before. Gut feeling: even with high a little bit too low now. Esp. as I see no differences to medium and low, neither.

So if current behavior would be low and there would be a medium and high with some more ticks, I think I would use medium. And high would go into last behavior.

image

But I for me, I can live with the current status as well. Great stuff.

That’s expected behavior. Since your card is so narrow, it will already have selected the low preset automatically.

It’s dependent on the width of your card. The YAML switch doesn’t force a certain mode, it limits the autoselection to a maximal level. So if your card’s width auto selected the medium setting, for example, then you could further limit it to low. But you wouldn’t see a difference between medium and high. Depending on the zoom level, you may not see differences between low and medium modes, they share some ranges depending on the zoom.

Not sure, if I get you. A played around a lot. Different zoom levels of chart, different card widths, … I didn’t see any other ticks if I have chosen low, medium or high.