Wykresy
Zwykłe wykresy SVG i liczby do raportów i pulpitów, budowane z celem WCAG 2.2 AA. Każdy wykres jest nazwaną figurą z napisanym podsumowaniem; klawisze strzałek przechodzą po punktach danych i odczytują każdy z nich; każda wartość jest też w tabeli za rozwijanym blokiem. Serie różnią się kolorem i wzorem linii, a znaczniki w trybie wymuszonych kolorów przełączają się na kolory systemowe. Wykresy rysują się w szerokości swojego pola, więc etykiety zachowują rozmiar przy każdym powiększeniu, a na wąskich ekranach jest ich mniej.
Strony: 11, eksporty: 11
- LineChart
- BarChart
- StackedBars
- DonutChart
- Sparkline
- ActivityHeatmap
- ScoreRing
- Delta
- MetricTile
- ChartLegend
- ChartTooltip
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { LineChart, BarChart, StackedBars, DonutChart, … } from '@skribly/ui/charts'Strony tej grupyLink do sekcji Strony tej grupy
- LineChartTrend w czasie dla jednej lub kilku miar na jednej osi. Wybierz go dla serii dziennych albo tygodniowych; dodaj poprzedni okres jako linię-cień do porównania oraz adnotacje dla wydań albo incydentów.LineChart
- Chart statesTo, co wykres pokazuje przed danymi i zamiast nich: ładowanie, błąd i brak czego rysować. Każdy zachowuje wysokość wykresu, więc strona nie skacze, gdy dane przychodzą.LineChart, BarChart
- BarChartLiczby na dzień jako kolumny albo ranking jako wiersze. Wybierz kolumny dla liczby w czasie i oznacz dni, które wymagają spojrzenia; wybierz wiersze dla list najlepszych, gdzie nazwy mogą być długie, a ekran wąski.BarChart
- StackedBarsCzęści całości dla każdego wiersza, na przykład ładowania stron ocenione jako dobre, wymagające poprawy i słabe. Wybierz share, aby porównać proporcje między wierszami, a value, aby porównać także sumy.StackedBars
- DonutChartUdział w całości dla kilku części, na przykład wizyty według urządzenia. Wybierz go dla co najwyżej pięciu części; powyżej tego najmniejsze łączą się w jeden wycinek „inne”, a wykres słupkowy może być czytelniejszy.DonutChart
- SparklineMaleńki trend bez osi, do kafelka, komórki tabeli albo linii tekstu. Wybierz go, gdy kształt ma większe znaczenie niż liczby.Sparkline
- ActivityHeatmapDzienna aktywność przez miesiące jako kalendarz, jedna kolumna na tydzień, na przykład commity w ciągu roku. Wybierz go, aby pokazać rytm i serie; do dokładnych liczb dziennych z kilku tygodni wybierz wykres słupkowy.ActivityHeatmap
- ScoreRingWynik względem znanego maksimum, na przykład wynik audytu na 100 punktów. Wybierz go dla od jednego do czterech głównych wyników; dla poziomów na liście użyj Meter z grupy feedback.ScoreRing
- DeltaZmiana liczby względem wcześniejszego okresu, z kierunkiem i informacją, czy to dobra wiadomość. Wybierz ją obok głównej liczby, w kafelku albo w tabeli.Delta
- MetricTileJedna kluczowa liczba ze zmianą i niedawnym trendem, do rzędu kafelków na górze raportu. Wybierz StatCard z grupy surfaces, gdy kafelek prowadzi do pełnego widoku.MetricTile
- ChartLegend and ChartTooltipLegenda i odczyt punktu, których używa każdy wykres tutaj, dla własnego wykresu, który ma wyglądać tak samo. Wybierz ChartLegend zawsze, gdy kolor oznacza więcej niż jedną rzecz.ChartLegend, ChartTooltip