Grafici della dashboard senza nessuna dipendenza
Abbiamo costruito le linee di tendenza, gli sparkline e le barre per categoria della nostra dashboard come semplice SVG in linea. Nessuna libreria di grafici, poche centinaia di righe in tutto, tema scuro incluso. Ecco perché conviene farseli a mano, e quando invece non bisogna assolutamente farlo.
Quando abbiamo aggiunto una dashboard di magazzino, la mossa ovvia era installare una libreria di grafici. Quelle diffuse sono ottime. Sono anche grandi, hanno idee precise sul tema e sono fatte per gestire mille casi quando a noi ne servivano quattro: una linea di tendenza a due serie, uno sparkline per riga, una barra del livello di giacenza e una ripartizione per categoria. Li abbiamo scritti come SVG in linea, e tutto l'insieme è venuto più piccolo delle definizioni di tipi della maggior parte delle librerie.
Un grafico è un tracciato
Togli di mezzo gli strumenti e un grafico a linee è una stringa: un tracciato SVG costruito dai tuoi valori. Mappi l'indice di ogni punto sulla x, ogni valore sulla y, e li unisci. L'unica sottigliezza che vale la pena scriversi è il margine: mappa il valore massimo qualche pixel sotto il bordo superiore, altrimenti il tratto sul picco viene tagliato a metà dal viewBox.
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" />Il tema scuro non costa niente
Il guadagno silenzioso è il tema. I nostri token di design sono variabili CSS, e i tratti e i riempimenti SVG le accettano come qualsiasi altra proprietà. stroke="var(--color-primary)" vuol dire che il grafico si ricolora nell'istante in cui il tema cambia, senza configurazione del tema a livello di grafico, senza una tavolozza duplicata e senza scarti tra i grafici e il resto dell'interfaccia. Quando più avanti abbiamo ritoccato la nostra tavolozza scura, i grafici l'hanno seguita senza che li toccassimo.
I casi limite sono tuoi
Le librerie sono generose di funzioni e avare sui casi limite che riguardano solo te. Cosa dovrebbe fare uno sparkline con un solo dato? Cosa dice il grafico di tendenza quando un'attività è appena nata e ogni valore è zero? I componenti fatti a mano rendono queste decisioni esplicite e poco costose: uno stato vuoto onesto con una frase, una linea piatta invece di un errore, un riassunto testuale accanto a ogni grafico per i lettori di schermo, e un'unica media query prefers-reduced-motion che spegne l'animazione di tracciamento.
- Dai a ogni grafico un aria-label e un riassunto in parole semplici. L'SVG è decorazione, il dato è la frase.
- Anima i tratti con stroke-dashoffset per l'effetto di tracciamento, e mettilo dietro a prefers-reduced-motion.
- Tieni insieme i calcoli e il markup. Un componente grafico che leggi dall'inizio alla fine in una schermata è un grafico che sai sistemare alle 23.
- Progetta per primo lo stato vuoto. Gli account nuovi lo vedono più di qualsiasi altro stato.
Quando conviene usare una libreria
Farseli a mano smette di essere furbo nel momento in cui i requisiti mettono i denti. Zoom e selezione a trascinamento, scale logaritmiche, aree impilate con interpolazione seria, assi con tacche posizionate in modo intelligente, disegno su canvas per decine di migliaia di punti: sono problemi già risolti, e risolverli di nuovo a mano è il modo in cui una funzione da due giorni diventa un passatempo da due mesi. La nostra regola è semplice. Se il grafico è presentazione, scrivi l'SVG. Se il grafico è uno strumento che l'utente usa, prenditi la dipendenza e ringrazia che qualcuno la mantenga.
La libreria di grafici migliore per quattro grafici piccoli si è rivelata essere un ciclo for.
