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

sbarmen · 17. august 2024

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 2024 av sbarmen

thoralex · 17. august 2024

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 · 17. august 2024

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.

Jørn R · 10. november 2024

Hei @sbarmen.

Noen ide om hvordan jeg kan få prisen til å være korrekt her? Står på 1 øre, men skal nok være 101 øre.

sbarmen · 10. november 2024

Er nordpool sensoren din satt opp til å vise øre (cents)?

https://github.com/custom-components/nordpool?tab=readme-ov-file#configuration-variables

Prøv å sett price in cents til true:

# Display price in cents in stead of (for example) Euros.

price_in_cents: true

Endret 10. november 2024 av sbarmen

Jørn R · 10. november 2024

Takk for tips, sjekker ut!

Stemte det, ja.

Tester på endre. Ser ut til at jeg må slette og lette den til igjen.

Fint kort forøvrig, takk for deling.

Idar-A · fredag kl 14:56

Hei @sbarmen - veldig fin chart du har satt sammen her 😊

Prøvde å legge inn nå, men får følgende feilmelding:

/// apexcharts-card version 2.1.2 /// value.series[0] is not a ChartCardSeriesExternalConfig; value.series[0].color_threshold[0] is not a ChartCardColorThreshold; value.series[0].color_threshold[0].value is missing
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.nord_pool_no3_current_price
    yaxis_id: price
    extend_to: now
    name: Pris
    unit: ' øre/kWh'
    stroke_width: 1
    type: area
    curve: stepline
    float_precision: 0
    color: '#db4437'
    color_threshold:
      - color: '#42a047'
      - color: '#ffa600'
      - 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.tibber_pulse_hjem_accumulated_consumption_current_hour
    yaxis_id: usage
    type: column
    name: Forbruk
    stroke_width: 2
    invert: false
    group_by:
      func: max
    show:
      legend_value: false

Klarer du å se hvorfor?

Mener jeg har lagt inn sensorene riktig. Men ser Nor Pool ikke har mean price-sensor, så la inn annen sensor i stedet.

Her er koden jeg la inn:

type: custom:config-template-card
variables:
  sensor_price: "\"sensor.nord_pool_no3_current_price\""
  sensor_usage: "\"sensor.tibber_pulse_hjem_accumulated_consumption_current_hour\""
  low_price: states['sensor.nord_pool_no3_lowest_price'].attributes.min
  high_price: states['sensor.nord_pool_no3_highest_price'].attributes.max
  mean_price: states['sensor.nord_pool_no3_next_price'].attributes.mean
  current_price: states['sensor.nord_pool_no3_current_price'].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

sbarmen · søndag kl 08:52

Hei @Idar-A! Takk for hyggelig tilbakemelding.

Feilmelding sier at du ikke får ut riktig verdi for low mean og high price:

color_threshold:
  - value: ${low_price}
    color: "#42a047"
  - value: ${mean_price}
    color: "#ffa600"
  - value: ${high_price}
    color: "#db4437"

Det ser kanskje ut som denne delen peker til feil entitet:

low_price: states['sensor.nord_pool_no3_lowest_price'].attributes.min 
high_price: states['sensor.nord_pool_no3_highest_price'].attributes.max 
mean_price: states['sensor.nord_pool_no3_next_price'].attributes.mean

Dersom du prøver å endre sensor.nord_pool_no3_lowest_price med sensor.nord_pool_no3_current_price. Min max og mean ligger som attributter til denne entiteten, du kan sjekke dette under developer-tools i Home Assistant. Gå til https://din-ha-ip-eller-hostnavn/developer-tools/state og søk opp sensor.nord_pool_no3_current_price og sjekk attributtene til høyre. Der skal det stå min/mean/max verdier.

Håper du får det til!

TheGizmo · søndag kl 10:17

Hei @sbarmen,

Flott kort som du deler, fått den på plass selv!

ps: @Idar-A, du gjorde nok som meg først, brukte den offisiele NordPool, sjekk ut denne som har de nevnte atributter: https://github.com/custom-components/nordpool

Endret søndag kl 15:45 av TheGizmo

Idar-A · søndag kl 22:31

Tusen takk for svar, @sbarmen og @TheGizmo 🙌

Ja, brukte den offisielle NorPool-integrasjonen, og der manglet atributtene. Forsøkte så å installere fra HACS (uten å avinstallere den offisielle), da fikk jeg ikke hentet ned noe på den nye enheten som ble lagt til. Men når jeg så fjernet begge enhetene og la til ny enhet mot HACS-integrasjonen funka det 🤩

Logg inn

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

Anbefalte innlegg

sbarmen

thoralex

sbarmen

Jørn R

sbarmen

Jørn R

Idar-A

sbarmen

TheGizmo

Idar-A

Artikler

Forum

Mine aktivitetsstrømmer

Ressurser

Om oss

Viktig informasjon