Widget Tipleri
Bu sayfa, Dashboard Oluşturma ekranında widget seçim modalında listelenen tüm widget tiplerini açıklar. Widget ekleme ve konfigürasyon için createDashboard yetkisi gerekir.
Genel Bakış
Retmes Dashboard'da widget'lar sekiz ana grupta sunulur. Her grup, farklı görsel ihtiyaçlara yönelik tiplerden oluşur. Widget seçim modalında gruplar sol panelde listelenir; bir gruba tıklandığında o gruba ait tipler açılır.
Her widget üç temel unsurdan oluşur:
| Unsur | Açıklama |
|---|---|
| Tip | Widget'ın görsel formu (kart, gösterge, grafik, tablo, bağlantı vb.) |
| Veri Kaynağı | Widget'ı besleyen REST API veya WebSocket (socket) kaynağı |
| Tasarım Parametreleri | Renk, boyut, min/max, sembol gibi görsel özelleştirmeler |
Tüm widget tipleri koşullu renk/değer mantığını destekler: belirli eşiklere göre otomatik renk, metin veya görsel değişimi tanımlanabilir.
Grup 1 — OEE Göstergesi
Kullandığı veri kaynağı: OEE API veya Socket (anlık OEE yüzdesi)
OEE Göstergesi widget grubu, istasyonlara ait anlık OEE yüzdesini renk kodlamalı biçimde görselleştirmek için kullanılır. Fabrika koridoru ekranlarında ve yönetim panellerinde en sık kullanılan widget grubudur.
Tipler
| Tip | Ad | Açıklama |
|---|---|---|
basicGauge | Temel OEE Göstergesi | Yarım daire kadran; tek renk ark; anlık OEE % değeri gösterir |
colorfulGauge | Renkli OEE Göstergesi | Çok renkli ark; farklı OEE aralıklarına farklı renkler atanabilir (kırmızı/sarı/yeşil bölgeler) |
advancedGauge | Gelişmiş OEE Göstergesi | Hedef çizgisi ve birden fazla ibre desteği; OEE ve hedef OEE karşılaştırması için |
concentricCard | Konsantrik OEE Kartı | Merkez OEE % ve dört yönde Kullanılabilirlik, Performans, Kalite çubuk göstergeli halka kart |
Konfigürasyon Parametreleri
| Parametre | Açıklama |
|---|---|
| İstasyon | OEE değeri çekilecek istasyon seçimi |
| Min Değer | Kadran alt sınırı (genellikle 0) |
| Max Değer | Kadran üst sınırı (genellikle 100) |
| Sembol | Değerin yanında görünecek birim (%) |
| Renk Aralıkları | Hangi OEE aralığında hangi rengin kullanılacağı (örn. 0-65 → kırmızı, 65-85 → sarı, 85-100 → yeşil) |
| Sorgu Aralığı | API tabanlı kaynakta kaç saniyede bir güncelleneceği |
| Canlı Bağlantı | Socket kaynağı seçildiğinde anlık veri akışı etkinleştirilir |
Yaygın kullanım: Fabrika OEE panosu, istasyon bazlı verimlilik izleme, yönetim odası ekranı.
Grup 2 — Üretim Sayacı
Kullandığı veri kaynağı: Üretim API (iş emrine bağlı hedef ve gerçekleşen adet)
Üretim Sayacı widget'ları, aktif iş emrindeki hedef üretim adedini gerçekleşen üretim adediyle karşılaştırmalı olarak gösterir. Operatörün anlık durumu izlemesi ve vardiya hedefine ne kadar uzakta olduğunu görmesi için tasarlanmıştır.
Tipler
| Tip | Ad | Açıklama |
|---|---|---|
basicCard | Temel Üretim Sayacı | Başlık + tek sayısal değer (gerçekleşen üretim adedi) + birim sembolü |
targetBarCard | Hedef Çubuk Sayacı | Gerçekleşen değeri hedefe olan mesafe çubuğuyla birlikte gösterir |
progressBar | İlerleme Çubuğu | Yatay çubuk; hedef tamamlanma yüzdesi |
twoValueCard | İki Değer Sayacı | Hedef ve gerçekleşen adedi yan yana iki değer olarak gösterir |
basicCircleBar | Daire Çubuğu Sayacı | Tamamlanma oranını dairesel ilerleme çubuğuyla gösterir |
Konfigürasyon Parametreleri
| Parametre | Açıklama |
|---|---|
| İstasyon | Üretim sayacı verisi çekilecek istasyon |
| Hedef Değer Kaynağı | Aktif iş emrinden gelen planlanan adet |
| Gerçekleşen Değer Kaynağı | Anlık tamamlanan adet |
| Sembol | Birim (adet, kg, m vb.) |
| Koşullu Renk | Belirli tamamlanma oranının altındaysa renk değiştirme kuralı |
Yaygın kullanım: Operatör paneli, vardiya hedef takibi, hat performans ekranı.
Grup 3 — Duruş Sayacı
Kullandığı veri kaynağı: Plansız Duruş API veya Socket (aktif duruş süresi)
Duruş Sayacı widget'ları, bir istasyondaki aktif duruş süresini ve duruş sebebini canlı olarak gösterir. Duruş başladığında widget renk değiştirir; süre otomatik sayar.
Tipler
| Tip | Ad | Açıklama |
|---|---|---|
basicCard | Temel Duruş Sayacı | Aktif duruş süresi (ss:dd:sn formatında) |
timeline | Duruş Zaman Çizelgesi | Belirli bir dönemdeki duruş olaylarını yatay şerit üzerinde görselleştirir |
multiValueCard | Çok Değer Duruş Kartı | Duruş süresi, sebep kodu ve duruş adedi bir arada |
Konfigürasyon Parametreleri
| Parametre | Açıklama |
|---|---|
| İstasyon | Duruş verisi izlenecek istasyon |
| Duruş Tipi | Planlı veya plansız duruş filtresi |
| Uyarı Eşiği | Kaç dakika sonra uyarı rengi gösterileceği |
| Canlı Bağlantı | Socket üzerinden anlık duruş güncellemesi |
Yaygın kullanım: Bakım müdahale ekranı, hat duruş panosu, Andon ekranı.
Grup 4 — İstasyon Durumu
Kullandığı veri kaynağı: İstasyon durumu Socket veya API (Çalışıyor / Duruyor / Bakım)
İstasyon Durumu widget'ları, bir istasyonun anlık çalışma durumunu renk kodlamalı ışık veya kart olarak gösterir. Trafik ışığı mantığıyla (yeşil/kırmızı/sarı) birden fazla istasyonun durumu tek ekranda izlenebilir.
Tipler
| Tip | Ad | Açıklama |
|---|---|---|
basicCard | Durum Kartı | İstasyon adı ve durum metni (Çalışıyor / Duruyor / Bakımda) |
conditionalImageLinkWithCustomize | Koşullu Durum Görseli | Duruma göre farklı görsel gösterir (yeşil ışık / kırmızı ışık) |
multiConditionalImageLinkWithCustomize | Çok Koşullu Durum | Çalışıyor, Duruyor, Bakım, Arıza gibi çoklu duruma göre görsel seçimi |
styledOpenClose | Açık/Kapalı Sembolü | Elektrik devresi mantığıyla açık/kapalı durum göstergesi |
Konfigürasyon Parametreleri
| Parametre | Açıklama |
|---|---|
| İstasyon | İzlenecek istasyon seçimi |
| Çalışıyor Rengi | İstasyon çalışıyorken görünecek renk (genellikle yeşil) |
| Duruyor Rengi | İstasyon durunca görünecek renk (genellikle kırmızı) |
| Bakım Rengi | Bakım modundaki renk (genellikle sarı) |
| Koşullu Görseller | Her durum için farklı görsel veya ikon |
Yaygın kullanım: Fabrika planı üzerine istasyon durumu, Andon ekranı, hat izleme.
Grup 5 — Hız Göstergesi
Kullandığı veri kaynağı: Etiket (tag) değeri API veya Socket (anlık hız, tork, basınç vb.)
Hız Göstergesi widget'ları, makinenin anlık çalışma hızını hedef hızla karşılaştırmalı biçimde gösterir. OEE Performans bileşeniyle doğrudan ilişkilidir.
Tipler
| Tip | Ad | Açıklama |
|---|---|---|
basicGauge | Temel Hız Göstergesi | Anlık hız değeri kadran üzerinde; min/max aralığı tanımlanabilir |
colorfulGauge | Renkli Hız Göstergesi | Hız aralıklarına göre renk değiştiren kadran |
advancedGauge | Hedefli Hız Göstergesi | Hedef hız çizgisi ve anlık hız ibresi bir arada |
basicCard | Hız Kartı | Sayısal anlık hız değeri ve hedef hız yan yana |
dualChart | Çift Eksen Hız Grafiği | Anlık hız ve hedef hızı zaman serisi olarak karşılaştırmalı gösterir |
Konfigürasyon Parametreleri
| Parametre | Açıklama |
|---|---|
| Etiket (Tag) | Hız değerini yayınlayan makine etiketi seçimi |
| Min / Max Değer | Kadran ölçek aralığı (0–makinenin maksimum hızı) |
| Hedef Değer | Karşılaştırma için referans hız |
| Sembol | Birim (m/dk, devir/dk, adet/saat vb.) |
| Renk Aralıkları | Hangi hız aralığında hangi renk kullanılacağı |
Yaygın kullanım: Makine performans izleme, OEE Performans bileşeni görselleştirme, CNC/pres hız takibi.
Grup 6 — Shift Tablosu (Vardiya Özeti)
Kullandığı veri kaynağı: Vardiya API (tamamlanan ve devam eden vardiyaların üretim özeti)
Shift Tablosu widget'ı, günlük veya haftalık vardiyaların üretim özetini tablo formatında listeler. Her satır bir vardiyayı temsil eder; hedef, gerçekleşen, fire, OEE ve duruş süresi sütunları yer alır.
Tipler
| Tip | Ad | Açıklama |
|---|---|---|
dynamicTable | Dinamik Vardiya Tablosu | API'den gelen vardiya verilerini sütunlara bölerek tablo halinde gösterir |
llPaginatedTable | Sayfalandırılmış Tablo | Çok sayıda vardiya kaydı için sayfalama desteği |
Konfigürasyon Parametreleri
| Parametre | Açıklama |
|---|---|
| İstasyon | Üretim özeti alınacak istasyon |
| Tarih Aralığı | Son N vardiya veya belirli bir tarih aralığı |
| Görünür Sütunlar | Hedef, Gerçekleşen, Fire, OEE, Duruş Süresi sütunlarının görünürlük seçimi |
| Satır Başına Renk | Belirli koşullarda (örn. OEE < %70) satır arka plan rengi |
Yaygın kullanım: Vardiya karşılaştırma panosu, üretim toplantısı ekranı, vardiya amiri paneli.
Grup 7 — Grafik Widget (Zaman Serisi)
Kullandığı veri kaynağı: Zaman serisi API (OEE trendi, üretim trendi, hız trendi vb.)
Grafik Widget'lar, belirli bir metriğin zaman içindeki değişimini trend grafikleri olarak görselleştirir. Saatlik, günlük veya vardiya bazlı eğilimleri takip etmek için kullanılır.
Tipler
| Tip | Ad | Açıklama |
|---|---|---|
basicBarChart | Kolon Grafiği | Tek veya çok serili dikey çubuk grafik; günlük/saatlik kırılım için idealdir |
mixedBarChart | Karışık Grafik | Kolon ve çizgi serisini aynı eksende birleştirir (örn. üretim adedi + OEE çizgisi) |
dualChart | Çift Eksen Grafik | Sol ve sağ Y eksenleri farklı ölçekli iki seri için (örn. adet ve % oran) |
dynamicBarChart | Dinamik Çubuk Grafik | Veri kaynağı değişkenine göre otomatik güncellenen çubuk grafik |
runBarChart | Koşu Çubuğu Grafiği | Değerlerin zaman içindeki değişimini animasyonlu çubuk yarışı formatında gösterir |
advancedPolarChart | Polar Grafik | Radar / polar eksenli karşılaştırmalı grafik |
Konfigürasyon Parametreleri
| Parametre | Açıklama |
|---|---|
| Veri Serisi | Grafikte gösterilecek bir veya birden fazla metrik |
| Zaman Aralığı | Grafiğin kapsayacağı dönem (son 8 saat, son 24 saat vb.) |
| Seri Renkleri | Her veri serisinin rengi |
| X Ekseni Formatı | Zaman etiketleri formatı (saat:dakika, gün/ay vb.) |
| Y Ekseni Min / Max | Grafik dikey ölçek aralığı |
| Sorgu Aralığı | Kaç dakikada bir yeni veri çekileceği |
Yaygın kullanım: OEE trend grafiği, saatlik üretim çubuk grafiği, enerji tüketimi trendi.
Grup 8 — Metin ve Görsel Widget
Kullandığı veri kaynağı: Statik (veri kaynağı gerektirmez) veya dinamik değer API
Metin Widget, statik bir açıklama veya başlık metni gösterir; ya da bir veri kaynağından gelen değeri dinamik olarak görüntüler. Görsel Widget ise logo, fabrika planı veya herhangi bir görsel dosyayı dashboard üzerine yerleştirmek için kullanılır.
Tipler
| Tip | Ad | Açıklama |
|---|---|---|
basicCard | Metin Kartı | Statik başlık veya açıklama metni; arka plan rengi ve yazı boyutu özelleştirilebilir |
basicCardWithCustomize | Özelleştirilebilir Metin Kartı | Yazı tipi, hizalama ve arka plan tamamen özelleştirilebilir statik veya dinamik metin kartı |
clock | Saat Widget | Dijital veya analog sistem saatini canlı olarak gösterir |
basicImageLinkWithCustomize | Görsel Widget | Görsel dosya yüklenerek dashboard üzerine yerleştirilir; isteğe bağlı tıklanabilir bağlantı |
basicLink | Metin Bağlantısı | Metin etiketli tıklanabilir bağlantı; başka dashboard veya dış URL'e yönlendirir |
timerLink | Zamanlı Yönlendirme | Sayaç tamamlandığında otomatik olarak hedef URL'e yönlendiren bağlantı |
heatMap | Isı Haritası | Matris formatında değerleri renk yoğunluğuyla görselleştirir |
sankeyDiagram | Sankey Diyagramı | Akış ve dönüşüm ilişkilerini orantılı bant genişliğiyle gösterir |
Konfigürasyon Parametreleri
| Parametre | Açıklama |
|---|---|
| Metin / İçerik | Statik metin veya dinamik değer ifadesi |
| Görsel Dosyası | PNG, JPEG veya SVG formatında yüklenen görsel |
| Bağlantı URL | Tıklandığında açılacak hedef adres |
| Yazı Boyutu / Renk | Metin biçimlendirme seçenekleri |
| Arka Plan Rengi | Widget zemini rengi |
Yaygın kullanım: Şirket logosu, bölüm başlıkları, fabrika planı zemin görseli, dashboard'lar arası navigasyon.
Genel Widget Parametre Referansı
Tüm widget tiplerinde ortak bulunan genel parametreler:
| Parametre | Tip | Açıklama |
|---|---|---|
| Başlık / Metin | String | Widget üst etiket veya başlık metni |
| Metin Rengi | Color | Başlık metninin rengi |
| Yazı Boyutu | Number | Metin büyüklüğü (px) |
| Yatay Hizalama | List | Sol, Merkez, Sağ |
| Dikey Hizalama | List | Üst, Orta, Alt |
| Arka Plan | Color | Widget iç arka plan rengi |
| Kenar Yarıçapı | Number | Köşe yuvarlaklığı (px) |
| Gölge | Boolean | Kart gölge efekti |
| Dolgu | Number | İç boşluk — padding (px) |
Değer parametrelerinde yaygın olarak kullanılanlar:
| Parametre | Tip | Açıklama |
|---|---|---|
| Değer Rengi | Color | Sayısal değerin rengi |
| Değer Yazı Boyutu | Number | Değer metninin boyutu (px) |
| Sembol | String | Değerin yanında gösterilecek birim (%, °C, adet vb.) |
| Sembol Rengi | Color | Birim metninin rengi |
| Min Değer | Number | Gösterge/çubuk aralığının alt sınırı |
| Max Değer | Number | Gösterge/çubuk aralığının üst sınırı |
| Basamak Sayısı | Number | Ondalık gösterimde kaç basamak |
| Binlik Ayraç | Boolean | Binlik basamak ayraç gösterimi (1.000 / 1000) |
Modüller Arası Bağlantılar
| İlişki | Modül | Açıklama |
|---|---|---|
| Dashboard genel | Dashboard Nedir? | Mimari açıklama ve veri kaynağı türleri |
| Widget ekleme | Dashboard Oluşturma | Adım adım widget ekleme ve konfigürasyon rehberi |
| İstasyon verileri | ../tanimlamalar/istasyonlar | Widget veri kaynaklarında kullanılan istasyon listesi |
| OEE hesaplama | ../izlemeler/oee-haritasi | OEE widget'larının beslediği hesaplama altyapısı |
| Plansız duruşlar | ../kalite-uretim/planssiz-duruslar | Duruş Sayacı widget'ının veri kaynağı |