Dash'te geri çağrılar

Dash ve Plotly ile Paneller Oluşturma

Alex Scriven

Data Scientist

Geri çağrı nedir?

Etkileşimle tetiklenen işlevsellik
- Kullanıcı bir bileşenle etkileşir
  - -> Bir Python fonksiyonu tetiklenir
    - --> Bir şeyler değişir

Neden? Etkileşimi artırır ✨

Dash'te geri çağrılar

Decorator ile başlar
- from dash import Input, Output kullanır
Output: Fonksiyon dönüşünün gideceği yer
- component_id: Bileşeni belirtir
- component_property: Değişecek özellik
Input: Geri çağrıyı tetikleyen
- component_property: Tetiklenen fonksiyonda kullanılacak

@callback(

   Output(component_id='my_plot', 
          component_property='figure'),

   Input(component_id='my_input', 
          component_property='value')

)

def some_function(data):
    # Subset Data
    # Recreate Figure
    return fig

Dash'te açılır menüler

dcc.Dropdown(id='title_dd',
             options=['Title 1', 'Title 2'])

Değer listesi

Bir açılır menü geri çağrısı

app.layout =[

  dcc.Dropdown(id='title_dd',
      options=['Title 1', 'Title 2']),

  dcc.Graph(id='my_graph')])

@callback(
    Output(component_id='my_graph', 
           component_property='figure'),

    Input(component_id='title_dd', 
           component_property='value')
)

# @callback()
def update_plot(selection):
    title = "None Selected"
    if selection:
        title = selection

    bar_fig = px.bar(
      data_frame=ecom_sales, 
      title=f'{title}',
      x='Total Sales ($)', y='Country')

  return bar_fig

İlk açılır menümüz

Bir Chrome tarayıcısında toplam satışlar (x ekseni) ve ülke (y ekseni) çubuk grafiği ile üstte Title 1 ve Title 2 seçenekleri olan bir açılır menü. Gif'te fare bu seçenekleri tıklıyor ve grafiğin başlığı seçime göre değişiyor

Filtre olarak açılır menü

Yaygın kullanım: açılır menü, grafik DataFrame'ini filtreler

# @callback()
def update_plot(input_country):
    country = 'All Countries'

    sales = ecom_sales.copy(deep=True)

    if input_country:
        country = input_country
        sales = sales[sales['Country'] == country]

        bar_fig = px.bar(
            data_frame=sales, title=f"Sales in {country}",
            x='Total Sales ($)', y='Country')
    return bar_fig

Filtremiz çalışırken

Bir Chrome tarayıcısında toplam satışlar (x ekseni) ve ülke (y ekseni) çubuk grafiği ile üstte ülke adları olan bir açılır menü. Gif'te fare seçenekleri tıklıyor; başlık seçime göre değişiyor ve grafik tek çubuğa filtreleniyor

Haydi pratik yapalım!

Dash ve Plotly ile Paneller Oluşturma