×
💻 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:
createCharts() - Initierar alla diagrampopulateTable() - Fyller tabellen med dataupdateSummary() - Uppdaterar sammanfattningskortopenModal()/closeModal() - Hanterar modalfönster
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.
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 bastuutrymmen efter ombyggnad.