---
title: "Wykresy w panelu bez ani jednej zależności"
description: "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ć."
url: "https://bookatu.com/pl-pl/blog/dashboard-charts-with-zero-dependencies"
language: "pl"
section: "Blog"
category: "Technologia"
author: "Zespół inżynierów Bookatu"
published: "2026-07-11"
updated: "2026-07-11"
tags: ["wykresy svg", "wykresy bez biblioteki", "wykresy w trybie ciemnym", "wydajność frontendu", "wizualizacja danych"]
---

# 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ć.

> **W skrócie**
>
> - Wykresy w panelu to zwykle garść kształtów: linia, obszar, kilka słupków. To kilkadziesiąt elementów SVG, a nie biblioteka.
> - Kolorowanie obrysów i wypełnień zmiennymi CSS sprawia, że wykresy same idą za Twoim motywem, łącznie z trybem ciemnym.
> - Każdy stan należy do Ciebie: pusty, jeden punkt danych, ograniczony ruch, czytniki ekranu.
> - Sięgnij po bibliotekę, gdy potrzebujesz interakcji, skal albo typów wykresów, które inaczej wymyśliłbyś od nowa i źle.

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.

![Panel magazynowy z wykresem trendu, rozbiciem na kategorie i listą rankingową w jasnym motywie](https://bookatu.com/blog/shots/inventory-control-center-light.png)

*Cztery wykresy pisane ręcznie: linie trendu, segmentowany słupek kategorii, słupki wartości w rankingu i mikrowykresy w wierszach.*

## 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ół.

```js
const W = 300, H = 80, PAD = 3; // top pad so the peak stroke is not clipped
const 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.

![Ten sam panel magazynowy wyrenderowany w ciemnym motywie](https://bookatu.com/blog/shots/inventory-control-center-dark.png)

*Te same komponenty w trybie ciemnym. Żaden wykres nie był edytowany, robotę zrobiły zmienne CSS.*

## 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.