Apexchart med fargekoding for strømpriser og strømforbruk, Nordpool og Tibber

[sbarmen]

Jeg har tullet en stund med dette, kanskje det er flere som prøver med det samme? Målet mitt var å få fargekodet strømpriser dynamisk basert på dagens prisnivåer. Jeg mener nå jeg har funnet et oppsett som er ganske bra. Grafen i bakgrunnen er prisene for i dag (og i morgen når tilgjengelig), og de fargekodes ut ifra dagens min, max og mean fra nordpool sensorens attributter. Fargen i tittelen (60 øre/kWh) endres også basert på prisen 'nå', og det samme gjør linjen på grafen. Jeg er litt usikker på hva jeg liker best, men du kan skru av og på linjen på grafen ved å endre stroke_width: under series: mellom 0 og 1 (eller større / tykkere om du vil). 

 

 

 

Dark mode på mobil. 

 

Her er kortet i lovelace. Bare endre sensor_price og sensor_usage, samt oppdater enhet for low_price, high_price og mean_price. 

 

type: custom:config-template-card
variables:
  sensor_price: '"sensor.nordpool"'
  sensor_usage: '"sensor.accumulated_consumption_current_hour_gatenavn_1"'
  low_price: states['sensor.nordpool'].attributes.min
  high_price: states['sensor.nordpool'].attributes.max
  mean_price: states['sensor.nordpool'].attributes.mean
  current_price: states['sensor.nordpool'].state
  state_color: |
    (low, high, current) => {
      const range = high - low;
      const third_low = low + range / 3;
      const third_high = high - range / 3;

      if (current <= third_low) {
        return '#42a047';  // Grønn
      } else if (current <= third_high) {
        return '#ffa600';  // Oransje
      } else {
        return '#db4437';  // Rød
      }
    }
entities:
  - ${sensor_price}
card:
  type: custom:apexcharts-card
  experimental:
    color_threshold: true
  header:
    show: true
    title: Strømpris og Forbruk
    show_states: true
    standard_format: true
    colorize_states: true
  now:
    show: true
    label: Nå
  graph_span: 2d
  span:
    start: day
  apex_config:
    dataLabels:
      enabled: true
    legend:
      show: true
    chart:
      height: 210px
    yaxis:
      - id: price
        show: true
        decimalsInFloat: 0
        floating: false
        forceNiceScale: true
        extend_to: end
      - id: usage
        show: true
        opposite: true
        decimalsInFloat: 0
        floating: false
        forceNiceScale: true
        extend_to: end
  series:
    - entity: ${sensor_price}
      yaxis_id: price
      extend_to: now
      name: Pris
      unit: ' øre/kWh'
      stroke_width: 1
      type: area
      curve: stepline
      float_precision: 0
      color: ${state_color(low_price, high_price, current_price)}
      color_threshold:
        - value: ${low_price}
          color: '#42a047'
        - value: ${mean_price}
          color: '#ffa600'
        - value: ${high_price}
          color: '#db4437'
      show:
        legend_value: false
        in_header: before_now
      data_generator: >
        return (entity.attributes.raw_today.map((start, index) => { return [new
        Date(start["start"]).getTime(),
        entity.attributes.raw_today[index]["value"]];
        })).concat(entity.attributes.raw_tomorrow.map((start, index) => { return
        [new Date(start["start"]).getTime(),
        entity.attributes.raw_tomorrow[index]["value"]]; }));
    - entity: ${sensor_usage}
      yaxis_id: usage
      type: column
      name: Forbruk
      stroke_width: 2
      invert: false
      group_by:
        func: max
      show:
        legend_value: false

 

 

Før morgendagens priser:

Endret 17. august av sbarmen

[thoralex]

Kan man få linjen til å endre farge uten fyll? Jeg har tre prisgrafer og en graf med fyll i kortet mitt så hos meg blir det litt vanskeligere.

[sbarmen]

Nei, linjen har bare en farge. Det er samme farge som prisen i mitt eksempel. Men du kan kun ha 1 farge på linja. Alternativt til fyll er å bruke column.