Ma'lumot · molecule
Faollik xaritasi
GitHub uslubidagi faollik xaritasi: har kun — bitta katak, ustunlar haftalar (Duşanbadan), 5 daraja (0–4) viz-brand soyalarida, tepada oy, çapda hafta kunlari, pastda Kam…Köp şkalasi. Boşlaniş sanasi va kunlik qiymatlar (data-start, data-values) berilsa xulq kataklarni quradi; har katak nomi va qiymati matnda (aria-label, title) — daraja rangdan taşqari ham aytiladi. Xulq foxui.js'da (data-fx-heatmap).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | mdsmlg | md |
data-level | 0 faollik yöq1234 eng yuqori | 0 |
Anatomiya
- root
.fx-heatmapşart - plot
.fx-heatmap__plotixtiyoriy - months
.fx-heatmap__monthsixtiyoriy - weekdays
.fx-heatmap__dowsixtiyoriy - grid
.fx-heatmap__gridşart - cell
.fx-heatmap__cellşart - legend
.fx-heatmap__legendixtiyoriy
Holatlar
Klaviatura va kiriş
Tör role="list", katak role="listitem" + aria-label («17-oktyabr: 5 ta faollik») va title. Oy, hafta kuni va şkala yozuvlari aria-hidden (ma'lumot kataklarda). Daraja rangga tayanmaydi — qiymat matnda.
Kod
AI uçun: qaçon işlatiladi
- Uzoq davr böyiça kunlik faollikni bir qaraşda körsatiş (vazifalar, maşqlar, hissalar, taşriflar).
- Aniq qiymatlar trendi →
chart - Hodisalarni sana böyiça körsatiş →
schedule - Darajani faqat rang bilan qoldirmang — har katakda sana va qiymat matni bor, ma'lumot jadvali yoki röyxat muqobil bölsin.
- 5 dan köp daraja qilmang — soyalar ajralmay qoladi.
- Bir neça yildan köp davrni bitta xaritaga joylamang — yil böyiça böling.
- Nol va ma'lumot yöq kunni aralaştirmang — ma'lumot yöq kun uçun katakni qoldirmang, 0 qiymat bering.
npx foxui add heatmap
<div class="fx-heatmap" data-fx-heatmap data-start="2026-06-01" data-unit="ta vazifa" aria-label="Sönggi 20 hafta: kunlik bajarilgan vazifalar" data-values="3,4,6,5,0,3,0,4,0,0,5,4,0,0,4,1,3,7,2,0,0,1,3,0,2,2,0,0,3,6,3,4,2,0,0,7,2,1,0,2,0,0,8,0,0,0,1,1,0,4,3,4,1,0,0,0,3,0,3,2,6,0,0,2,7,8,0,0,0,0,7,2,0,3,3,0,4,0,8,2,5,0,0,2,4,3,1,2,2,0,7,0,0,1,5,0,1,1,3,2,5,6,1,8,5,2,1,3,0,2,1,3,4,0,0,0,3,0,0,5,5,0,0,0,0,0,0,0,1,0,7,0,3,8,4,5,0,4,0,2"></div> <!-- Kichik oʻlcham --> <div class="fx-heatmap" data-size="sm" data-fx-heatmap data-start="2026-08-03" data-unit="ta maşq" aria-label="Maşqlar" data-values="3,4,6,5,0,3,0,4,0,0,5,4,0,0,4,1,3,7,2,0,0,1,3,0,2,2,0,0,3,6,3,4,2,0,0,7,2,1,0,2,0,0,8,0,0,0,1,1,0,4,3,4,1,0,0,0,3,0,3,2,6,0,0"></div>
Tokenlar: --fx-bg-surface --fx-border-color-strong --fx-border-width-default --fx-font-size-xs --fx-radius-badge --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-secondary --fx-text-tertiary --fx-viz-brand --fx-viz-track