Chart states
To, 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
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Chart states
The report could not be loaded. Try again in a minute.
No errors in this period.
Noc, podgląd: Chart states
The report could not be loaded. Try again in a minute.
No errors in this period.
Wysoki kontrast, podgląd: Chart states
The report could not be loaded. Try again in a minute.
No errors in this period.
UżycieLink do sekcji Użycie
import { LineChart, BarChart } from '@skribly/ui/charts'<LineChart {...props} isLoading loadingLabel="Loading visits" />
<LineChart {...props} error="The report could not be loaded. Try again in a minute." />
<BarChart {...props} data={[]} emptyState="No errors in this period." />Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Ładowanie jest statusem odczytywanym w trybie polite i oznacza figurę jako zajętą.
- Błąd jest komunikatem typu alert z ikoną i słowami, odczytywanym od razu.
- Pusty stan to zwykły tekst z ikoną.
- Żaden nie opiera się na kolorze, a wskaźnik ładowania zatrzymuje się przy ograniczonym ruchu.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.