From 368291e562d6bdaafe0f99d93a84aabaae4f4963 Mon Sep 17 00:00:00 2001 From: Dusan Vojacek Date: Thu, 11 Jun 2026 14:15:02 +0200 Subject: [PATCH] =?UTF-8?q?Audity=20frontendu:=20v=C3=BDkon=20+=20responsi?= =?UTF-8?q?vita=20(2026-06-11)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Výkon: dominují DB read-modely — fn_plan_current_bundle 3.8 s, fn_site_full_status 1.7 s (měřeno na živé DB); dále payloady, polling, chybějící virtualizace Planning tabulky, bundle 1.2 MB bez chunking. Responsivita: pevné výšky grafů, tooltip × StatePanel/tabulka kolize na touch, StatePanel grid, breakpointy. Plné detaily a fixy v docs/audits/. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../audits/frontend-performance-2026-06-11.md | 26 +++++++++++++++++++ docs/audits/frontend-responsive-2026-06-11.md | 24 +++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 docs/audits/frontend-performance-2026-06-11.md create mode 100644 docs/audits/frontend-responsive-2026-06-11.md diff --git a/docs/audits/frontend-performance-2026-06-11.md b/docs/audits/frontend-performance-2026-06-11.md new file mode 100644 index 0000000..74729d5 --- /dev/null +++ b/docs/audits/frontend-performance-2026-06-11.md @@ -0,0 +1,26 @@ +# Audit výkonu frontendu (2026-06-11) + +Měřeno na živé DB (site_id=2) + statická analýza kódu a bundle. Plný kontext: agent audit. + +## TOP problémy podle dopadu + +| # | Problém | Měření | Kde | Fix | +|---|---------|--------|-----|-----| +| 1 | **fn_plan_current_bundle 3 824 ms** | přímé měření DB | `/sites/{id}/plan/current`, `useDashboardData.ts:205`, poll 30 s | SQL optimalizace fn (viz samostatná analýza), SWR pattern na FE | +| 2 | **fn_site_full_status 1 719 ms** | přímé měření DB | `useFullStatus.ts:21`, poll 60 s | SQL optimalizace, poll 120 s | +| 3 | Promise.all čeká na nejpomalejší (3.8 s) | logika | `useDashboardData.ts:174-406` | 2 vlny: kritická (status ~100 ms) → extended (plan/telemetrie) | +| 4 | vw_telemetry_15m_7d limit 1000 (~450 KB), graf zobrazí 384 | logika | `useDashboardData.ts:212-216` | dynamický limit ~420 | +| 5 | Planning.tsx tabulka 400+ řádků × 16 sloupců bez virtualizace | ~6400 DOM nodes | `Planning.tsx:1618-1846` | react-window / tanstack-virtual | +| 6 | Recharts `Cell` mapování 384× v render | logika | `Planning.tsx:1557-1564` | custom shape / barva v datech | +| 7 | Duplicitní výpočty slotFveDisplayW | CPU | `Planning.tsx:122-232` | fveW do PlanTableRow | +| 8 | Bundle 1.2 MB bez chunking, eager routes | dist měření | `vite.config.ts`, `main.tsx` | manualChunks (recharts/nivo/react), lazy routes | +| 9 | Agresivní polling 30 s/5 s | 120 req/h | `useDashboardData.ts:28-29` | 60 s / 15 s + backoff | +| 10 | getMySites → context → data waterfall | 1× při startu | `SiteSelectionContext.tsx` | fallback UI | + +## Souhrn initial load +~4 300 ms server time (dominuje fn_plan_current_bundle), ~1 185 KB payload, +1.2 MB bundle (cold). + +## Priority +1. **Backend SQL**: fn_plan_current_bundle + fn_site_full_status (největší dopad, řeší se samostatně). +2. **FE quick wins**: polling 60/15 s, telemetry limit 420, lazy routes + manualChunks. +3. **FE větší**: 2-vlnové načítání, virtualizace Planning tabulky, memoizace. diff --git a/docs/audits/frontend-responsive-2026-06-11.md b/docs/audits/frontend-responsive-2026-06-11.md new file mode 100644 index 0000000..c55ed63 --- /dev/null +++ b/docs/audits/frontend-responsive-2026-06-11.md @@ -0,0 +1,24 @@ +# Audit responsivity frontendu (2026-06-11) + +Hlášené problémy: grafy na mobilu špatně zobrazené; tooltip při dotyku koliduje s detailní tabulkou. + +## Inventura problémů + +| Problém | Kde | Fix | +|---------|-----|-----| +| Pevné výšky grafů (260/380/280/100 px) na všech zařízeních | `EnergyChart.tsx:329`, `EconomicsChart.tsx:110`, `PriceChart.tsx:84`, `SocTuvChart.tsx:238` | responsive výšky (140/200/260 dle breakpointu), aspect-ratio | +| **Tooltip × StatePanel kolize** (Chart.js tooltip absolutně pozicovaný, na touch zůstává) | `Dashboard.tsx:323-354` | touch-aware tooltip: na touch tap-to-pin do vyhrazeného panelu NAD grafem, ne overlay; ESC/tap-out zavření | +| **Planning detail řádku koliduje při scrollu** | `Planning.tsx:1016-1170` (PlanSlotDetail) | kontejner `position:relative`, detail jako řádek tabulky (ne absolutní), na mobilu modal/bottom-sheet | +| StatePanel grid `[52px_1fr]` na <380 px | `StatePanel.tsx:446` | label nad track na mobilu (`md:grid-cols-[52px_1fr]`) | +| Metric karty breakpointy (úzké na tabletu) | `Dashboard.tsx:193`, `Economics.tsx:250`, `EnergyFlows.tsx:199` | doplnit `md:` stupeň | +| ControlPanel tabulka maxHeight 400px | `ControlPanel.tsx:181-227` | responsive výška | +| Touch targets < 44 px, drobné fonty 10-11 px | globálně | CSS min-height 44px na interactive, media font scaling | +| tailwind.config bez custom breakpointů/výšek | `tailwind.config.ts` | chart-sm/md/lg výšky | +| viewport bez `viewport-fit=cover` | `index.html` | doplnit | + +## Doporučené pořadí +1. **Kritické**: tailwind config + responsive výšky grafů, StatePanel mobile, viewport, Planning detail position. +2. **Vysoké**: touch-aware tooltip (tap-to-pin) pro Chart.js i Recharts. +3. **Střední**: grid breakpointy všude, ControlPanel, font scaling, touch targets. + +Odhad: ~220–250 řádků změn napříč ~13 soubory.