1. Pie Chart Elementine Genel Bakış

Pie Chart elementi, kategorik verileri dairesel bir yapı içinde dilimler halinde göstererek her bir kategorinin toplam içindeki oranını görsel olarak analiz etmenizi sağlar. Her dilimin büyüklüğü, temsil ettiği verinin ağırlığını gösterir ve bu sayede pazar payı, bütçe dağılımı veya yüzdesel veri kıyaslamaları gibi senaryolarda etkili bir görselleştirme sunar. Pie Chart, kullanıcıların veri dağılımını hızlı şekilde anlamasını sağlar ve özellikle sade, özet analizlerde tercih edilir. 

Pie 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ı analiz etmek (ör. müşteri segmentleri, satış kategorileri)
• Anket ve oylama sonuçlarında tercih yüzdelerini görselleştirmek
• Kaynak kullanım oranlarını göstermek (ör. zaman, bütçe, departman yük dağılımı)
• Toplam veriye göre en büyük veya en küçük kategorileri belirlemek. En çok paya sahip dilimin hızlı şekilde anlaşılmasını sağlar.

2. Temel Özellikler

• Kategorik verilerin dairesel grafik yapısı içinde dilimler halinde gösterilmesi. Her dilim, temsil ettiği kategorinin toplam içindeki payını gösterir.
• Dilim büyüklüklerinin otomatik olarak yüzde hesaplamasına göre çizilmesi. Kullanıcılar oranları hızlı şekilde yorumlayabilir.
• Birden fazla veri alanının tooltip içinde gösterilebilmesi. Hem yüzde hem de sayısal değer aynı anda sunulabilir.
• Renk, opaklık, dilim sırası ve dilim ayırıcı çizgileri gibi görsel ayarların özelleştirilebilmesi
• Tekli veya çoklu veri setleriyle çalışabilme (Örn. farklı segmentlerin yüzdesel dağılımı)
• Legend desteği ile kategori isimlerinin grafik dışında görüntülenmesi
• Veri kaynağından dinamik olarak grafik verisi yükleme. SQL, REST API ve Managed DB aksiyonlarıyla tam uyumluluk sağlar.

2.1 Element Ayarları (Properties)

Pie Chart elementini seçtiğinizde, sağ tarafta yer alan Properties paneli üzerinden veri kaynaklarını, tooltip yapılandırmalarını, dilim renklerini ve etiket görünüm ayarlarını detaylı biçimde yapılandırabilirsiniz. Aşağıdaki tüm ayarlar madde madde açıklanmıştır.

Datasource

• Datasource Action: Pie Chart üzerinde gösterilecek verilerin geldiği aksiyonu belirler. Veri yüklemesi bu aksiyon çalıştırıldığında gerçekleşir.

Datasource’a bir aksiyon eklenmediğinde veri eşleştirme alanları görünmez.

Veri Alanı Eşleştirmeleri

• Data Label: Grafikte gösterilecek kategori etiketini belirler. Legend ve tooltiplerde bu başlık görüntülenir.
• Tooltip Custom Title Data Label: Tooltip üzerinde başlık olarak gösterilecek veri alanını tanımlar. Kullanıcı bir dilimin üzerine geldiğinde bu başlık görünür.
• Tooltip Custom Content Data Label: Tooltip içerisinde açıklayıcı veri olarak gösterilecek ek alanı belirler. Sayısal değer, açıklama veya alt bilgi için kullanılabilir.
• Multi Tooltip Content Fields: Tek bir tooltip içinde birden fazla veri alanını görüntülemenizi sağlar.
• Data Field: Her dilimin büyüklüğünü belirleyen ana veri alanıdır. Değer ne kadar büyükse dilim alanı o kadar geniş olur.
• Data Bg Color: Ana veri serisinin renk değerini belirler. Her kategori için manuel renk tanımlamak mümkündür.
• Second Data Field: Pie Chart üzerinde ikinci bir veri serisi tanımlamak için kullanılır.
• Second Data Bg Color: İkinci veri serisi için kullanılacak dili̇m rengini belirler.
• Third Data Field: Üçüncü bir veri serisini pie yapısına eklemek için kullanılır.
• Third Data Bg Color: Üçüncü veri serisinin dilim rengini belirler.

Legend

• Legend Ayarları: Legend, verilerin hangi kategoriye ait olduğunu görüntüler. DataSource alanındaki bir kategoriye tıklanarak ilgili dilim grafik içinde gizlenebilir veya gösterilebilir.

Veri Etiketi (Data Label) Ayarları

• Show Data Labels: Her dilim üzerinde etiketlerin görünmesini sağlar. Yüzde veya sayı bazlı bilgileri grafik üzerinde doğrudan göstermek için kullanılır.
• Data Label Formatter: Dilim üzerindeki etiketlerin biçimlendirilmesini sağlar. Örn. yüzde, para birimi, ondalık format gibi.

Veri Yapısı (SQL Örneği)

Pie Chart doğru çalışması için her value (değer) alanının bir label (kategori) alanı ile ilişkili olması gerekir. Aşağıdaki SQL örneği uygun bir veri yapısını göstermektedir:

SELECT 'Category A' AS category, 45 AS value
UNION ALL SELECT 'Category B', 30
UNION ALL SELECT 'Category C', 15
UNION ALL SELECT 'Category D', 10;

2.2 Elemente Eklenebilen Aksiyonlar

Pie Chart elementi, veri görselleştirmeye yönelik pasif bir grafik bileşenidir. Bu nedenle Pie Chart seçildiğinde ADD ACTION butonu görünmez ve grafik üzerine özel bir tetikleyici (trigger) eklenemez.

Aksiyon yapısı şu prensiplere dayanır:

• Pie Chart üzerinde kullanıcı tıklaması, dilim seçimi veya hover etkileşimi aksiyon tetiklemez.
• Grafiğin güncellenmesi, Pie Chart’ın bağlı olduğu Datasource Action’ın dışarıdan tetiklenmesi ile gerçekleşir.
• Kullanıcı seçimlerine göre grafik değiştirmek gerekirse (ör. yıl, kategori seçimi), bu işlemler Button, Radio Group gibi başka UI elementlerine aksiyon eklenerek yönetilir.
• Pie Chart yalnızca veriyi temsil eder, kendi içinden işlem başlatmaz.

Pie Chart üzerinde aksiyon tanımlanamaz; grafik güncellemeleri ve kullanıcı etkileşimleri, veri kaynağını tetikleyen diğer UI elementleri üzerinden yönetilir.

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

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

Senaryo: Ürün Kategorilerine Göre Satış Dağılımı

Bir e-ticaret uygulamasında, belirli bir dönemde hangi ürün kategorilerinin toplam satışlardan ne kadar pay aldığını takip etmek için Pie Chart kullanılır.

Senaryoda:

• Ürün kategorisi (CategoryName)
• Kategoriye ait toplam satış tutarı (TotalSales)
• Kategoriyle etkileşimde bulunan kullanıcı sayısı (UserCount)
• Pie Chart üzerinde kategori bazlı dağılım halinde gösterilecektir. Kullanıcı satış dönemi seçtiğinde grafik yalnızca bu döneme ait kategori satışlarını görüntüler.

Örneğin (Aylık Satış Dağılımı Verileri):

Elektronik Kategorisi (CategoryName: Elektronik)

• Toplam Satış → 45.000 ₺
• Kullanıcı Sayısı → 12.500 kullanıcı

Giyim Kategorisi (CategoryName: Giyim)

• Toplam Satış → 30.500 ₺
• Kullanıcı Sayısı → 9.800 kullanıcı

Ev & Yaşam Kategorisi (CategoryName: Ev & Yaşam)

• Toplam Satış → 22.000 ₺
• Kullanıcı Sayısı → 7.500 kullanıcı

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.
• ” adında yeni tablo oluşturun.
  
• Kurulması gereken tablo yapısı aşağıdaki gibidir:
  

• Önemli Alan adları:
  
  • CategoryName: Satışların ait olduğu ürün kategorisini ifade eder. Pie Chart üzerinde her bir dilimin etiketini oluşturur ve kullanıcıya satış dağılımının hangi kategoriye ait olduğunu gösterir.
  • TotalSales: İlgili kategoriye ait toplam satış tutarını belirtir. Pie Chart’ın değer (value) alanıdır ve her kategori diliminin yüzdesini belirleyen temel metriktir.

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 (InsertCategorySalesStats): Uygulamayı örnek verilerle test etmek için aşağıdaki SQL aksiyonunu ekleyin ve TEST butonuna basın.

INSERT INTO CategorySalesStats 
(Id, CategoryName, TotalSales, UserCount, ColorHex)
VALUES
(NEWID(), 'Elektronik',     45000.00, 12500, '#3B82F6'),
(NEWID(), 'Giyim',          30500.00,  9800, '#10B981'),
(NEWID(), 'Ev & Yaşam',     22000.00,  7500, '#F59E0B'),
(NEWID(), 'Kozmetik',       12600.00,  5100, '#EF4444'),
(NEWID(), 'Spor & Outdoor',  8300.00,  3200, '#8B5CF6');

Uygularken CategorySalesStats kısmını silip tekrar CategorySalesStats 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 (GetCategorySalesStats):

SELECT 
    CategoryName,
    TotalSales,
    UserCount,
    ColorHex
FROM CategorySalesStats;

Uygularken CategorySalesStats kısmını silip tekrar CategorySalesStats 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 > GetCategorySalesStats aksiyonunu ekleyin. 

Adım 4 - Elementleri Ekleme

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

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

• Label > Properties > Value alanına “Satış Dağılımı” metnini ekleyin.
• Label alanının fontunu Label > Styling > Text > Style > Heading 2 olarak ayarlayın.
• Pie Chart içerisine verileri sağlayacak PieChart > Properties > DataSource > Action > GetCategorySalesStats aksiyonunu ekleyin. Aşağıdaki tanımlamaları yapın:
  

Preview:

Uygulama test edildiğinde, seçilen döneme ait ürün kategorilerinin toplam satış tutarlarının Pie Chart üzerinde doğru oranlarla görüntülendiği gözlemlenir. Grafik altındaki Legend alanına tıklayarak her bir kategorinin görünürlüğünü kolayca filtreleyebilirsiniz.

‍

4. Ortak Özellikler (Properties)

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

Pie Chart kullanırken daha yüksek okunabilirlik ve daha doğru veri sunumu için aşağıdaki öneriler dikkate alınmalıdır:

• Kategori sayısını sınırlı tutun. Çok fazla kategori dilimlerin aşırı ince görünmesine ve okunabilirliğin azalmasına neden olur.
• Kontrast renkler tercih edin. Dilimler birbirinden rahat ayrılmalıdır; benzer tonlar kullanıldığında grafik karışık görünür.
• Data Labels ayarını dikkatli kullanın. Çok fazla dilim olduğunda etiketler üst üste binebilir; bu durumda sadece tooltip ile gösterim daha etkilidir.
• Dilimin büyüklüğü ile etiketler arasında doğruluk sağlamaya özen gösterin. Yüzdelik değerlerin toplamının 100% olduğundan emin olun.

6. Kısıtlamalar

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

• Kullanıcı etkileşimiyle aksiyon tetiklenemez. Bir dilime tıklamak veya üzerine gelmek aksiyon çalıştırmaz.
• Datasource tanımlanmadan grafik görüntülenmez. Data Field ve diğer veri eşleştirme alanları aktif hale gelmez.
• Pie Chart yalnızca tek bir veri serisini tam olarak destekler; çoklu veri serisi yapıları için Donut Chart veya Mixed Chart daha uygundur.