Dynamic Chart

Bu uygulama, kullanıcının istediği veritabanı objelerinden (tablo, view, stored procedure, function) gelen verileri dinamik olarak alıp, seçilen chart tipi (bar, line, radar vb.) ile görselleştirmeyi amaçlar. Uygulama, hem ASP.NET Core Web API (C#) ile sunucu tarafında servis yapısı oluşturur hem de HTML, CSS, JavaScript (jQuery, Bootstrap, Chart.js) kullanılarak modern ve etkileşimli bir front-end sunar.

Not: Projede veritabanı işlemlerinde performansı ve esnekliği artırmak için Dapper kütüphanesi kullanılmıştır. Dapper, ADO.NET tabanlı, hafif ve hızlı bir mikro ORM olarak, SQL sorgularını doğrudan ve efektif bir şekilde çalıştırmamıza olanak tanır.

1. Projenin Genel Amacı

• Dinamik Chart:
  Kullanıcı, veritabanındaki tablo, view veya stored procedure seçtiğinde, geri dönen verileri Chart.js kullanarak grafik olarak görüntüleyebilir.

• Veri Kaynaklarının Listelenmesi:
  Uygulama, veritabanı objelerini (Table, View, StoredProcedure, Function) bir liste halinde sunar.

• Kolon Eşleştirme (Mapping):
  Dönen veri kolonları, kullanıcı tarafından “Label” ve “Value” olarak eşleştirilir; bu eşleştirme Chart.js’e uygun veri setlerine dönüştürülür.

• Farklı Chart Tipleri:
  Bar, Line ve Radar gibi çeşitli chart türleri desteklenir. Kullanıcı, istediği chart tipini seçip grafiği dinamik olarak oluşturabilir.

2. Kullanılan Teknolojiler

• ASP.NET Core Web API (C#):

  • Çok katmanlı mimari (Domain, Application, Infrastructure, Web API).
  • Veritabanı işlemlerinde Dapper kullanılarak hızlı ve esnek SQL sorguları çalıştırılır.
  • API, Swagger üzerinden dökümante edilmiştir.

• Veritabanı (SQL Server):

  • Örnek veritabanı: ChartSampleDB
  • Örnek tablolar: SalesData, ExpensesData gibi veri setleri.
  • Stored Procedure’ler ve view’lar da desteklenmektedir.

• Front-End:

  • HTML, CSS, JavaScript (jQuery, Bootstrap, Chart.js).
  • Dinamik veri çekimi, kolon mapping ve grafik çizimi için etkileşimli arayüz.

3. Uygulama Akışı (Adım Adım)

1. Veritabanı Bilgileri Girişi:
   Kullanıcı, sunucu adı, veritabanı adı, kullanıcı adı ve şifre gibi bilgileri girer ve "Bağlantıyı Test Et" butonuna tıklar. Bu istek, API’deki ConnectionController aracılığıyla test edilir.

2. Veri Kaynaklarını Listeleme:
   Bağlantı başarılı olduktan sonra, "Veri Kaynaklarını Yükle" butonuna tıklanır. API, MetadataController kullanarak veritabanındaki tabloları, view’ları, stored procedure’leri ve function’ları listeler.

3. Chart Tipi Seçimi ve Veri Alma:
   Kullanıcı, listeden istediği veri kaynağını seçer, chart tipini (bar, line, radar) belirler ve "Veriyi Getir" butonuna basar. API, ChartDataController aracılığıyla seçilen veri kaynağına uygun sorguyu (ör. tablo ve view için SELECT * FROM [ObjectName], stored procedure için EXEC [ObjectName]) çalıştırır.

4. Mapping ve Chart Çizimi:
   Dönen veriler front-end’de saklanır. Kullanıcı, hangi kolonu “Label” ve hangi kolonu “Value” olarak kullanacağını seçer. "Chart’ı Çiz" butonuna basıldığında, Chart.js kullanılarak grafik oluşturulur. "Chart’ı Temizle" butonu ile mevcut grafik silinip yeni seçimlerle yeniden çizilebilir.

4. Bağlantı ve Kullanıcı Bilgileri (Örnek)

• Server Name: 92.205.130.157\SQLEXPRESS,1433
• Veritabanı: ChartSampleDB
• Login: ChartSampleUser
• Password: ChartSamplePassword123.

Bu bilgiler, API ile yapılan bağlantılarda kullanılır.

5. Proje Linkleri

• API Swagger URL: https://dynamic-chart-api.bakibayansalduz.com/swagger/index.html
• Front-End URL: https://dynamic-chart.bakibayansalduz.com/
• GitHub API Repo URL: https://github.com/bayansalduza/DynamicChartCase
• GitHub FE Repo URL: https://github.com/bayansalduza/DynamicChartCaseFE

6. Örnek Veri Yapıları

• Tablo:
  SalesData – Örneğin, SalesDate, Category, Amount gibi sütunlarla satış verileri.

• View:
  Özet verileri sunan view’lar (örneğin, v_SalesSummary).

• Stored Procedure:
  sp_GetMonthlySales, sp_GetMonthlyExpenses gibi, ay ve kategori bazında toplam değer döndüren prosedürler.

• Function:
  Parametreli ya da parametresiz tablo-valued function’lar.

7. Genişletme İmkanları

• Parametre Girişi:
  Kullanıcı, stored procedure veya function’lar için ek parametreler girebilir.

• Gelişmiş Chart Konfigürasyonu:
  Renkler, legend, tooltip, responsive ayarlar ve diğer görsel seçenekler özelleştirilebilir.

8. Sonuç

Bu Dinamik Chart Uygulaması, veritabanındaki farklı objelerden gelen verileri HTML + jQuery + Chart.js kullanarak grafikleştirir. ASP.NET Core Web API katmanı, veritabanı bağlantısını yönetir, tablo/view/SP listesini döndürür ve seçilen veri kaynağından elde edilen sonuçları JSON olarak front-end’e iletir. Front-end tarafında kullanıcı, chart tipini ve kolon mapping’ini belirleyerek kolayca dinamik grafikler oluşturabilir.

Uygulama, "Veritabanına bağlanma → Obje seçme → Chart tipi belirleme → Kolonları eşleştirme → Grafik çizme" akışıyla, dinamik ve genişletilebilir bir chart görselleştirme çözümü sunar.

📌 DynamicChart - GitHub