Wykresy w panelu bez ani jednej zależności
Linie trendu, mikrowykresy i słupki kategorii w naszym panelu zbudowaliśmy jako zwykły wbudowany SVG. Bez biblioteki wykresów, w sumie kilkaset linii, tryb ciemny gratis. Oto argumenty za wykresami pisanymi ręcznie i za tym, kiedy absolutnie nie należy tego robić.
Kiedy dodawaliśmy panel magazynowy, oczywistym ruchem było zainstalowanie biblioteki wykresów. Te popularne są znakomite. Są też duże, mają swoje zdanie o motywach i są zbudowane pod tysiąc przypadków, a my potrzebowaliśmy czterech: linii trendu z dwiema seriami, mikrowykresu w wierszu, słupka stanu magazynowego i rozbicia na kategorie. Zamiast tego napisaliśmy je jako wbudowany SVG, a cały komplet wyszedł mniejszy niż definicje typów w większości bibliotek.
Wykres to ścieżka
Zdejmij narzędzia, a wykres liniowy jest jednym łańcuchem znaków: ścieżką SVG zbudowaną z Twoich wartości. Odwzoruj indeks każdego punktu na x, każdą wartość na y i połącz je. Jedyny niuans wart zapisania to margines: odwzoruj wartość maksymalną kilka pikseli poniżej górnej krawędzi, bo inaczej viewBox przetnie obrys na szczycie na pół.
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" />Tryb ciemny nic nie kosztuje
Cichą wygraną są motywy. Nasze tokeny projektowe to zmienne CSS, a obrysy i wypełnienia SVG przyjmują je jak każdą inną właściwość. stroke="var(--color-primary)" znaczy, że wykres przemalowuje się w chwili, w której motyw się przełącza, bez konfiguracji motywu na poziomie wykresu, bez zdublowanej palety i bez rozjazdu między wykresami a resztą interfejsu. Kiedy później poprawiliśmy naszą ciemną paletę, wykresy poszły za nią bez tknięcia.
Brzegi należą do Ciebie
Biblioteki są hojne w funkcjach i skąpe przy przypadkach brzegowych, które należą tylko do Ciebie. Co mikrowykres ma zrobić z jednym punktem danych? Co wykres trendu ma powiedzieć, gdy firma jest zupełnie nowa i każda wartość to zero? Komponenty pisane ręcznie czynią te decyzje jawnymi i tanimi: uczciwy pusty stan z jednym zdaniem, płaska linia zamiast awarii, tekstowe podsumowanie obok każdego wykresu dla czytników ekranu i jedno zapytanie prefers-reduced-motion, które wyłącza animację rysowania.
- Daj każdemu wykresowi aria-label i podsumowanie zwykłymi słowami. SVG jest ozdobą, danymi jest to zdanie.
- Animuj obrysy przez stroke-dashoffset, żeby uzyskać efekt rysowania, i zamknij to za prefers-reduced-motion.
- Trzymaj matematykę i znaczniki razem. Komponent wykresu, który czytasz od góry do dołu na jednym ekranie, to wykres, który naprawisz o 23:00.
- Zaprojektuj najpierw stan pusty. Nowe konta widzą go częściej niż jakikolwiek inny.
Kiedy sięgnąć po bibliotekę
Pisanie ręczne przestaje być sprytne w chwili, w której wymagania pokazują zęby. Powiększanie i zaznaczanie zakresu, skale logarytmiczne, obszary skumulowane z porządną interpolacją, osie z mądrym rozstawieniem podziałek, rysowanie na canvasie dla dziesiątek tysięcy punktów: to są rozwiązane problemy, a rozwiązywanie ich ponownie ręką jest sposobem, w jaki dwudniowa funkcja zamienia się w dwumiesięczne hobby. Nasza reguła jest prosta. Jeśli wykres jest prezentacją, napisz SVG. Jeśli wykres jest przyrządem, którym użytkownik operuje, weź zależność i ciesz się, że ktoś ją utrzymuje.
Najlepszą biblioteką wykresów do czterech małych wykresów okazała się pętla for.
