Grafy, které vyprávějí léčbu

Nestavíme „graf váhy v čase“. Stavíme argument. Každá vrstva grafu existuje jen proto, aby nesla část věty:

Tahle rozhodnutí jsou závazná. Pokud si myslíš, že je některé špatně, otevři diskusi před implementací — neodchyluj se potichu.

1. L1Veškerý pohyb řídí jeden skalár 0→1. Každá animovaná vlastnost je jeho čistou funkcí.
2. L2Trend je hrdina; syrové denní body jsou jen slabý rozptyl za ním.
3. L3Default osy Y je % změny od výchozí váhy; kg jsou přepínač.
4. L4Osa Y nikdy nezačíná nulou.
5. L5Regain úseky jsou viditelné a barevně odlišené — ne červeně, ne skrytě.
6. L6Žádný případ se nikdy neřadí proti jinému. Žádný „nejlepší výsledek“.
7. L7Srovnání = kohorta (grid + obálka), nikdy překryté pojmenované linky.
8. L8Každá intervence nese dva popisky: lidský primární, klinický sekundární.
9. L9Mobile-first. Desktop je rozšíření.
10. L10Statický stav musí být úplný a správný dřív, než se přidá pohyb.

Jediný zdroj pravdy je blok @theme v globals.css. V komponentách nikdy nesmí být hex — jen sémantické třídy (stroke-data, fill-card…). Rebrand pro klienta je pak změna jednoho řádku.

• Písmo Geist (latin + latin-ext kvůli češtině); mono jen pro kódy.
• Všechna čísla s tabular-nums — countery při animaci nesmí poskakovat: −20,5 kg · −14,6 %
• Formát cs-CZ přes lib/format.ts: desetinná čárka, delty vždy se znaménkem (+2,1 / −20,5), osy bez desetin.
• Datumy: v pruzích a stepperu „11/2017 – 12/2018“, v readoutu měsíc slovem („listopad 2019“), na ose jen roky.

Tohle je skutečná produkční komponenta CaseChart s referenčním případem (KAZ-001). Všechno níž je interaktivní: přehrávání, scrub, kapitoly, hover na pruhy, přepínač jednotek.

1. 1Syrová domácí vážení — rozptyl, 15 % opacita, nikdy v popředí (L2)
2. 2Trend — LOESS přes 45denní časové okno, tyrkysově
3. 3Úseky návratu — stejná linka, barva regain (L5)
4. 4Ambulantní měření — kroužky s fialovým okrajem
5. 5BMI osa vpravo — lineární přeškálování kg, jedna křivka, dvě osy
6. 6Pruhy intervencí — řádek na kategorii, sdílená osa X
7. 7Beat chips — delty, BMI, poznámky; kolizní layout s vodicími linkami
8. 8Moment operace — svislá čárkovaná; křivka se ohýbá za ní
9. 9Otevřený konec — kroužek „léčba pokračuje“; nikdy plná tečka
10. 10Transport — play/pauza, scrub, kapitoly odvozené z intervencí

Zdrojová data jsou ~2 000 denních vážení — syrově vykreslená jsou čmáranice. Trend počítá LOESS: lokální lineární regrese s tricube váhami přes časové okno (ne okno po indexech — data mají mezery). Lokálně-lineární fit drží koncové body a zlomy bez zpoždění klouzavého průměru, a zlomy jsou přesně to, kde se vypráví příběh.

• Default šířka pásma 45 dní — trajektorie, ne vlnovka.
• Pod 20 bodů se vyhlazení automaticky vypne a kreslí se spojené zvýrazněné body (O3). Případ KAZ-005 je toho živou ukázkou.
• Detekce návratů: hystereze nad vyhlazeným trendem — vzestup ≥ 2,5 kg od lokálního minima otevírá úsek, pokles ≥ ½ prahu ho zavírá. Drobné vlnky úsek nerozbijí.

• Dvojí popisky (L8): primárně lidsky („injekce na hubnutí“), klinicky na hover/tap („Liraglutid 3,0 mg · 3,0 mg 1× denně“). Pacient nesmí potřebovat slovník.
• Hover propojení: najetí na pruh zvýrazní jeho úsek křivky fialovou a ztlumí zbytek. Tohle je jádro layoutu — ohyb za pruhem.
• Kolize chips: preferovaná pozice nad kotvou na trendu; při překryvu se chip posouvá po 22px krocích nahoru, pak pod bod. Posunuté chips dostanou vodicí linku. Překryv není nikdy přípustný — na žádném breakpointu.
• Mobil (L9): pruhy se skládají do svislého stepperu pod grafem — chronologické akty s tečkami podle kategorie, NOTE beats vložené mezi ně. Nikdy jen zmenšený Gantt.
• Bodové zákroky: operace je diamant + čárkovaná svislice; nemá interval, takže nikdy neukazuje „0 kg“ — píše se „jednorázový zákrok“ a efekt nese DELTA beat za ním.

usePlayhead vrací jediný MotionValue 0→1 (L1). Neexistuje timeline orchestrace: každá animovaná vlastnost je čistá funkce skaláru, takže scrub vzad nemůže nic rozbít a reduced-motion je prostě „skalár = 1“.

• Autoplay jednou při scrollu do view. Nikdy loop.
• prefers-reduced-motion: okamžitě kompletní finální stav, transport se vůbec nevykreslí. Žádná „rychlejší animace“.
• Vrchol není minimum. Časování je lineární a příběh pokračuje za minimem k otevřenému konci. Pokud animace nedokáže ukázat „ohyb za intervencí“, škrtá se — jiné ospravedlnění nemá.

Filtry (pohlaví, věk, vstupní BMI, druh léčby) vedou na grid karet + souhrnnou obálku: medián a mezikvartilové rozmezí v % od výchozí váhy, na ose „čas od začátku léčby“. Obálka se kreslí jen tam, kde má data ≥ 3 případy — nikdy nedegraduje na jednotlivé linky.

Zdroj pravdy je zod schéma v data/schema.ts. Reálná měření budou přicházet z platformy Čas pro zdraví; případ je JSON:

{
  "id": "stefurak", "pid": "KAZ-001",
  "title": "Osm let léčby: …",
  "narrative": "… **léčba nikdy nekončí** …",   // markdown
  "patient": { "sex": "M", "ageAtStart": 40, "heightCm": 169,
               "diagnoses": ["DIA", "KARDIO", "OSA"] },
  "measurements": [ { "date": "2016-03-01", "weightKg": 142.0,
                      "source": "CLINIC" }, … ],   // CLINIC | HOME
  "interventions": [ { "category": "PHARMA", "code": "LIRA-1",
      "labelPlain": "injekce na hubnutí",          // ← primární (L8)
      "labelClinical": "Liraglutid 3,0 mg",        // ← sekundární
      "start": "2017-11-01", "end": "2018-12-31" }, … ],  // end: null = běží
  "beats": [ { "type": "DELTA", "from": "…", "to": "…", "text": "−20,5 kg …" },
             { "type": "BMI", "at": "…", "text": "BMI 49,7 – …" },
             { "type": "NOTE", "at": "…", "text": "návrat během pandemie" } ]
}

• Odvozené hodnoty se nikdy neukládají. BMI, pásma, delty, kapitoly, regainy — všechno počítá lib/derive.ts a vyhlazení. Uložená pásma jsou přesně to, co rozbilo klientův Excel.
• parseCase() vyhazuje čitelné české chyby — špatný JSON se dozví co a kde má špatně.
• Beats jsou autorská vrstva (editor rozhoduje, co je úder příběhu); delty per intervence jsou odvozená vrstva (hover). Nemíchat.

Nová kazuistika v 5 krocích: ① JSON podle schématu (měření seřazená, intervence s oběma popisky) → ② 3–8 beats → ③ registrace v data/cases/index.ts → ④ npm test (validace + vlastnosti) → ⑤ vizuální kontrola na 360 px. Stránka i karta vzniknou samy.

• ✓Čitelné na 360 px; žádný překryv anotací na žádném breakpointu
• ✓Viditelný keyboard focus na každém ovládacím prvku; scrub ovladatelný šipkami
• ✓prefers-reduced-motion = kompletní finální stav okamžitě
• ✓Žádný hex mimo @theme; žádné localStorage/sessionStorage
• ✓Všechna čísla tabular-nums, formáty přes lib/format.ts
• ✓Regain viditelný a klidný; konec příběhu otevřený, ne minimum
• ✓npm test zelený (schéma, derive, vyhlazení, vlastnosti seed dat)
• ✓Graf vykreslitelný ve fixních rozměrech bez interaktivního chrome (budoucí PNG export, O5)

Otevřené body do dalších verzí: sekundární metriky (glykémie, tlak — layout slot rezervován, O4) · PNG export pro PowerPoint (O5) · napojení na reálná data z platformy Čas pro zdraví.