8. Kart Tasarımı — Standart Cartesian
Bu adımda widget'ın dış kart görünümü yapılandırılır: kart arka planı, kart başlığı, refresh interval, padding, kenarlık, gölge ve info card (Markdown).
Sol tarafta form, sağ tarafta canlı kart önizlemesi yer alır.
Sihirbaz rotası: /cartography/add/carddesign
1. General Settings
| Alan | Açıklama | Birim / Tip |
|---|---|---|
| Chart Name | Kartın üst kısmında gösterilecek başlık | metin |
| Chart Refresh Interval | Veri yeniden çekme periyodu | saniye |
Standart Cartesian için Refresh Interval Önerisi
| Veri Kaynağı | Önerilen Refresh | Gerekçe |
|---|---|---|
| MQTT (canlı) | 0 |
Anlık akış zaten geliyor — gereksiz çekim |
| SQL — saatlik trend | 30 - 60 sn |
Veriler genellikle dakikalar içinde değişir |
| SQL — vardiya bazlı | 300 sn |
5 dakikada bir kontrol yeterli |
| REST API (ERP / MES) | 300 - 900 sn |
Cache politikasına göre |
| Excel Offline | 0 |
Manuel güncelleme; refresh anlamlı değil |
5 saniyenin altı
Chart Refresh Interval < 5 saniye veritabanı yükünü artırır ve ağ trafiğini gereksiz şişirir. MQTT ile birleştirin veya backend'de TimescaleDB continuous aggregation kullanın.
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 |
| Card Title Color | Başlık metin rengi | renk |
| Card Title Font Size | Başlık font boyutu | px |
Kart Başlığı vs Chart Başlığı
Kart başlığı widget kartının dış üst kısmında görünür (örn. dashboard'da listelenir). Chart başlığı (7. adım) chart çizim alanı üzerinde yer alır. İkisi farklıdır; her ikisini doldurmanız gerekmez.
3. Info Card
Info card, widget'a ek açıklama, formül veya operatör notu eklemek için kullanılır. Markdown formatında yazılır.
| Alan | Açıklama |
|---|---|
| Show Info Card | Info card görünür mü (toggle) |
| Info Card Content | Markdown editör — başlık, liste, link, kalın/italik destekler |
| Expand Editor | Editörü tam ekran açma butonu |
Standart Cartesian için Info Card Kullanım Senaryoları
- Trend chart'ta formülü açıklayın: "OEE = Availability × Performance × Quality"
- Vardiya Column'da vardiya tanımlarını gösterin (V1: 06-14, V2: 14-22, V3: 22-06)
- Eşik değerler Line chart'ında uyarı: "≥ 85 °C → bakım planlama"
## Hat-3 Sıcaklık Trendi
- Hedef: ≤ 85 °C
- Operatör notu: 90 °C üstünde rapor edin
> Saatlik ortalama; veri TimescaleDB'den 5 dk continuous agg ile gelir.
4. Spacing
| Alan | Açıklama | Birim |
|---|---|---|
| Padding | Kart iç boşluğu (kart kenarı ile chart arası) | px |
Yoğun Dashboard'da Padding
Bir Horizon dashboard'unda 6+ widget yan yanaysa Padding'i 8-12 px tutun; chart alanı maksimumda kalsın.
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)
Bazı tema sürümlerinde gölge alanı da görünür:
| 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 ve son adıma geçilir.