Update views/maps.py

views/maps.py

@@ -8,7 +8,10 @@ from streamlit_folium import folium_static
 import streamlit as st
 from streamlit_extras.stylable_container import stylable_container
 from streamlit_extras.add_vertical_space import add_vertical_space
-
+import streamlit_shadcn_ui as ui
+from streamlit_option_menu import option_menu
+import pandas as pd
+import plotly.graph_objects as go
 
 with stylable_container(
     key="banner",
@@ -51,137 +54,513 @@ long = -44.05603
 total_pop = gdf["POP"].sum()
 col1, col2, col3 = st.columns([1, 1, 5])
 
-with col1:
-    # st.write(f"###### População Total: {total_pop:,}")
-    map_type = st.selectbox("Tipo de mapa", ["População", "Densidade", "Heatmap"])
-
-with col2:
-    # st.write(f"###### Número de Setores Censitários: {len(gdf)}")
-    base_map = st.selectbox("Mapa base", ["Cartodb Positron", "OpenStreetMap"])
-
-with col3:
-    total_pop = gdf["POP"].sum()
-    st.write(
-        f"### 👪 População Total: {total_pop:,} habitantes, dados do Censo 2022 IBGE"
-    )
-    st.write(f"### 🗺️ Número de Setores Censitários: {len(gdf)}")
-    
-    
-add_vertical_space(5)
+st.title("Mapas da área")
 
+st.markdown(""" ### :world_map: **UBS Flamengo: (IBGE 2022)** """)
 
-col1, col2 = st.columns(2)
-with col1:
-    m = folium.Map(
-        location=[LATITUDE, LONGITUDE], tiles=base_map, zoom_start=15
-    )
-    dns_p = "Densidade pop. (hab/km²) UBS Flamengo - IBGE 2022"
-    if map_type in ["População", "Densidade"]:
-        if map_type == "População":
-            column = "POP"
-            caption = "Pop. residente UBS Flamengo IBGE 2022"
-        else:
-            gdf["DENSIDADE"] = gdf["POP"] / gdf["AREA_KM2"]
-            column = "DENSIDADE"
-            caption = dns_p
-        colorscale = px.colors.sequential.Viridis
-        colormap = LinearColormap(
-            colors=colorscale,
-            vmin=gdf[column].min(),
-            vmax=gdf[column].max(),
-            caption=caption,
-        )
-        folium.GeoJson(
-            gdf,
-            style_function=lambda feature: {
-                "fillColor": colormap(feature["properties"][column]),
-                "color": "black",
-                "weight": 1,
-                "fillOpacity": 0.7,
-            },
-            highlight_function=lambda feature: {
-                "fillColor": "#ffaf00",
-                "color": "green",
-                "weight": 3,
-                "fillOpacity": 0.9,
+STYLE = "style.css"
+STYLES = "styles.html"
+with open(STYLE, "r", encoding="utf-8") as f:
+    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+
+with open(STYLES, "r", encoding="utf-8") as f:
+    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+
+@st.cache_resource
+def load_data():
+    """
+    A function that loads and reads geojson data for UBS Flamengo and converts it to the specified coordinate reference system.
+    """
+    return gpd.read_file("views\\flamengo_ibge2022.geojson").to_crs(epsg=4326)
+
+gdf = load_data()
+LATITUDE = -19.971591804
+LONGITUDE = -44.057912815
+lat = -19.96214
+long = -44.05603
+
+total_pop = gdf["POP"].sum()
+num_setores = len(gdf)
+
+with st.expander("Visualização", expanded=True):
+    selected_tab = option_menu(
+        menu_title=None,
+        options=[
+            "Mapa IBGE",
+            "Área",
+            "População",
+        ],
+        icons=[
+            "person",
+            "geo-alt",
+            "capsule-pill"
+        ],
+        menu_icon="cast",
+        default_index=0,
+        orientation="horizontal",
+        styles={
+                "container": {
+                    "padding": "5px",
+                    "background-color": "#1E1E28",
+                    "border-radius": "8px",
+                },
+                "icon": {
+                    "color": "#64B5F6", 
+                    "font-size": "20px",
+                    "padding-right": "8px",
+                },
+                "nav-link": {
+                    "font-size": "16px",
+                    "text-align": "center",
+                    "margin": "5px",
+                    "padding": "12px",
+                    "background-color": "#2A2B3D",
+                    "--hover-color": "#4B4B4B",
+                    "color": "#FFFFFF",
+                    "border-radius": "4px",
+                },
+                "nav-link-selected": {
+                    "background-color": "#007BB5",
+                    "color": "#FFFFFF",
+                    "font-weight": "bold",
+                },
+                "separator": {
+                    "border-color": "#303030",
+                    "margin": "0 10px",  
+                },                       
             },
-            tooltip=folium.features.GeoJsonTooltip(
-                fields=["CD_SETOR", column, "AREA_KM2"],
-                aliases=[
-                    "Setor Censitário:",
-                    f"{caption}:",
-                    "Área (km²):",
-                ],
-                style=(
-                    "background-color: white; color: #333333;"
-                    "font-family: calibri; font-size: 12px;"
-                    "padding: 10px;"
-                ),
-            ),
-        ).add_to(m)
-        colormap.add_to(m)
-
-    elif map_type == "Heatmap":
-        heat_data = [
-            [
-                row["geometry"].centroid.y,
-                row["geometry"].centroid.x,
-                row["POP"],
+            )
+    if selected_tab == "Mapa IBGE":
+        col1, col2, col3, col4, col5 = st.columns([1.5, 1.5, 0.8, 5, 0.5])
+        with col1:
+            st.metric(label="👪 População Total", value=f"{total_pop:,} habitantes", help="Dados do Censo 2022 IBGE")
+            map_type = st.selectbox("Tipo de mapa", ["População", "Densidade", "Heatmap"])
+        with col2:
+            st.metric(label="🗺️ Número de Setores Censitários", value=f"{num_setores}", help="Dados do Censo 2022 IBGE")
+            base_map = st.selectbox("Mapa base", ["Cartodb Positron", "OpenStreetMap"])
+        with col4:
+            with st.container(border=False, height=400):
+                row1, row2, row3 = st.columns([0.5, 3, 0.9])
+                with row1:
+                    st.write('')  
+                with row2:
+                    st.write(""" 
+                        ### Definição de Setor Censitário
+                        Um **setor censitário** é a menor unidade territorial utilizada pelo
+                        Instituto Brasileiro de Geografia e Estatística (IBGE) para a coleta
+                        de dados em censos demográficos. 
+                        
+                        Cada setor censitário é uma área contínua dentro de um município, delimitada
+                        por características físicas e populacionais homogêneas, e geralmente contém
+                        entre 250 e 350 domicílios.
+                        
+                        Os setores censitários são fundamentais para a realização de pesquisas
+                        detalhadas, pois permitem uma análise granular da distribuição populacional,
+                        socioeconômica e das condições de moradia em diferentes regiões do país.
+                        Essa unidade de medida é essencial para a elaboração de políticas públicas,
+                        planejamento urbano, distribuição de recursos e outras atividades que
+                        dependem de informações demográficas precisas. """)
+                with row3:
+                    st.write('')
+        col1, col2 = st.columns(2)
+        with col1:
+            m = folium.Map(
+            location=[LATITUDE, LONGITUDE], tiles=base_map, zoom_start=15
+            )
+            dns_p = "Densidade pop. (hab/km²) UBS Flamengo - IBGE 2022"
+            if map_type in ["População", "Densidade"]:
+                if map_type == "População":
+                    column = "POP"
+                    caption = "Pop. residente UBS Flamengo IBGE 2022"
+                else:
+                    gdf["DENSIDADE"] = gdf["POP"] / gdf["AREA_KM2"]
+                    column = "DENSIDADE"
+                    caption = dns_p
+                colorscale = px.colors.sequential.Viridis
+                colormap = LinearColormap(
+                    colors=colorscale,
+                    vmin=gdf[column].min(),
+                    vmax=gdf[column].max(),
+                    caption=caption,
+                )
+                folium.GeoJson(
+                    gdf,
+                    style_function=lambda feature: {
+                        "fillColor": colormap(feature["properties"][column]),
+                        "color": "black",
+                        "weight": 1,
+                        "fillOpacity": 0.7,
+                    },
+                    highlight_function=lambda feature: {
+                        "fillColor": "#ffaf00",
+                        "color": "green",
+                        "weight": 3,
+                        "fillOpacity": 0.9,
+                    },
+                    tooltip=folium.features.GeoJsonTooltip(
+                        fields=["CD_SETOR", column, "AREA_KM2"],
+                        aliases=[
+                            "Setor Censitário:",
+                            f"{caption}:",
+                            "Área (km²):",
+                        ],
+                        style=(
+                            "background-color: white; color: #333333;"
+                            "font-family: calibri; font-size: 12px;"
+                            "padding: 10px;"
+                        ),
+                    ),
+                ).add_to(m)
+                colormap.add_to(m)
+
+            elif map_type == "Heatmap":
+                heat_data = [
+                    [
+                        row["geometry"].centroid.y,
+                        row["geometry"].centroid.x,
+                        row["POP"],
+                    ]
+                    for idx, row in gdf.iterrows()
+                ]
+                HeatMap(heat_data).add_to(m)
+            folium.Marker(
+                [lat, long],
+                popup="UBS Flamengo",
+                tooltip="UBS Flamengo",
+                icon=folium.Icon(color="red", icon="info-sign"),
+            ).add_to(m)
+
+            STYLE_STATEMENT = (
+                "<style>.leaflet-control-layers"
+                "{ position: fixed; top: 10px; left: 50px; } </style>"
+            )
+            m.get_root().html.add_child(folium.Element(STYLE_STATEMENT))
+            folium_static(m)
+        with col2:
+            fig = px.bar(
+                gdf,
+                x="CD_SETOR",
+                y="POP",
+                title="Distribuição da População por Setor Censitário",
+                color="POP",
+                color_continuous_scale=px.colors.sequential.Viridis,
+            )
+            st.plotly_chart(fig)
+
+            age_columns = [
+                "POP_0A4", "POP_5A9", "POP_10A14", "POP_15A19", "POP_20A24",
+                "POP_25A29", "POP_30A34", "POP_35A39", "POP_40A44", "POP_45A49",
+                "POP_50A54", "POP_55A59", "POP_60A64", "POP_65A69", "POP_70A74",
+                "POP_75A79", "POP_80A84", "POP_85A89", "POP_90A94", "POP_95A99",
+                "POP_100OUMAIS",
+            ]
+
+            fig = px.bar()
+        
+    elif selected_tab == "Área":
+        st.subheader("Crescimento populacional - UBS Flamengo")
+        with stylable_container(
+            key="banner",
+            css_styles="""
+            img {
+                width: 1800px;
+                height: 340px;
+                overflow: hidden;
+                position: relative;
+                object-fit: cover;
+                border-radius: 20px; /* Adiciona bordas arredondadas */
+                mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+                -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* For Safari */
+            }
+            """,
+        ):
+            st.image("src/images/pop.jpg")
+            st.title("Crescimento populacional - UBS Flamengo")
+
+            raw_data = [
+                {"Mês": "mai-21", "Usuários": 3402, "Domicílios": 1440, "Famílias": 1269},
+                {"Mês": "jun-21", "Usuários": 3503, "Domicílios": 1462, "Famílias": 1304},
+                {"Mês": "jul-21", "Usuários": 3559, "Domicílios": 1478, "Famílias": 1323},
+                {"Mês": "ago-21", "Usuários": 3592, "Domicílios": 1490, "Famílias": 1338},
+                {"Mês": "set-21", "Usuários": 3755, "Domicílios": 1573, "Famílias": 1380},
+                {"Mês": "out-21", "Usuários": 3776, "Domicílios": 1533, "Famílias": 1384},
+                {"Mês": "nov-21", "Usuários": 3839, "Domicílios": 1553, "Famílias": 1397},
+                {"Mês": "dez-21", "Usuários": 3926, "Domicílios": 1581, "Famílias": 1423},
+                {"Mês": "jan-22", "Usuários": 3951, "Domicílios": 1596, "Famílias": 1437},
+                {"Mês": "fev-22", "Usuários": 4035, "Domicílios": 1638, "Famílias": 1465},
+                {"Mês": "mar-22", "Usuários": 4131, "Domicílios": 1672, "Famílias": 1500},
+                {"Mês": "abr-22", "Usuários": 4306, "Domicílios": 1723, "Famílias": 1555},
+                {"Mês": "mai-22", "Usuários": 4553, "Domicílios": 1795, "Famílias": 1625},
+                {"Mês": "jun-22", "Usuários": 4639, "Domicílios": 1817, "Famílias": 1653},
+                {"Mês": "jul-22", "Usuários": 4719, "Domicílios": 1848, "Famílias": 1676},
+                {"Mês": "ago-22", "Usuários": 4776, "Domicílios": 1869, "Famílias": 1687},
+                {"Mês": "set-22", "Usuários": 4831, "Domicílios": 1883, "Famílias": 1699},
+                {"Mês": "out-22", "Usuários": 4871, "Domicílios": 1900, "Famílias": 1709},
+                {"Mês": "nov-22", "Usuários": 4874, "Domicílios": 1906, "Famílias": 1708},
+                {"Mês": "dez-22", "Usuários": 4920, "Domicílios": 1914, "Famílias": 1720},
+                {"Mês": "jan-23", "Usuários": 5135, "Domicílios": 2006, "Famílias": 1776},
+                {"Mês": "fev-23", "Usuários": 5396, "Domicílios": 2084, "Famílias": 1848},
+                {"Mês": "mar-23", "Usuários": 5544, "Domicílios": 2127, "Famílias": 1893},
+                {"Mês": "abr-23", "Usuários": 5546, "Domicílios": 2140, "Famílias": 1910},
+                {"Mês": "mai-23", "Usuários": 5579, "Domicílios": 2164, "Famílias": 1920},
+                {"Mês": "jun-23", "Usuários": 5642, "Domicílios": 2181, "Famílias": 1946},
+                {"Mês": "jul-23", "Usuários": 5681, "Domicílios": 2200, "Famílias": 1961},
+                {"Mês": "ago-23", "Usuários": 5728, "Domicílios": 2208, "Famílias": 1972},
+                {"Mês": "set-23", "Usuários": 5774, "Domicílios": 2228, "Famílias": 1983},
+                {"Mês": "out-23", "Usuários": 5841, "Domicílios": 2245, "Famílias": 2007},
+                {"Mês": "nov-23", "Usuários": 5891, "Domicílios": 2297, "Famílias": 2027},
+                {"Mês": "dez-23", "Usuários": 5933, "Domicílios": 2281, "Famílias": 2036},
+                {"Mês": "jan-24", "Usuários": 5982, "Domicílios": 2307, "Famílias": 2050},
+                {"Mês": "fev-24", "Usuários": 6005, "Domicílios": 2333, "Famílias": 2057},
+                {"Mês": "mar-24", "Usuários": 6020, "Domicílios": 2327, "Famílias": 2070},
+                {"Mês": "abr-24", "Usuários": 6074, "Domicílios": 2370, "Famílias": 2095},
             ]
-            for idx, row in gdf.iterrows()
-        ]
-        HeatMap(heat_data).add_to(m)
-    folium.Marker(
-        [lat, long],
-        popup="UBS Flamengo",
-        tooltip="UBS Flamengo",
-        icon=folium.Icon(color="red", icon="info-sign"),
-    ).add_to(m)
-
-    STYLE_STATEMENT = (
-        "<style>.leaflet-control-layers"
-        "{ position: fixed; top: 10px; left: 50px; } </style>"
-    )
-    m.get_root().html.add_child(folium.Element(STYLE_STATEMENT))
-    folium_static(m)
-
-with col2:
-    fig = px.bar(
-        gdf,
-        x="CD_SETOR",
-        y="POP",
-        title="Distribuição da População por Setor Censitário",
-        color="POP",
-        color_continuous_scale=px.colors.sequential.Viridis,
-    )
-    st.plotly_chart(fig)
-
-    age_columns = [
-        "POP_0A4",
-        "POP_5A9",
-        "POP_10A14",
-        "POP_15A19",
-        "POP_20A24",
-        "POP_25A29",
-        "POP_30A34",
-        "POP_35A39",
-        "POP_40A44",
-        "POP_45A49",
-        "POP_50A54",
-        "POP_55A59",
-        "POP_60A64",
-        "POP_65A69",
-        "POP_70A74",
-        "POP_75A79",
-        "POP_80A84",
-        "POP_85A89",
-        "POP_90A94",
-        "POP_95A99",
-        "POP_100OUMAIS",
-    ]
 
+            df = pd.DataFrame(raw_data)
+
+            @st.cache_data
+            def processar_dados(dados, intervalo):
+                """
+                Process data based on the specified interval and return the aggregated data.
+                Parameters:
+                - dados: List of dictionaries containing data for each month.
+                - intervalo: String indicating the interval for data aggregation.
+                
+                Returns:
+                - List of dictionaries with aggregated data based on the specified interval.
+                """
+                if intervalo == "Mensal":
+                    return dados
+                agrupamentos = {"Trimestral": 3, "Semestral": 6, "Anual": 12}
+                dados_agrupados = []
+                for i in range(0, len(dados), agrupamentos[intervalo]):
+                    grupo = dados[i : i + agrupamentos[intervalo]]
+                    ultimo_Mês = grupo[-1]["Mês"]
+                    dados_agrupados.append(
+                        {
+                            "Mês": ultimo_Mês,
+                            "Usuários": max(d["Usuários"] for d in grupo),
+                            "Domicílios": max(d["Domicílios"] for d in grupo),
+                            "Famílias": max(d["Famílias"] for d in grupo),
+                        }
+                    )
+                return dados_agrupados
+
+            @st.cache_data
+            def formatar_data(Mês):
+                """
+                A function that formats the data based on the input Mês parameter.
+                
+                Parameters:
+                - Mês (str): A string containing the month and year separated by a hyphen.
+                
+                Returns:
+                - str: A formatted string in the format "month/year".
+                """
+                m, a = Mês.split("-")
+                return f"{m}/{a}"
+
+            # Adicionando estilo personalizado
+            st.markdown(
+                """
+                <style>
+                .stSelectbox [data-baseweb="select"] {
+                    max-width: 300px;
+                }
+                .st-emotion-cache-16idsys p {
+                    font-size: 20px;
+                    font-weight: bold;
+                    color: #4FCBFC;
+                }
+                </style>
+                """,
+                unsafe_allow_html=True,
+            )
+
+            # Criando duas colunas para os menus de opções
+            col1, col2, col3 = st.columns([3, 2, 2])
+
+            with col1:
+                st.dataframe(df, use_container_width=True, height=250, hide_index=True)
+
+            with col2:
+                intervalo = option_menu(
+                    "Intervalo de Tempo",
+                    ["Mensal", "Trimestral", "Semestral", "Anual"],
+                    icons=["calendar-month", "calendar-quarter", "calendar-half", "calendar-year"],
+                    menu_icon="cast",
+                    default_index=0,
+                    styles={
+                        "container": {"padding": "0!important", "background-color": "#f0f0f3", "border-radius": "15px", "box-shadow": "5px 5px 10px #d1d1d4, -5px -5px 10px #ffffff"},
+                        "icon": {"color": "#007bff", "font-size": "18px"},
+                        "nav-link": {
+                            "font-size": "14px",
+                            "text-align": "center",
+                            "margin": "5px",
+                            "padding": "10px",
+                            "--hover-color": "#e6e6e9",
+                            "color": "#333333",
+                            "border-radius": "10px",
+                            "transition": "all 0.3s ease",
+                        },
+                        "nav-link-selected": {"background-color": "#ffffff", "box-shadow": "inset 3px 3px 5px #d1d1d4, inset -3px -3px 5px #ffffff"},
+                        "separator": {"border-color": "#e0e0e3"},
+                    },
+                )
+
+            with col3:
+                metrica = option_menu(
+                    "Métrica",
+                    ["Todos", "Usuários", "Domicílios", "Famílias"],
+                    icons=["list", "person", "house", "people"],
+                    menu_icon="cast",
+                    default_index=0,
+                    styles={
+                        "container": {"padding": "0!important", "background-color": "#f0f0f3", "border-radius": "15px", "box-shadow": "5px 5px 10px #d1d1d4, -5px -5px 10px #ffffff"},
+                        "icon": {"color": "#007bff", "font-size": "18px"},
+                        "nav-link": {
+                            "font-size": "14px",
+                            "text-align": "center",
+                            "margin": "5px",
+                            "padding": "10px",
+                            "--hover-color": "#e6e6e9",
+                            "color": "#333333",
+                            "border-radius": "10px",
+                            "transition": "all 0.3s ease",
+                        },
+                        "nav-link-selected": {"background-color": "#ffffff", "box-shadow": "inset 3px 3px 5px #d1d1d4, inset -3px -3px 5px #ffffff"},
+                        "separator": {"border-color": "#e0e0e3"},
+                    },
+                )
 
+            dados_processados = processar_dados(raw_data, intervalo)
+
+            # Switch para mostrar valores nos pontos
+            mostrar_valores = st.checkbox("Mostrar valores nos pontos", value=True)
+
+            # Criação do gráfico
+            fig = go.Figure()
+
+            metricas = ["Usuários", "Domicílios", "Famílias"] if metrica == "Todos" else [metrica]
+            cores = {"Usuários": "#007bff", "Domicílios": "#28a745", "Famílias": "#ffc107"}
+
+            # Slider Component
+            # st.sidebar.header("Ajustes dos Balões")
+            # balloon_positions = {}
+            # for m in metricas:
+            #     balloon_positions[m] = st.sidebar.slider(
+            #         f"Posição do balão para {m}", min_value=-100, max_value=0, value=-40, step=5
+            #     )
+
+            annotations = []
+            for m in metricas:
+                x_data = [formatar_data(d["Mês"]) for d in dados_processados]
+                y_data = [d[m] for d in dados_processados]
+
+                fig.add_trace(
+                    go.Scatter(
+                        x=x_data,
+                        y=y_data,
+                        mode="lines+markers",
+                        name=m,
+                        line=dict(color=cores[m], width=3),
+                        marker=dict(size=10, symbol="circle", line=dict(width=2, color="white")),
+                    )
+                )
+                if mostrar_valores:
+                    for i, (x, y) in enumerate(zip(x_data, y_data)):
+                        annotations.append(
+                            dict(
+                                x=x,
+                                y=y,
+                                xref="x",
+                                yref="y",
+                                text=f"{y:,.0f}",
+                                showarrow=True,
+                                arrowhead=2,
+                                ax=0,
+                                ay=balloon_positions[m],
+                                bgcolor=cores[m],
+                                opacity=0.8,
+                                bordercolor="white",
+                                borderwidth=2,
+                                borderpad=4,
+                                font=dict(color="white", size=10),
+                                boxshadow=dict(x=2, y=2, blur=3, color='rgba(0,0,0,0.3)'),
+                            )
+                        )
+                    fig.update_layout(
+                title={
+                    "text": "Crescimento na Área de Saúde",
+                    "y": 0.95,
+                    "x": 0.5,
+                    "xanchor": "center",
+                    "yanchor": "top",
+                    "font": dict(size=24, color="#333333"),
+                },
+                xaxis_title="Mês",
+                yaxis_title="Quantidade",
+                legend_title="Métricas",
+                template="plotly_white",
+                plot_bgcolor="#f0f0f3",
+                paper_bgcolor="#f0f0f3",
+                font=dict(color="#333333"),
+                xaxis=dict(showgrid=True, gridcolor="#e0e0e3", tickangle=45),
+                yaxis=dict(showgrid=True, gridcolor="#e0e0e3"),
+                legend=dict(
+                    bgcolor="rgba(255,255,255,0.8)",
+                    bordercolor="#e0e0e3",
+                    borderwidth=1,
+                    font=dict(size=12, color="#333333"),
+                ),
+                margin=dict(l=50, r=50, t=80, b=50),
+                annotations=annotations,
+                shapes=[
+                    dict(
+                        type="rect",
+                        xref="paper", yref="paper",
+                        x0=0, y0=0, x1=1, y1=1,
+                        line=dict(color="#e0e0e3", width=2),
+                        fillcolor="#f0f0f3",
+                        layer="below"
+                    )
+                ]
+            )
+        fig.add_shape(
+            type="rect",
+            xref="paper", yref="paper",
+            x0=-0.05, y0=-0.05, x1=1.05, y1=1.05,
+            line=dict(color="rgba(0,0,0,0.1)", width=5),
+            fillcolor="rgba(0,0,0,0)",
+            layer="below"
+        )
+        fig.update_layout(
+            updatemenus=[
+                dict(
+                    type="buttons",
+                    direction="left",
+                    buttons=[
+                        dict(args=[{"visible": [True, True, True]}], label="Mostrar Tudo", method="restyle"),
+                        dict(args=[{"visible": [True, False, False]}], label="Usuários", method="restyle"),
+                        dict(args=[{"visible": [False, True, False]}], label="Domicílios", method="restyle"),
+                        dict(args=[{"visible": [False, False, True]}], label="Famílias", method="restyle")
+                    ],
+                    pad={"r": 10, "t": 10},
+                    showactive=True,
+                    x=0.1,
+                    xanchor="left",
+                    y=1.1,
+                    yanchor="top",
+                    bgcolor="#ffffff",
+                    bordercolor="#e0e0e3",
+                    borderwidth=1,
+                    font=dict(color="#333333"),
+                ),
+            ]
+        )
 
+        st.plotly_chart(fig, use_container_width=True)
+   
 add_vertical_space(10)