4. Genel Tasarım — DataGrid (Table)
Bu adımda DataGrid widget'ın tüm görsel ve fonksiyonel ayarları yapılır: kolon görünürlüğü, sıra, genişlik, başlık stili, satır stili, ızgara çizgileri, yığılmış başlıklar, sayfalama, kaydırma çubukları, sıralama, filtreleme, sütun yönetimi ve koşullu biçimlendirme.
Sihirbaz rotası: /cartography/add/generaldesign
1. Ekran Düzeni
Sol tarafta yapılandırma formu (kolon listesi, başlık/satır/ızgara ayarları), sağ tarafta canlı tablo önizlemesi yer alır.
2. Sütun Başlıkları
| Alan | Açıklama | Birim |
|---|---|---|
| Header Background Color | Başlık satırı arka plan rengi | renk |
| Header Text Color | Başlık metin rengi | renk |
| Header Font Size | Başlık font boyutu | px |
| Header Height | Başlık satırı yüksekliği | px |
| Bold Font | Başlık kalın olsun mu | toggle |
| Header Hover Color | Başlık üzerine gelince renk | renk |
Alan Detayları — Sütun Başlıkları
Sütun Başlıkları Bilgisi Sütun başlık hücrelerinin görünümünü yapılandırır — arka plan rengi, yazı rengi, yazı boyutu, yazı kalınlığı ve metin hizalaması. Başlıklar her sütunun üst kısmında görünür ve sütun adını gösterir.
Başlık Arka Planı — Sütun başlığı satırının arka plan rengi. Başlık Metin Rengi — Sütun başlıklarında görüntülenen metin etiketlerinin rengi. Yazı Boyutu ve Kalınlık — Başlık metin boyutunu piksel cinsinden ayarlar. Üzerine Gelme Rengi — Kullanıcı başlık hücresinin üzerine geldiğinde uygulanan arka plan rengi.
3. Satır ve Hücre Stili
| Alan | Açıklama | Birim |
|---|---|---|
| Row Background Color | Satır arka plan rengi | renk |
| Row Text Color | Satır metin rengi | renk |
| Alternating Row Color | Tek/çift satır farklı renk (zebra) | renk |
| Selection Color | Seçili satır rengi | renk |
| Cell Font Size | Hücre font boyutu | px |
| Cell Padding Horizontal | Hücre yatay padding'i | px |
| Row Hover Color | Satır üzerine gelince arka plan rengi | renk |
| Row Hover Text Color | Hover metin rengi | renk |
| Row Hover Font Size | Hover font boyutu | px |
Alan Detayları — Satır ve Hücre Stili
Satır ve Hücre Stili Bilgisi Veri satırlarının ve bireysel hücrelerin görsel stilini kontrol eder — satır arka plan rengi, alternatif satır rengi, hücre yazı rengi, yazı boyutu ve metin hizalaması. Alternatif satır renkleri büyük tablolarda okunabilirliği artırır.
Satır Arka Planı — Tüm veri satırları için varsayılan arka plan rengi. Alternatif Satır — Her ikinci satır için arka plan rengi; zebra şeridi efekti. Satır Metin Rengi — Tüm veri hücrelerinde kullanılan metin rengi. Yazı Boyutu ve Dolgu — Hücre metin boyutunu piksel cinsinden ve yatay hücre dolgusunu ayarlar. Satır Üzerine Gelme Stili — Kullanıcı bir veri satırının üzerine geldiğinde arka plan rengi ve metin boyutu gibi özel stiller uygular.
Alternating Row Color
Açık gri (#F9FAFB) ve beyaz dönüşümlü satırlar uzun listelerde okunabilirliği artırır.
4. Izgara Çizgileri
| Alan | Açıklama |
|---|---|
| Grid Line Color | Çizgi rengi |
| Grid Line Width | Çizgi kalınlığı (px) |
| Show Vertical Grid Lines | Dikey çizgiler |
| Show Horizontal Grid Lines | Yatay çizgiler |
Alan Detayları — Izgara Çizgileri
Kılavuz Çizgileri ve Kenarlıklar Bilgisi Hücreler arasındaki yatay ve dikey ayırıcıların kılavuz çizgisi görünürlüğünü ve stilini yapılandırır.
Izgara Çizgisi Görünürlüğü — Hangi çizgilerin çizileceğini seçin: hem satır hem sütun, yalnızca yatay, yalnızca dikey veya hiçbiri. Izgara Çizgisi Rengi — Kılavuz satırları ve sütunlarını birbirinden ayıran çizgilerin rengi. Izgara Çizgisi Kalınlığı — Kılavuz ayırıcı çizgilerinin piksel cinsinden kalınlığı.
5. Sütun Yapılandırması
DataGrid'in en önemli bölümü. Compass'tan gelen tüm kolonlar listelenir; her kolon için ayar yapılır.
| Alan | Açıklama |
|---|---|
| Kolon Görünürlüğü | Her kolonu aç / gizle (toggle) |
| Kolon Sırası | Sürükle-bırak ile yeniden sırala |
| Kolon Genişliği | Sabit piksel veya esnek genişlik |
| Sıralanabilir | Başlığa tıklayınca sıralama (toggle) |
| Filtrelenebilir | Kolon başında filtre kutusu (toggle) |
Alan Detayları — Sütun Yapılandırması
Sütun Yapılandırması Bilgisi Sorgu sonucu sütunlarını ızgara sütunlarına eşler ve etiket, genişlik, hizalama, sayı formatı ve bireysel hücreler için koşullu renk kuralları gibi sütun başına özellikleri ayarlamanıza olanak sağlar.
Sütun Sırası Bu listede satırları sürükleyerek varsayılan sütun sırasını ve her sütunun başlık ve genişliğini tanımlayın.
Hangi Kolon Görünsün?
Sorgu çok kolonlu dönüyorsa burada görünmesini istediğiniz kolonları seçin; gereksiz kolonları gizleyin. Tablo genişliği ve okunabilirlik artar. Önerilen: ekranda en fazla 8-10 kolon görünür kalsın.
6. Yığılmış Başlıklar (Stacked Headers)
Birden fazla sütuna yayılan çok düzeyli sütun başlıkları. İlgili sütunları ortak bir üst etiket altında gruplamak için kullanılır.
| Alan | Açıklama |
|---|---|
| Başlık Satırları | Çok seviyeli sütun başlığı grupları ekle |
| Başlık Grubu Stili | Gruplanmış başlık hücreleri için arka plan, metin rengi, yazı boyutu ve kalınlık |
Alan Detayları — Yığılmış Başlıklar
Yığılmış Başlıklar Bilgisi Birden fazla sütuna yayılan çok düzeyli sütun başlıkları ekler. İlgili sütunları ortak bir üst etiket altında gruplamak ve daha net hiyerarşik yapı sağlamak için kullanın.
Başlık Satırları Çok seviyeli sütun başlığı grupları ekleyin ve yapılandırın. Her satır, seçili sütunları kapsayan bir başlık katmanı tanımlar.
Başlık Grubu Stili Tüm yığılmış (gruplanmış) başlık hücreleri için arka plan rengi, metin rengi, yazı boyutu ve kalın stil ayarlar.
Stacked Header Kullanım Örneği
Makine 1 ve Makine 2 sütunlarını Üretim Verileri başlığı altında gruplamak için iki sütunu kapsayan bir Stacked Header tanımlayın.
7. Sayfalama ve Kaydırma Çubukları
| Alan | Açıklama |
|---|---|
| Sayfalama Aktif | Veriyi sayfalara böl |
| Sayfa Başına Satır | Bir sayfada gösterilecek satır sayısı (10/20/50/100) |
| Sayfalayıcı Yüksekliği | Sayfalama çubuğunun piksel cinsinden yüksekliği |
| Görünür Sayfa Düğmesi Sayısı | Sayfalayıcıda gösterilecek sayfa numarası sayısı |
| Sayfalayıcı Konumu | Üstte mi altta mı |
| Yatay Kaydırma Çubuğu | Her zaman görünür / yalnızca taştığında |
| Dikey Kaydırma Çubuğu | Her zaman görünür / yalnızca taştığında |
Alan Detayları — Sayfalama ve Kaydırma Çubukları
Sayfalama ve Kaydırma Çubukları Bilgisi Veri sayfalamayı (sayfa başına satır) ve kaydırma çubuğu görünürlüğünü kontrol eder. Sayfalama büyük veri setlerinde performansı artırarak bir seferde kaç satır yükleneceğini sınırlar.
Sayfalamayı Etkinleştir — Veriyi sayfalara böler ve sayfalayıcı denetimi gösterir. Sayfalayıcı Yapılandırması — Sayfa başına satır sayısını, sayfalayıcı yüksekliğini, görünür sayfa düğmesi sayısını ve konumunu ayarlar. Kaydırma Çubukları — Yatay ve dikey kaydırma çubuklarının her zaman mı yoksa yalnızca içerik taştığında mı görüntüleneceğini kontrol eder.
Sayfalama vs Scroll
100+ satırda sayfalama; <100 satırda scroll yeterli. Çok yoğun (>500) verilerde sayfalama performansı korur.
Refresh ve Sayfalama
Refresh aralığı dolduğunda tablo sıfırlanır ve ilk sayfaya döner. Kullanıcı inceleme yaparken veriyi kaybetmemesi için Refresh Interval ≥ 30 sn önerilir.
8. Sıralama ve Filtreleme
| Alan | Açıklama |
|---|---|
| Sıralama | Sütun başlığına tıklayarak satırları artan/azalan sırala |
| Çok Sütunlu Sıralama | Birden fazla sütuna göre aynı anda sırala |
| Sıralama İkonu Rengi | Sıralama ikonunun rengi |
| Filtreleme | Sütun başlıklarında filtre ikonu göster |
Alan Detayları — Sıralama ve Filtreleme
Sıralama ve Filtreleme Bilgisi Etkileşimli sütun sıralamayı (artan/azalan sıralamak için sütun başlığına tıklayın) ve filtre satırını (gerçek zamanlı olarak satırları sütun değerine göre filtrelemek için başlığın altında metin giriş satırı) etkinleştirir.
Sıralama — Sütun başlığına tıklayarak satırların sıralanmasını etkinleştirir. Çok sütunlu sıralamaya izin verebilir ve sıralama ikonu rengini özelleştirebilirsiniz. Filtreleme — Sütun başlıklarında kullanıcıların satırları sütun değerlerine göre filtrelemesini sağlayan bir filtre ikonu gösterir.
Alarm Tablosunda Filtreleme
Alarm tablosunda makine_adi kolonunu filtrelenebilir yaparsanız operatör belirli bir makineye ait alarmları gerçek zamanlı olarak görebilir.
9. Sütun Yönetimi
| Alan | Açıklama |
|---|---|
| Kolon Yeniden Sıralama | Kullanıcı çalışma zamanında sütunları sürükleyerek yeniden sıralar |
| Kolon Yeniden Boyutlandırma | Kullanıcı sütun kenarlığını sürükleyerek genişliği değiştirir |
Alan Detayları — Sütun Yönetimi
Sütun Yeniden Sıralama — Kullanıcıların çalışma zamanında sütun başlıklarını sürükleyerek sütun sırasını değiştirmesine olanak tanır. Sütun Yeniden Boyutlandırma — Sütun başlıkları arasındaki kenarlığı sürükleyerek sütunların yeniden boyutlandırılmasını etkinleştirir.
10. Koşullu Biçimlendirme
Bir sütunun değeri tanımlı bir koşulu karşıladığında belirli hücrelere veya satırlara arka plan veya yazı rengi uygular.
| Alan | Açıklama |
|---|---|
| Kural Kolonu | Koşulun değerlendirileceği veri sütunu |
| Karşılaştırma Operatörü | ==, !=, >, <, >=, <=, içerir, boş, boş değil |
| Eşik Değeri | Karşılaştırma değeri |
| Stil Uygulaması | Tüm satıra mı yoksa yalnızca eşleşen hücreye mi |
| Arka Plan Rengi | Koşul sağlandığında uygulanan arka plan rengi |
| Yazı Rengi | Koşul sağlandığında uygulanan metin rengi |
Alan Detayları — Koşullu Biçimlendirme
Koşullu Biçimlendirme Bir sütunun değeri tanımlı bir koşulu karşıladığında belirli hücrelere veya satırlara arka plan veya yazı rengi uygular. Sütun başına birden fazla koşul desteklenir ve sırayla değerlendirilir.
Her kural şunları içerir: - Kural Tanımı: Bir veri sütunu, karşılaştırma operatörü (==, !=, >, <, >=, <=, içerir, boş, boş değil) ve eşik değeri seçin. Sütun değeri koşulu sağladığında aşağıdaki stil uygulanır. - Stil Uygulaması: Stilin tüm satıra mı yoksa yalnızca eşleşen hücreye mi uygulanacağını seçin. Arka plan rengini ve/veya yazı rengini bağımsız olarak etkinleştirebilirsiniz. Her ikisi de isteğe bağlıdır.
Alarm Listesinde Koşullu Renk
Alarm tablosunda oncelik kolonuna göre:
- YÜKSEK → 🔴 kırmızı
- ORTA → 🟡 sarı
- DÜŞÜK → ⚪ beyaz
11. Onaylama
Sağ üstteki Next butonuna tıkladığınızda flow.hasGeneralDesign = true işaretlenir.