Dash ile Python Dashboard: Layout, Callback ve Filtre Kurma

Dash nedir, ne zaman tercih edilir?

Dash, Plotly ekibinin geliştirdiği, Python ile web tabanlı veri uygulaması yazmayı sağlayan bir çerçevedir. HTML, CSS ya da JavaScript yazmadan, Python kodunuzla filtreli, tıklanabilir ve etkileşimli bir panel oluşturursunuz. Grafikleri Plotly üretir; Dash ise bu grafikleri sayfaya yerleştirir ve kullanıcının seçimlerine tepki vermesini sağlar.

Dash, analizin Python'da yapıldığı ve dashboard'un da bu analizle birlikte değişebilmesi gereken durumlarda anlamlıdır: özel hesaplama, makine öğrenmesi çıktısı, standart iş zekası araçlarının hazır sunmadığı bir görsel. Şirket içinde standart raporlama zaten bir iş zekası aracında yürüyorsa, ikisinin rolü farklıdır; araçlar arasındaki seçim için ayrı karşılaştırma sayfalarına bakılabilir.

İlk uygulama: layout ve çalıştırma

Bir Dash uygulaması iki parçadan oluşur: görünümü tanımlayan layout ve davranışı tanımlayan callback'ler. Layout, bileşenlerden oluşan bir ağaçtır. dash.html paketi HTML etiketlerinin Python karşılıklarını, dash.dcc paketi grafik ve girdi kontrollerini sağlar.

from dash import Dash, dcc, html import plotly.express as px

app = Dash()

fig = px.bar(df, x="product", y="adet", color="sehir", barmode="group")

app.layout = html.Div([ html.Label("Ürün Satış Paneli"), dcc.Graph(id="product-chart", figure=fig), ])

if __name__ == "__main__": app.run(debug=True)

Bu dosyayı app.py adıyla kaydedip python app.py ile çalıştırırsınız; terminal yerel adresi yazar, tarayıcıda açarsınız. Dash belgelerine göre debug=True hot-reload'u açar: kodu değiştirip kaydettiğinizde tarayıcı kendini yeniler. Geliştirme boyunca bu, geri bildirim döngüsünü kısaltır.

Etkileşim: açılır menüyle grafiği süzen callback

Dashboard'u canlı yapan callback'tir. Callback, bir bileşenin özelliğini girdi (Input), başka bir bileşenin özelliğini çıktı (Output) olarak bağlayan bir Python fonksiyonudur; girdi değiştiğinde Dash fonksiyonu çağırır ve dönüş değerini çıktıya yazar.

from dash import Dash, dcc, html, Input, Output, callback import plotly.express as px

app = Dash()

app.layout = html.Div([ html.Label("Bölge Satış Paneli"), dcc.Dropdown(options=sorted(df["bolge"].unique()), value="Marmara", id="bolge-secici"), dcc.Graph(id="satis-grafigi"), ])

@callback( Output("satis-grafigi", "figure"), Input("bolge-secici", "value"), ) def grafigi_guncelle(secilen_bolge): filtreli = df[df["bolge"] == secilen_bolge] return px.line(filtreli, x="tarih", y="satis")

Burada açılır menünün value özelliği girdi, grafiğin figure özelliği çıktıdır. Kullanıcı başka bir bölge seçince fonksiyon çalışır, tabloyu süzer ve yeni bir Plotly grafiği döndürür. Bileşenlerin id değerleri layout ile callback arasındaki bağdır; yazım hatası bu bağı koparır.

Birden fazla girdi ve bağlı filtreler

Gerçek paneller tek filtreyle kalmaz: bölge, ürün grubu ve dönem filtreleri birlikte çalışır. Callback birden fazla Input alabilir; fonksiyon bu girdileri aynı sırayla parametre olarak alır. Böylece tek bir fonksiyon tüm filtrelerin birleşimini uygular.

@callback( Output("satis-grafigi", "figure"), Input("bolge-secici", "value"), Input("product-picker", "value"), ) def grafigi_guncelle(bolge, product): ...

Birden çok çıktıyı güncellemek de mümkündür; örneğin aynı filtrenin hem grafiği hem özet kartlarını değiştirmesi. Bağlı filtrelerde (şehir seçilince ilçe listesinin değişmesi) bir callback'in çıktısı, başka bir bileşenin seçenek listesi olur. Zincir uzadıkça hata ayıklamak zorlaşır; filtre sayısını ihtiyaçla sınırlamak ve her filtrenin hangi soruyu cevapladığını yazmak iyi bir disiplindir.

Dashboard tasarımı: ne nereye konur?

Teknik olarak çalışan bir panel, iyi tasarlanmış olmayabilir. Kullanıcı sayfaya geldiğinde ilk sorusu "durum iyi mi?" olur. Bu yüzden üst bölüme birkaç özet gösterge (toplam satış, hedefe oran gibi), altına ana trend grafiği, en alta ayrıntı kırılımları yerleştirilir. Filtreler genellikle sol kenarda ya da üst şeritte, tüm grafiklere etki ettiği anlaşılır biçimde yer alır.

Her grafik tek bir soruya cevap vermeli ve başlığı bu soruyu açıkça belirtmelidir. Aynı renk aynı kategoriyi her yerde göstermelidir. Mobil ya da büyük ekran kullanımı varsa bileşenlerin genişlik davranışı test edilmelidir. Kullanıcıyı çok sayıda grafikle boğmak yerine, karar vermek için gereken kadar bileşen bırakmak daha değerlidir.

Veri akışı ve performans

En sık yapılan performans hatası, her callback çağrısında veriyi baştan okumaktır. Veri, uygulama başlarken bir kez yüklenir ve callback içinde yalnızca süzülür. Veri tabanından çekiliyorsa, panelin ihtiyaç duyduğu özet tablolar önceden hazırlanır; callback ağır hesap yapmaz.

Çok büyük tablolarda grafiğe ham noktaları vermek yerine özet göndermek, sayfanın tepkiselliğini korur. Veri sürekli güncelleniyorsa, yenileme sıklığı iş ihtiyacına göre belirlenir; gerçek zamanlı gösterim her zaman gerekli değildir. Ayrıca farklı kullanıcıların aynı anda panele girebileceğini hesaba katın: kullanıcıya özel seçimi sunucu tarafında global bir değişkende tutmak, kullanıcıların birbirinin görünümünü bozmasına yol açar.

Sık hatalar ve yayına alma

Sık hatalar şunlardır: aynı id değerini birden çok bileşene vermek, callback içinde global veriyi değiştirmek, tek dosyada çok uzun bir layout yazıp düzensiz bırakmak, hata durumunda (boş filtre sonucu) kullanıcıya mesaj göstermemek.

Uygulama büyüdükçe kodu bölümlere ayırın: veri yükleme, layout bileşenleri ve callback'ler ayrı dosyalarda dursun. Yayına almak ise BT altyapısına bağlıdır: uygulamanın hangi sunucuda çalışacağı, kimin erişebileceği, kimlik doğrulamanın nasıl yapılacağı ve verinin hangi kaynaktan geleceği kurumun politikasıyla belirlenir. Bu kararları geliştirme başlamadan netleştirmek, sonradan yeniden yazmayı önler.

Bu beceriyi Mindset programlarında nerede çalışırsınız?

Plotly ile İnteraktif Görselleştirme eğitimi, Python bilen veri analistleri, iş zekası geliştiricileri ve analitik ekipler için uygundur. Dash bölümü, grafikten uygulamaya geçmek isteyenlere yöneliktir.

Modül başlıklarında Plotly temelleri ve grafik türleri, Graph Objects ile özelleştirme, 3D görselleştirme ve coğrafi haritalar, Dash ile interaktif web uygulamaları, dashboard tasarımı ve iş zekası entegrasyonu ile bir kurumsal analitik dashboard projesi yer alır. Kurumsal ekipler, proje modülünü kendi iç raporlama ihtiyaçlarına uyarlayabilir.