1. Donut Chart Elementine Genel Bakış

Donut Chart elementi, kategorik verilerin toplam içindeki oranlarını görsel olarak ifade etmenin etkili bir yolunu sunar. Daire biçimindeki grafik yapısının iç kısmı boş bırakılarak her bir kategorinin yüzdesel dağılımı daha okunabilir hale getirilir. Pazar payı analizleri, bütçe dağılımları, kullanım oranları ve yüzdesel veri karşılaştırmaları gibi senaryolarda sıklıkla tercih edilir. 

Donut Chart elementi hem web hem de mobil uygulamalarda desteklenmektedir.

1.1. Sık Kullanım Senaryoları

• Toplam içindeki kategori oranlarını göstermek (ör. pazar payı dağılımı, bütçe kalemlerinin yüzdesi)
• Kullanıcı, ürün veya işlem gruplarının yüzdesel dağılımını görselleştirmek (ör. müşteri segmentleri, satış kategorileri)
• Anket veya oylama sonuçlarında tercih yüzdelerini sunmak
• Kaynak kullanım oranlarını analiz etmek (ör. depolama kullanımı, zaman veya iş gücü dağılımı)
• Bir kategorinin diğerlerine göre ne kadar pay aldığını hızlı şekilde göstermek (ör. en çok satılan ürün grubu, en çok tercih edilen hizmet tipi)

2. Temel Özellikler

• Kategorik verilerin dairesel bir yapı içinde yüzdesel oranlarla görselleştirilmesi
• Her bir dilimin toplam içindeki payının otomatik olarak hesaplanması
• Renk, opaklık, dilim kalınlığı ve iç boşluk oranı gibi görsel ayarların özelleştirilebilmesi
• Tekli veya çoklu veri setleriyle çalışabilme (örn. farklı segmentlerin yüzdesel dağılımı)
• Tooltip desteği sayesinde kullanıcıların her bir kategoriye ait yüzdelik veya sayısal değerleri detaylı şekilde görebilmesi
• Legend (açıklama kutusu) desteği ile kategorilerin isimlendirilmesi
• Veri kaynağından dinamik olarak grafik verisi yükleme
• SQL, REST API veya Managed DB aksiyonlarıyla tam uyumluluk

2.1 Element Ayarları (Properties)

Donut Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden grafik veri alanlarını, tooltip yapılandırmalarını, renk ayarlarını ve dilim görünümünü detaylı biçimde tanımlayabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.

Datasource

• Datasource Action: Grafik üzerinde gösterilecek verileri getiren aksiyondur. Veriler bu aksiyon çalıştırıldığında Donut Chart içerisine yüklenir.

Datasource’a bir aksiyon bağlanmadığında aşağıdaki veri ayarları görüntülenmez.

Veri Alanı Eşleştirmeleri

• Data Label: Grafikte gösterilecek ana veri etiketidir. Legend ve tooltiplerde başlık olarak görüntülenir.
• Tooltip Custom Title Data Label: Tooltip kısmında başlık olarak gösterilecek veri alanıdır. Kullanıcı dilimin üzerine geldiğinde görünen başlığı belirler.
• Tooltip Custom Content Data Label: Tooltip içinde açıklayıcı içerik olarak görünecek veri etiketidir. Sayısal değer, yüzdelik oran veya açıklama göstermek için kullanılır.
• Multi Tooltip Content Fields: Bir tooltip içinde birden fazla veri alanı göstermenizi sağlar. Detaylı yüzdesel veya sayısal bilgiler sunmak için idealdir.
• Data Field: Ana veri serisinin bağlandığı alandır. Her bir dilimin büyüklüğü bu veri üzerinden hesaplanır.
• Data Bg Color: Ana veri serisinin dilim dolgu rengini belirler. Hex formatında renk değerleri desteklenir (örn. #ff6384).
• Second Data Field: Grafik üzerinde ikinci bir veri serisi tanımlamak için kullanılır. Çoklu donut halkaları oluşturmak için uygundur.
• Second Data Bg Color: İkinci veri serisine ait renk değerini belirler.
• Third Data Field: Üçüncü bir veri serisi eklemek için kullanılır. Birden fazla donut halkası olan gelişmiş grafikler için tercih edilir.
• Third Data Bg Color: Üçüncü veri serisine ait dilim rengini belirler.

Legend

• Legend Ayarları: Legend’ın gösterilip gösterilmeyeceğini, konumunu ve kategori etiketlerinin nasıl görüntüleneceğini belirlemenizi sağlar. Ayrıca kullanıcı dilimlerini gizleyip gösterebilir.

Veri Etiketi (Data Label) Ayarları

• Show Data Labels: Her dilim üzerinde veri etiketleri görüntülenmesini sağlar. Etiketlerde yüzdesel oran veya sayısal değer gösterilebilir.
• Data Label Formatter: Veri etiketlerinin formatını belirler. Desteklenen göstergeler; yüzde, sayı veya özel formatlardır.

2.2. Elemente Eklenebilen Aksiyonlar

Donut Chart elementi, veri görselleştirmeye odaklanan pasif bir grafik bileşeni olduğu için kullanıcı etkileşimiyle aksiyon tetikleme özelliği bulunmaz. Element seçildiğinde ADD ACTION butonu görüntülenmez ve Donut Chart’a özel bir tetikleyici (trigger) eklenemez.

Aşağıdaki noktalar Donut Chart’ın aksiyon yapısını açıklar:

• Donut Chart, kullanıcı tıklaması, dilim seçimi veya hover etkileşimleri ile aksiyon tetiklemez. (onClick vb. aksiyonlar desteklenmez.)
• Grafiğin güncellenmesi için, Donut Chart’ın bağlı olduğu Datasource Action’ın dışarıdan tetiklenmesi gerekir.
• Kullanıcı etkileşimi gerektiren senaryolar (ör. “kullanıcı kategori seçsin, grafik güncellensin”) Donut Chart üzerinden değil, Button, Radio Group vb başka elementler üzerinden aksiyon tanımlanarak yönetilir.
• Donut Chart yalnızca veriyi temsil eder, kendi içinde işlem başlatmaz.

Donut Chart elementi üzerinde aksiyon tanımlanamaz. Tüm kullanıcı etkileşimi ve veri yenileme işlemleri, grafiğe değil grafiğin veri kaynağına bağlı diğer UI elementlerine aksiyon atanarak gerçekleştirilir.

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

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

Senaryo: Kategori Bazlı Satış Dağılımı Analizi

Bir satış takip uygulamasında, farklı ürün kategorilerine ait toplam satış tutarı kullanıcıya görsel olarak sunulur. Donut Chart sayesinde her kategorinin toplam içindeki yüzdelik payı kolayca karşılaştırılabilir.

Senaryoda:

• Her bir kategori için Toplam Satış Tutarı (Amount) hesaplanır.
• Donut Chart üzerinde kategoriler, toplam satış tutarlarına göre oransal dilimler hâlinde gösterilir.
• Her dilim, ilgili kategorinin toplam satış içindeki payını ve tutar bilgisini kullanıcıya görsel olarak sunar.

Örneğin:

• Elektronik → 35.000₺ (%36.84)
• Giyim → 22.000₺ (%23.16)
• Ev Ürünleri → 18.000₺ (%18.95)
• Ofis → 12.000₺ (%12.63)
• Spor → 8.000₺ (%8.42)

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

DataSources modülünde tablo oluşturma: 

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

• Önemli Alan adları:
  
  • Category: Bütçe kaydının ait olduğu kategori adını belirtir (ör. Elektronik, Giyim, Spor).
  • Amount: İlgili kategoriye ait toplam bütçe veya harcama tutarını ifade 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 (InsertBudgetData):
    Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO BudgetData (Id, Amount, Category)
VALUES
(NEWID(), 35000.00, 'Elektronik'),
(NEWID(), 22000.00, 'Giyim'),
(NEWID(), 18000.00, 'Ev Ürünleri'),
(NEWID(), 12000.00, 'Ofis'),
(NEWID(), 8000.00,  'Spor');

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

• Verileri Sağlayan ve Yüzdelik Hesaplayan Aksiyon (GetBudgetData):
  

SELECT
    d.Category,
    SUM(d.Amount) AS TotalAmount,

    -- Yüzdelik dağılım
    CAST(
        (SUM(d.Amount) * 100.0) / t.GrandTotal
        AS DECIMAL(5,2)
    ) AS Percentage,

    -- Renkler
    CASE d.Category
        WHEN 'Elektronik'   THEN '#4A90E2'
        WHEN 'Giyim'        THEN '#50E3C2'
        WHEN 'Ev Ürünleri'  THEN '#F5A623'
        WHEN 'Ofis'         THEN '#BD10E0'
        WHEN 'Spor'         THEN '#7ED321'
        ELSE '#CCCCCC'
    END AS SliceColor

FROM BudgetData d
CROSS JOIN (
    SELECT SUM(Amount) AS GrandTotal
    FROM BudgetData
) t
GROUP BY d.Category, t.GrandTotal
ORDER BY d.Category;

Uygularken BudgetData kısımlarını silip tekrar BudgetData 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 > GetBudgetData aksiyonunu ekleyin.
  
  

Adım 4 - Elementleri Ekleme

• Sol panelden Elements > Display > Label elementini sayfaya sürükleyip bırakın.
• ArdındanSol panelden Elements > Chart > DonutChart elementini sayfaya ekleyin.

‍

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

• Label > Properties > Value alanına “Kategori Bazlı Satış Dağılımı” metnini ekleyin.
• Label alanının dışındaki col bölgesini seçip Col > Styling > Layout > Align seçeneğinden elementi dikeyde ve yatayda ortalayın.

• Donut Chart boyutunu DonutChart > Styling > Layout > Height “500 px” olarak ayarlayın.
• Donut Chart ortasındaki text yazısını DonutChart > Properties > ChartLabel ‘a tıklayıp, text alanını siliniz. 

• Area Chart içerisine verileri sağlayacak DonutChart > Properties > DataSource > Action > GetBudgetData aksiyonunu ekleyin. Aşağıdaki tanımlamaları yapın:

• Etiketlerin gösterimi için  DonutChart > Properties > ShowDataLabels seçeneğini açın.
• Format türünü  DonutChart > Properties > DataLabelFormatter “Money-Tl“ seçeneğini seçin.

Preview:

Sağ üst köşedeki Preview butonu ile uygulama test edildiğinde, kategorilere göre toplam satış tutarlarının Donut Chart üzerinde oransal dilimler hâlinde gösterildiği görülür. Grafik altındaki Legend alanına tıklayarak her bir kategorinin görünürlüğünü kolayca filtreleyebilirsiniz.

4. Ortak Özellikler (Properties)

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

Donut Chart kullanırken daha iyi bir kullanıcı deneyimi ve daha okunabilir grafikler oluşturmak için aşağıdaki öneriler dikkate alınmalıdır:

• Kategori sayısını sınırlayın. Çok fazla dilim, grafiğin karmaşık ve okunamaz hale gelmesine neden olur. 8–10 kategori üzeri grafiklerde farklı bir chart türü tercih edilmesi önerilir.
• Kontrast renkler kullanın. Her dilimin rahat ayırt edilebilmesi için birbirinden farklı, kontrast renkler seçilmelidir.
• Tooltip içeriklerini açıklayıcı tutun. Kullanıcı bir dilimin üzerine geldiğinde yüzde ve sayısal değerleri net bir şekilde görebilmelidir.
• Veri etiketlerini (Show Data Labels) dikkatli kullanın. Fazla dilimin olduğu grafiklerde etiketler üst üste binebilir; bu durumda etiketleri tooltip içinde göstermek daha iyi sonuç verir.
• Legend kullanımını zorunlu tutun. Donut Chart’ta dilimlerin renklerini anlamak için legend kritik önem taşır.

6. Kısıtlamalar

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

• Donut Chart kullanıcı etkileşimiyle aksiyon tetiklemez. Dilime tıklama, seçme, hover vb. işlemler aksiyon çalıştırmaz.
• Datasource tanımlanmadan grafik çizilmez. Data Field ve diğer veri eşleştirme alanları Datasource olmadan görünmez.
• Tooltip içine aşırı fazla içerik eklenmesi küçük ekranlarda görüntüleme sorunları oluşturabilir.
• Dilim renkleri manuel olarak ayarlanmazsa sistem varsayılan renk paletini kullanır. Varsayılan palette bazı renkler birbirine yakın olabilir.