⚡ Elenergiförbrukning - Bjerreds Saltsjöbad

×

📝 Projektinstruktioner (Prompt)

Ursprunglig Förfrågan:

Användaren begärde en interaktiv HTML-sida för att analysera elenergiförbrukning för Bjerreds Saltsjöbad mellan augusti 2024 och september 2025.

Krav och Specifikationer:

• Komplett HTML-sida: En självständig fil med all funktionalitet inkluderad
• Interaktiv tabell: Visar månadsdata med hover-effekter för detaljer
• Linjediagram: Visualiserar förbrukning, kostnad och pris per kWh över tid
• Jämförelsevärden: Beräknade förmodade värden baserat på säsongsmönster och faktisk användning
• Detaljvy: Vid hover över månad visas specifik information
• Två modalknappar:
  • En som visar projektinstruktionerna (denna modal)
  • En som beskriver tekniken som används
• Data: Utgå från användarens tabell, exkludera månader utan data
• Kommentarer: Detaljerade kommentarer i kod på svenska enligt användarens preferenser

Dataanalys Fokus:

• Elenergiförbrukning månad för månad
• Total kostnad och kostnad per kWh
• Variationer över årstider
• Fördelning mellan bad och restaurang
• Jämförelse mellan förmodat och faktiskt värde

Särskilda Noteringar:

Bastun/badet var stängt från mitten av februari 2025 till mitten av juli 2025. Från mitten av juli 2025 har anläggningen större bastu­utrymmen efter ombyggnad. Förmodade värden i diagrammen tar hänsyn till driftläge, övergångsmånader och skilda baslinjer före/efter ombyggnaden; de använder inte importerade temperaturserier (se «Förmodade värden — datakällor» under Teknik).

×

💻 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

Förmodade värden — datakällor

• Primär källa: Månadsdata i monthlyData i det här dokumentet (faktisk kWh och kostnad).
• Temperatur / utomhusklimat: Ingen inläsning från SMHI eller annat väder-API. Sydvästra Skånes (Bjärreds) mildare vinter relativt norra Sverige återspeglas bara indirekt genom er egen historiska förbrukning. För allmän klimat­bakgrund, se SMHI:s beskrivning av Sveriges klimat, t.ex. SMHI — långa mätserier och normalperioder.
• Säsong och kalendermånad: Grova vinter/sommar/vår-höst‑klasser används som reserv. För «Restaurang och bad» och «Bara restaurang» räknas också en månadsprofil (t.ex. snitt för alla januari månader i serie jämfört med helårssnitt) så januari kan bli en tydligare topp i den streckade linjen.
• Tolkning: Linjen «förmodad» är ett internt jämförelse­stöd, inte en prognos eller energi­expertmodell.

Hover-tooltips på nyckeltalskorten

De fyra LÅT-korten (Årsförbrukning, Kostnad inkl/exkl moms, Genomsnittspris) visar en mörk informationsruta när man håller muspekaren över kortet.

• Teknik: Ren CSS – position: absolute på tooltip-elementet kombinerat med opacity: 0 / visibility: hidden som standard, och opacity: 1 / visibility: visible via :hover-pseudoklassen på föräldrakortet. Ingen JavaScript krävs för att visa eller dölja rutan.
• Placering: Tooltiparna placeras alltid direkt nedanför kortet (top: calc(100% + 8px); left: 50%; transform: translateX(-50%)), centrerade horisontellt. Alla förälderelement har overflow: visible så rutan klipps aldrig.
• Innehåll: De tre LÅT-korten visar jämförelse med föregående 12-månadersperiod (fylls i av updateSummary()). Genomsnittspris-kortet visar beräkningsformeln (total kostnad ÷ total kWh) samt en förklaring till varför det viktade genomsnittspriset kan ligga nära vintermånadernas genomsnitt.
• Historik: Tidigare användes position: fixed med JavaScript-positionering via mouseenter. Den lösningen var opålitlig (inline-stilar överskuggade CSS-hoverns opacity). Ersattes 2026-06-09 med den nuvarande, enklare CSS-only-lösningen.

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.