Dashboard-Diagramme ganz ohne Abhängigkeiten
Die Trendlinien, Sparklines und Kategoriebalken auf unserem Dashboard sind schlichtes Inline-SVG. Keine Diagrammbibliothek, insgesamt ein paar hundert Zeilen, Dark Mode gratis. Warum sich handgeschriebene Diagramme lohnen, und wann du das auf keinen Fall tun solltest.
Als wir ein Bestands-Dashboard gebaut haben, war der naheliegende Schritt, eine Diagrammbibliothek zu installieren. Die verbreiteten sind ausgezeichnet. Sie sind auch groß, haben eine feste Meinung zum Theming und decken tausend Fälle ab, wo wir vier brauchten: eine Trendlinie mit zwei Reihen, eine Sparkline pro Zeile, einen Balken für den Bestand und eine Aufteilung nach Kategorien. Wir haben sie stattdessen als Inline-SVG geschrieben, und der ganze Satz war am Ende kleiner als die Typdefinitionen der meisten Bibliotheken.
Ein Diagramm ist ein Pfad
Nimm das Werkzeug weg, und ein Liniendiagramm ist eine Zeichenkette: ein SVG-Pfad, gebaut aus deinen Werten. Bild den Index jedes Punkts auf x ab, jeden Wert auf y, und verbinde sie. Die einzige Feinheit, die es wert ist, aufgeschrieben zu werden, ist der Rand: Bild den höchsten Wert ein paar Pixel unter der Oberkante ab, sonst schneidet die viewBox den Strich an deiner Spitze in der Mitte durch.
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" />Dark Mode kostet nichts
Der leise Gewinn ist das Theming. Unsere Design-Tokens sind CSS-Variablen, und SVG nimmt sie für Striche und Flächen an wie jede andere Eigenschaft. stroke="var(--color-primary)" heißt, dass sich das Diagramm in dem Moment umfärbt, in dem das Theme kippt, ohne Theme-Konfiguration auf Diagrammebene, ohne doppelte Palette und ohne Abweichung zwischen den Diagrammen und dem Rest der Oberfläche. Als wir später unsere dunkle Palette angepasst haben, sind die Diagramme mitgegangen, ohne dass jemand sie angefasst hat.
Die Ränder gehören dir
Bibliotheken sind großzügig mit Funktionen und knausrig mit Randfällen, die nur dir gehören. Was soll eine Sparkline mit einem einzigen Datenpunkt machen? Was sagt das Trenddiagramm, wenn ein Betrieb brandneu ist und jeder Wert null lautet? Handgeschriebene Komponenten machen diese Entscheidungen ausdrücklich und billig: ein ehrlicher leerer Zustand mit einem Satz, eine flache Linie statt eines Absturzes, eine Textzusammenfassung neben jedem Diagramm für Screenreader und eine einzige prefers-reduced-motion-Abfrage, die das Einzeichnen abschaltet.
- Gib jedem Diagramm ein aria-label und eine Zusammenfassung in klaren Worten. Das SVG ist Dekoration, der Satz sind die Daten.
- Animier Striche mit stroke-dashoffset für den Einzeichen-Effekt, und häng ihn hinter prefers-reduced-motion.
- Halt Rechnung und Markup zusammen. Eine Diagrammkomponente, die du auf einem Bildschirm von oben nach unten lesen kannst, ist eine, die du um 23 Uhr reparieren kannst.
- Entwirf zuerst den leeren Zustand. Neue Konten sehen ihn öfter als jeden anderen.
Wann du eine Bibliothek nehmen solltest
Selbst zu schreiben hört in dem Moment auf, clever zu sein, in dem die Anforderungen Zähne bekommen. Zoomen und Bereiche ziehen, logarithmische Skalen, gestapelte Flächen mit ordentlicher Interpolation, Achsen mit klugen Teilstrichen, Canvas-Rendering für Zehntausende Punkte: Das sind gelöste Probleme, und sie noch einmal von Hand zu lösen ist der Weg, auf dem aus einer Funktion von zwei Tagen ein Hobby von zwei Monaten wird. Unsere Regel ist einfach. Ist das Diagramm Darstellung, schreib das SVG. Ist das Diagramm ein Instrument, das der Nutzer bedient, nimm die Abhängigkeit und sei froh, dass jemand sie pflegt.
Die beste Diagrammbibliothek für vier kleine Diagramme war am Ende eine for-Schleife.
