Ma'lumot · molecule
Tracker (uptime)
Kunlar böyiça holat çiziqçalari (4.129): har kun — bitta tor ustun; işladi, qisman uziliş, töxtadi va ma'lumot yöq — rang bilan birga şakl (yaxlit, kesik, qisqa-çiziqli, xira) bilan farqlanadi. Hover va fokusda tafsilot, tepada umumiy foiz. Server, integratsiya, tölov şlyuzi holati uçun.
Tölov şlyuzi99,6 % işlagan · 30 kun
- Işladi
- Qisman uziliş
- Töxtadi
- Ma'lumot yöq
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-status | ok yaxlitwarn örtasi kesikdown qisqa, qiya çiziqlinone xira, past | ok |
data-size | sm | md |
Anatomiya
- root
.fx-trackerşart - head
.fx-tracker__headixtiyoriy - title
.fx-tracker__titleixtiyoriy - summary
.fx-tracker__summaryixtiyoriy - bars
.fx-tracker__barsşart - bar
.fx-tracker__barşart - axis
.fx-tracker__axisixtiyoriy - legend
.fx-tracker__legendixtiyoriy - tooltip
.fx-tracker__tipixtiyoriy
Holatlar
hoverfocus
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Kunlar qatoriga kiradi (oxirgi kunga) |
| ← →, Home, End | Kunlar böylab yuradi, maslahat çiqadi |
| Esc | Maslahatni yopadi |
Röyxat (ol) sarlavhaga aria-labelledby bilan boğlangan; har ustun role=img + aria-label (sana va holat). Bitta Tab nuqtasi, ← → Home End; maslahat role=tooltip va aria-describedby.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Xizmat yoki integratsiyaning kunlik holatini qisqa körsatiş (uptime, sinxronizatsiya, tölov şlyuzi).
Işlatmang
- Miqdorlar özgarişi vaqt böyiça →
chart - Kunlar böyiça ziçlik (yil kalendari) →
heatmap - Holatni faqat rang bilan bermang — har ustunda aria-label matni va pastda kalit (legend) bölsin.
- 90 kundan köp ustun bermang — ustun juda ingiçkalaşadi; uzun davr uçun chart (bar).
- Tepada umumiy foizni (summary) tuşirib qoldirmang — asosiy javob şu.
npx foxui add tracker
<div class="fx-tracker" data-fx-tracker>
<div class="fx-tracker__head"><span class="fx-tracker__title" id="trk1">Tölov şlyuzi</span><span class="fx-tracker__summary">99,6 % işlagan · 30 kun</span></div>
<ol class="fx-tracker__bars" aria-labelledby="trk1">
<li class="fx-tracker__bar" data-status="ok" aria-label="19-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="20-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="21-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="22-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="23-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="24-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="25-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="warn" aria-label="26-sen: qisman uziliş, 98,6 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="27-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="28-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="29-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="30-sen: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="1-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="2-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="3-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="down" aria-label="4-okt: töxtadi, 91,2 %"></li>
<li class="fx-tracker__bar" data-status="warn" aria-label="5-okt: qisman uziliş, 98,6 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="6-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="7-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="8-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="9-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="10-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="warn" aria-label="11-okt: qisman uziliş, 98,6 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="12-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="13-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="14-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="15-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="16-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="ok" aria-label="17-okt: işladi, 100 %"></li>
<li class="fx-tracker__bar" data-status="none" aria-label="18-okt: bugun, ma'lumot yiğilmoqda"></li>
</ol>
<div class="fx-tracker__axis" aria-hidden="true"><span>30 kun oldin</span><span>Bugun</span></div>
<ul class="fx-tracker__legend"><li><span class="fx-tracker__bar" data-status="ok"></span>Işladi</li><li><span class="fx-tracker__bar" data-status="warn"></span>Qisman uziliş</li><li><span class="fx-tracker__bar" data-status="down"></span>Töxtadi</li><li><span class="fx-tracker__bar" data-status="none"></span>Ma'lumot yöq</li></ul>
</div>Tokenlar: --fx-bg-surface --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-fast --fx-popover-width --fx-radius-badge --fx-radius-control --fx-shadow-md --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-viz-track
Ş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.