Grafer i dashbordet uten en eneste avhengighet
Vi bygde trendlinjene, sparklinjene og kategoristolpene i dashbordet vårt som ren SVG i selve markupen. Ikke noe grafbibliotek, noen hundre linjer til sammen, mørk modus gratis. Her er argumentet for håndlagde grafer, og for når du absolutt ikke bør gjøre dette.
Da vi la til et lagerdashbord, var det opplagte trekket å installere et grafbibliotek. De populære er utmerkede. De er også store, har sterke meninger om temaer, og er bygget for å håndtere tusen tilfeller da vi trengte fire: en trendlinje med to serier, en sparklinje per rad, en stolpe for lagernivå og en fordeling per kategori. Vi skrev dem som SVG i markupen i stedet, og hele settet ble mindre enn typedefinisjonene til de fleste bibliotekene.
En graf er en path
Ta bort verktøyene, og en linjegraf er én streng: en SVG-path bygget fra verdiene dine. Koble hvert punkts indeks til x, hver verdi til y, og bind dem sammen. Den eneste finessen verdt å skrive ned er polstring: legg maksverdien noen piksler under toppkanten, ellers blir streken på toppunktet skåret i to av viewBox-en.
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ørk modus koster ingenting
Den stille gevinsten er temaene. Designtokenene våre er CSS-variabler, og strek og fyll i SVG tar imot dem som en hvilken som helst annen egenskap. stroke="var(--color-primary)" betyr at grafen farger seg selv om i det øyeblikket temaet snus, uten temaoppsett på grafnivå, uten en duplisert palett og uten avvik mellom grafene og resten av grensesnittet. Da vi senere justerte den mørke paletten vår, fulgte grafene etter uten at noen rørte dem.
Du eier ytterkantene
Bibliotekene er rause med funksjoner og gjerrige med grensetilfellene som bare er dine. Hva skal en sparklinje gjøre med ett datapunkt? Hva sier trendgrafen når en virksomhet er splitter ny og hver verdi er null? Håndlagde komponenter gjør disse valgene tydelige og billige: en ærlig tom tilstand med en setning, en flat linje i stedet for en krasj, et tekstsammendrag ved siden av hver graf for skjermlesere, og én prefers-reduced-motion-spørring som slår av tegneanimasjonen.
- Gi hver graf en aria-label og et sammendrag i klarspråk. SVG-en er pynt, setningen er dataene.
- Animer streker med stroke-dashoffset for en tegne-inn-effekt, og legg den bak prefers-reduced-motion.
- Hold regnestykket og markupen sammen. En grafkomponent du kan lese ovenfra og ned på én skjerm, er en graf du kan fikse klokka elleve om kvelden.
- Design den tomme tilstanden først. Nye kontoer ser den oftere enn noen annen tilstand.
Når du bør bruke et bibliotek
Å lage dem selv slutter å være smart i det øyeblikket kravene får ordentlige tenner. Zooming og utvalg, logaritmiske skalaer, stablede arealer med skikkelig interpolering, akser med smart plassering av delestreker, canvas-tegning for titusener av punkter: dette er løste problemer, og å løse dem på nytt for hånd er måten en to dagers funksjon blir en to måneders hobby på. Regelen vår er enkel. Er grafen presentasjon, skriv SVG-en. Er grafen et instrument brukeren betjener, ta avhengigheten og vær glad for at noen vedlikeholder den.
Det beste grafbiblioteket for fire små grafer viste seg å være en for-løkke.
