[Under New Management] Interactive history explorer custom card

What does “more-info not working” mean? The History Explorer card has a lot of features, and I’ve only used what I need, so I probably don’t know (and haven’t tested) many of them. I definitively don’t know what you expect with “more-info”. But I can take a look.

You are able to replace the HA chart in the more info dialog with the history explorer one. This stopped working and there were a bug fix for this for the original source and the fork. See my link above. Without this, the replacement is not working anymore.

This option.

This fix.

Smarter config, better touch, cleaner rendering

entityPatterns had a short life

entityOptions — now with glob pattern matching

The headline feature of this release is the list form of entityOptions, which brings glob pattern matching directly into the existing configuration key — no separate block needed. One entry can style dozens of sensors at once:

entityOptions:
  - match: "sensor.*_power"
    lineMode: lines
    showPoints: true
    color: '#3e95cd'
  - match: ["sensor.temperature*", "sensor.humidity*"]
    lineMode: curves
    showMinMax: statistics
  - entity: sensor.sun_azimuth
    type: arrowline
    color: red

The original dict form is fully preserved. All entity options are supported in both forms. The two forms are mutually exclusive — mixing dict and list in the same entityOptions block is not valid YAML and not supported.

Note: entityPatterns had a short life — it is now deprecated and fully integrated into entityOptions. Simply move your patterns under entityOptions as list entries. The match: key works identically.

Migration note: The dict form of entityOptions is legacy and kept solely to avoid a breaking change. New features — pattern matching, glob wildcards, multi-entity styling — are only available in list form. Mixing dict and list in the same entityOptions block is not supported. If you use any of the new features, migrate the entire entityOptions block to list form:

# Legacy dict form (still works, no new features)
entityOptions:
  humidity:
    lineMode: lines

# List form (recommended — full feature set)
entityOptions:
  - entity: humidity
    lineMode: lines

Mobile touch gestures

  • Y axis drag — drag on the Y axis label area to pan the scale vertically. On desktop the cursor changes to . On mobile, a dedicated touch handler with preventDefault prevents page scroll interference.
  • Two-finger vertical pinch — zoom the Y axis in or out, centered on the current midpoint.

Line rendering improvements

  • All interpolation modes now use monotone Steffen algorithm — no more horizontal overshoots on steep fronts
  • curves uses tension 0.1 — smooth and faithful to filtered signals
  • lines uses zero tension — perfectly straight, most faithful raw data representation
  • Round join and cap styles for constant stroke width at corners and ends

New options

  • showPoints — per-entity dot markers at measurement points, accepts true (4px) or numeric radius
  • showMinMax — shaded min/max band: statistics (LTS only) or history/states (full graph)
  • dashMode — now accepts custom Canvas setLineDash arrays

Bug fixes

  • Cache anchor point timestamp corrected — eliminates spurious spikes at graph start
  • decimation and showPoints now correctly wired through entityOptions
  • Y axis overlay correctly scoped to its own graph (position:relative on container)

Quality of life

  • lineMode accepts singular aliases: line, curve, step
1 Like

New release v1.1.5. I just rebuild it with file history-info-panel.js from [elchininet]

didn’t test it. tell me if it’s ok or not.

Fix for history-info-panel

Fix: history-info-panel

Integrated history-info-panel.js from [elchininet](elchininet (Iván Pereira) · GitHub) — fixes issues with the history info panel feature.

Maybe fix: entityOptions list on mobile

Reworked getEntityOptions to handle entityOptions in list form more robustly — the dict lookup path is now always executed first (original behaviour), followed by the list glob matching path only if entityOptions is an array. This may fix cases where list-form entityOptions entries were not matched on mobile clients. Hard to confirm due to aggressive browser caching on mobile making reliable testing difficult.

New release v1.1.6

Fix entity selector dropdown on mobile Latest

The entity selector dropdown was appearing on focus instead of on first keystroke. On mobile this was particularly problematic: the dropdown appeared immediately on focus, before the virtual keyboard opened, and then the keyboard appeared underneath it

5 Likes

I have been using the new fork by Thierry34 but found that whilst it installs fine it introduces some issues around the Y axis and timeline graphs that for me are a show stopper so I have reverted back to the SpangleLabs version. So worth a try but confirm the issues I reported to make sure they won’t cause you any problems.

1 Like

V1.1.8 is now available. The reported issues have been addressed.

The codebase is quite complex, covers a lot of functionality I don’t use and behaves differently across phones, tablets and desktops, making exhaustive testing virtually impossible.

The fixes have been applied but hopefully don’t create new issues.

Broader regression testing by the community is welcome.

3 Likes

Im still very new to HA but not sure if Im doing something wrong but I cannot seem to find this in HACS to install? Ive downloaded it manually and tried to follow the instructions to do the manual install but thats not working for me either

You need to add the repository into HACS using the custom repository function. See

Hi thanks, ive tried that. I followed this:

Manual install

1. Download the history-explorer-card.js file and copy it into your config/www folder
2. Add a resource reference to it. On the HA UI, navigate to Configuration → Dashboards → Resources. Visit the Registering resources page on the Home Assistant support site for more information.
3. Click on the + Add Resource button
4. Type /local/history-explorer-card.js into the URL field and make sure the resource type field says Javascript Module
5. Hit create

You can now add the card to your dashboard as usual. You may have to refresh the page in your browser once after adding the card to properly initialize it.

but it isnt appearing in my cards list - I must be missing something?

If you’re using the companion app go into the settings/companion app/debug and reset the frontend cache to make sure it’s not running from cached data. I can’t suggest anything else, both methods work, I’ve used them in the last few days to test out a new beta. The HACS route is best as then you’ll get notifications of any updates and also get a gzip version that loads quicker.

The Y-axis pan feature on touch devices is already implemented and working in the main history-explorer-card custom card on all devices including mobile. I am now working on bringing the same feature to the more-info panel (history-info-panel), which is currently in beta.

The Y-axis pan uses a position:absolute overlay div (#ya-0) sitting on top of the chart canvas. A vertical drag on this overlay pans the Y axis.

In the more-info panel, this works correctly on tablets. However on mobile, the HA dialog behaves as a bottom sheet. When the user drags down on #ya-0, the pointermove event propagates up to the HA bottom sheet handler, which interprets it as a dismiss gesture and slides the dialog down.

We have preventDefault() and stopPropagation() on both pointerdown and pointermove events of #ya-0, but this does not prevent the bottom sheet from reacting. The bottom sheet handler appears to capture pointer events at a higher level in the DOM, independently of our overlay.

I’m asking the community for help: is there a way to disable or override the bottom sheet dismiss gesture on the HA more-info dialog programmatically, for example by setting touch-action:none on the dialog container element, or by any other means accessible from a custom card’s JavaScript?

finally managed it, thanks for the help :slight_smile:

1 Like