StackedBars
Częś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
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: StackedBars
Page load ratings
- Good
- Needs work
- Poor
Use the up and down arrow keys to read each page.
- HomeGood87.3% (812)Needs work10.3% (96)Poor2.4% (22)
- ChangelogGood66.7% (402)Needs work23.2% (140)Poor10.1% (61)
- Documentation for the command line toolsGood85% (233)Needs work15% (41)Poor0% (0)
Contributions by source
- This computer
- GitHub
- GitLab
Use the up and down arrow keys to read each week.
- Week 4347This computer 31, GitHub 12, GitLab 4
- Week 4438This computer 18, GitHub 20, GitLab 0
- Week 4562This computer 42, GitHub 9, GitLab 11
Noc, podgląd: StackedBars
Page load ratings
- Good
- Needs work
- Poor
Use the up and down arrow keys to read each page.
- HomeGood87.3% (812)Needs work10.3% (96)Poor2.4% (22)
- ChangelogGood66.7% (402)Needs work23.2% (140)Poor10.1% (61)
- Documentation for the command line toolsGood85% (233)Needs work15% (41)Poor0% (0)
Contributions by source
- This computer
- GitHub
- GitLab
Use the up and down arrow keys to read each week.
- Week 4347This computer 31, GitHub 12, GitLab 4
- Week 4438This computer 18, GitHub 20, GitLab 0
- Week 4562This computer 42, GitHub 9, GitLab 11
Wysoki kontrast, podgląd: StackedBars
Page load ratings
- Good
- Needs work
- Poor
Use the up and down arrow keys to read each page.
- HomeGood87.3% (812)Needs work10.3% (96)Poor2.4% (22)
- ChangelogGood66.7% (402)Needs work23.2% (140)Poor10.1% (61)
- Documentation for the command line toolsGood85% (233)Needs work15% (41)Poor0% (0)
Contributions by source
- This computer
- GitHub
- GitLab
Use the up and down arrow keys to read each week.
- Week 4347This computer 31, GitHub 12, GitLab 4
- Week 4438This computer 18, GitHub 20, GitLab 0
- Week 4562This computer 42, GitHub 9, GitLab 11
UżycieLink do sekcji Użycie
import { StackedBars } from '@skribly/ui/charts'<StackedBars
label="Page load ratings"
mode="share"
segments={[
{ id: 'good', label: 'Good', color: 'ok' },
{ id: 'fair', label: 'Needs work', color: 'warn' },
{ id: 'poor', label: 'Poor', color: 'danger' }
]}
rows={pages.map((page) => ({ id: page.id, label: page.title, values: page.ratings }))}
keyboardHint="Use the up and down arrow keys to read each page."
table={{ trigger: 'Show as table', categoryHeader: 'Page' }}
/>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ść
- Każda nazwa wiersza i suma jest tekstem.
- Części są zapisane po każdym słupku, na ekranie przy showValues, a w przeciwnym razie dla czytników ekranu.
- Lista jest jednym przystankiem w kolejności Tab: klawisze strzałek przechodzą między wierszami, pokazują dymek z każdą częścią i odczytują go w trybie polite.
- Części są rozdzielone przerwą, która zostaje w trybie wymuszonych kolorów, a legenda nazywa każdy kolor.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.