Dynamic Chart · Dinamik veri görselleştirme

Bir SQL Server kaynağından gelen satırları, o kaynağa özel bir ekran yazmadan grafiğe dönüştürmek mümkün mü? Dynamic Chart bu soruyu iki parçalı bir uygulamayla ele alıyor. .NET 8 API, veri kaynaklarını listeliyor ve seçilen nesnenin satırlarını döndürüyor. Grafik Atölyesi arayüzü ise bu satırlardan etiket ve değer kolonları çıkarıp kullanıcının seçtiği grafiği çiziyor.

Canlı uygulamadaki Örnek veriyi dene düğmesi, ocaktan aralığa 12 aylık satış ve gider verisini yükleyip ilk grafiği çiziyor. Ayları etiket olarak kullanıp satış veya gider kolonunu seçebilir, aynı kayıtları sütun, çizgi ve radar grafiklerinde inceleyebilirsiniz. Örnek mod tarayıcıda çalışıyor ve API’ye istek göndermiyor.

1. Bağlantıyı test edin. Arayüz sunucu, veritabanı ve SQL kullanıcısı bilgilerini seçilen API’ye gönderiyor. ConnectionController üzerinden yapılan test başarılı olunca kaynak listesi otomatik yükleniyor.

2. Bir veri kaynağı seçin. MetadataController, Dapper üzerinden SQL Server’ın sys.objects kataloğundan okunan nesne adlarını ve türlerini döndürüyor. Arayüz tablo, görünüm, prosedür ve fonksiyon olarak sınıflandırılan kaynakları seçim listesinde gösteriyor.

3. Kolonları eşleştirin. ChartDataController seçilen kaynağı çalıştırıp sonucu records dizisi olarak döndürüyor. Arayüz kolon adlarını gelen satırlardan çıkarıyor, sayısal değer kolonlarını öneriyor ve seçilen etiket ile değer kolonunu Chart.js veri kümesine dönüştürüyor. Boş sayısal hücreler sıfıra çevrilmiyor.

Grafik, okunabilirlik için ilk 100 kaydı gösteriyor ve bu sınır aşıldığında arayüz bunu bildiriyor. Veri tablosunda yüklenen kayıtların tamamı aranıp sayfalanabiliyor. Seçili kolonun toplamı ve CSV çıktısı tüm yüklenen kayıtları kullanıyor. Grafiği PNG, kaynak veriyi CSV olarak indirebilirsiniz.

Web API, bağlantı testi, kaynak keşfi ve veri okuma için ayrı uç noktalar sunuyor. Application katmanı çağrıları servisler üzerinden IChartRepository sözleşmesine aktarıyor. Infrastructure katmanındaki ChartRepository ise Dapper ile SQL Server’a bağlanıp sonuç satırlarını kolon adı ve değeri içeren sözlüklere dönüştürüyor. Bu yapı, arayüzün farklı kolonlara sahip veri kaynaklarını aynı akışta işlemesini sağlıyor.

Arayüz HTML, CSS, yalın JavaScript ve Chart.js ile hazırlanmış. Veri kaynağı değişince veya bağlantı ayarları düzenlenince önceki istekler iptal ediliyor ve eski sonuçlar temizleniyor. Kaynak keşfi nesne adı ve türünü döndürüyor. Arayüz parametre girişi sunmadığı için parametre gerektiren prosedür ve fonksiyonlar bu akışın dışında kalıyor.