Ma'lumot · compound
Grafik kartasi
Grafikni örab turuvçi karta: sarlavha + izoh + amallar (davr segmenti, menyu), grafik, pastda legenda va manba. Grafik öz tuzilmasini saqlaydi (fx-chart), karta faqat qobiq va joylaşuv. Holatlar: yuklanmoqda, böş (#66).
Tuşum
mln söm · sönggi 6 oy| Oy | Tuşum |
|---|---|
| May | 62 |
| Iyun | 71 |
| Iyul | 58 |
| Avg | 80 |
| Sen | 94 |
| Okt | 111 |
- Oldingi oylar
- Joriy oy
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | flat | card |
data-state | loadingempty | ready |
Anatomiya
- root
.fx-chartcardşart - head
.fx-chartcard__headixtiyoriy - titles
.fx-chartcard__titlesixtiyoriy - title
.fx-chartcard__titleşart - sub
.fx-chartcard__subixtiyoriy - actions
.fx-chartcard__actionsixtiyoriy - body
.fx-chartcard__bodyşart - foot
.fx-chartcard__footixtiyoriy
Holatlar
loadingempty
Klaviatura va kiriş
<section aria-labelledby> karta sarlavhasiga boğlanadi; grafik öz jadvali va klaviaturasini saqlaydi; yuklaniş holatida aria-busy qöying.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Dashboard'da grafikni sarlavha, davr va legenda bilan joylaş.
npx foxui add chartcard
<section class="fx-chartcard" aria-labelledby="cc1">
<div class="fx-chartcard__head">
<div class="fx-chartcard__titles"><h3 class="fx-chartcard__title" id="cc1">Tuşum</h3><span class="fx-chartcard__sub">mln söm · sönggi 6 oy</span></div>
<div class="fx-chartcard__actions"><div class="fx-segment" data-size="sm" role="group" aria-label="Davr"><button class="fx-segment__item" type="button" aria-pressed="false">3 oy</button><button class="fx-segment__item" type="button" aria-pressed="true">6 oy</button></div></div>
</div>
<div class="fx-chartcard__body">
<figure class="fx-chart" data-fx-chart data-type="bar" data-unit="mln söm">
<figcaption class="fx-sr-only">Oylik tuşum</figcaption>
<table class="fx-chart__data"><thead><tr><th>Oy</th><th>Tuşum</th></tr></thead><tbody><tr><th>May</th><td>62</td></tr><tr><th>Iyun</th><td>71</td></tr><tr><th>Iyul</th><td>58</td></tr><tr><th>Avg</th><td>80</td></tr><tr><th>Sen</th><td>94</td></tr><tr><th>Okt</th><td data-role="accent">111</td></tr></tbody></table>
</figure>
</div>
<div class="fx-chartcard__foot"><ul class="fx-legend" aria-label="Rollar"><li class="fx-legend__item"><span class="fx-legend__swatch" data-role="brand"></span><span class="fx-legend__label">Oldingi oylar</span></li><li class="fx-legend__item"><span class="fx-legend__swatch" data-role="accent"></span><span class="fx-legend__label">Joriy oy</span></li></ul><span>Manba: CRM</span></div>
</section>Tokenlar: --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-control-h-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-primary --fx-text-tertiary
Şu toifadan
API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.