# Zadanie 3: Frontend
## Cel
Czysta, prosta aplikacja webowa (SPA bez frameworka, bez buildu) serwowana przez GitHub Pages, umożliwiająca przeglądanie cen energii TGE w formie wykresu oraz kalkulację całkowitego kosztu z uwzględnieniem taryfy dystrybucji.
---
## Stack technologiczny
| Warstwa | Technologia | Uzasadnienie |
|---------|-------------|--------------|
| HTML | Vanilla HTML5 | Brak buildu, GitHub Pages bez konfiguracji |
| CSS | Tailwind CSS (CDN) | Szybki development, responsywność out-of-box |
| JS | Vanilla ES2022 (modules) | Brak bundlera, natywne `import/export` |
| Wykresy | Chart.js 4.x (CDN) | Dojrzała biblioteka, łatwe wykresy słupkowe i liniowe |
| Daty | Day.js (CDN) | Lekki, wystarczający do operacji na datach |
Brak npm, brak webpack, brak React. Pliki serwowane bezpośrednio.
---
## Struktura plików
```
web/
├── index.html ← Główna strona
├── js/
│ ├── app.js ← Punkt wejścia, inicjalizacja
│ ├── api.js ← Pobieranie danych z JSON (fetch)
│ ├── chart.js ← Konfiguracja i renderowanie Chart.js
│ ├── tariffs.js ← Logika kalkulatora taryf (z task-2)
│ └── holidays.js ← Polskie święta dla logiki taryf G12
└── css/
└── style.css ← Tylko niestandardowe style (animacje itp.)
```
---
## Makieta interfejsu
```
┌────────────────────────────────────────────────────────────────────┐
│ CenyPradu ⚡ [dziś] [historia] │
├────────────────────────────────────────────────────────────────────┤
│ │
│ Data dostawy: [◄] 2026-02-28 [►] Taryfa: [Tauron G11 ▼] │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Cena TGE (PLN/MWh) Koszt całkowity (PLN/kWh) │ │
│ │ ████████████████████████████ ─────────────────────────── │ │
│ │ 500 ┤ █ 0.80 ┤ ▓ │ │
│ │ 400 ┤ █████ █ 0.70 ┤ ▓▓▓▓▓▓▓▓ │ │
│ │ 300 ┤ ████████ 0.60 ┤ ▓▓▓▓▓▓ │ │
│ │ 200 ┤█████ 0.50 ┤▓▓▓ │ │
│ │ └────────────────────── └────────────────────── │ │
│ │ 1 3 5 7 9 11 13 15 1 3 5 7 9 11 13 15 │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Min │ │ Średnia │ │ Max │ │
│ │ 215 PLN/MWh │ │ 342 PLN/MWh │ │ 521 PLN/MWh │ │
│ │ 03:00-04:00 │ │ TGe24 │ │ 20:00-21:00 │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ──────────────────────────────────────────────────────────────── │
│ Historia: [2026-02] [2026-01] [2025-12] ... │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Wykres miesięczny: TGe24 (średnia dobowa) │ │
│ │ ████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────────┘
```
---
## Specyfikacja widoków
### Widok 1: Ceny dnia (domyślny)
**URL:** `/web/index.html` lub `/web/`
**Elementy:**
- Nawigacja dat: `[◄ poprzedni] [Data dostawy: YYYY-MM-DD] [następny ►]`
- "Dziś" pokazuje najnowszy dostępny dzień (z `index.json`)
- Strzałki ◄/► zmieniają datę o ±1 dzień
- Brak danych dla danej daty = szary przycisk, disabled
- Wybór taryfy: dropdown z listą wszystkich plików z `tariffs/`
- Format: "Tauron G11", "Tauron G12", "Energa G11", itp.
- Domyślnie: brak taryfy (pokazuje tylko ceny TGE)
- Wykres godzinowy: słupkowy (bar chart) Chart.js
- Os X: godziny H01–H24
- Lewa oś Y: cena TGE w PLN/MWh (kolor niebieski)
- Prawa oś Y (opcjonalna): koszt całkowity w PLN/kWh (kolor pomarańczowy, widoczny gdy wybrana taryfa)
- Tooltip po najechaniu: godzina, cena TGE, koszt całkowity
- Karty statystyk:
- Min: najniższa cena + godzina
- Średnia: TGe24
- Max: najwyższa cena + godzina
### Widok 2: Historia
**Elementy:**
- Przełącznik miesiąca: `[◄] 2026-02 [►]`
- Wykres liniowy: oś X = dni miesiąca, oś Y = TGe24 (średnia dobowa PLN/MWh)
- Kliknięcie w punkt otwiera widok 1 dla danego dnia
---
## `web/index.html` — struktura
```html
CenyPradu — Ceny energii TGE
Ładowanie...
Średnia (TGe24)
—
PLN/MWh
```
---
## `web/js/api.js` — pobieranie danych
```javascript
// Baza URL GitHub Pages — dostosuj do właściwego URL
const BASE_URL = window.location.hostname === "localhost"
? "http://localhost:8000"
: "https://KrzysztofHajdamowicz.github.io/CenyPradu";
/**
* Pobierz index.json z listą dostępnych dat.
* @returns {Promise<{dates: string[], latest: string, updated_at: string}>}
*/
export async function fetchIndex() {
const res = await fetch(`${BASE_URL}/data/prices/index.json`);
if (!res.ok) throw new Error(`Błąd pobierania index.json: ${res.status}`);
return res.json();
}
/**
* Pobierz ceny dla danej daty.
*
* Format odpowiedzi:
* {
* "date": "2026-02-28",
* "unit": "PLN/MWh",
* "prices": [
* {"time": "2026-02-28 00:00:00+01:00", "price": 312.50},
* {"time": "2026-02-28 01:00:00+01:00", "price": 298.00},
* ...
* ]
* }
*
* Lista prices jest posortowana rosnąco wg time.
* Zwykle 24 elementy; 23 przy spring-forward, 25 przy fall-back.
*
* @param {string} date - format YYYY-MM-DD
* @returns {Promise<{date: string, unit: string, prices: Array<{time: string, price: number}>}>}
*/
export async function fetchPrices(date) {
const res = await fetch(`${BASE_URL}/data/prices/${date}.json`);
if (!res.ok) throw new Error(`Brak danych dla daty ${date}`);
return res.json();
}
/**
* Pomocnik: wyciągnij tablicę samych cen (number[]) z odpowiedzi fetchPrices.
* Przydatne do obliczeń statystycznych.
* @param {{prices: Array<{time: string, price: number}>}} pricesData
* @returns {number[]}
*/
export function extractPriceValues(pricesData) {
return pricesData.prices.map(p => p.price);
}
/**
* Pomocnik: wyciągnij etykiety godzin do osi X wykresu.
* Np. "00:00", "01:00", ..., "23:00"
* @param {{prices: Array<{time: string, price: number}>}} pricesData
* @returns {string[]}
*/
export function extractHourLabels(pricesData) {
return pricesData.prices.map(p => p.time.slice(11, 16)); // "HH:MM"
}
/**
* Pobierz plik taryfy.
* @param {string} tariffId - np. "tauron-g11"
* @returns {Promise