1. Radial Chart Elementine Genel Bakış

Radial Chart elementi, verilerin dairesel bir eksen üzerinde görselleştirilmesini sağlayarak özellikle oran, performans ve karşılaştırma odaklı analizlerde etkili bir gösterim sunar. Kategorilerin radyal eksen boyunca yerleştirilmesiyle her bir kategoriye ait değer, çemberin dışına doğru uzanan bir bar/dilim formunda temsil edilir. Bu yapı sayesinde kullanıcılar, veri setindeki farklı kategoriler arasındaki ilişkileri, oranları ve sıralamaları hızlıca yorumlayabilir. 

Radial Chart elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Kategori bazlı performans ölçümlerini göstermek (ör. departman performans skorları, ürün bazlı puanlamalar)
• Oran ve yüzdelik değerleri dairesel bir düzende sunmak (ör. hedef gerçekleşme yüzdeleri, dağılım oranları)
• Farklı kategorileri görsel olarak karşılaştırmak. Çember boyunca dizilen kategoriler sayesinde veri karşılaştırması sezgisel hale gelir.
• Tek bakışta genel durum ve sıralama analizi yapmak. En yüksek ve en düşük değerler kolayca tespit edilir.

2. Temel Özellikler

• Dairesel bar yapısı ile kategori bazlı veri gösterimi. Her kategori çember üzerine yerleştirilir ve değeri kadar dışa doğru uzayan bir bar/dilim ile temsil edilir.
• Oransal veri analizi için ideal yapı. Her bir kategori yüzdelik ya da skor bazlı değerlerle kıyaslanabilir.
• Birden fazla kategori için eşzamanlı karşılaştırma imkânı. Çember üzerinde tüm kategoriler aynı referans düzlemde gösterilir.
• Veri kaynağından dinamik yükleme desteği. SQL, REST API veya Managed DB aksiyonları ile güncel veriler otomatik olarak çekilebilir.

2.1. Element Ayarları (Properties)

Radial Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden veri kaynaklarını, seviyeleri, dilim etiketlerini, yüzde değerlerini ve çizgi/stil yapılandırmalarını detaylı şekilde tanımlayabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.

Options (Genel Veri Ayarları)

• Actions: Radial Chart üzerinde görüntülenecek kategorik verileri getiren SQL aksiyonlarını tanımlar. Veri kaynağı olarak tek veya birden fazla aksiyon kullanılabilir.
• Slice Label Field: Her dilimin üzerinde gösterilecek kategori etiketini belirler. Örn: “Satış”, “Performans”, “Kapasite”.
• Slice Text Field: Dilimlerin iç kısmında gösterilecek metni tanımlar. Ek açıklama, kısa tanım veya değer temsilcisi olarak kullanılabilir.
• Percentage Field: Dilimde gösterilecek yüzde değerini belirler. Her dilimin toplam içindeki payını ifade eder.
• Point Field: Grafik üzerinde belirli noktaların değerlerini tanımlar. Özellikle fazla seviyeli veya çok noktalı radial yapılarda belirli veri noktalarını vurgulamak için kullanılır.

Levels (Seviye Ayarları)

Radial Chart içindeki halkaları/seviyeleri yapılandırmak için kullanılan alandır.

• Level Label Field: Seviye çemberleri üzerinde gösterilecek etiketleri belirler. Örn: “Düşük”, “Orta”, “Yüksek”.
• Level Text Field: Her seviyenin iç kısmında gösterilecek metni tanımlar. Seviye açıklamaları, kategori özetleri veya ekstra bilgiler için kullanılabilir.
• Level Percentage Field: Her seviyenin toplam içindeki yüzdesini gösterir. Seviyelerin göreceli büyüklüğünü ifade eder.
• Level Color Field: Seviyelerin renk paletini tanımlar. Her seviye için farklı bir renk atanabilir veya tek renk varyasyonları kullanılabilir.

Çizgi ve Renk Ayarları

• Line Color: Radial grafiği oluşturan ana çizgilerin rengini belirler. Çember çizgileri ve seviye konturlarının görünümünü özelleştirmek için kullanılır.
• Line Width: Çizgi kalınlığını 1–8 aralığında ayarlar. Daha kalın çizgiler daha vurgulu görünüm, daha ince çizgiler daha minimal görünüm sağlar.
• Radial Line Color: Grafiğin merkezinden dışa doğru uzanan radyal çizgilerin rengini belirler. Veri noktalarını hizalayan “spider web” çizgilerinin görünürlüğünü kontrol eder.
• Back Ground Color: Grafik arka plan rengini özelleştirir. Koyu mod, açık mod veya marka temasıyla uyumlu görünüm oluşturmak için kullanılır.
• Legend Text Color: Açıklama (legend) alanındaki metinlerin rengini belirler. Çoklu dilim veya seviye kullanılan grafiklerde kategori okunabilirliğini artırmak için önemlidir.

2.2. Elemente Eklenebilen Aksiyonlar

Radial Chart elementi, tamamen görsel bir veri gösterim bileşeni olduğundan kullanıcı etkileşimiyle aksiyon tetiklemeyi desteklemez. Bu nedenle element seçildiğinde ADD ACTION butonu görünmez ve grafik üzerine herhangi bir tetikleyici atanamaz.

Aksiyon davranışına ilişkin temel ilkeler:

• Radial Chart üzerine tıklama, hover veya seçim yapılması aksiyon tetiklemez.
• Grafik verisinin güncellenmesi, Radial Chart’ın bağlı olduğu Datasource / Actions alanındaki SQL aksiyonlarının dış UI elementleri tarafından tetiklenmesi ile gerçekleşir.
• Kullanıcı seçimlerine göre grafiğin değişmesi gerekiyorsa (ör. yıl seçimi, kategori filtresi, kullanıcı seçimi), bu davranış Button, Radio Group gibi elementlere aksiyon eklenerek sağlanır.
• Radial Chart yalnızca veriyi gösterir, kendi başına bir işlem başlatmaz.

Radial Chart’a aksiyon eklenemez; tüm veri güncellemeleri harici aksiyonlarla yönetilir.

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

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

Senaryo: Performans Değerlendirme Sonuçları

Bir değerlendirme ekranında, tek bir kullanıcının yetkinlik bazlı performans sonuçları dairesel grafik üzerinde görsel olarak sunulur. Grafik; İletişim, Teknik Bilgi, Problem Çözme ve Zaman Yönetimi olmak üzere dört temel yetkinliği kapsar. Renk geçişleri ve dilim yapısı sayesinde her bir alanın genel skor içindeki ağırlığı net biçimde görülür.

Uygulama test edildiğinde, kullanıcının her bir yetkinliğe ait puanı grafik üzerinde ayrı bir dilim olarak gösterilir. Merkezde yer alan skor alanı genel performansı temsil ederken, dış halkalar yetkinlik seviyelerinin güçlü veya geliştirilmesi gereken yönlerini görsel olarak vurgular.

Senaryoda:

Bu yapı, tek bir kullanıcının mevcut performans dağılımını hızlı ve anlaşılır şekilde analiz etmeyi amaçlar. Grafik sayesinde kullanıcı, hangi alanlarda güçlü olduğunu ve hangi yetkinliklerde gelişime ihtiyaç duyduğunu tek bakışta değerlendirebilir.

Örneğin:

• İletişim: 140
• Teknik Bilgi: 
• Problem Çözme: İyi
• Zaman Yönetimi: Gelişime Açık
  
  

Adım 1 - Aksiyon Tanımlama

Arayüzde verileri göstermek için: 

1. İki yeni aksiyon oluşturmanız gerekir.
2. Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.

• Örnek Verileri Getiren Aksiyon (OptionAction):

SELECT N'İletişim' AS SliceLabelText,
       30 AS SliceValue,
       140 AS PointValue
UNION ALL
SELECT N'Teknik Bilgi',
       28,
       50
UNION ALL
SELECT N'Problem Çözme',
       20,
       70
UNION ALL
SELECT N'Zaman Yönetimi',
       22,
       90;

• Örnek Renklendirmeyi Sağlayan Aksiyon (LevelsAction):

SELECT 0   AS LevelPercent, 'Level1'  AS LevelText, '#FF0000' AS LevelColor
UNION ALL
SELECT 10, 'Level2',  '#FF3B3B'
UNION ALL
SELECT 20, 'Level3',  '#FF6F3C'
UNION ALL
SELECT 30, 'Level4',  '#FF9F1C'
UNION ALL
SELECT 40, 'Level5',  '#FFD60A'
UNION ALL
SELECT 50, 'Level6',  '#C7F000'
UNION ALL
SELECT 60, 'Level7',  '#9EF01A'
UNION ALL
SELECT 70, 'Level8',  '#70E000'
UNION ALL
SELECT 80, 'Level9',  '#38B000'
UNION ALL
SELECT 90, 'Level10', '#008000'
UNION ALL
SELECT 100,'Level11', '#006400'
UNION ALL
SELECT 150,'Level11', '#09bddcff';

Adım 2 - Initial Action Ekleme

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

      3. Sayfaya ADD ACTION butonundan ikinci Initial Actions > Custom > Managed Db > LevelsAction aksiyonunu ekleyin.

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

1. Sol panelden Elements > Display > Label elementini sayfaya sürükleyip bırakın.
2. Label > Properties > Value değerini “Değerlendirme Sonuçları” olarak tanımlayın.
3. Label elementi yanındaki boşluğa tıklayın. Column > Styling > Layout > Align alanında dikey ve yatay olarak ortalayın.

    4. Sol panelden Elements > Chart > RadialChart elementini panel elementi içerisine ekleyin.

      5. Radial Chart’ın orta kısmındaki yazıyı Properties > Text > Fixed Value > “Skor” olarak güncelleyin.

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

1. Radial Chart içerisine verileri sağlayacak RadialChart > Properties > Options > Action > OptionAction aksiyonunu ekleyin. Aşağıdaki tanımlamaları yapın:
   

     2. Renklendirmeyi sağlayacak RadialChart > Properties > Levels > Action > LevelsAction aksiyonunu ekleyin. Aşağıdaki tanımlamaları yapın:

Preview:

Uygulama test edildiğinde, tek bir kullanıcının değerlendirme sonuçlarının Radar Chart üzerinde ağırlıklı olarak görselleştirildiği görülür. Grafik; İletişim, Teknik Bilgi, Problem Çözme ve Zaman Yönetimi gibi temel yetkinlik alanlarındaki skor dağılımını net biçimde yansıtır. İlgili alan üzerine gelindiğinde, o yetkinliğe ait skor bilgisi görüntülenir. Bu yapı sayesinde kullanıcının güçlü olduğu alanlar ile geliştirilmesi gereken yönler tek bir grafik üzerinden hızlı ve anlaşılır şekilde analiz edilebilir.

4. Ortak Özellikler (Properties)

Radial 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)

Radial Chart’ın daha okunabilir, estetik ve doğru veri temsili sunması için aşağıdaki önerilere dikkat edilmelidir:

• Level Color Field kullanımında seviye renklerini uyumlu seçin. Çok zıt renkler görsel karmaşa yaratabilir.
• Line Width ayarını grafik yoğunluğuna göre düzenleyin. 

6. Kısıtlamalar

Radial Chart kullanılırken aşağıdaki sınırlamalar göz önünde bulundurulmalıdır:

• Datasource olmadan grafik oluşturulamaz. Veri alanları yalnızca bir aksiyon atanmışsa aktif hale gelir.
• Sayısal olmayan değerler grafik oluşumunu engeller. Percentage Field, Level Percentage Field, Point Field gibi alanlar mutlaka numeric olmalıdır.
• Arka plan renginin yanlış seçilmesi görsel okunabilirliği azaltabilir.
• Line Width değerinin yüksek olması dar alanlarda grafik bozulmasına neden olabilir.