[Deprecated] Interactive history explorer custom card

Glad you like it ! Let me know if you find some missing features, feedback is always welcome.

Hi Alex,

five less important topics after using your card with pleasure now for longer time:

  1. Do you have an idea how to remove the centered line in the bar-chart?
    image
    This separator is only between two rows, so it is not neeed if I only have one row. It looks fine if you have 2, 3, 4, 5 rows.

  2. And if I have predefined charts and some added via +. And if I press then x to remove them again, the predefined charts are gone as well, and I have to reload the page, that the re-appear. Wanted behavior?

  3. Any chance to have styling attributes for the x button and input box as well? Currently, I use

    card_mod:
      style: |
        button {
          background-color: #2e2e2e;
          border:none;
          color: #ffffff
        }
        input {
          background-color: #2e2e2e;
          border:none;
          color: #ffffff
        }

What solves, what I need, but of course, card_mod is always an overhead in each card and adds UI time.

  1. Any way to hide h1 instead of only showing an empty line? If having a space, no title is shown, but still the line (gap). Currently, I’m using.
    card_mod:
      style: |
        h1 {
          display: none;
        }
  1. Any way to have the export csv arrow when hiding the toolbar. I would like to have this feature in cards without having the feature to add more entities on the fly.

Minor feedback: The plus and minus keys seem nonintuitive.

If I’m looking at 1 day, plus usually means more, so I expect the plus key to show me more days or more time. Instead, it shows less.

I suppose it could be argued the plus key shows more resolution, but the unit of measurement shown between the plus and minus keys is time so I would expect plus to show more time.

Also, FWIW, the dropdown menu is great, but it seems odd being to the left of the plus key. It would make more sense to me to have the plus and minus keys together

- + time

or

time - +

I like to have it intuitive as zoom in (+) and zoom out (-), same as google maps, etc. is working. There you are not expecting to see more km/miles if pressing +, are you?

That’s fair. To me, it would make more sense if the + and - buttons were right beside each other like they are on google maps.

Good feedback, thanks !

Yeah I do, by modifying the card’s code :wink: I’ll remove it in the next release if there’s only a single timeline bar in the graph.

Somewhat. Internally if you add several timeline bars one after another, they’re technically part of the same chart. So when you remove the chart, it takes away all bars. So while not explicitly wanted, it’s expected behavior right now. I have been working on a UI upgrade to better edit the order of graphs and combine / detach them on the fly by drag and drop. That would allow adding and removing individual entities from a chart on the fly, so it would also solve this behavior. I’ll have to find some more free time to finalize this, so no guarantee on an eta at this time. It’s a pretty complex update.

Both of these should be trivial to add. Would you mind adding them as feature requests on Github so I don’t forget about them.

Well it’s part of the entity options dropdown, which is directly part of the entity selector (on purpose). While the control only has a single option right now (the CSV export), it’s going to gain new ones with future updates, so detaching it would be weird. It would result in a lonely dropdown button floating in the middle of nowhere without context.

1 Like

The +/- convention is mostly personal preference. As Arganto mentioned, it’s like Google maps does it. Plus means more details, minus means less. If the button order really bothers you, you can move them around by modifying the cards JS code (the html parts are not compressed in the build so you can directly edit them there, no need to rebuild from source). As long as you don’t touch the ID attributes in the tags, you can go wild and swap / move stuff around. It’s going to be overwritten by an update though.

Then I don’t care. Reload of page is totaly fine in this rare cases.

Will do so.

Not important at all. But currently it is perhaps on purpose connected to the entity sector, but is not related to it, because I load all data and not from the selection. So such a download/option dropdown button could be placed right to the + from time-range as well.

The +/- had me annoyed until I realisee it worked just like +/- usually does. I am used to it now. Please don’t change it as it’ll annoy me again :slight_smile:

1 Like

Hi - thankyou for making this card! Really like it.
I want to use it just with yaml defined entities.
I know it’s kind of the main feature but…

Is there a way to remove the “Type to search for an entity to add” box ? (and just have the graphed entities I define in yaml)

Also, on the +/- I think it would be more intuitive if they were together and not spread out on either side of the timeframe as they are now. Also make it easier to zoom in and back out with less mouse movement.

Please read documentation. “Changing the UI layout”-part is your friend.

Can I somehow adjust the tooltip in the canvas, e.g. width or line-breaking or … Because sometimes I cannot see the whole/rest of the state.

image

Secondly and less important: And e.g. to combine the Date rows into one with " - "

Thanks - did not know what to look for. The search box is call an “entity selector”. The code to hide the search box is as follows.

uiLayout:
  selector: hide

Right now the only way to customize this popup is to modify the js code. There’s a limit on the width of the popup, basically to do exactly what you don’t want it to do - limit the width to ‘reasonable’ sizes when encountering states with very long names. I guess I can make this max width property configurable, you could set it to some really high value if you don’t want it to be limited at all.

1 Like

Would be more than great. Then I can play around without modification.And if you are already adding this :wink: please do the same with displayColors attribute in Tooltip Configuration, defaulted to true (as currently). I would save some pixels with false here. :sunglasses:

V1.0.19 is out with new customization options and also adds support for panel mode, if you want to use the history explorer from your side panel, maybe to replace the original history altogether.

This turned out to be not an issue with the tooltip popup width, but with clipping. It’s a limitation / bug in chart.js that is triggered when your tooltip is wider than the graph in the card. Fixing this would require a substantial change on how chart.js aligns and computes the tooltips positions internally. Right now I don’t have the time to do this, but I’ll keep it on my list.

1 Like

Really not important. Skip the idea until you don’t have any other. :wink:

But the displayColors attribute in Tooltip Configuration would be really great, that I can set it to false in the card.

            uiLayout:
              toolbar: bottom

Gives me this
image

FYI. Love this card.

Yup, not enough horizontal space to fit them all in there. Either make the card wider or move the toolbar or the entity selector to the top.

If you need more space, unless you’re on a phone, putting the card into a dashboard with view type set to panel will do the trick. Alternatively you can also use the new sidebar panel mode to give it more space:

image

Since all my dashboards are intended to be usable on a phone, I will avoid putting the toolbar on the bottom or just remove the entity selector.

It would be nice to have the ability to move the toolbar to the bottom without incorporating it with the entity selector.