Componentes interativos

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

Aprimorando a interatividade

Alguns componentes interativos úteis:
- dcc.Checklist() = Caixas de seleção
- dcc.RadioItems() = Botões de opção
- dcc.Slider() / dcc.RangeSlider() = Seletores deslizantes
- dcc.DatePickerSingle() / dcc.DatePickerRange() = Semelhantes aos sliders, mas para datas

Sliders

Slider: arraste para um único valor

Range Slider: arraste para dois valores

Lembrete: pode ligar a um callback
- Atualizar gráficos ou componentes

Um slider:

Um GIF de um slider azul em fundo preto com texto abaixo indicando o valor selecionado. O mouse arrasta a alça do slider para cima, aumentando o valor exibido.

Um range slider:

Um GIF de um range slider azul em fundo preto com texto abaixo indicando dois valores selecionados. O mouse arrasta cada alça para cima e para baixo, alterando os valores exibidos.

Sliders no Dash

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

Principais argumentos:

min/max : Limites do slider
value : Seleção inicial
step : Incremento por marca
vertical : Define horizontal ou vertical

Seletores de data no Dash

DatePickerSingle: selecione uma única data

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

date = seleção inicial
initial_visible_month = mês exibido no pop-up
Opcional: limite min_date_allowed e max_date_allowed

Um GIF de um exemplo comum de seletor de data. Há um campo de data com 1º de julho de 2025. O mouse clica, o calendário aparece, seleciona 2 de julho de 2025 e o calendário recolhe atualizando a data no seletor.

Seletor de intervalo de datas

Semelhante a DatePickerSingle

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

Defina start_date e end_date iniciais

Um GIF de um seletor de intervalo de datas. Há dois campos com datas de julho de 2025. Ao clicar no segundo campo, o calendário aparece com o intervalo em verde; um novo intervalo é escolhido, alterando as datas.

Atualizando gráficos

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

    # Criar fig
    return fig

Vamos praticar!

Construindo Dashboards com Dash e Plotly