Dashboardgrafieken zonder één afhankelijkheid
We bouwden de trendlijnen, sparklines en categoriebalken op ons dashboard als gewone inline SVG. Geen grafiekbibliotheek, een paar honderd regels in totaal, donkere modus gratis erbij. Waarom je grafieken zelf kunt schrijven, en wanneer je dat absoluut niet moet doen.
Toen we een voorraaddashboard toevoegden, was de voor de hand liggende stap een grafiekbibliotheek installeren. De populaire zijn uitstekend. Ze zijn ook groot, hebben uitgesproken ideeën over thema's, en zijn gebouwd om duizend gevallen aan te kunnen terwijl wij er vier nodig hadden: een trendlijn met twee reeksen, een sparkline per rij, een balk voor de voorraadstand en een verdeling per categorie. We schreven ze in plaats daarvan als inline SVG, en de hele set werd kleiner dan de typedefinities van de meeste bibliotheken.
Een grafiek is een pad
Haal het gereedschap weg en een lijngrafiek is één tekenreeks: een SVG-pad opgebouwd uit je waarden. Zet de index van elk punt om naar x, elke waarde naar y, en verbind ze. De enige subtiliteit die het opschrijven waard is, is de marge: zet de hoogste waarde een paar pixels onder de bovenrand, anders wordt de lijn op je piek door de viewBox doormidden gesneden.
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" />Donkere modus kost niets
De stille winst is het thema. Onze designtokens zijn CSS-variabelen, en lijnen en vullingen in SVG accepteren die net als elke andere eigenschap. Met stroke="var(--color-primary)" herkleurt de grafiek zichzelf op het moment dat het thema omslaat, zonder themaconfiguratie op grafiekniveau, zonder dubbel palet en zonder verschil tussen de grafieken en de rest van het scherm. Toen we later ons donkere palet bijstelden, volgden de grafieken zonder dat we ze aanraakten.
De randgevallen zijn van jou
Bibliotheken zijn gul met functies en zuinig met randgevallen die alleen van jou zijn. Wat moet een sparkline doen met één datapunt? Wat zegt de trendgrafiek als een bedrijf gloednieuw is en elke waarde nul? Zelfgeschreven componenten maken die beslissingen expliciet en goedkoop: een eerlijke lege toestand met een zin erbij, een vlakke lijn in plaats van een crash, een tekstsamenvatting naast elke grafiek voor schermlezers, en één media query op prefers-reduced-motion die de intekenanimatie uitzet.
- Geef elke grafiek een aria-label en een samenvatting in gewone woorden. De SVG is versiering, de zin is de data.
- Animeer lijnen met stroke-dashoffset voor een intekeneffect, en zet dat achter prefers-reduced-motion.
- Houd het rekenwerk en de opmaak bij elkaar. Een grafiekcomponent die je van boven naar beneden op één scherm kunt lezen, is een grafiek die je om elf uur 's avonds kunt repareren.
- Ontwerp eerst de lege toestand. Nieuwe accounts zien die vaker dan welke andere toestand ook.
Wanneer je wel een bibliotheek moet pakken
Zelf schrijven houdt op slim te zijn zodra de eisen echte tanden krijgen. Zoomen en selecteren, logaritmische schalen, gestapelde vlakken met fatsoenlijke interpolatie, assen met slim geplaatste streepjes, weergave op canvas voor tienduizenden punten: dat zijn opgeloste problemen, en ze met de hand nog eens oplossen is hoe een functie van twee dagen een hobby van twee maanden wordt. Onze regel is simpel. Is de grafiek presentatie, schrijf dan de SVG. Is de grafiek een instrument dat de gebruiker bedient, neem dan de afhankelijkheid en wees blij dat iemand hem onderhoudt.
De beste grafiekbibliotheek voor vier kleine grafieken bleek een for-lus.
