diff --git a/Elpriser-pr.-time-%28Dynamisk-farve%29.md b/Elpriser-pr.-time-%28Dynamisk-farve%29.md new file mode 100644 index 0000000..a6b323c --- /dev/null +++ b/Elpriser-pr.-time-%28Dynamisk-farve%29.md @@ -0,0 +1,598 @@ +# Elpriser – ApexCharts + +Dette dashboard-card viser elprisen time for time for de næste 48 timer. + +Priserne vises med dynamiske farver baseret på gennemsnitsprisen: + +| Prisniveau | Grænse | Farve | +|---|---:|---| +| Billig | < 80 % af gennemsnittet | 🟢 Grøn | +| Normal | 80–120 % af gennemsnittet | 🟡 Gul | +| Dyr | 120–150 % af gennemsnittet | 🟠 Orange | +| Meget dyr | ≥ 150 % af gennemsnittet | 🔴 Rød | + +Derudover vises en blå linje med elprisen ekskl. afgifter. + +--- + +## Krav + +Følgende skal være installeret i Home Assistant: + +- Home Assistant +- HACS +- Energi Data Service +- ApexCharts Card + +--- + +# 1. Installer Energi Data Service + +## Via HACS + +Energi Data Service er en Home Assistant-integration, som henter elpriser fra Energi Data Service API'et. + +Åbn: + +**Home Assistant → HACS → Integrations** + +Søg efter: + +```text +Energi Data Service +``` + +Vælg: + +```text +Energi Data Service +MTrab +``` + +Tryk: + +**Download** + +Genstart derefter Home Assistant. + +--- + +## Tilføj integrationen + +Efter genstart: + +**Settings → Devices & services → Add Integration** + +Søg efter: + +```text +Energi Data Service +``` + +Vælg integrationen. + +### Grundopsætning + +Vælg de relevante indstillinger for installationen. + +For Danmark skal der blandt andet vælges korrekt prisområde. + +Typisk: + +```text +DK1 +``` + +eller + +```text +DK2 +``` + +afhængigt af installationens placering. + +### Priser inkl. moms + +Hvis priserne ønskes vist inkl. moms, skal: + +```text +Show prices in VAT +``` + +aktiveres. + +Dette er vigtigt, da ApexCharts-card'et bruger den pris, som Energi Data Service-integrationen leverer. + +--- + +# 2. Sensorer + +Card'et bruger følgende sensorer: + +```text +sensor.energi_data_service +sensor.elpriser_excl_afgift +``` + +Den primære sensor er: + +```text +sensor.energi_data_service +``` + +Denne sensor indeholder blandt andet: + +```text +today_mean +raw_today +raw_tomorrow +tomorrow_valid +``` + +Card'et bruger disse attributter til at generere grafen. + +--- + +# 3. Installer ApexCharts Card + +Card'et kræver: + +```text +custom:apexcharts-card +``` + +Den anbefalede måde at installere custom cards på er via HACS. + +Åbn: + +**HACS → Frontend** + +Søg efter: + +```text +ApexCharts Card +``` + +Installer: + +```text +ApexCharts Card +``` + +Genindlæs Home Assistant efter installationen. + +--- + +# 4. Tilføj Card'et + +Åbn det dashboard, hvor Card'et skal placeres. + +Vælg: + +**Edit Dashboard → Add Card → Manual** + +Indsæt følgende YAML: + +```yaml +type: grid +columns: 1 +square: false +cards: + - type: grid + columns: 1 + square: false + cards: + - type: custom:apexcharts-card + apex_config: + chart: + height: 350 + header: + title: Elpriser pr. time (dynamiske farver) + show: true + show_states: false + graph_span: 48h + now: + show: true + label: Nu + span: + start: day + all_series_config: + unit: ' kr.' + yaxis: + - min: 0 + apex_config: + tickAmount: 6 + series: + - entity: sensor.energi_data_service + name: Billig + type: column + color: '#4CAF50' + show: + legend_value: false + data_generator: > + let data = []; + + const avg = entity.attributes.today_mean; + + const greenLimit = avg * 0.8; + + let prices = entity.attributes.raw_today || []; + + if (entity.attributes.tomorrow_valid && + entity.attributes.raw_tomorrow) { + prices = prices.concat(entity.attributes.raw_tomorrow); + } + + prices.forEach(item => { + const p = item.price; + + data.push([ + new Date(item.hour).getTime(), + p < greenLimit ? p : null + ]); + }); + + return data; + + - entity: sensor.energi_data_service + name: Normal + type: column + color: '#FFEB3B' + show: + legend_value: false + data_generator: > + let data = []; + + const avg = entity.attributes.today_mean; + + const greenLimit = avg * 0.8; + const orangeLimit = avg * 1.2; + + let prices = entity.attributes.raw_today || []; + + if (entity.attributes.tomorrow_valid && + entity.attributes.raw_tomorrow) { + prices = prices.concat(entity.attributes.raw_tomorrow); + } + + prices.forEach(item => { + const p = item.price; + + data.push([ + new Date(item.hour).getTime(), + (p >= greenLimit && p < orangeLimit) ? p : null + ]); + }); + + return data; + + - entity: sensor.energi_data_service + name: Dyr + type: column + color: '#FF9800' + show: + legend_value: false + data_generator: > + let data = []; + + const avg = entity.attributes.today_mean; + + const orangeLimit = avg * 1.2; + const redLimit = avg * 1.5; + + let prices = entity.attributes.raw_today || []; + + if (entity.attributes.tomorrow_valid && + entity.attributes.raw_tomorrow) { + prices = prices.concat(entity.attributes.raw_tomorrow); + } + + prices.forEach(item => { + const p = item.price; + + data.push([ + new Date(item.hour).getTime(), + (p >= orangeLimit && p < redLimit) ? p : null + ]); + }); + + return data; + + - entity: sensor.energi_data_service + name: Meget dyr + type: column + color: '#F44336' + show: + legend_value: false + data_generator: > + let data = []; + + const avg = entity.attributes.today_mean; + + const redLimit = avg * 1.5; + + let prices = entity.attributes.raw_today || []; + + if (entity.attributes.tomorrow_valid && + entity.attributes.raw_tomorrow) { + prices = prices.concat(entity.attributes.raw_tomorrow); + } + + prices.forEach(item => { + const p = item.price; + + data.push([ + new Date(item.hour).getTime(), + p >= redLimit ? p : null + ]); + }); + + return data; + + - entity: sensor.elpriser_excl_afgift + name: Excl. afgifter + type: line + color: '#03A9F4' + stroke_width: 4 + extend_to: false + show: + extremas: true + legend_value: false + data_generator: | + let data = []; + + if (entity.attributes.raw_today) { + data = entity.attributes.raw_today.map((item) => [ + new Date(item.hour).getTime(), + item.price + ]); + } + + if (entity.attributes.tomorrow_valid && + entity.attributes.raw_tomorrow) { + data = data.concat( + entity.attributes.raw_tomorrow.map((item) => [ + new Date(item.hour).getTime(), + item.price + ]) + ); + } + + return data; + grid_options: + rows: auto + columns: full +grid_options: + rows: auto + columns: full +``` + +--- + +# 5. Sådan fungerer Card'et + +Card'et viser data for: + +```text +48 timer +``` + +Det starter ved begyndelsen af den aktuelle dag: + +```yaml +span: + start: day +``` + +Der vises desuden en markering for det aktuelle tidspunkt: + +```yaml +now: + show: true + label: Nu +``` + +--- + +## Prisberegning + +Card'et bruger gennemsnitsprisen fra: + +```javascript +entity.attributes.today_mean +``` + +Gennemsnitsprisen bruges til at beregne tre grænser. + +### Grøn grænse + +```javascript +const greenLimit = avg * 0.8; +``` + +Priser under 80 % af gennemsnittet vises som grønne. + +### Orange grænse + +```javascript +const orangeLimit = avg * 1.2; +``` + +Priser mellem 120 % og 150 % af gennemsnittet vises som orange. + +### Rød grænse + +```javascript +const redLimit = avg * 1.5; +``` + +Priser på eller over 150 % af gennemsnittet vises som røde. + +--- + +# 6. I dag og i morgen + +Card'et henter først priserne for i dag: + +```javascript +entity.attributes.raw_today +``` + +Hvis morgendagens priser er tilgængelige, tilføjes de automatisk: + +```javascript +if (entity.attributes.tomorrow_valid && + entity.attributes.raw_tomorrow) { +``` + +Dermed kan grafen vise både: + +```text +I dag ++ +I morgen +``` + +--- + +# 7. Blå linje – pris ekskl. afgifter + +Den blå linje kommer fra: + +```text +sensor.elpriser_excl_afgift +``` + +Den vises som en linjegraf: + +```yaml +type: line +color: '#03A9F4' +stroke_width: 4 +``` + +Denne serie viser den rå elpris uden afgifter. + +--- + +# 8. Hvis grafen ikke viser data + +Hvis Card'et viser: + +```text +Loading... +``` + +eller ingen priser, kontroller først: + +### Kontroller sensoren + +Gå til: + +**Developer Tools → States** + +Søg efter: + +```text +sensor.energi_data_service +``` + +Kontroller at sensoren eksisterer. + +--- + +### Kontroller attributterne + +Sensoren skal blandt andet have: + +```text +today_mean +raw_today +``` + +Hvis morgendagens priser er tilgængelige, skal den også have: + +```text +tomorrow_valid +raw_tomorrow +``` + +--- + +### Kontroller ApexCharts + +Kontroller at: + +```text +custom:apexcharts-card +``` + +er installeret via HACS. + +Prøv eventuelt at genindlæse browseren med: + +```text +CTRL + F5 +``` + +--- + +# 9. Afhængigheder + +| Komponent | Funktion | +|---|---| +| Home Assistant | Platform | +| HACS | Installation af custom integrationer/cards | +| Energi Data Service | Leverer elpriser | +| ApexCharts Card | Viser grafen | +| `sensor.energi_data_service` | Primær prisdata | +| `sensor.elpriser_excl_afgift` | Pris uden afgifter | + +--- + +# 10. Kort installation + +Hvis Home Assistant allerede har HACS installeret: + +```text +1. HACS +2. Integrations +3. Energi Data Service +4. Download +5. Genstart Home Assistant +6. Settings → Devices & services +7. Add Integration +8. Energi Data Service +9. Vælg prisområde +10. Installer ApexCharts Card via HACS → Frontend +11. Tilføj Card'et til dashboardet +``` + +--- + +# 11. Filer + +Hvis Card'et gemmes som en separat YAML-fil, kan det eksempelvis gemmes som: + +```text +elpriser.yaml +``` + +eller: + +```text +elpriser_apexcharts.yaml +``` + +Selve Card'et er YAML, mens `data_generator`-sektionerne indeholder JavaScript, som ApexCharts bruger til at beregne og sortere datapunkterne. + +--- + +## Kilder + +- Energi Data Service – GitHub: + https://github.com/MTrab/energidataservice +- HACS: + https://www.hacs.xyz/ +- ApexCharts Card: + https://github.com/RomRider/apexcharts-card