8. Kart Tasarımı — Stacked Cartesian
Bu adımda Stacked widget'ın dış kart görünümü yapılandırılır: kart arka planı, kart başlığı, refresh interval, padding, kenarlık, info card.
Sihirbaz rotası: /cartography/add/carddesign
1. General Settings
| Alan | Açıklama | Birim |
|---|---|---|
| Chart Name | Kartın üst kısmında gösterilecek başlık | metin |
| Chart Refresh Interval | Veri yeniden çekme periyodu | saniye |
Stacked için Refresh Interval Önerisi
Stacked akışı genellikle aggregate sorgularla beslendiği için uzun refresh aralıkları önerilir.
| Senaryo | Önerilen Refresh |
|---|---|
| Vardiya bazlı Stacked Column | 300 - 600 sn |
| Aylık Stacked Bar | 3600 sn (saatlik) |
| Günlük Stacked Area trend | 300 - 900 sn |
| %100 Stacked karma analiz | 600 - 1800 sn |
Stacked'da Sık Refresh
Stack By kategorileri her refresh'te yeniden hesaplanır. Çok sık refresh (5 sn altı) hem veritabanı yükünü artırır hem de stack renk paletinin yeniden hizalanmasına sebep olabilir.
2. Card Display
| Alan | Açıklama | Tip |
|---|---|---|
| Card Background Color | Kartın arka plan rengi | renk |
| Card Title Position | Başlık hizası: Left / Center / Right | enum |
| Card Title Color | Başlık metin rengi | renk |
| Card Title Font Size | Başlık font boyutu | px |
3. Info Card
Info card, Stacked widget'ta katman tanımları, kategori açıklamaları veya hesaplama formülünü göstermek için ideal.
| Alan | Açıklama |
|---|---|
| Show Info Card | Info card görünür mü (toggle) |
| Info Card Content | Markdown editör |
| Expand Editor | Editörü tam ekran açma |
## Vardiya × Ürün Dağılımı
- **V1**: 06:00 - 14:00
- **V2**: 14:00 - 22:00
- **V3**: 22:00 - 06:00
> Top-5 ürün gösterilir; geri kalan **Diğer** olarak grupludur.
4. Spacing
| Alan | Açıklama | Birim |
|---|---|---|
| Padding | Kart iç boşluğu | px |
Stacked'da Padding
Legend dışarıda (right/bottom) ise Padding'i 12-16 px tutun; legend taşması engellenir.
5. Border
| Alan | Açıklama | Birim |
|---|---|---|
| Border Color | Kart kenarlık rengi | renk |
| Border Radius | Köşe yuvarlama yarıçapı | px |
| Border Width | Kenarlık kalınlığı | px |
6. Shadow (varsa)
| Alan | Açıklama |
|---|---|
| Shadow Blur | Gölge yumuşaklığı |
| Shadow Offset X / Y | Gölgenin yön kayması |
| Shadow Opacity | Gölge şeffaflığı |
7. Onaylama
Sağ üstteki Next butonuna tıkladığınızda flow.hasCardDesign = true işaretlenir.