[Under New Management] Interactive history explorer custom card

habitoti · February 27, 2023, 10:37am

github.com/alexarch21/history-explorer-card

[Feature Request] Rolling timeline/x-axis

opened 10:36AM - 27 Feb 23 UTC

closed 08:00PM - 23 Mar 23 UTC

enhancement

Please provide an option to have the x-axis constantly show a configurable inter…val of the timeline back from "now". The timeline display should then update in real-time (or configurable intervals, respectively), so that it rolls along and always show "now" as the rightmost point in time. - If the timeline is changed interactively, this automatic "current interval" mode stops - This stopped auto-update mode can be restarted by choosing an according mode explicitly again from interval selector - When choosing a future point in time as rightmost timestamp, data will fill up statically until that point is reached, and then timeline starts to autoscroll.

stepir · March 14, 2023, 1:57pm

hi @HeyImAlex and thanks for the great card!

I too would like to get back the default climate view - can you clarify how to add the override you mentioned?

Thanks!

mterry63 · March 14, 2023, 3:32pm

In a dashboard with the card configured, add the following to exclude the climate domain:

type: custom:history-explorer-card
cardName: historycard-57231452
infoPanel:
  exclude:
    climate: true

This will also override the climate in history info panel if you have enabled it globally.

stepir · March 14, 2023, 7:35pm

thank you @mterry63

the problem is that this is happening outside of the history-explorer-card but in any other where I’m consulting the graph view of a climate.

I realised now this happen only in Safari but not in native IOS app…

mterry63 · March 14, 2023, 8:17pm

Once I configured it in a card it applies to all use of the history explorer, not just the configured dashboard.

stepir · March 14, 2023, 8:28pm

thank you - unfortunately it won’t solve it.

It work in any browser except safari - I tried clearing cache and event restarting HA.

mterry63 · March 14, 2023, 8:43pm

Sorry, can’t help there. I’m not an IOS user.

ole · March 15, 2023, 8:39am

I love this History Explorer card. Very powerful.

One thing i cant figure out, how to invere the reading from a entity.

Ole

arganto · March 15, 2023, 10:53am

Did you try to deactivate and activate again on this special browser? Because the panel-settings-activation is per browser/device.

mirekmal · March 15, 2023, 12:46pm

You mean to display below the 0-line? Use scale.

type: custom:history-explorer-card
graphs:
  - type: line
    entities:
      - entity: sensor.speedtest_download
        name: Download
        color: '#F03A3E'
        fill: '#F03A3E22'
        unit: Transfer Speed (mbps)
        scale: 1
      - entity: sensor.speedtest_upload
        name: Upload
        color: '#003C9E'
        fill: '#003C9E22'
        scale: -1

stepir · March 15, 2023, 4:49pm

hi @arganto - not sure what you mean I don’t use browser mod?

stepir · March 15, 2023, 4:51pm

the ‘funny’ thing is that in Safari - this basically replaced any history graph… e.g. this is the Tesla style power wheel:

arganto · March 15, 2023, 4:58pm

On the card, where you have defined the infopanel (did you define it perhaps on more than one card?)

And then enable again. Not related to browser_mod.

This setting is per browser/device.

stepir · March 15, 2023, 5:33pm

ahhh thanks!!! so if I disable it then it’s will be disabled overall, not in the defined history-explorer-cards - but if I enabled it again, it’s enabled everywhere (any history graph even outside the history-explorer-card).

I like the history-explorer-card a lot, I only wish I could use the standard graph for climate - given that history-explorer-card it’s disaplying the state of the climate and not a graph of the temperature.

arganto · March 15, 2023, 6:07pm

And for exactly this requirement you can exclude domains in the defintion of the panel-replacement. And how to do this has been shown to you above in the post from mterry63 already.

Again, you can use the history card

with a card of type: custom:history-explorer-card and
as a replacement for the more-info card. For this you have to define infoPanel: in one of your cards. And there you can maintain, how the replacement of all more-info-card is shown. And there you can exclude domain, set colors, etc. And in this card, you have to enable this replacement in every browser/device.

stepir · March 15, 2023, 6:35pm

thanks a lot @arganto for taking the time to explain once again. I had it set but there was indent error in my infopanel section, hence why it was not working. By clarifying it you made me double check and I found it! it works great now!! Thanks!

arganto · March 15, 2023, 6:38pm

You’re welcome. But please don’t ping/@ users here. See community-rules as well. Instead use reply of the post you want to reply instead of thread-reply as you did now in your last post. Then the users get a notification as well.

VIMVa · March 23, 2023, 11:30am

I’m learning the ins and outs of HA for a couple of weeks and stumbled on your work just now. What a relief to be able to dive into the history of my sensors thanks to this great solution. Thanks for your great work!

Unfortunately
“The Y axis can also be interactively modified. Pressing and holding the SHIFT key will unlock interactive zooming and panning of the graph in vertical direction.” is not available on smartphones and tablets. No mouse available .
Would there be a solution to that? Something like a two-finger hold to scroll and zoom or so?

HeyImAlex · March 23, 2023, 7:57pm

V1.0.45 is out ! Lots of small fixes and QoL improvements in that one:

When auto refresh is enabled, the graph scroll position will now follow the new data as it comes in on the right side, the same way the native graph does. When you start manually dragging the graph into the past, the auto scrolling will be suspended (so the thing won’t jump around while you inspect older data). Once you scroll back to the current date or into the future (empty space on the right), the auto scrolling will resume as needed. You can also click the date selector button to quickly jump to the current date and time. This will also resume the auto scrolling. To use this feature make sure auto-refresh is enabled (it’s enabled by default on info panels, see here on how to enable it for the normal card). @habitoti
The date selector previous and next buttons will now scroll a month at a time when you are viewing a time range of a month or longer
Double clicking the date selector will now restore a custom time range if you set one with defaultTimeRange and / or defaultTimeOffset. If none of those are defined, it will restore the default 24h view. Note that single clicking the date selector will jump to the current date and time without changing the zoom level.
Individual entities in line and bar graphs can now be hidden by default using the hidden property, both for dynamic and manually defined graphs. See the advanced YAML example in the readme. This doesn’t work in info panels, as it wouldn’t make much sense there.
The history DB is now accessed over the websocket API, which improves DB fetching performance especially on longer time ranges.
Considerably improved total_accumulating bar chart rendering speed, especially if you use small time intervals (like hourly) with long time ranges. Scrolling such graphs is a lot smoother now !
Added Danish and Swedish translations, thanks to el97 and dykandDK for contributing them !

HeyImAlex · March 23, 2023, 8:04pm

Welcome to the forums.

Well yeah. There are many potential ways to implement this on touch, all with their respective pros and cons (long press and drag, two finger gestures, new button and mode, force press, etc). This would require the implementation of multiple methods and comparing their UX. Unfortunately I don’t really have the time for that right now. But maybe in the future. Right now the full data analysis experience targets a PC/Mac with mouse, touch supports a more basic feature set.