ADD: Support for HA long-term statistics

[koying]

Add support for the recently added long-term statistics.
Alternative to the builtin Statistics Graph Card.

Needs long-term testing and review

[RomRider]

Thanks, I planned to implement it but don't have time at the moment so that's helpful 😊! I'll have a look as soon as possible.

[koying]

FYI: home-assistant/core#56052

If there is no action on the core side, it might make sense to hardcode adding 1 hour to the statistics data.
For now, the PR is acting the same as the Statistics card.

[wormiedk]

Is there any way of testing this? I would love to assist but am usure how to get it into hacs?

[aferrato]

I'm interested too, thanks.

[ondras12345]

Is there any way of testing this?

This is what I did:

git clone https://github.com/koying/apexcharts-card.git apexcharts-card-koying
cd apexcharts-card-koying
git checkout addastatistics
npm install typescript --save-dev
npm run build
# the result is in dist/apexcharts-card.js

After this, you just need to copy dist/apexcharts-card.js to <configuraiton directory>/www.

[aferrato]

thank you @ondras12345, i tried, but i keep getting many typescript errors, can you post the compiled code?

[ondras12345]

This is my build: apexcharts-card.js.txt
I had to rename it to .txt because Github wouldn't let me upload a .js file.

Needless to say, you should treat this as if it was a binary (.exe file if you're on Windows) some random guy posted on Github. I'm in no way affiliated with this project. Use it at your own risk.

[RomRider]

FYI: home-assistant/core#56052

If there is no action on the core side, it might make sense to hardcode adding 1 hour to the statistics data.
For now, the PR is acting the same as the Statistics card.

I'm going to review this over the weekend, I've seen some PR has been merged in core. Based on your comment, is there something to modify in your code to take it into account? (asking before I dive into it 😊)

[koying]

No, it's already using the "end" time that was merged recently, afaict

[batzillm]

I wanted to test it, was able to compile it and it is getting loaded by my browser but unfortunately by adding the "use_statistics: sum"-line to the config of the series, all i get is an "value.series[0] is not a ChartCardSeriesExternalConfig; value.series[0].use_statistics is extraneous" - did i miss something in the config?
I as well tried the above posted file but with the same behaviour. BrowserCache is cleaned of course.
Any ideas?

[batzillm]

I wanted to test it, was able to compile it and it is getting loaded by my browser but unfortunately by adding the "use_statistics: sum"-line to the config of the series, all i get is an "value.series[0] is not a ChartCardSeriesExternalConfig; value.series[0].use_statistics is extraneous" - did i miss something in the config? I as well tried the above posted file but with the same behaviour. BrowserCache is cleaned of course. Any ideas?

My bad, had a typo in it.
Anyway, my old data_generator: -Graphs started giving strange graphs after switching to the new code and with my limited knwoldege of javascript i am not able to fix it. All m data_generator graphs are sometimes affected, often with different random lines and i am not able to reproduce the occurences. I will switch back to the current stable release for now. Example (random additional red lines):

Keep on the good work! The card is amazyng anyway!

[wormiedk]

Which dev version should i install to test it?
I have quite a fra to choose from

[RomRider]

I'm currently working on merging this PR but it will require some more work. Wait a bit and you'll be able to test it out from a beta release.

[RomRider]

Could someone tell me how to easily get a sensor with long term statistics enabled in HA? Which integration can I use to easily generate some?

[koying]

Anything with a "measurement" state_class really, which is the default, iirc.

Bottom line: any sensor with a numeric value, afaik.

[koying]

The statistics card is just wrong ;)
See home-assistant/core#56052

[RomRider]

I see your point, now I understand the issue :) I'll revert !

[RomRider]

So @koying, for lines I'm using the end date to display the point, and for column I'll use the start date. I think that makes sense, what do you think?

[koying]

I don't use columns myself.
Assuming the left side of the column starts on the datetime tick, yes, it would make sense indeed.

Now, this would still be somewhat confusing, imo. Ideally, the column would be cantered on the datetime tick, and still use the end date, or the right side on the end date.

Maybe wishful thinking?

EDIT: Maybe add an option to use start or end? Not sure we can have a one-size-fir-all, here

[RomRider]

I'll add an option with start, end and middle. Default will be middle

[RomRider]

I think this PR is now ready. I'll release and collect feedback :)

[RomRider]

Thanks @koying for bringing this in and sorry for the delay in merging :)

[github-actions]

🎉 This PR is included in version 2.0.0-dev.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[AleXSR700]

Would it maybe be possible to make statistics dis-/enableable?
Statistics really make sense for larger amounts of data and little sense for recent data. So using templating it would be possible to switch the source of data between normal database and long term statistics.

However, this does not work because it is not possible to dis-/enable using e.g. statistics: [].

Maybe it could be

statistics: enable
  type: max
....

That way the statistics settings are there when needed but it does not interrupt code functionality if type etc. are []

[georgbachmann]

First up: I just discovered this card and the amount of customizability is amazing!!! Thank you very much for the whole card!

I have a quick question about the long-term-statistics support
I'd like to display the mean line as a big line, and the min/max values behind, but as an area that is above min and below max. I hacked it for now by using white as the min-color and now my chart looks like this

So basically somewhat what i want, but instead of masking the max-chart it just overlays white which is not ideal.
Is there a proper way to archive what I want?

My config for this looks like this:

type: custom:apexcharts-card
header:
  show: true
  title: Temperatur Bad OG
  show_states: true
  colorize_states: true
series:
  - entity: sensor.temperature_knx_bad_og
    type: line
    color: '#FF9B12'
    show:
      name_in_header: false
    statistics:
      type: mean
      align: middle
      period: hour
  - entity: sensor.temperature_knx_bad_og
    type: area
    color: '#FF9B12'
    opacity: 0.2
    stroke_width: 0
    show:
      in_header: false
    statistics:
      type: max
  - entity: sensor.temperature_knx_bad_og
    type: area
    opacity: 1
    stroke_width: 0
    show:
      in_header: false
    color: white
    statistics:
      type: min
yaxis:
  - min: '|-0.5|'
    max: '|+0.5|'
    decimals: 1
    apex_config:
      tickAmount: 5
graph_span: 24h
apex_config:
  legend:
    show: false