Komponenty interaktywne

Tworzenie dashboardów z Dash i Plotly

Alex Scriven

Data Scientist

Rozszerzanie interaktywności

Przydatne komponenty interaktywne:
- dcc.Checklist() = Pola wyboru
- dcc.RadioItems() = Przyciski opcji
- dcc.Slider() / dcc.RangeSlider() = Suwaki
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Podobne do suwaków, ale dla dat

Suwaki

Slider: przeciągnij, aby wybrać jedną wartość

Range Slider: przeciągnij, aby wybrać dwie wartości

Przypomnienie: można powiązać z callbackiem
- Aktualizuje wykresy lub komponenty

Suwak:

Animacja niebieskiego suwaka na czarnym tle z tekstem pokazującym wybraną wartość. Mysz przesuwa suwak w górę, zwiększając wartość.

Suwak zakresu:

Animacja niebieskiego suwaka zakresu na czarnym tle z tekstem pokazującym dwie wybrane wartości. Mysz przesuwa oba końce suwaka, zmieniając wartości.

Suwaki w Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Główne argumenty:

min/max : Zakres suwaka
value : Wartość początkowa
step : Przyrost dla każdego podziałki
vertical : Orientacja pozioma lub pionowa

Selektory daty w Dash

DatePickerSingle: Wybór pojedynczej daty

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

date = wartość początkowa
initial_visible_month = miesiąc widoczny w oknie
Opcjonalnie: ogranicz min_date_allowed i max_date_allowed

Animacja przykładowego selektora daty. W polu daty widnieje 1 lipca 2025. Mysz klika pole i pojawia się kalendarz. Wybrano 2 lipca 2025 — kalendarz zwija się i data w selektorze zmienia się.

Selektor zakresu dat

Podobny do DatePickerSingle

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

Ustaw start_date i end_date

Animacja przykładowego selektora zakresu dat. Widoczne są dwa pola daty z wybranymi datami w lipcu 2025. Mysz klika drugie pole i pojawia się kalendarz z zaznaczonym na zielono zakresem dni. Następnie wybierany jest nowy zakres dat.

Aktualizowanie wykresów

# 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]

    # Create fig
    return fig

Ćwiczmy!

Tworzenie dashboardów z Dash i Plotly