[Under New Management] Interactive history explorer custom card

Share your Projects!
858

cool.
there is another error directly tied to HE that I have been hunting around lately and I figured it had to do with my custom-ui:

Logger: frontend.js.latest.202309080
Source: components/system_log/__init__.py:269 
First occurred: 11:35:13 (11 occurrences) 
Last logged: 14:33:52

Uncaught error from Safari 16.6 on Mac OS 10.15.7 Script error. null @:0:0

Ive ruled that out (disabling the custom-ui resource does not take away the error), and now tried to disable the HE resource (the dev version now, but it also showed in the release) and yes, taking HE out takes out the error.

please have a look what might cause that?

859

No clue, sorry.

860

well, Ill open an issue in that case, because Ive just re-installed HE again and the error is back immediately when clicking the item for more-info

861

What error ? The original one ? Make sure you reinstalled the correct version. Check the console and make sure it says 1.0.50 dev.

You may not have correctly installed the dev version the first time around. This error does not appear everytime you open the more info. It depends on the state machine and may seem random.

862

ah, we cross posted, I just openend an issue in the repo.
No, the dev update is fine, Scherm­afbeelding 2023-09-12 om 16.15.28
and I am no longer seeing the original issue in the inspector

its the Frontend issue in the log coinciding with the resize observer in inspector

863

I don’t have write access to my github from the office, so I’ll reply here.

Ah it’s the resize observer one. Just ignore it, it’s normal. It was there from the very first HE card. It’s completely harmless, but would be a huge amount of work to remove (so not worth it basically).

As long as the cachesize error is gone, all good.

[Offtopic]
Just a quick offtopic note about your log warnings posted above. This here:
ajax_pluginconf.php?file=../../../../../../../../../../../etc/passwd&plugintype=utilities&pluginclass=CustomSQLUtility
Raises so many red flags, you’d end up in an entire forest of red flags… they’re trying to get your root credentials for your HA box. You should try dig a little deeper and see how this may or may not relate to the custom SQL thing you’re using.
[/offtopic]

864

on the resize observer: its not on all, so that made me notice. I probably see it in the log now became I stopped filtering the frontend in logger (for debugging purposes on something else…)

  frontend.js.latest: fatal

Still, harmless as it might be, it’s ugly, and I am aware the dev team did a lot on the subject, so I figured they would have been all gone… not so apparently.

The SQL: I am not using it, it was used to transfer a MariaDB to the system default SQL, I can safely uninstall probably, even better.

Yet Ive never seen the warning, so will report somewhere in the add-on discord/community :wink:

865

V1.0.50 is up !

Besides fixing a bug with the new multi-year cache and the more-info popup override, you can now also configure how your time ticks look like.

By default, time tick density is automatic and adjusts to the width of your screen. That’s always a compromise between looking good (no clipping), being readable at all screensizes from mobile to wall sized 8k TV and subjective preferences over tick densities. The latter one was always a bit complicated. Also because I personally prefer sparse ticks with low density, but it seems that a lot of people prefer much higher densities.

There has long been the undocumented timeTickDensity setting. Undocumented because it would not really do what most people would expect it to do. It would unlock higher densities on high resolution displays only, or allow you to lower density on all displays. It would however not allow the general increase of density.

So with 1.0.50 I introduced a new config block. For those of you who were already using timeTickDensity, this setting will continue to work as-is (no breaking changes with this card !). It is however overridden by the new settings, if you decide to use both.

timeTicks:
  # optional, this is the same as the old timeTickDensity. It limits the density for the auto-density selection
  density: 'high' 

  # optional, if present, this will skip the auto-density and force the use of your selected density. Possible options are: low, medium, high, higher, highest.
  densityOverride: 'highest'

  # optional, this can be used to shorten the date representation on the time ticks, to make more space if you want high tick densities. Possible values are normal and short. Default is normal.
  dateFormat: 'short'

Examples for a 2 week range on a small card:

Not using the new settings, everything at the defaults:

image

Using densityOverride at higher, leaving the date format at normal:

image

And same as above but settings the dateFormat to short:

image

Keep in mind that overriding the density will disable automatic density calculations depending on card or screen width. So you can easily end up in situations where the labels will overlap.

866

Hi Mirek, would like to know how you did this. Could you please share your yaml configuration?

867

Here it is (current version, might sligtly differ from screenshot, I reversed upload and diwnload directions):

type: custom:history-explorer-card
decimation: false
showUnavailable: false
uimode: dark
uiColors:
  gridlines: '#444856'
  labels: '#A4A7B4'
  buttons: '#2C2E3C'
  selector: '#2C2E3C'
  closeButton: '#0000001f'
labelAreaWidth: 90
uiLayout:
  selector: hide
  toolbar: show
header: hide
graphs:
  - type: line
    entities:
      - entity: sensor.speedtest_download
        name: Download
        color: '#F03A3E'
        fill: '#F03A3E22'
        unit: Transfer Speed (mbps)
        scale: 0.1
      - entity: sensor.speedtest_upload
        name: Upload
        color: '#003C9E'
        fill: '#003C9E22'
        scale: -1
868

Tanks for response in Lightspeed:

i’ve tried this:

    cards:
      - type: custom:history-explorer-card
        cardName: historycard-11116919
        recordedEntitiesOnly: true
        defaultTimeRange: 4d
        defaultTimeOffset: 1h
        refresh:
          interval: 30
        combineSameUnits: true
        graphs:
          - type: curves
            entities:
              - entity: sensor.fb_dave_6591_download_geschwindigkeit
                scale: 0.05
              - entity: sensor.fb_dave_6591_download_geschwindigkeit_2
                scale: 0.05
              - entity: sensor.fb_dave_6591_upload_geschwindigkeit
                scale: -1
              - entity: sensor.fb_dave_6591_upload_geschwindigkeit_2
                scale: -1

but card is empty - any suggestions?

869

curves is not a valid graph type. Try type: line as in Mirek’s example above. You can then set the interpolation mode of the line graph to curves if you want (but that’s the default anyway).

870

Thanks for response - worked like a charm

871

hi at all, could someone help me to modify the “calendar” view on the top left?
Screenshot 2023-09-15 alle 13.48.00

i would like to show: 15/09/2023

I tried to change my locale settings but nothing to do… thanks a lot.

872

The date format will be taken from your active locale. The month will always be named by its short form according to that locale (ie. non-numeric). That’s not configurable.

873

OK! Thanks a lot!

874

Hi, I like the chart card, but have two questions

  1. When I delete the states of an entity, my chart does no longer show anything. The statistics (in the db) are still there (only the states are purged to keep db small) and the statistics graph of HA keeps showing the bars:
    image
    image489×750 12.9 KB 
square: false
type: grid
cards:
  - type: custom:history-explorer-card
    cardName: historycard-77069541
    labelsVisible: true
    header: Daily
    barGraphHeight: 200
    defaultTimeRange: 1o
    defaultTimeOffset: 1d
    decimation: true
    tooltip:
      showDuration: true
      showLabel: false
    uiLayout:
      invertZoom: true
      selector: hide
      interval: hide
    graphs:
      - type: bar
        options:
          interval: daily
          showTimeLabels: true
        entities:
          - entity: sensor.energy_wattpilot
            name: ''
            color: rgba(0,255,0,0.5)
  - chart_type: bar
    period: day
    type: statistics-graph
    entities:
      - sensor.energy_wattpilot
      - sensor.wattpilot_totally_charged
    stat_types:
      - change
    hide_legend: true
    title: Daily
columns: 1

Do I set anything wrong or why does this happen to my charts?

  1. Is it normal, that this chart is slower than the HA statistic graph? Or is there a way just to use the statistics and not the states for the chart?

Thanks for any hints!

875

You deleted your entire history, so an empty graph is not unexpected here…

No, that’s not normal. Check if the shown time range is the same. Also, if you’re only interested in long term statistics, make sure to force that source. Otherwise the card will fetch the main history DB, which is usually slower (but a lot more accurate).

statistics:
  force: true
876

Thanks for the answers.

No all, only the short term statistics (states table)

The force did what I needed! Thanks a lot for this.

877

Hello,
very nice integration!!
However, it seems i can’t get this to hide entities that have no statistics. Shouldn’t it be set like this?

views:
  - title: History Explorer
    panel: true
    type: panel
    badges: []
    cards:
      - type: custom:history-explorer-card
        recordedEntitiesOnly: true
        defaultTimeRange: 1w
        combineSameUnits: true
        showUnavailable: false
        cardName: historycard-30691461

Thanks!