Etkileşimli bileşenler

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

Etkileşimi artırma

Bazı yararlı etkileşimli bileşenler:
- dcc.Checklist() = Onay kutuları
- dcc.RadioItems() = Radyo düğmeleri
- dcc.Slider() / dcc.RangeSlider() = Kaydırıcı seçiciler
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Tarihler için kaydırıcılara benzer

Kaydırıcılar

Kaydırıcı: tek bir değer için sürükleyip bırakın

Aralık kaydırıcısı: iki değer için sürükleyip bırakın

Not: Callback'e bağlanabilir
- Grafikleri veya bileşenleri güncelleyin

Bir kaydırıcı:

Siyah arka planda mavi bir kaydırıcı gifi; altta seçilen değeri gösteren metin var. Fare çekmeyi yukarı kaydırır; alttaki değer artar.

Bir aralık kaydırıcısı:

Siyah arka planda mavi bir aralık kaydırıcısı gifi; altta seçilen iki değeri gösteren metin var. Fare her iki ucu yukarı-aşağı sürükler; alttaki değerler değişir.

Dash'te kaydırıcılar

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Temel argümanlar:

min/max : Sınırlar
value : Başlangıç seçimi
step : Her diş için artış
vertical : Yatay/dikey düzen

Dash'te tarih seçiciler

DatePickerSingle: Tek tarih seçin

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = başlangıç seçimi
initial_visible_month = açılır pencerede görünen ay
İsteğe bağlı: min_date_allowed ve max_date_allowed ile sınırlandırın

Yaygın bir tarih seçici örneğinin gifi. Geçerli tarih 1 Temmuz 2025 olan bir tarih alanı var. Fare tıklar; takvim açılır. 2 Temmuz 2025 seçilir, takvim kapanır ve seçicideki tarih güncellenir.

Tarih Aralığı Seçici

DatePickerSingle'a benzer

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

Başlangıç start_date ve end_date ayarlayın

Yaygın bir tarih aralığı seçici örneğinin gifi. Temmuz 2025'ten tarihler seçili iki tarih girişi var. Fare ikinci alana tıklar; takvim açılır, aralık günleri yeşil vurguludur, sonra yeni bir aralık seçilerek tarihler değişir

Grafikleri güncelleme

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Şekli oluştur
    return fig

Hadi pratik yapalım!

Dash ve Plotly ile Paneller Oluşturma