Button Filter: Buton Filtresi

Buton Filtresi bileşeni, kullanıcıların belirli filtre değerlerini butonlar üzerinden seçerek dashboard üzerindeki verileri filtrelemesini sağlayan filtreleme bileşenidir.

Standart filtre bileşenlerinden farklı olarak filtre seçenekleri buton şeklinde görüntülenir. Bu sayede kullanıcılar filtreleme işlemlerini daha hızlı ve görsel olarak daha anlaşılır bir şekilde gerçekleştirebilir.

Buton Filtresi; kategori, ürün grubu, marka, yıl, bölge veya benzeri kategorik alanlarda kullanılmak üzere tasarlanmıştır. Görüntülenen butonlar, filtre alanına bağlanan kolondaki verilerden dinamik olarak oluşturulur. Veri kaynağındaki değerler değiştiğinde buton içerikleri de otomatik olarak güncellenir.

Filtre üzerinde yapılan seçimler, filtre ile ilişkilendirilen görsellere anlık olarak uygulanır.

Buton Filtresi Bileşeninin Eklenmesi

Buton Filtresi bileşeni eklemek için Plugin Listesi içerisinden Buton Filtresi bileşeni seçilir ve kumanda tablosuna eklenir.

Bileşen eklendikten sonra filtreleme yapılacak alanın belirlenmesi ve gerekli yapılandırmaların tamamlanması gerekmektedir.

Buton Filtresi Araçları

Buton Filtresi bileşeni seçildiğinde üst menüde aşağıdaki araçlar görüntülenir:

1. Araçları Aç/Kapat: Görsel ile ilgili düzenleme yapılan ikonların açıp kapatıldığı ikondur.

2. Veri: Kullanıcının kendi verileriyle görseli şekillendireceği alandır.

3. Ayarlar: Görselin renk/başlık gibi biçimsel özelliklerinin değiştirildiği alandır.

4. Etkileşim: Görselden diğer görsellere filtre verilen alandır.

5. Yenile: Veri alanı ile grafiğin çalışması ve grafiğin yenilenmesini sağlar.

6. Kaldır: Görseli silmek için kullanılan alandır. “Kaldır” ikonuna tıklandığında “Bu görseli silmek istiyor musunuz?” şeklinde uyarı çıkmaktadır.

Not: Etkileşim ayarları tüm görsel bileşenlerde ortak olarak kullanıldığından, ilgili bölüm ayrı başlık altında detaylı olarak açıklanmaktadır.

Veri Yapılandırması

Buton Filtresi bileşeninin çalışabilmesi için filtreleme yapılacak alanın tanımlanması gerekmektedir. Bu işlem bileşenin Veri ekranı üzerinden gerçekleştirilir.

Tablolar & Kolonlar : Seçili modelde var olan tablo ve kolonların bulunduğu alandır. Tablolar & Kolonlar bölümünde yer alan kolonlar, sağ tarafta bulunan bölümlere sürükle-bırak ile eklenir.

Kolon Eşleştirmeleri

• Sıralama: Kolon verisinin artan/azalan şekilde sıralamasının yapıldığı alandır.

• Filtre: Grafikte yer alacak verinin ekleneceği alandır.

• Saklı Alan: Eklenen kolonların sıralamaya dahil edilebilmesi veya grafikte görüntülenmek istenmeyen kolonların sorguya dahil edilmesi için kullanılan alandır.

Yapılandırma Ayarları

Buton Filtresi bileşenine ait görünüm ve davranış ayarları Ayarlar ekranı üzerinden yönetilir.

Genel Görünüm

Çoklu Seçim: Bu seçenek işaretlendiğinde, kullanıcı birden fazla değer seçebilir.

Arkaplan Rengi: Grafiğin arka plan rengini belirlemenizi sağlar. Renk seçimi, mevcut palet üzerinden yapılabilir.

Palet: Grafik, seçilen renk paletine göre renklendirilir.

Butonlar Arası Boşluk: Butonlar arasında ne kadar boşluk olacağını belirlemeyi sağlar.

Yuvarlatılmış Köşeler: Bu seçenek işaretlendiğinde, buton köşeleri yuvarlatılmış şekilde görüntülenir.

Üç Boyutlu Görünüm: Bu seçenek işaretlendiğinde, butonlar üç boyutlu olarak görüntülenir.

Yazı Biçimlendirme

Yazı Boyutu: Butonlarda kullanılan metnin yazı boyutunu belirlemenizi sağlar.

Yazı Rengi: Butonlarda görüntülenen metnin rengini belirlemenizi sağlar.

Yazı Stili: Butonlarda görüntülenen metnin yazı tipini (font) belirlemenizi sağlar.

Yazı Stili: Buton filtresindeki metinlerin kalın, italik veya altı çizili gibi yazı stilleriyle biçimlendirilmesini sağlar.

Yazıları Sar: Bu seçenek işaretlendiğinde, metinler taşma durumunda alt satıra alınarak görüntülenir.

Başlık Ayarları

Başlık: Grafiğe verilecek başlığın tanımlandığı alandır.

Başlık Hizası: Grafik başlığının sola, ortaya veya sağa hizalanmasını sağlar.

Başlık Yazı Stilleri: Grafik başlığının kalın, italik veya altı çizili gibi yazı stilleriyle biçimlendirilmesini sağlar.

Başlık Yazı Stili: Grafik başlığında kullanılacak yazı tipini (font) belirlemenizi sağlar.

Başlık Yazı Rengi: Grafik başlığının metin renginin değiştirilmesini sağlar.

Başlık özelliklerini rapordaki diğer pluginlere uygula: Tanımlanan başlık ayarlarının (stil, renk, hizalama vb.) aynı dashboard içindeki diğer grafik bileşenlerinin başlıklarına da otomatik olarak uygulanmasını sağlar.

Diğer

Veri Yok Açıklaması: Grafikte görüntülenecek veri bulunmadığında, kullanıcıya gösterilecek bilgilendirici metnin tanımlandığı alandır.

Etkileşim Ayarları

Buton Filtresi bileşeni, kumanda tablosunda bulunan diğer görseller ile ilişkilendirilebilir. Bu sayede butonlar üzerinde yapılan seçimler belirlenen görselleri otomatik olarak etkiler ve dashboard üzerindeki veriler anlık olarak güncellenir.

Etkileşim yapılandırmaları kullanılarak filtre seçimlerinin hangi görseller üzerinde etkili olacağı belirlenebilir.

Etkileşim ayarları hakkında detaylı bilgi için Etkileşim Yönetimi bölümüne bakabilirsiniz.

Kullanım Örneği

Yukarıdaki örnekte Buton Filtresi bileşeni, veri modelindeki Doktor alanına bağlanmıştır.

Bileşen çalıştırıldığında veri kaynağında bulunan doktor isimleri otomatik olarak butonlar halinde görüntülenir.

Örneğin filtre içerisinde;

• Mustafa Koç

• Ayşe Demir

• Hüseyin Şahin

• Elif Aksoy

• Ali Yılmaz

• Mehmet Kaya

gibi doktorlar ayrı butonlar olarak listelenmektedir.

Kullanıcı Mehmet Kaya butonuna tıkladığında dashboard üzerinde bulunan tüm ilişkili görseller yalnızca Mehmet Kaya’ya ait verileri gösterecek şekilde filtrelenir.

Bu kapsamda;

• Üst bölümde yer alan KPI kartları seçilen doktora ait randevu istatistiklerini gösterir.

• Bölüm Bazlı Toplam Randevu Sayısı grafiği seçilen doktorun görev yaptığı bölümlerdeki randevu dağılımını görüntüler.

• Bölüm Bazlı Pareto Analizi grafiği seçilen doktora ait randevu yoğunluğunu ve kümülatif dağılımı gösterir.

• Dashboard üzerindeki diğer ilişkili görseller seçilen doktora göre otomatik olarak güncellenir.

Çoklu Seçim özelliği aktif ise kullanıcı aynı anda birden fazla doktor seçebilir. Örneğin Mehmet Kaya ve Ali Yılmaz birlikte seçildiğinde dashboard üzerindeki tüm ilişkili görseller her iki doktora ait verileri kapsayacak şekilde güncellenir.

Buton Filtresi içerisinde görüntülenen değerler manuel olarak tanımlanmaz. Buton içerikleri filtre alanına bağlanan kolondaki verilerden dinamik olarak oluşturulur. Veri kaynağına yeni bir doktor eklendiğinde ilgili buton da otomatik olarak görüntülenir.

Bu sayede kullanıcılar doktor, kategori, ürün grubu, marka, şehir veya benzeri alanlar üzerinde hızlı ve görsel olarak anlaşılır bir şekilde filtreleme işlemi gerçekleştirebilir.