Interaktivní komponenty

Tvorba dashboardů s Dash a Plotly

Alex Scriven

Data Scientist

Rozšíření interaktivity

Užitečné interaktivní komponenty:
- dcc.Checklist() = Zaškrtávací políčka
- dcc.RadioItems() = Přepínače
- dcc.Slider() / dcc.RangeSlider() = Posuvné výběry
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Posuvníky pro data

Posuvníky

Slider: přetažením vybere jednu hodnotu

Range Slider: přetažením vybere dvě hodnoty

Připomenutí: lze propojit s callbackem
- Aktualizuje grafy nebo komponenty

Slider:

Animace modrého posuvníku na černém pozadí s textem zobrazujícím vybranou hodnotu. Myš posune jezdec nahoru, hodnota se zvýší.

Range Slider:

Animace modrého rozsahového posuvníku na černém pozadí s textem zobrazujícím dvě vybrané hodnoty. Myš posune oba konce jezdce, hodnoty se změní.

Posuvníky v Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Hlavní argumenty:

min/max : Rozsah posuvníku
value : Počáteční výběr
step : Krok pro každý dílek
vertical : Orientace posuvníku

Výběr data v Dash

DatePickerSingle: Výběr jednoho data

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

date = počáteční výběr
initial_visible_month = měsíc zobrazený ve vyskakovacím okně
Volitelně omezit min_date_allowed a max_date_allowed

Animace výběru data. Vstupní pole zobrazuje 1. července 2025. Myš klikne na pole, zobrazí se kalendář, je vybráno 2. července 2025, kalendář se zavře a datum se aktualizuje.

Výběr rozsahu dat

Podobné jako DatePickerSingle

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

Nastavte počáteční start_date a end_date

Animace běžného výběru rozsahu dat. Jsou zobrazena dvě vstupní pole s daty v červenci 2025. Myš klikne na druhé pole, zobrazí se kalendář s zeleně zvýrazněným rozsahem, poté je vybrán nový rozsah a data se změní.

Aktualizace grafů

# 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

Animace výběru data v Dash. Vlevo je panel Ovládací prvky s výběrem data nadepsaným Výběr data prodeje, kde je zvoleno datum 04/11/2011. Vpravo je sloupcový graf s osou x Celkové tržby ($) a osou y Hlavní kategorie, s názvem Denní tržby podle hlavní kategorie. Myš změní datum na 11. dubna 2011, graf se aktualizuje a název se přizpůsobí novému datu.

Lass uns üben!

Tvorba dashboardů s Dash a Plotly