Grafer i dashboardet uden en eneste afhængighed
Vi byggede trendlinjerne, sparklines og kategoribjælkerne i vores dashboard som almindelig inline SVG. Intet grafbibliotek, et par hundrede linjer i alt, mørkt tema gratis med. Her er argumentet for håndbyggede grafer, og for hvornår du absolut ikke skal gøre det her.
Da vi tilføjede et lagerdashboard, var det oplagte træk at installere et grafbibliotek. De populære er fremragende. De er også store, har holdninger til temaer og er bygget til at klare tusind tilfælde, hvor vi havde brug for fire: en trendlinje med to serier, en sparkline pr. række, en bjælke for lagerniveau og en fordeling på kategorier. Vi skrev dem som inline SVG i stedet, og hele sættet endte med at fylde mindre end de fleste bibliotekers typedefinitioner.
En graf er en path
Skræl værktøjerne væk, og en linjegraf er én streng: en SVG-path bygget af dine værdier. Læg hvert punkts indeks over på x, hver værdi over på y, og bind dem sammen. Det eneste finurlige, der er værd at skrive ned, er polstring: læg den højeste værdi et par pixels under overkanten, ellers bliver stregen ved din top skåret midt over af din 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 tema koster ingenting
Den stille gevinst er temaer. Vores designtokens er CSS-variabler, og SVG's stroke og fill tager imod dem som enhver anden egenskab. stroke="var(--color-primary)" betyder, at grafen farver sig selv om i samme øjeblik temaet skifter, uden temaopsætning på grafniveau, uden en dobbelt palet og uden afvigelser mellem graferne og resten af brugerfladen. Da vi senere justerede vores mørke palet, fulgte graferne med uden at blive rørt.
Du ejer kanterne
Biblioteker er gavmilde med funktioner og nærige med de kanttilfælde, der kun er dine. Hvad skal en sparkline gøre med ét datapunkt? Hvad siger trendgrafen, når en forretning er helt ny, og hver værdi er nul? Håndbyggede komponenter gør de beslutninger tydelige og billige: en ærlig tom tilstand med en sætning, en flad linje i stedet for et nedbrud, en tekstopsummering ved siden af hver graf til skærmlæsere, og en enkelt prefers-reduced-motion-forespørgsel, der slår optegningen fra.
- Giv hver graf en aria-label og en opsummering i almindelige ord. SVG'en er pynt; sætningen er data.
- Animér streger med stroke-dashoffset for en optegningseffekt, og læg den bag prefers-reduced-motion.
- Hold regnestykke og markup sammen. En grafkomponent, du kan læse fra top til bund på én skærm, er en graf, du kan rette klokken 23.
- Design den tomme tilstand først. Nye konti ser den oftere end nogen anden tilstand.
Hvornår du bør bruge et bibliotek
At bygge i hånden holder op med at være smart i samme øjeblik, kravene får rigtige tænder. Zoom og udvælgelse, logaritmiske skalaer, stablede arealer med ordentlig interpolation, akser med kloge placeringer af markeringer, canvas-tegning til titusindvis af punkter: det er løste problemer, og at løse dem igen i hånden er sådan, en to dages opgave bliver til en to måneders hobby. Vores regel er enkel. Er grafen fremvisning, så skriv SVG'en. Er grafen et instrument, brugeren betjener, så tag afhængigheden og vær glad for, at nogen vedligeholder den.
Det bedste grafbibliotek til fire små grafer viste sig at være en for-løkke.
