Update views/maps.py

views/maps.py

@@ -1,19 +1,16 @@
 import folium
 import geopandas as gpd
+import pandas as pd
 import plotly.express as px
+import plotly.graph_objects as go
+import streamlit as st
 from branca.colormap import LinearColormap
 from folium.plugins import HeatMap
-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_extras.stylable_container import stylable_container
+from streamlit_folium import folium_static
 from streamlit_option_menu import option_menu
-import pandas as pd
-import plotly.graph_objects as go
 
-with stylable_container(
     key="banner",
     css_styles="""
     img {
@@ -24,338 +21,932 @@ with stylable_container(
         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 */
+        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0,
+                                                            0)); /* For Safari */
     }
     """,
 ):
     st.image("src/Images/mp.jpg")
 
-st.title("Mapas da área")
 add_vertical_space(2)
 st.markdown(""" ### :world_map: **UBS Flamengo: (IBGE 2022)** """)
 
+
 @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.
     """
-    A function that loads and reads geojson data for UBS Flamengo and converts it to the specified coordinate reference system.
-    """
-    return gpd.read_file("flamengo_ibge2022.geojson").to_crs(epsg=4326)
+  return gpd.read_file("views/flamengo_ibge2022.geojson").to_crs(epsg=4326)
+
 
 gdf = load_data()
-LATITUDE = -19.971591804
+LATITUDE = -19.965591804
 LONGITUDE = -44.057912815
 lat = -19.96214
 long = -44.05603
 
-total_pop = gdf["POP"].sum()
+total_pop = gdf["População"].sum()
+num_setores = len(gdf)
+
 col1, col2, col3 = st.columns([1, 1, 5])
 
 STYLE = "static/style.css"
 STYLES = "static/styles.html"
 with open(STYLE, "r", encoding="utf-8") as f:
-    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+  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.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)
+with st.expander("Visualização", expanded=True):
+  selected_tab = option_menu(
+      menu_title=None,
+      options=[
+          "Mapa IBGE",
+          "Equipe Azul",
+          "Equipe Vermelha",
+      ],
+      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",
+          },
+      },
+  )
+  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, 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
+      É a menor unidade territorial utilizada pelo IBGE para a coleta de dados em censos
+      demográficos. Cada setor é delimitado por características físicas e populacionais.
+      Geralmente contém entre 250 e 350 domicílios.
 
-gdf = load_data()
-LATITUDE = -19.971591804
-LONGITUDE = -44.057912815
-lat = -19.96214
-long = -44.05603
+      Fundamentais em pesquisas, elaboração de políticas públicas, planejamento urbano,
+      e atividades que dependem de informações demográficas precisas.
+      
+      Permitem uma análise granular da distribuição populacional, socioeconômica e das
+      condições de moradia. É fundamental . 
+      """)
+      with row3:
+        st.write('')
 
-total_pop = gdf["POP"].sum()
-num_setores = len(gdf)
+    add_vertical_space(3)
 
-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={
+    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 = "População"
+          caption = "Pop. residente UBS Flamengo IBGE 2022"
+        else:
+          gdf["DENSIDADE"] = gdf["População"] / gdf["Área em km²"]
+          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.6,
+            },
+            highlight_function=lambda feature: {
+                "fillColor": "#ffaf00",
+                "color": "green",
+                "weight": 3,
+                "fillOpacity": 0.9,
+            } if feature else {},
+            tooltip=folium.GeoJsonTooltip(
+                fields=["Setor", column, "Área em km²"],
+                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["População"],
+        ] 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>")
+
+      # folium.LayerControl().add_to(m)  # Adding Layer Control is good practice.
+      # Display the map
+      folium_static(m)
+
+    # m.get_root().html.add_child(folium.Element(STYLE_STATEMENT))
+    # folium_static(m)
+    with col2:
+      fig = px.bar(
+          gdf,
+          x="Setor",
+          y="População",
+          title="Distribuição da População por Setor Censitário",
+          color="População",
+          color_continuous_scale=px.colors.sequential.Viridis,
+      )
+      st.plotly_chart(fig)
+
+      age_columns = [
+          "População_0A4",
+          "População_5A9",
+          "População_10A14",
+          "População_15A19",
+          "População_20A24",
+          "População_25A29",
+          "População_30A34",
+          "População_35A39",
+          "População_40A44",
+          "População_45A49",
+          "População_50A54",
+          "População_55A59",
+          "População_60A64",
+          "População_65A69",
+          "População_70A74",
+          "População_75A79",
+          "População_80A84",
+          "População_85A89",
+          "População_90A94",
+          "População_95A99",
+          "População_100OUMAIS",
+      ]
+
+      fig = px.bar()
+
+  elif selected_tab == "Equipe Azul":
+    st.subheader("Crescimento populacional - UBS Flamengo - Equipe Azul")
+
+    with stylable_container(
+        key="exp1",
+        css_styles="""
+            img {
+                width: 200px;
+                height: 200px;
+                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/blue.png", caption='Equipe Azul')
+      # st.image("src/Images/pop.jpg")
+
+      raw_data = [
+          {
+              "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": 5680,
+              "Domicílios": 2200,
+              "Famílias": 1961
+          },
+          {
+              "Mês": "ago-23",
+              "Usuários": 5727,
+              "Domicílios": 2208,
+              "Famílias": 1972
+          },
+          {
+              "Mês": "set-23",
+              "Usuários": 5772,
+              "Domicílios": 2228,
+              "Famílias": 1983
+          },
+          {
+              "Mês": "out-23",
+              "Usuários": 5839,
+              "Domicílios": 2245,
+              "Famílias": 2007
+          },
+          {
+              "Mês": "nov-23",
+              "Usuários": 5889,
+              "Domicílios": 2297,
+              "Famílias": 2027
+          },
+          {
+              "Mês": "dez-23",
+              "Usuários": 5932,
+              "Domicílios": 2281,
+              "Famílias": 2036
+          },
+          {
+              "Mês": "jan-24",
+              "Usuários": 5980,
+              "Domicílios": 2307,
+              "Famílias": 2050
+          },
+          {
+              "Mês": "fev-24",
+              "Usuários": 6003,
+              "Domicílios": 2333,
+              "Famílias": 2057
+          },
+          {
+              "Mês": "mar-24",
+              "Usuários": 6018,
+              "Domicílios": 2327,
+              "Famílias": 2070
+          },
+          {
+              "Mês": "abr-24",
+              "Usuários": 6072,
+              "Domicílios": 2370,
+              "Famílias": 2095
+          },
+          {
+              "Mês": "mai-24",
+              "Usuários": 6080,
+              "Domicílios": 2357,
+              "Famílias": 2097
+          },
+          {
+              "Mês": "jun-24",
+              "Usuários": 6112,
+              "Domicílios": 2372,
+              "Famílias": 2108
+          },
+          {
+              "Mês": "jul-24",
+              "Usuários": 6130,
+              "Domicílios": 2413,
+              "Famílias": 2110
+          },
+          {
+              "Mês": "ago-24",
+              "Usuários": 6169,
+              "Domicílios": 2397,
+              "Famílias": 2118
+          },
+      ]
+
+      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": "5px",
-                    "background-color": "#1E1E28",
-                    "border-radius": "8px",
+                    "padding": "0!important",
+                    "background-color": "#f0f0f3",
+                    "border-radius": "15px",
+                    "box-shadow":
+                    "5px 5px 10px #d1d1d4, -5px -5px 10px #ffffff"
                 },
                 "icon": {
-                    "color": "#64B5F6", 
-                    "font-size": "20px",
-                    "padding-right": "8px",
+                    "color": "#007bff",
+                    "font-size": "18px"
                 },
                 "nav-link": {
-                    "font-size": "16px",
+                    "font-size": "14px",
                     "text-align": "center",
                     "margin": "5px",
-                    "padding": "12px",
-                    "background-color": "#2A2B3D",
-                    "--hover-color": "#4B4B4B",
-                    "color": "#FFFFFF",
-                    "border-radius": "4px",
+                    "padding": "10px",
+                    "--hover-color": "#e6e6e9",
+                    "color": "#333333",
+                    "border-radius": "10px",
+                    "transition": "all 0.3s ease",
                 },
                 "nav-link-selected": {
-                    "background-color": "#007BB5",
-                    "color": "#FFFFFF",
-                    "font-weight": "bold",
+                    "background-color":
+                    "#ffffff",
+                    "box-shadow":
+                    "inset 3px 3px 5px #d1d1d4, inset -3px -3px 5px #ffffff"
                 },
                 "separator": {
-                    "border-color": "#303030",
-                    "margin": "0 10px",  
-                },                       
+                    "border-color": "#e0e0e3"
+                },
             },
-            )
-    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
-                        IBGE para a coleta de dados em censos demográficos. 
-                        
-                        Cada setor censitário é uma área contínua dentro de um município, delimitado
-                        por características físicas e populacionais. Geralmente contém entre 250 e 
-                        350 domicílios.
-                        
-                        Os setores censitários são fundamentais em pesquisas mais elaboradas.
-                        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 é fundamental para a elaboração de políticas públicas, planejamento
-                        urbano, 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="""
+        )
+
+      dados_processados = processar_dados(raw_data, intervalo)
+
+      # 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"
+      }
+
+      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={
+                    "color": cores[m],
+                    "width": 3
+                },
+                marker={
+                    "size": 12,
+                    "symbol": "circle",
+                    "line": {
+                        "width": 2,
+                        "color": "white"
+                    }
+                },
+            ))
+    fig.update_layout(
+        hoverlabel={
+            "bgcolor": "white",
+            "font_size": 16,
+            "font_family": "Arial",
+        },
+        hovermode="x unified",
+    )
+    fig.update_traces(hovertemplate="<b>%{y}</b><br>%{x}<extra></extra>")
+    st.plotly_chart(fig, use_container_width=True)
+
+  elif selected_tab == "Equipe Vermelha":
+    st.subheader("Crescimento populacional - UBS Flamengo - Equipe Vermelha")
+
+    with stylable_container(
+        key="exp1",
+        css_styles="""
             img {
-                width: 1800px;
-                height: 340px;
+                width: 200px;
+                height: 200px;
                 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 */
+                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},
-            ]
-
-            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(
-                """
+    ):
+      st.image("src/Images/red.png", caption='Equipe Vermelha')
+      # st.image("src/Images/pop.jpg")
+
+      raw_red = [{
+          "Mês": "set-21",
+          "Usuários": 3542,
+          "Domicílios": 1243,
+          "Famílias": 1191
+      }, {
+          "Mês": "out-21",
+          "Usuários": 3647,
+          "Domicílios": 1240,
+          "Famílias": 1204
+      }, {
+          "Mês": "nov-21",
+          "Usuários": 3730,
+          "Domicílios": 1267,
+          "Famílias": 1227
+      }, {
+          "Mês": "dez-21",
+          "Usuários": 3847,
+          "Domicílios": 1307,
+          "Famílias": 1267
+      }, {
+          "Mês": "jan-22",
+          "Usuários": 3895,
+          "Domicílios": 1328,
+          "Famílias": 1284
+      }, {
+          "Mês": "fev-22",
+          "Usuários": 3937,
+          "Domicílios": 1342,
+          "Famílias": 1297
+      }, {
+          "Mês": "mar-22",
+          "Usuários": 4082,
+          "Domicílios": 1393,
+          "Famílias": 1348
+      }, {
+          "Mês": "abr-22",
+          "Usuários": 4248,
+          "Domicílios": 1434,
+          "Famílias": 1375
+      }, {
+          "Mês": "mai-22",
+          "Usuários": 4440,
+          "Domicílios": 1509,
+          "Famílias": 1442
+      }, {
+          "Mês": "jun-22",
+          "Usuários": 4646,
+          "Domicílios": 1575,
+          "Famílias": 1499
+      }, {
+          "Mês": "jul-22",
+          "Usuários": 4783,
+          "Domicílios": 1616,
+          "Famílias": 1539
+      }, {
+          "Mês": "ago-22",
+          "Usuários": 4909,
+          "Domicílios": 1670,
+          "Famílias": 1567
+      }, {
+          "Mês": "set-22",
+          "Usuários": 5008,
+          "Domicílios": 1720,
+          "Famílias": 1609
+      }, {
+          "Mês": "out-22",
+          "Usuários": 5017,
+          "Domicílios": 1721,
+          "Famílias": 1610
+      }, {
+          "Mês": "nov-22",
+          "Usuários": 5037,
+          "Domicílios": 1742,
+          "Famílias": 1613
+      }, {
+          "Mês": "dez-22",
+          "Usuários": 5060,
+          "Domicílios": 1742,
+          "Famílias": 1615
+      }, {
+          "Mês": "jan-23",
+          "Usuários": 5107,
+          "Domicílios": 1708,
+          "Famílias": 1563
+      }, {
+          "Mês": "fev-23",
+          "Usuários": 5127,
+          "Domicílios": 1631,
+          "Famílias": 1496
+      }, {
+          "Mês": "mar-23",
+          "Usuários": 5262,
+          "Domicílios": 1667,
+          "Famílias": 1533
+      }, {
+          "Mês": "abr-23",
+          "Usuários": 5279,
+          "Domicílios": 1682,
+          "Famílias": 1545
+      }, {
+          "Mês": "mai-23",
+          "Usuários": 5361,
+          "Domicílios": 1719,
+          "Famílias": 1575
+      }, {
+          "Mês": "jun-23",
+          "Usuários": 5381,
+          "Domicílios": 1728,
+          "Famílias": 1591
+      }, {
+          "Mês": "jul-23",
+          "Usuários": 5429,
+          "Domicílios": 1766,
+          "Famílias": 1609
+      }, {
+          "Mês": "ago-23",
+          "Usuários": 5417,
+          "Domicílios": 1743,
+          "Famílias": 1618
+      }, {
+          "Mês": "set-23",
+          "Usuários": 5447,
+          "Domicílios": 1748,
+          "Famílias": 1632
+      }, {
+          "Mês": "out-23",
+          "Usuários": 5495,
+          "Domicílios": 1772,
+          "Famílias": 1646
+      }, {
+          "Mês": "nov-23",
+          "Usuários": 5496,
+          "Domicílios": 1775,
+          "Famílias": 1650
+      }, {
+          "Mês": "dez-23",
+          "Usuários": 5519,
+          "Domicílios": 1767,
+          "Famílias": 1657
+      }, {
+          "Mês": "jan-24",
+          "Usuários": 5560,
+          "Domicílios": 1793,
+          "Famílias": 1673
+      }, {
+          "Mês": "fev-24",
+          "Usuários": 5574,
+          "Domicílios": 1795,
+          "Famílias": 1679
+      }, {
+          "Mês": "mar-24",
+          "Usuários": 5576,
+          "Domicílios": 1789,
+          "Famílias": 1676
+      }, {
+          "Mês": "abr-24",
+          "Usuários": 5624,
+          "Domicílios": 1824,
+          "Famílias": 1696
+      }, {
+          "Mês": "mai-24",
+          "Usuários": 5699,
+          "Domicílios": 1827,
+          "Famílias": 1713
+      }, {
+          "Mês": "jun-24",
+          "Usuários": 5739,
+          "Domicílios": 1843,
+          "Famílias": 1733
+      }, {
+          "Mês": "jul-24",
+          "Usuários": 5739,
+          "Domicílios": 1877,
+          "Famílias": 1742
+      }, {
+          "Mês": "ago-24",
+          "Usuários": 5760,
+          "Domicílios": 1881,
+          "Famílias": 1757
+      }]
+
+      df = pd.DataFrame(raw_red)
+
+      @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;
@@ -367,194 +958,148 @@ with st.expander("Visualização", expanded=True):
                 }
                 </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"),
+          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"
                 },
-                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"
+                "separator": {
+                    "border-color": "#e0e0e3"
+                },
+            },
         )
-        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"),
-                ),
-            ]
+
+      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"
+                },
+            },
         )
 
-        st.plotly_chart(fig, use_container_width=True)
-   
-add_vertical_space(10)
+      dados_processados = processar_dados(raw_red, intervalo)
+
+      # 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"
+      }
+
+      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={
+                    "color": cores[m],
+                    "width": 3
+                },
+                marker={
+                    "size": 12,
+                    "symbol": "circle",
+                    "line": {
+                        "width": 2,
+                        "color": "white"
+                    }
+                },
+            ))
+    fig.update_layout(
+        hoverlabel={
+            "bgcolor": "white",
+            "font_size": 16,
+            "font_family": "Arial",
+        },
+        hovermode="x unified",
+    )
+    fig.update_traces(hovertemplate="<b>%{y}</b><br>%{x}<extra></extra>")
+    st.plotly_chart(fig, use_container_width=True)
+
+add_vertical_space(10)
 
 st.write('----')