search

SpangleLabs / history-explorer-card

A card for Home Assistant Lovelace for exploring the history of your entities interactively and in real time.
MIT License
112 stars 2 forks source link

Line segment idea #20

Open Arkkimaagi opened 4 months ago

Arkkimaagi commented 4 months ago

If I understood correctly based on a forum post, this card might use chart.js to render the charts.

I'd love if we could color line segments based on some criteria, so I could avoid having to color a separate timeline below the line segment. image

Currently I do it with this config:

type: custom:history-explorer-card
cardName: historycard-39265679
header: Historia
defaultTimeRange: 24h
decimation: accurate
lineMode: stepped
lineGraphHeight: 500
barGraphHeight: 500
refresh:
  automatic: true
uiLayout:
  selector: hide
stateColors:
  poistaa: '#43a047'
  varo: '#ffa600'
  puhaltaa: '#db4437'
  virhe: '#039be5'
graphs:
  - type: line
    options: null
    entities:
      - entity: sensor.airflow_direction
        name: Airflow Direction
  - type: timeline
    entities:
      - entity: sensor.airflow_direction
        name: Airflow Direction
        process: |-
          ( state < 10 ) ? 
            "poistaa" : 
            ( state < 20) ?
              "varo" :
              ( state >= 20 ) ?
              "puhaltaa" : "virhe"

To me it seems that chart.js supports line segment coloring, so could there be a way to color the line based on similar rules?

https://www.chartjs.org/docs/latest/samples/line/segments.html

Arkkimaagi commented 4 months ago

On simpler cases just setting the fill color and origin might be enough, but most flexible would be with a similar coloring than states.

https://www.chartjs.org/docs/latest/charts/area.html#example-with-multiple-colors