Przejdź do treści
Skribly UI

Produkty Skribly

Motyw

ActivityHeatmap

Dzienna 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

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: ActivityHeatmap

Contributions, last 12 months
Arrow keys move by day and by week. Home and End go to the first and last day.
1752 commits; the longest streak was 6 days.

Noc, podgląd: ActivityHeatmap

Contributions, last 12 months
Arrow keys move by day and by week. Home and End go to the first and last day.
1752 commits; the longest streak was 6 days.

Wysoki kontrast, podgląd: ActivityHeatmap

Contributions, last 12 months
Arrow keys move by day and by week. Home and End go to the first and last day.
1752 commits; the longest streak was 6 days.

UżycieLink do sekcji Użycie

tsx
import { ActivityHeatmap } from '@skribly/ui/charts'
tsx
<ActivityHeatmap
  label="Contributions, last 12 months"
  days={days}
  formatValue={(count) => t('commits', { count })}
  keyboardHint="Arrow keys move by day and by week."
  lessLabel="Less"
  moreLabel="More"
  table={{ trigger: 'Show days with activity', dateHeader: 'Date', valueHeader: 'Commits' }}
/>

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ść

  • Jeden przystanek w kolejności Tab na cały kalendarz.
  • Strzałka w górę i w dół przesuwa o dzień, w lewo i w prawo o tydzień, Home i End na końce; każdy dzień jest odczytywany z pełną datą, liczbą i źródłami przez region na żywo typu polite, a Escape ukrywa dymek.
  • Na wąskim ekranie pole przewija się samo, otwiera się na ostatnim tygodniu i podąża za fokusem.
  • Odcienie są stopniami jednego koloru, a liczba jest zawsze słowami w dymku, w odczycie i w tabeli.
  • Komórki zachowują obrys i używają kolorów systemowych w trybie wymuszonych kolorów.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.

Szukaj na stronie

Strzałki przenoszą między wynikami, Enter otwiera, Esc zamyka. Ctrl K /