Como Utilizar Modal no Python Dash

[

User inputs in Dash components

Uma das principais características do Dash é a capacidade de interação com o usuário por meio de componentes. Esses componentes podem capturar entradas do usuário, como cliques em botões, seleções em menus suspensos e digitação em campos de texto. Nesta seção, veremos como adicionar entradas de usuário aos aplicativos Dash e como utilizá-las para modificar elementos e dados nos painéis.

Adicionando um campo de texto

Vamos começar adicionando um campo de texto que permita ao usuário buscar por palavras-chave nas descrições dos produtos. Para isso, utilizaremos o componente dcc.Input.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("Analisando Descrições de Produtos"),
    dcc.Input(
        id='product-search',
        type='text',
        placeholder='Digite uma palavra-chave...'
    ),
    html.Button('Buscar', id='search-button'),
    html.Div(id='output-container')
])

@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('search-button', 'n_clicks')],
    [dash.dependencies.State('product-search', 'value')]
)
def update_product_descriptions(n_clicks, search_term):
    # Implemente aqui a lógica para buscar e analisar as descrições dos produtos
    # usando a palavra-chave fornecida pelo usuário
    return html.Div(f"A palavra-chave '{search_term}' foi buscada.")

if __name__ == '__main__':
    app.run_server(debug=True)

Neste exemplo, criamos um layout simples com um campo de texto e um botão de busca. Quando o botão é clicado, a função update_product_descriptions é acionada. Essa função recebe o número de cliques do botão (n_clicks) e o texto digitado pelo usuário (search_term) como argumentos. Você pode implementar a lógica desejada dentro dessa função para buscar e analisar as descrições dos produtos.

Selecionando localizações dos clientes

Outra forma de entrada do usuário é por meio de menus suspensos. Vamos criar um menu suspenso que permita ao usuário selecionar as localizações dos principais clientes. Neste exemplo, usaremos o componente dcc.Dropdown.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("Analisando Localizações de Clientes"),
    dcc.Dropdown(
        id='customer-locations',
        options=[
            {'label': 'Nova York', 'value': 'New York'},
            {'label': 'Londres', 'value': 'London'},
            {'label': 'Paris', 'value': 'Paris'}
        ],
        value='New York'
    ),
    html.Div(id='output-container')
])

@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('customer-locations', 'value')]
)
def analyze_customer_locations(selected_location):
    # Implemente aqui a lógica para analisar as localizações dos clientes
    return html.Div(f"A localização selecionada é '{selected_location}'.")

if __name__ == '__main__':
    app.run_server(debug=True)

Neste exemplo, criamos um menu suspenso com três opções predefinidas: Nova York (New York), Londres (London) e Paris (Paris). A opção selecionada pelo usuário é passada para a função analyze_customer_locations, onde você pode implementar a lógica desejada para analisar as localizações dos clientes com base na opção selecionada.

Adicionando um seletor de datas

O Dash também permite a inclusão de componentes de seleção de datas, como o seletor de datas (DatePicker). Vamos adicionar um seletor de datas aos nossos painéis para que o usuário possa escolher um intervalo de datas para análise. Neste exemplo, vamos utilizar o componente dcc.DatePickerRange.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("Analisando Dados de Vendas"),
    dcc.DatePickerRange(
        id='sales-date-range',
        start_date_placeholder_text='Data de início',
        end_date_placeholder_text='Data de término'
    ),
    html.Div(id='output-container')
])

@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('sales-date-range', 'start_date'),
     dash.dependencies.Input('sales-date-range', 'end_date')]
)
def analyze_sales_data(start_date, end_date):
    # Implemente aqui a lógica para analisar os dados de vendas no intervalo de datas fornecido pelo usuário
    return html.Div(f"Analisando dados de vendas de {start_date} a {end_date}.")

if __name__ == '__main__':
    app.run_server(debug=True)

Neste exemplo, utilizamos o componente dcc.DatePickerRange para criar um seletor de datas que permite ao usuário escolher um intervalo de datas. As datas selecionadas são passadas para a função analyze_sales_data, onde você pode implementar a lógica desejada para analisar os dados de vendas no intervalo fornecido.

Conclusão

Os componentes de entrada do Dash fornecem uma maneira interativa para os usuários interagirem com os aplicativos e modificarem elementos e dados nos painéis. Neste artigo, vimos como adicionar componentes de entrada, como campos de texto, menus suspensos e seletores de datas, aos aplicativos Dash e como usar essas entradas para realizar análises e modificações. Com essas ferramentas, você pode criar painéis interativos e personalizáveis ​​que atendam às necessidades específicas dos seus usuários.