Grafy na dashboardu bez jediné závislosti
Trendové křivky, sparkliny i pruhy kategorií na našem dashboardu jsou obyčejné inline SVG. Žádná knihovna na grafy, dohromady pár set řádků a tmavý režim zadarmo. Proč se vyplatí psát grafy ručně a kdy to naopak rozhodně nedělat.
Když jsme přidávali skladový dashboard, nabízelo se nainstalovat knihovnu na grafy. Ty populární jsou výborné. Jsou také velké, mají vlastní představu o motivech a jsou stavěné na tisíc případů, zatímco my jsme potřebovali čtyři: trendovou křivku o dvou řadách, sparklinu na řádek, pruh se stavem zásob a rozpad podle kategorií. Napsali jsme je jako inline SVG a celá sada vyšla menší než definice typů u většiny knihoven.
Graf je jen jedna cesta
Odeberte nástroje a z čárového grafu zbude jeden řetězec: SVG path poskládaná z vašich hodnot. Index každého bodu namapujte na x, každou hodnotu na y a spojte je. Jediná jemnost, kterou stojí za to si zapsat, je odsazení: maximum mapujte pár pixelů pod horní hranu, jinak vám viewBox rozřízne tah ve vrcholu napůl.
const W = 300, H = 80, PAD = 3; // top pad so the peak stroke is not clippedconst max = Math.max(1, ...values);const x = (i) => (i / (values.length - 1)) * W;const y = (v) => PAD + (H - PAD) * (1 - v / max); const d = values .map((v, i) => `${i === 0 ? 'M' : 'L'}${x(i).toFixed(1)} ${y(v).toFixed(1)}`) .join(' '); // <path d={d} fill="none" stroke="var(--color-primary)" strokeWidth="2" />Tmavý režim nestojí nic
Tichá výhra jsou motivy. Naše design tokeny jsou CSS proměnné a SVG tahy i výplně je berou jako každou jinou vlastnost. stroke="var(--color-primary)" znamená, že se graf přebarví ve chvíli, kdy se přepne motiv, bez konfigurace motivu na úrovni grafu, bez zdvojené palety a bez rozjíždění mezi grafy a zbytkem rozhraní. Když jsme později ladili tmavou paletu, grafy šly s ní, aniž bychom se jich dotkli.
Okrajové případy jsou vaše
Knihovny jsou štědré na funkce a skoupé na okrajové případy, které máte jen vy. Co má sparklina udělat s jediným datovým bodem? Co řekne trendový graf podniku, který právě začal a všechny hodnoty má nulové? Ručně psané komponenty dělají tahle rozhodnutí viditelná a levná: poctivý prázdný stav s jednou větou, rovná čára místo pádu, textové shrnutí vedle každého grafu pro čtečky obrazovky a jediný media dotaz prefers-reduced-motion, který vypne vykreslovací animaci.
- Dejte každému grafu aria-label a shrnutí běžnou řečí. SVG je ozdoba, data jsou v té větě.
- Tahy animujte pomocí stroke-dashoffset, ať se graf jakoby kreslí, a schovejte to za prefers-reduced-motion.
- Nechte matematiku a značkování pohromadě. Komponentu grafu, kterou přečtete odshora dolů na jedné obrazovce, spravíte i v 11 večer.
- Prázdný stav navrhněte jako první. Nové účty ho vidí častěji než kterýkoli jiný.
Kdy knihovnu použít
Psát grafy ručně přestane být chytré ve chvíli, kdy požadavkům narostou zuby. Zoom a výběr rozsahu, logaritmické škály, skládané plochy se správnou interpolací, osy s chytrým rozmístěním popisků, vykreslování do canvasu pro desítky tisíc bodů: to jsou vyřešené problémy a řešit je znovu ručně je cesta, jak z dvoudenní funkce udělat dvouměsíční koníček. Naše pravidlo je jednoduché. Když je graf prezentace, napište SVG. Když je graf nástroj, který uživatel ovládá, vezměte závislost a buďte rádi, že ji někdo udržuje.
Nejlepší knihovnou na čtyři malé grafy se ukázal být cyklus for.
