⚡ Elenergiförbrukning - Bjerreds Saltsjöbad

🔥 Om Bastusystemet

Elförbrukningen på Bjerreds Saltsjöbad domineras av vårt professionella bastusystem med Harvia Qube 360 bastuaggregat på 36 kW. Aggregatet styrs av Harvia Pro C2 styrenhet via två reläboxar för att hantera den höga effekten.

Årsförbrukning (LÅT)

kWh/år

Årskostnad (LÅT inkl moms)

kr/år

Årskostnad (LÅT exkl moms)

kr/år

Genomsnittspris (inkl moms)

kr/kWh

Genomsnittspris (exkl moms)

kr/kWh

Totalt data

månader

ℹ️ Om Löpande Årstal (LÅT)

Löpande Årstal (LÅT) visar alltid förbrukning och kostnad för de senaste 12 månaderna. Detta ger en mer aktuell bild av årskostnaden jämfört med totalsummor. När ny data läggs till rullar perioden framåt automatiskt.

💡 Tips: Hovra över LÅT-korten för att se föregående 12-månadersperiod och jämföra hur förbrukning och kostnad förändras över tid!

Aktuell LÅT-period: -

🧾 När syns elkostnaden för en månad? Elfakturan för en kalendermånad kommer oftast först cirka tio dagar efter att månaden är slut (till exempel mars kostnad runt 10 april). Därför kan kostnad (kr) och kr/kWh för den senaste månaden vara 0 i datan tills beloppet är känt; förbrukning i kWh kan däremot fyllas i direkt när mätarvärden finns.

📊 Månadsförbrukning (kWh)

💰 Månadskostnad (kr)

📈 Pris per kWh (kr/kWh)

🏊‍♂️ Fördelning: Bad vs Restaurang

📋 Detaljerad Månadsöversikt

Månad	Typ av månad	Total kWh	kWh/dag	Bad (kWh)	Restaurang (kWh)	Kostnad (kr)	kr/kWh

💻 Teknisk Dokumentation

Teknologier som Används:

1. HTML5 (HyperText Markup Language)

Syfte: Strukturerar innehållet på sidan
Användning: Semantiska element som <div>, <table>, <canvas>
Meta-taggar: Viewport för responsiv design, charset UTF-8 för svenskt språkstöd

2. CSS3 (Cascading Style Sheets)

CSS-variabler: För konsekvent färgtema genom hela sidan
Flexbox & Grid: För responsiv layout
Transitions & Animations: Smooth hover-effekter och modal-animationer
Media Queries: Anpassning för mobila enheter
Box-shadow: Ger djup och visuell hierarki

3. JavaScript (ES6+)

DOM-manipulation: Dynamisk uppdatering av innehåll
Event-listeners: Interaktivitet för hover och klick
Array-metoder: map(), reduce(), filter() för databearbetning
Template literals: För dynamisk HTML-generering
Arrow functions: Modern funktionssyntax

4. Chart.js Bibliotek

Version: Senaste från CDN
Diagramtyper: Line charts för tidsseriedata
Anpassningar: Tooltips, färgscheman, responsivitet
Datasets: Flera linjer per diagram för jämförelse

Kodstruktur:

Data-array: All månadsdata lagras i ett JavaScript-objekt
Funktioner:
- calculateExpectedValues() - Beräknar förmodade värden
- createCharts() - Initierar alla diagram
- populateTable() - Fyller tabellen med data
- updateSummary() - Uppdaterar sammanfattningskort
- openModal()/closeModal() - Hanterar modalfönster

Design Principer:

Responsiv design: Fungerar på desktop, tablet och mobil
Tillgänglighet: Kontrastrikt färgschema, tydlig typografi
Användarupplevelse: Smooth animationer, visuell feedback
Performance: Optimerad rendering, lazy loading av data

Browser-kompatibilitet:

Koden fungerar i alla moderna webbläsare (Chrome, Firefox, Safari, Edge) som stöder ES6+ och Canvas API.