How to make multiple indicators respect the sizing of the Layout?

Button 1


Button 2

Button 3

In the code below I want to simultaneously change the indicators based on the selected button, that is, each button will have 4 indicators to render. The choropleth maps of the 1st DOSE button are respecting the dimensioning, while the 2nd and 3rd buttons are not as shown in the attached image.
The question is how can I resolve this error?

Code buttons interacte:

@app.callback(
    [
        Output("bar-chart-terceira-dose-regiao", "style"),
        Output("map-choropleth-monovalente-terceira-dose-regiao", "style"),
        Output("bar-chart-terceira-dose-municipio", "style"),
        Output("map-choropleth-monovalente-municipio-terceira-dose", "style"),

        Output("bar-chart-segunda-dose-regiao", "style"),
        Output("map-choropleth-monovalente-segunda-dose-regiao", "style"),
        Output("bar-chart-segunda-dose-municipio", "style"),
        Output("map-choropleth-monovalente-municipio-segunda-dose", "style"),

        Output("bar-chart-primeira-dose-regiao", "style"),
        Output("map-choropleth-monovalente-primeira-dose-regiao", "style"),
        Output("bar-chart-primeira-dose-municipio", "style"),
        Output("map-choropleth-monovalente-municipio-primeira-dose", "style")
    ],
    [
        Input("btn-segunda-dose", "n_clicks"),
        Input("btn-primeira-dose", "n_clicks"),
        Input("btn-terceira-dose", "n_clicks")
    ]
)
def toggle_visualization(btn_segunda_dose, btn_terceira_dose, btn_primeira_dose):
    ctx = dash.callback_context

    if not ctx.triggered:
        button_id = "btn-primeira-dose"  # Set the default button to FIRST DOSE
    else:
        button_id = ctx.triggered[0]["prop_id"].split(".")[0]

    # Get the active and default styles for the "btn-primeira-dose" button
    active_style = {"display": "block", 'width': '100%', 'height': '100%'}
    default_style = {"display": "none",'width': '100%', 'height': '100%'}

    styles = [default_style] * 12  # 12 outputs corresponding to 3 doses * 4 styles

    # Update styles based on the clicked button
    if button_id == "btn-primeira-dose":
        styles[8] = styles[9] = styles[10] = styles[11] = active_style  # First dose region and municipality
    elif button_id == "btn-segunda-dose":
        styles[4] = styles[5] = styles[6] = styles[7] = active_style  # Second dose region and municipality
    elif button_id == "btn-terceira-dose":
        styles[0] = styles[1] = styles[2] = styles[3] = active_style  # Third dose region and municipality

    return styles

Example Code Choropleth:


# TERCEIRA DOSE
figure3 = px.choropleth_mapbox(
    gdf_geojson, # Use the GeoDataFrame
    geojson=geojson_for_plot,  # Use the GeoJSON for plotting
    locations='Região Saude',  # Column in gdf_geojson with the location identifiers
    featureidkey="properties.REGIAO_SAU",  # Corresponding key in the GeoJSON
    color='(%) Porcentagem',  # Column in gdf_geojson to define the color
    hover_data=['População', '(%) Porcentagem', 'Contagem Doses'],
    #title='COBERTURA DA 3ª DOSE APLICADA POR REGIÃO',
    mapbox_style="white-bg",
    zoom=5.9,
    center={"lat": -27.5954, "lon": -51.024735},
    opacity=1,
    color_continuous_scale="Oranges"
)
figure3.update_layout(
    width=900,
    height=350,
    coloraxis_showscale=True,  # Mantém a legenda de cor visível
    coloraxis_colorbar=dict(
        title="(%) Porcentagem",  # Título da legenda
        yanchor="bottom", # Define a ancoragem vertical da legenda
        len=0.5,  
        y=0.05,  # Posição vertical da legenda
        xanchor="left",  # Define a ancoragem horizontal da legenda
        x=0.05  # Posição horizontal da legenda
    ),
    margin={"r":0,"t":0,"l":0,"b":0}  # Remove as margens ao redor do mapa
)

Layout:


    dbc.Row([
        dbc.Col([

        ], width=5),
        dbc.Col([
            dbc.Button("1º DOSE", id="btn-primeira-dose", color="success", outline=False, className="mr-2 text-center", n_clicks=0, style={'margin-right': '5px'}),
            dbc.Button("2º DOSE", id="btn-segunda-dose", color="success", outline=False, className="mr-2 text-center", n_clicks=0, style={'margin-right': '5px'}),
            dbc.Button("3º DOSE", id="btn-terceira-dose", color="success", outline=False, className="mr-2 text-center", n_clicks=0, style={'margin-right': '5px'}),
        ], width=4),
        dbc.Col([

        ], width=3)
    ], style={'height': 'calc(100% - 100px)', 'width':'100%'}, className='mt-2'),

    #map-choropleth-monovalente-municipio-primeira-dose
    dbc.Row([
    dbc.Col([
        dbc.Card([
            dcc.Graph(id='map-choropleth-monovalente-primeira-dose-regiao', className='dbc', config=config_graph, figure=figure1),
            dcc.Graph(id='map-choropleth-monovalente-segunda-dose-regiao', className='dbc', config=config_graph, figure=figure2),
            dcc.Graph(id='map-choropleth-monovalente-terceira-dose-regiao', className='dbc', config=config_graph, figure=figure3),
        ], style={'border': 0})
    ], xs=12, sm=6, lg=6, xl=6),  # Grid properties are applied to 'Col'

    dbc.Col([
        dbc.Card([
            dcc.Graph(id='map-choropleth-monovalente-municipio-primeira-dose', className='dbc', config=config_graph, figure=figure4),
            dcc.Graph(id='map-choropleth-monovalente-municipio-segunda-dose', className='dbc', config=config_graph, figure=figure5),
            dcc.Graph(id='map-choropleth-monovalente-municipio-terceira-dose', className='dbc', config=config_graph, figure=figure6),
        ], style={'border': 0})
    ], xs=12, sm=6, lg=6, xl=6)
    ]),


    dbc.Row([
        dbc.Col([
            dbc.Card([
                    dcc.Graph(id='bar-chart-primeira-dose-regiao', className='dbc', config=config_graph, style={'display': 'block', 'width':'100%'}),
                    dcc.Graph(id='bar-chart-segunda-dose-regiao', className='dbc', config=config_graph, style={'display': 'block', 'width':'100%'}),
                    dcc.Graph(id='bar-chart-terceira-dose-regiao', className='dbc', config=config_graph, style={'display': 'block', 'width':'100%'})  

            ],style={'border':0})
        ], xs=6, sm=6, lg=6, xl=6),
        dbc.Col([
            dbc.Card([
                    dcc.Graph(id='bar-chart-primeira-dose-municipio', className='dbc', config=config_graph, style={'display': 'block', 'width':'100%'}),
                    dcc.Graph(id='bar-chart-segunda-dose-municipio', className='dbc', config=config_graph, style={'display': 'block', 'width':'100%'}),
                    dcc.Graph(id='bar-chart-terceira-dose-municipio', className='dbc', config=config_graph, style={'display': 'block', 'width':'100%'})  

            ],style={'border':0})
        ], xs=6, sm=6, lg=6, xl=6)
    ], style={'width': '100%', 'height': '100%'}),

Without having read all of your code, pattern matching callbacks are quite helpful for these use cases.

1 Like