Diagram i översikten utan ett enda beroende
Vi byggde trendlinjerna, sparklines och kategoristaplarna i vår översikt som vanlig inbäddad SVG. Inget diagrambibliotek, några hundra rader totalt, mörkt läge på köpet. Här är argumenten för handskrivna diagram, och för när du absolut inte ska göra så här.
När vi la till en lageröversikt var det självklara draget att installera ett diagrambibliotek. De populära är utmärkta. De är också stora, har bestämda åsikter om teman och är byggda för att klara tusen fall när vi behövde fyra: en trendlinje med två serier, en sparkline per rad, en stapel för lagernivå och en fördelning per kategori. Vi skrev dem som inbäddad SVG i stället, och hela uppsättningen blev mindre än typdefinitionerna i de flesta bibliotek.
Ett diagram är en path
Skala bort verktygen och ett linjediagram är en enda sträng: en SVG-path byggd av dina värden. Mappa varje punkts index till x, varje värde till y, och sätt ihop dem. Den enda finess som är värd att skriva ner är marginalen: mappa det högsta värdet några pixlar under överkanten, annars kapas linjen vid toppen på mitten av 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" />Mörkt läge kostar ingenting
Den tysta vinsten är teman. Våra designtokens är CSS-variabler, och SVG:s stroke och fill tar emot dem som vilken annan egenskap som helst. stroke="var(--color-primary)" betyder att diagrammet färgar om sig i samma sekund som temat byts, utan någon temakonfiguration på diagramnivå, utan en dubblerad palett och utan glidning mellan diagrammen och resten av gränssnittet. När vi senare justerade vår mörka palett följde diagrammen med utan att röras.
Du äger ytterkanterna
Bibliotek är generösa med funktioner och snåla med de gränsfall som bara är dina. Vad ska en sparkline göra med en enda datapunkt? Vad säger trenddiagrammet när ett företag är alldeles nytt och varje värde är noll? Handskrivna komponenter gör de besluten tydliga och billiga: ett ärligt tomt läge med en mening, en platt linje i stället för en krasch, en textsammanfattning bredvid varje diagram för skärmläsare, och en enda media query för prefers-reduced-motion som stänger av inritningen.
- Ge varje diagram en aria-label och en sammanfattning på vanlig svenska. SVG:n är dekoration, meningen är datan.
- Animera linjer med stroke-dashoffset för en inritningseffekt, och lägg den bakom prefers-reduced-motion.
- Håll ihop matematiken och markupen. En diagramkomponent du kan läsa uppifrån och ner på en skärm är en komponent du kan laga klockan elva på kvällen.
- Designa det tomma läget först. Nya konton ser det oftare än något annat läge.
När du ska använda ett bibliotek
Att skriva själv slutar vara smart i samma stund som kraven får riktiga tänder. Zoomning och urval, logaritmiska skalor, staplade ytor med ordentlig interpolation, axlar med smart placerade skalstreck, canvas-rendering för tiotusentals punkter: det är lösta problem, och att lösa dem igen för hand är hur en tvådagarsfunktion blir en tvåmånadershobby. Vår regel är enkel. Är diagrammet presentation, skriv SVG:n. Är diagrammet ett instrument som användaren styr, ta beroendet och var glad att någon underhåller det.
Det bästa diagrambiblioteket för fyra små diagram visade sig vara en for-loop.
