Körsatiş · molecule

Körsatkiç (stat)

Yorliq + katta raqam (tabular, --fx-font-family-numeric) + izoh. Neytral karta yoki rangli plitka (data-color, 6 toifa rangi). Ohang: data-tone warning/error raqamni böyaydi. Havola bölsa — <a class="fx-stat">. KPI varianti: özgariş (.fx-delta), mini grafik örni (.fx-stat__viz — içiga fx-chart type="spark"), pastki izoh; ölçam hero/ixçam; qator — .fx-stat-row. Kengaytma: .fx-stat__period (“ötgan oyga nisbatan”), aria-busy (skelet holati), data-tone=success. Tanlanadigan plitkalar (4.128): .fx-stat-row[data-selectable] tablist sifatida — plitka bosilsa boğlangan grafikda şu seriya körinadi; tanlangani tepadagi çiziq va çegara bilan. KPI sarlavhasi (20.10): .fx-stat__head — ikon plitkasi (.fx-stat__icon, data-tone), yorliq va öng çetda trend chip (.fx-delta data-variant="chip") yoki menyu tugmasi; .fx-stat__chart — kartaning pastki çetiga tegib turadigan grafik (fx-chart area yoki spark).

beta0.2.0 danyangilandi 0.54.0.fx-statCSS + JS

Bugungi xarajat $4.20 Kunlik çegara $10

AGENTLAR → 7 3 tasi işlayapti

Xatolar 2 Oxirgi soatda

Oylik daromad

48,2 mln

Hafta	Daromad
1	10
2	12
3	11
4	15

+12,4%ötgan oyga nisbatan

Reja: 55 mln söm

Daromad12 480ötgan oyga nisbatan

Tanlangan körsatkiçhaftalik · oktyabr

Hafta	Tuşum	Bitimlar	Yangi mijozlar
1	28	11	5
2	31	13	7
3	34	10	6
4	39	14	9

Jami tuşum+3,3%

228,4 mln

Kun	Tuşum
1	12
2	14
3	13
4	17
5	16
6	21
7	24

Rad etilgan−5,9%

42,3%ötgan haftaga nisbatan

Variantlar

Atribut	Qiymatlar	Standart
`data-tone`	`neutral` `warning` `error` `success`	`neutral`
`data-color`	`yellow` `pink` `blue` `coral` `green` `purple`	—
`data-size`	`hero` `compact`	`default`
`data-selectable`	`true` role=tablist + data-fx-stat + aria-controls (fx-chart id); plitka — button[role=tab][data-series]	—

Anatomiya

root.fx-statşart
label.fx-stat__labelşart
value.fx-stat__valueşart
hint.fx-stat__hintixtiyoriy
row.fx-stat__rowixtiyoriy
delta.fx-stat__deltaixtiyoriy
viz.fx-stat__vizixtiyoriy
foot.fx-stat__footixtiyoriy
period.fx-stat__periodixtiyoriy
head.fx-stat__headixtiyoriy
icon.fx-stat__iconixtiyoriy
chart.fx-stat__chartixtiyoriy

Holatlar

hoverfocusselected

Klaviatura va kiriş

Tugma	Amal
`Enter`	Havola bölsa — ötadi
`← → ↑ ↓, Home, End`	Tanlanadigan plitkalar orasida yuradi va tanlaydi (bitta Tab nuqtasi)

Plitka havola bölsa, yorliq va raqam havola matniga kiradi; strelka belgisi aria-hidden bölsin.

Naqş: WAI-ARIA APG tabs

Kod

AI uçun: qaçon işlatiladi

Işlating

Bitta muhim raqamni yorliq va izoh bilan körsatiş.

Işlatmang

Vaqt böyiça özgariş → chart
Bir qatorda 4 tadan köp rangli plitka qöymang; ikki xil rangli plitka ma'noni bildirsin, bezak emas.
Rangli plitkada data-tone işlatmang — rangli fonda qizil raqam öqilmaydi.
Raqam yoniga birlikni alohida kiçik matn qilmang — raqam bilan bitta qatorda yozing.

npx foxui add stat

<div class="fx-stat">
  <span class="fx-stat__label">Bugungi xarajat</span>
  <span class="fx-stat__value">$4.20</span>
  <span class="fx-stat__hint">Kunlik çegara $10</span>
</div>
<a class="fx-stat" data-color="yellow" href="#">
  <span class="fx-stat__label">AGENTLAR <span>→</span></span>
  <span class="fx-stat__value">7</span>
  <span class="fx-stat__hint">3 tasi işlayapti</span>
</a>
<div class="fx-stat" data-tone="error">
  <span class="fx-stat__label">Xatolar</span>
  <span class="fx-stat__value">2</span>
  <span class="fx-stat__hint">Oxirgi soatda</span>
</div>
<div class="fx-stat-row">
<div class="fx-stat">
  <div class="fx-stat__label">Oylik daromad</div>
  <div class="fx-stat__row"><div class="fx-stat__value">48,2 mln</div><div class="fx-stat__viz"><figure class="fx-chart" data-fx-chart data-type="spark"><figcaption class="fx-sr-only">Daromad dinamikasi</figcaption><table class="fx-chart__data"><thead><tr><th>Hafta</th><th>Daromad</th></tr></thead><tbody><tr><th>1</th><td>10</td></tr><tr><th>2</th><td>12</td></tr><tr><th>3</th><td>11</td></tr><tr><th>4</th><td>15</td></tr></tbody></table></figure></div></div>
  <div class="fx-stat__delta"><span class="fx-delta" data-dir="up" data-tone="good">+12,4%</span><span class="fx-stat__hint">ötgan oyga nisbatan</span></div>
  <div class="fx-stat__foot">Reja: 55 mln söm</div>
</div>
</div>
<div class="fx-stat" aria-busy="true"><span class="fx-stat__label">Daromad</span><span class="fx-stat__value">12 480</span><span class="fx-stat__period">ötgan oyga nisbatan</span></div>
<!-- Tanlanadigan KPI (4.128) -->
<div class="fx-stat-row" data-selectable role="tablist" aria-label="Körsatkiç" data-fx-stat aria-controls="kpi-chart">
  <button class="fx-stat" type="button" role="tab" aria-selected="true" data-series="Tuşum"><span class="fx-stat__label">Tuşum</span><span class="fx-stat__value">132 mln</span><span class="fx-delta" data-dir="up" data-tone="good">+8,2% <span class="fx-delta__period">30 kunda</span></span></button>
  <button class="fx-stat" type="button" role="tab" aria-selected="false" data-series="Bitimlar"><span class="fx-stat__label">Bitimlar</span><span class="fx-stat__value">48</span><span class="fx-delta" data-dir="down" data-tone="bad">−4 <span class="fx-delta__period">30 kunda</span></span></button>
  <button class="fx-stat" type="button" role="tab" aria-selected="false" data-series="Yangi mijozlar"><span class="fx-stat__label">Yangi mijozlar</span><span class="fx-stat__value">27</span><span class="fx-delta" data-dir="up" data-tone="good">+6 <span class="fx-delta__period">30 kunda</span></span></button>
</div>
<figure class="fx-chart" id="kpi-chart" data-fx-chart data-type="line">
  <figcaption><span class="fx-chart__title">Tanlangan körsatkiç</span><span class="fx-chart__sub">haftalik · oktyabr</span></figcaption>
  <table class="fx-chart__data"><thead><tr><th>Hafta</th><th>Tuşum</th><th>Bitimlar</th><th>Yangi mijozlar</th></tr></thead>
  <tbody><tr><th>1</th><td>28</td><td>11</td><td>5</td></tr><tr><th>2</th><td>31</td><td>13</td><td>7</td></tr><tr><th>3</th><td>34</td><td>10</td><td>6</td></tr><tr><th>4</th><td>39</td><td>14</td><td>9</td></tr></tbody></table>
</figure>
<div class="fx-stat-row" style="margin-block-start:var(--fx-space-4)">
<div class="fx-stat"><div class="fx-stat__head"><span class="fx-stat__icon" aria-hidden="true"><svg viewBox="0 0 256 256"><path fill="currentColor" d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z"/></svg></span><span class="fx-stat__label">Jami tuşum</span><span class="fx-delta" data-variant="chip" data-dir="up" data-tone="good">+3,3%</span></div><span class="fx-stat__value">228,4 mln</span>
<div class="fx-stat__chart"><figure class="fx-chart" data-fx-chart data-type="spark" data-no-table data-height="56"><figcaption class="fx-sr-only">Tuşum dinamikasi</figcaption><table class="fx-chart__data"><thead><tr><th>Kun</th><th>Tuşum</th></tr></thead><tbody><tr><th>1</th><td>12</td></tr><tr><th>2</th><td>14</td></tr><tr><th>3</th><td>13</td></tr><tr><th>4</th><td>17</td></tr><tr><th>5</th><td>16</td></tr><tr><th>6</th><td>21</td></tr><tr><th>7</th><td>24</td></tr></tbody></table></figure></div></div>
<div class="fx-stat"><div class="fx-stat__head"><span class="fx-stat__icon" data-tone="error" aria-hidden="true"><svg viewBox="0 0 256 256"><path fill="currentColor" d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0v94.37L90.73,98a8,8,0,0,1,10.07-.38l58.81,44.11L218.73,90a8,8,0,1,1,10.54,12l-64,56a8,8,0,0,1-10.07.38L96.39,114.29,40,163.63V200H224A8,8,0,0,1,232,208Z"/></svg></span><span class="fx-stat__label">Rad etilgan</span><span class="fx-delta" data-variant="chip" data-dir="down" data-tone="bad">−5,9%</span></div><span class="fx-stat__value">42,3%</span><span class="fx-stat__hint">ötgan haftaga nisbatan</span></div>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-category-blue --fx-bg-category-coral --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-error-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-success-subtle --fx-bg-surface --fx-bg-warning-subtle --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-sm --fx-duration-pulse --fx-ease-emphasized --fx-ease-enter --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-adjust-numeric --fx-font-family-numeric --fx-font-size-display-md --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-knob-motion-lift --fx-motion-base --fx-motion-fast --fx-motion-lift --fx-motion-press --fx-popover-width --fx-radius-badge --fx-radius-control --fx-radius-surface --fx-shadow-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-brand --fx-text-on-category --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.

Körsatkiç (stat)

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik