Zou je niet willen weten wanneer de stroom het goedkoopst is zodat je je elektrische auto kunt laden of de was kunt doen? Dat is precies wat ik dacht toen ik begon met het spelen met Apex grafieken in Home Assistant. Apex is een zeer aanpasbare grafische kaart voor de Lovelace UI van Home Assistant. Gebaseerd op ApexCharts.js en geïnspireerd door de mini-grafiekkaart van @kalkih, biedt het een fantastische manier om visueel rijke data weer te geven.

In dit artikel neem ik je mee door de stappen om zo'n grafiek op te zetten met behulp van stroomprijzen van Nordpool. Ik zal ook de code delen die ik heb gebruikt, zodat je deze zelf kunt aanpassen naar jouw behoeften.

Voorbereidingen

Voordat we verder gaan, ga ik ervan uit dat je al Home Assistant draait en dat je wat ervaring hebt met het aanpassen van de Lovelace UI. Als dat niet het geval is, raad ik je aan om eerst mijn vorige artikelen te lezen over het instellen van Home Assistant en het aansluiten van Nordpool op Home Assistant.

De Code

Hier is de YAML-code die ik heb gebruikt om mijn Apex grafiek in Home Assistant te configureren.

type: custom:apexcharts-card
apex_config:
  chart:
    width: 100%
  grid:
    borderColor: rgba(255,255,255,0.1)
  xaxis:
    tooltip:
      enabled: false
  yaxis:
    min: 0
    tickAmount: 5
    tooltip:
      formatter: |
        EVAL:function(val, opts) {
          return val + "c/kWh";
        }
experimental:
  color_threshold: true
graph_span: 1d
header:
  title: Stroom prijzen morgen (cnt/kWh)
  show: true
span:
  start: day
  offset: +1d
series:
  - entity: sensor.nordpool_kwh_nl_eur_5_10_0
    name: Spot
    type: line
    curve: stepline
    stroke_width: 2
    color_threshold:
      - value: -100
        color: blue
        opacity: 1
      - value: 0.02
        color: rgb(115, 191, 105)
        opacity: 1
      - value: 0.06
        color: rgb(250, 222, 42)
      - value: 0.08
        color: rgb(255, 152, 48)
      - value: 0.1
        color: rgb(242, 73, 92)
      - value: 0.15
        color: rgb(163, 82, 204)
    data_generator: |
      return entity.attributes.raw_today.map((entry) => {
        return [new Date(entry.start), entry.value];
      });
view_layout:
  position: sidebar

Nu, laten we diep duiken en de code stukje bij beetje ontcijferen.

Uitleg van de Code

• type: custom:apexcharts-card: Dit specificeert dat we een aangepaste kaart van het type Apex willen gebruiken.

• apex_config:: Dit is waar de configuratie voor de Apex grafiek zelf begint.

  • chart:

    • width: 100%: Hiermee stellen we de breedte van de grafiek in als 100% van de beschikbare ruimte.

De lijst gaat verder, maar ik zal een paar interessante delen uitlichten:

Kleurdrempels

color_threshold:
  - value: -100
    color: blue
  ...

Dit gedeelte is fascinerend omdat het je toelaat om kleurdrempels in te stellen. Hiermee kun je visueel onderscheid maken tussen verschillende prijsniveaus. De kleur varieert van groen (goedkoop) tot donkerpaars/rood (duur).

Data Generatie

data_generator: |
  return entity.attributes.raw_today.map((entry) => {
    return [new Date(entry.start), entry.value];
  });

Dit stukje code is waar de magie gebeurt. We nemen de ruwe data van vandaag uit de attributen van de Nordpool sensor en zetten deze om in een formaat dat de Apex grafiek kan begrijpen.

Als je dezelfde gegevens voor de prijzen van morgen tonen doe dan dit

data_generator: |
  return entity.attributes.raw_tomorrow.map((entry) => {
    return [new Date(entry.start), entry.value];
  });

Conclusie

De Apex grafiekkaart in Home Assistant is een krachtig hulpmiddel dat, in combinatie met real-time energieprijzen van Nordpool, je kan helpen om slimmere energiekeuzes te maken. Met de code en uitleg die ik hier heb gegeven, hoop ik dat je nu de kennis hebt om je eigen energie-dashboard op te zetten.

Nu is het jouw beurt om het uit te proberen en je leven een stukje groener en efficiënter te maken!