1. Gauge Chart Elementine Genel Bakış

Gauge Chart elementi, bir değerin belirlenen hedef aralığı içindeki konumunu görsel olarak ifade etmenin etkili bir yolunu sunar. Genellikle yarım daire veya tam daire biçiminde tasarlanmış bir gösterge paneli (gauge) ve ibre yapısıyla çalışır. Bir performans göstergesinin mevcut seviyesini, bir hedefe ulaşma oranını veya bir ölçümün anlık durumunu kolayca anlamak için kullanılabilir. KPI takibi, başarı yüzdesi, kapasite kullanımı ve ölçüm değerlerinin izlenmesi gibi senaryolarda yaygın olarak tercih edilir. 

Gauge Chart elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Hedefe ulaşma oranlarını göstermek (ör. satış hedefi, bütçe gerçekleşme oranı, aylık KPI yüzdesi)
• Bir performans ölçütünün mevcut seviyesini izlemek (ör. üretim kapasitesi, başarı oranı, doluluk seviyesi)
• Gerçek zamanlı ölçümleri görselleştirmek (ör. sıcaklık, hız, skor, sistem yükü)
• Belirli bir değer aralığında durum göstermek (ör. düşük–orta–yüksek risk seviyeleri)
• KPI panellerinde bir metriğin ne kadarının tamamlandığını sunmak
• Operasyonel dashboardlarda anlık durum göstergesi olarak kullanmak (ör. aktif kullanıcı yüzdesi, makine durumu, görev tamamlanma oranı)

2. Temel Özellikler

• Bir değerin belirlenen bir aralık içindeki konumunu görsel olarak gösterebilme
• Hedef, gerçekleşen değer ve yüzdesel ilerleme gibi metrikleri tek bir bakışta sunabilme
• Maksimum değer (Max) ve mevcut değer (Value) tanımlarıyla dinamik gösterge yapısı
• Renk aralıklarının özelleştirilebilmesi (ör. düşük–orta–yüksek performans seviyeleri için farklı renkler)
• Yüzdelik gösterimin isteğe bağlı olarak gizlenmesi veya görüntülenmesi
• İbrenin gerçek zamanlı veya aksiyondan gelen verilerle güncellenebilmesi
• Performans göstergeleri ve KPI panelleri için uygun, sade ve anlaşılır tasarım
• SQL, REST API veya Managed DB aksiyonlarıyla tam uyumluluk
• Hem web hem de mobil uygulamalarda tutarlı görünüm desteği

2.1. Element Ayarları (Properties)

Gauge Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden hedef değerleri, mevcut değeri, renk alanlarını ve gösterge görünümünü ayrıntılı şekilde yapılandırabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.

Değer ve Aralık Ayarları

• Max: Gösterge panelinde kullanılacak maksimum değeri tanımlar. Ölçümün ulaşabileceği en yüksek seviyeyi belirtir ve ibrenin hareket aralığını belirleyen temel parametredir.
• Value: Gösterge üzerinde anlık olarak göstermek istediğiniz değerdir. İbrenin konumu bu değere göre güncellenir. KPI değeri, başarı oranı, kapasite kullanımı gibi metrikler bu alana bağlanır.

Renk Ayarları

• Colors: Gauge üzerinde kullanılacak renk paletini belirler. Farklı aralıklar için farklı renkler tanımlanarak düşük–orta–yüksek durumları daha net ifade edilebilir. Örneğin:
  
  • Düşük performans için kırmızı
  • Orta seviye için sarı
  • Yüksek performans için yeşil

Görsel Gösterim Ayarı

• Hide Percentage: Yüzdelik değerin grafik üzerinde gösterilip gösterilmeyeceğini belirler.
  
  • Açık: Yüzdesel değerler gösterilmez, yalnızca ibre ve renk alanları görünür.
  • Kapalı: Hem değer hem de yüzdesel karşılık kullanıcıya gösterilir.

2.2. Elemente Eklenebilen Aksiyonlar

Gauge Chart elementi, veri görselleştirmeye yönelik pasif bir gösterge bileşeni olduğundan kullanıcı etkileşimiyle aksiyon tetikleme özelliği bulunmaz. Bu nedenle element seçildiğinde ADD ACTION butonu görünmez ve Gauge Chart’a özel bir tetikleyici (trigger) eklenemez.

Gauge Chart’ın aksiyon yapısı aşağıdaki şekilde çalışır:

• Gauge Chart, kullanıcı tıklaması veya ibre üzerinde etkileşim ile aksiyon tetiklemez. (onClick  gibi tetikleyiciler desteklenmez.)
• Gösterge değerinin (Value) güncellenmesi için, Gauge Chart’ın bağlı olduğu aksiyonun dışarıdan tetiklenmesi gerekir.
• Kullanıcıya bağlı senaryolar (ör. “kullanıcı filtre seçsin, gösterge değeri değişsin”) Gauge Chart üzerinden değil, Button, Switch gibi başka UI elementlerine aksiyon eklenerek yönetilir.
• Gauge Chart yalnızca veriyi temsil eder, kendi başına bir işlem başlatmaz.

Gauge Chart üzerinde aksiyon tanımlanamaz; tüm güncelleme işlemleri, göstergeye değil, göstergenin veri kaynağını tetikleyen diğer elementlere aksiyon atayarak gerçekleştirilir.

3. Gauge Chart Elementi Nasıl Kullanılır? 

Bu bölümde Gauge Chart elementinin uçtan uca kullanımını örnek bir senaryo üzerinden ele alacağız.

Senaryo: Aylık Yeni Müşteri Sayısı Takibi

Bir satış yönetimi uygulamasında, kullanıcıya belirli bir ay içinde kazanılan yeni müşteri sayısı ve bu ay için belirlenen hedef müşteri sayısı gösterilir. Gauge elementinin yapısı sayesinde, gerçekleşen değer ile hedef arasındaki fark tek bir göstergede hızlıca görülebilir.

Senaryoda:

• Her ay için Yeni Müşteri Sayısı (CurrentValue) ve Hedeflenen Yeni Müşteri Sayısı (TargetValue) değerleri Gauge üzerinde gösterilecektir.
• Gösterge, gerçekleşen değerin hedefe ne kadar yaklaştığını renk ve doluluk oranı ile ifade eder.
• Kullanıcı, seçtiği ay veya filtreye göre ilgili KPI değerini görüntüleyebilir.
• Bu sayede, hedeflenen müşteri kazanımına ne kadar yaklaşıldığı kolayca analiz edilebilir.

Örneğin:

• Ocak → Yeni Müşteri: 320, Hedef: 400 = 410 / 400 → %102
• Şubat → Yeni Müşteri: 290, Hedef: 400 = 320 / 400 → %80 
• Mart → Yeni Müşteri: 410, Hedef: 400 = 290 / 400 → %72

Adım 1 - Veri Kaynağı Oluşturma

DataSources modülünde tablo oluşturma: 

• Datasources modülüne gidin. 
• Ardından Tables sekmesine gidin.
• “KPIData” adında yeni tablo oluşturun.
• Kurulması gereken tablo yapısı aşağıdaki gibidir:

• Önemli Alan adları:
  
  • CurrentValue: İlgili KPI’ın mevcut gerçekleşen değerini ifade eder.
  • Metric: KPI’ın hangi metriğe ait olduğunu belirtir (ör. “Aylık Satış”, “Ziyaretçi Sayısı”, “Dönüşüm Oranı”).
  • TargetValue: KPI için belirlenen hedef değeri temsil eder.

Adım 2 - Gerekli Aksiyonları Tanımlama

Arayüzde verileri göstermek ve veri eklemek için: 

• İki aksiyon tanımlamanız gerekir.
• Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
  
  • Örnek Verileri Ekleyen Aksiyon (InsertKPIData): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO KPIData (Id, Metric, CurrentValue, TargetValue)
VALUES
-- Yeni Kaydedilen Müşteri Sayısı KPI
(NEWID(), 'Aylık Yeni Müşteri Sayısı', 320, 400)

Uygularken KPIData kısmını silip tekrar KPIData yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

• Verileri Sağlayan ve Filtreleyen Aksiyon (GetKPIData):

SELECT * FROM KPIData;

• SQL Action alanında isterseniz KPIData tablosun yanındaki üç nokta üzerinden hazır select sorgusu olarakta ekleyebilirsiniz.

Uygularken KPIData kısmını silip tekrar KPIData yazıp Enter’a basınız. Böylelikle tablo adının önünde doğru şema adı eklenecektir.

Adım 3 - Initial Action Ekleme

• UI Design modülünü açın.
• Sayfaya ADD ACTION butonundan Initial Actions > Custom > Managed Db > GetKPIData aksiyonunu ekleyin.
  

Adım 4 - Element Yerleşimi ve Stil Ayarları

• Sol panelden Elements > Container > Row  elementini sayfaya sürükleyip bırakın.
• Row içerisindeki Col alanında Col > Styling > Layout > Align alanında dikey ve yatay olarak ortalayın.

• Sol panelden Elements > Container > Panel elementini Col içerisine sürükleyip bırakın.
• Panel elementinin boyutunu  Panel > Styling > Layout > Width ve Height (350,375) px olarak tanımlayın.
• Panel elementinin arka planını Panel > Styling > Fill > White Background olarak ayarlayın.
• Panelin kenarlarını Panel > Styling > Style > Border > Radius > 40 px olarak ayarlayın.

• Sol panelden Elements > Container > Vertical Stack elementini Panel içerisine sürükleyip bırakın.

• Vertical Stack içerisine Elements > Display > Label elementini ekleyin.
• Sol panelden Elements > Chart > GaugeChart  elementini Vertical Stack içerisine ekleyin.

•  Sol panelden Elements > Container > Row elementini Panel içerisine ekleyin ve Row > Properties > Desktop > 2 olarak seçiniz.

•  Col >Styling > Layout > Align içerisini yatayda ve dikeyde ortalayın.
•  Her iki Col içerisine Elements > Display > Label elementini sürükleyip bırakın.
• Oluşturulan Row elemenetini ilk seçenek Duplicate ile kopyalayın.
  

• Tüm aşamalar sonucunda beklenen sonuç aşağıdaki gibidir.

Adım 5 - Element Ayarlamalarının Yapılandırılması

• Başlık bilgisini Label > Properties > Value > Action Result > GetKPIData > First > Metric olarak ekleyin.

• Gauge Chart içerisine GaugeChart > Properties > Max > Action Result > GetKPIData > First > TargetValue değerini ekleyin.
• Benzer şekilde GaugeChart > Properties > Value > Action Result > GetKPIData > First > CurrentValue değerini ekleyin. 
• GaugeChart > Properties > Colors bölümünden Color 1 için Mavi, Color 2 için Kırmızı rengini seçin.

• Row içindeki ilk sütunda yer alan labellar için Label > Properties > Value alanlarını sırasıyla “Hedef” ve “Güncel” olarak ayarlayın.
• İkinci sütundaki labellarda, Label > Properties > Value > Action Result > GetKPIData > First yolunu izleyerek değerleri sırasıyla TargetValue > To String ve CurrentValue > To String olarak tanımlayın.

Preview:

Uygulama test edildiğinde, aylık yeni müşteri hedeflerine ait verilerin Gauge Chart üzerinde görüntülendiği görülür.

‍

4. Ortak Özellikler (Properties)

Gauge Chart elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:

• Authorization (Yetkilendirme) Ayarları
• Visibility (Görünürlük)
• Editability (Düzenlenebilirlik)
• Style Panel (Stil Ayarları)

5. Kullanım Tavsiyeleri (Best Practices)

Gauge Chart ile daha okunabilir ve anlamlı göstergeler oluşturmak için aşağıdaki öneriler dikkate alınmalıdır:

• Max değerini gerçekçi ve tutarlı belirleyin. Çok yüksek veya çok düşük maksimum değerler ibrenin etkisini azaltır.
  
  
• Renk aralıklarını anlamlı şekilde yapılandırın.
  
  • Kırmızı → düşük performans
  • Sarı → orta performans
  • Yeşil → yüksek performans gibi standart bir skala kullanıcı deneyimini güçlendirir.
    
• Hide Percentage ayarını tasarıma göre kullanın. Dilim veya ibre yoğunluğunun yüksek olduğu tasarımlarda yüzdelik bilgiyi gizlemek daha sade bir görünüm sağlar.

6. Kısıtlamalar

Gauge Chart elementi ile çalışırken aşağıdaki sınırlamalar göz önünde bulundurulmalıdır:

• Kullanıcı etkileşimiyle aksiyon tetiklenemez. İbreye tıklama, üzerine gelme veya seçim yapılması aksiyon üretmez.
• Datasource tanımlanmadan grafik değerleri güncellenmez. Max ve Value alanları manuel olarak girilse de dinamik veri yüklemesi için bir aksiyon gereklidir.
• Gauge Chart tek bir veri noktasını gösterir; çoklu veri serilerini desteklemez.
• Yüzdesel gösterimin kapatılması (Hide Percentage) kullanıcı için bilgi eksikliğine yol açabilir. Bu nedenle tasarıma göre dikkatle kullanılmalıdır.