Componente interactive

Crearea dashboardurilor cu Dash și Plotly

Alex Scriven

Data Scientist

Îmbunătățirea interactivității

 

  • Componente interactive utile:
    • dcc.Checklist() = Casete de selectare
    • dcc.RadioItems() = Butoane radio
    • dcc.Slider() / dcc.RangeSlider() = Selectoare de tip glisor
    • dcc.DatePickerSingle() / dcc.DatePickerRange() = Similare cu glisoarele, dar pentru date
Crearea dashboardurilor cu Dash și Plotly

Glisoare

 

 

  • Glisor: deplasare pentru o singură valoare

 

 

  • Glisor de interval: deplasare pentru două valori
  • Reminder: Se poate lega de callback
    • Actualizează grafice sau componente

 

Un glisor:

Un gif cu un glisor albastru pe fundal negru, cu text dedesubt indicând valoarea selectată. Mouse-ul deplasează cursorul câteva poziții, iar valoarea afișată crește.

Un glisor de interval:

Un gif cu un glisor de interval albastru pe fundal negru, cu text dedesubt indicând cele două valori selectate. Mouse-ul deplasează fiecare capăt al cursorului în sus și în jos, iar valorile afișate se modifică.

Crearea dashboardurilor cu Dash și Plotly

Glisoare în Dash

 

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

 

Argumente principale:

  • min/max : Limite ale glisorului
  • value : Selecție inițială
  • step : Increment pentru fiecare poziție
  • vertical : Orientare orizontală sau verticală
Crearea dashboardurilor cu Dash și Plotly

Selectoare de date în Dash

DatePickerSingle: Selectați o singură dată

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)
  • date = selecție inițială
  • initial_visible_month = luna afișată în popup
  • Opțional: limitați min_date_allowed și max_date_allowed

Un gif cu un exemplu de selector de dată. Câmpul afișează 1 iulie 2025. Mouse-ul face clic pe el, apare un calendar, se selectează 2 iulie 2025, calendarul se închide și data din selector se actualizează.

Crearea dashboardurilor cu Dash și Plotly

Selector de interval de date

 

  • Similar cu DatePickerSingle
    dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)
  • Setați un start_date și end_date inițial

 

Un gif cu un exemplu de selector de interval de date. Există două câmpuri de introducere a datei cu datele din iulie 2025 selectate. Mouse-ul face clic pe al doilea câmp și apare un calendar, evidențiat în verde pentru toate zilele din interval; apoi se selectează un nou interval, modificând datele.

Crearea dashboardurilor cu Dash și Plotly

Actualizarea graficelor

 

# 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

 

Un gif cu un selector de date utilizat în Dash. În stânga se află un panou cu titlul „Controls", care conține un selector de date cu titlul „Sale Date Select". Data selectată este 04/11/2011. În dreapta este un grafic bară cu „Total Sales ($)" pe axa x și „Major Category" pe axa y, cu titlul „Daily Sales by Major Category" și titlul graficului „Sales on 2011-04-11". Mouse-ul face clic pe selector și alege ziua următoare, 11 aprilie 2011, iar graficul și titlul se actualizează corespunzător.

Crearea dashboardurilor cu Dash și Plotly

Să exersăm!

Crearea dashboardurilor cu Dash și Plotly

Preparing Video For Download...