Interaktiva komponenter

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

Förbättrad interaktivitet

Några användbara interaktiva komponenter:
- dcc.Checklist() = Kryssrutor
- dcc.RadioItems() = Radioknappar
- dcc.Slider() / dcc.RangeSlider() = Skjutreglage
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Liknande skjutreglage men för datum

Skjutreglage

Slider: dra och välj ett enskilt värde

Range Slider: dra och välj två värden

Tips: Kan kopplas till callback
- Uppdaterar diagram eller komponenter

Ett skjutreglage:

En gif av ett blått skjutreglage mot svart bakgrund med text nedanför som visar det valda värdet. Musen tar reglagets markör och drar den uppåt några steg, vilket gör att värdet nedan ökar.

Ett intervallreglage:

En gif av ett blått intervallreglage mot svart bakgrund med text nedanför som visar de två valda värdena. Musen tar varje sida av reglagets markör och drar dem upp och ned några steg, vilket gör att värdena nedan ändras.

Skjutreglage i Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Viktiga argument:

min/max : Reglagets gränsvärden
value : Startval
step : Stegstorlek per markör
vertical : Horisontellt eller vertikalt läge

Datumväljare i Dash

DatePickerSingle: Välj ett enskilt datum

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

date = startval
initial_visible_month = månad som visas i popup
Begränsa valfritt med min_date_allowed och max_date_allowed

En gif av ett vanligt datumväljarexempel. Det finns ett datuminmatningsfält med den 1 juli 2025 som aktuellt datum. Musen klickar på det och en kalender visas. Ett annat datum väljs, 2 juli 2025, och den utfällda kalendern stängs medan det valda datumet i fältet har ändrats.

Datumintervallväljare

Liknar DatePickerSingle

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

Ange start_date och end_date som startvärden

En gif av ett vanligt datumväljarexempel. Det finns två datuminmatningsfält med datum i juli 2025 valda. Musen klickar på det andra fältet och en kalender visas, där alla dagar i intervallet redan är markerade i grönt. Sedan väljs ett nytt intervall som ändrar datumen.

Uppdatera diagram

# 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

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly