Proyecto Lab-2 Primer Commit

.gitignore

@@ -0,0 +1,8 @@
+# Excluir el entorno virtual de Python
+venv/
+
+# Excluir el archivo .flake8
+.flake8
+
+# Excluir todas las carpetas __pycache__
+__pycache__/

README.md

@@ -0,0 +1,290 @@
+<div style="text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 10px 0;">
+    <h1 style="color: lightblue; font-size: 2em;">Proyecto Labs 2</h1>
+</div>
+
+## Descripción
+
+<p style="text-align: justify; text-indent: 2em;">
+Este proyecto se centra en un exhaustivo análisis del sector de las telecomunicaciones en Argentina, utilizando datos extraídos del Ente Nacional de Comunicaciones (ENACOM). Se a estudiado la evolución de los ingresos y la penetración de mercado en los sectores de Telefonía Fija, Telefonía Móvil, Internet y Televisión, a lo largo de la última década.</p>
+
+<p style="text-align: justify; text-indent: 2em;">
+EL análisis se profundiza especialmente en el sector de Internet, donde se examinó el comportamiento del mercado en relación con las tecnologías que brindan el servicio, tales como ADSL, WIRELESS, Fibra Óptica y Cable Modem, y las Velocidades Medias de Descargas, tanto a nivel Nacional como de Provincias.</p>
+
+<p style="text-align: justify; text-indent: 2em;">
+Para una mejor comprensión del comportamiento del sector se empleo el uso de dos(2) KPI's a nivel de Provincias y tres(3) Métricas Nacionales, todas ellas de seguimiento trimestral.</p>
+
+<p style="text-align: justify; text-indent: 2em;">
+Los KPI empleados fueron:</p>
+
+- **Crecimiento Trimestral de 2% en el número de Accesos por cada 100 Hogares por Provincia**:
+  <p style="text-align: justify; text-indent: 2em;">
+  Donde el Objetivo para el siguiente Trimestre se fijará simplemente añadiendo un 2% a los accesos por cada 100 Hogares del trimestre actual. Y cuando lleguemos en el tiempo al siguiente trimestre, la Medición del cumplimiento de dicho objetivo sería de la siguiente manera:</p>
+  <br>
+
+$$
+\text{Cumplimiento KPI} = \left( \frac{\text{Acc 100 Hog Trim}}{\text{Objetivo KPI}} \right) \times 100
+$$
+
+<br>
+<br>
+- **Crecimiento Trimestral de 5% en la Velocidad Media de Bajada por Provincia**:
+  <p style="text-align: justify; text-indent: 2em;">
+  Donde el Objetivo para el siguiente Trimestre se fijará simplemente añadiendo un 5% a la velocidad del Trimestre actual. Y cuando lleguemos en el tiempo al siguiente trimestre, la Medición del cumplimiento de dicho objetivo sería de la siguiente manera:</p>
+  <br>
+
+$$
+\text{Cumplimiento KPI} = \left( \frac{\text{Vel Mbps Trim}}{\text{Objetivo KPI}} \right) \times 100
+$$
+
+<br>
+<br>
+      <p style="text-align: justify; text-indent: 2em;">
+      Las Métricas utilizadas fueron:</p>
+
+- **Variación Trimestral del número de Accesos por cada 100 Hogares en el País**:
+  <p style="text-align: justify; text-indent: 2em;">
+  El cálculo de la métrica se realiza de la siguiente manera:</p>
+  <br>
+
+$$
+\text{Var Accesos 100 Hog} = \left( \frac{\text{Accesos Trimestre}}{\text{Accesos Trimestre Anterior}} - 1 \right) \times 100
+$$
+
+<br>
+<br>
+- **Variación Trimestral de la Velocidad Media de Bajada en el País**:
+    <p style="text-align: justify; text-indent: 2em;">
+    El cálculo de la métrica se realiza de la siguiente manera:</p>
+  <br>
+
+$$
+\text{Var Mbps} = \left( \frac{\text{Vel Mbps Trim}}{\text{Vel Mbps Trim Anterior}} - 1 \right) \times 100
+$$
+
+<br>
+<br>
+- **Total de Accesos en el País**:
+  <p style="text-align: justify; text-indent: 2em;">
+   Simplemente se monitorea el <b>Total de Accesos en el país en el Trimestre en curso</b>
+  <br>
+
+<p style="text-align: justify; text-indent: 2em;">
+Para facilitar la comprensión y visualización de los datos, desarrollamos una herramienta interactiva utilizando Python y el framework Dash de la librería Plotly. Esta herramienta permite a los usuarios explorar los datos de manera intuitiva y obtener insights valiosos.</p><br>
+<br>
+<image src='assets/capture_tooltip.png'><br>
+<br>
+<image src='assets/capture_mapa_oportunidades.png'><br>
+<br>
+
+<p style="text-align: justify; text-indent: 2em;">
+Previo al análisis, normalizamos los datos y creamos un modelo de datos en SQL (EDR) funcional para la empresa, que sirve como un data warehouse. Este modelo no solo organiza los datos de manera eficiente, sino que también está diseñado para soportar futuros estudios y análisis. EL EDR creado se puede observar en la siguiente Imagen<br></p>
+<br>
+
+<image src='noteboocks/assets/edr.png'>
+
+<p style="text-align: justify; text-indent: 2em;">
+Este proyecto no sdlo demuestra habilidades técnicas en análisis de datos y visualización, sino también una comprensión profunda del sector de telecomunicaciones y la capacidad de transformar datos complejos en información útil para la toma de decisiones estratégicas.</p>
+
+## Tabla de contenido
+
+1. [Descripción](#descripción)
+1. [Enlaces](#enlaces)
+1. [Instalación y Requisitos](#instalación-y-requisitos)
+1. [Estructura del Proyecto](#estructura-del-proyecto)
+1. [Uso y Ejecución](#uso-y-ejecución)
+1. [Datos y Fuentes](#datos-y-fuentes)
+1. [Metodología](#metodología)
+1. [Conclusiones y Recomendaciones](#resultados-y-conclusiones)
+1. [Autores](#autores)
+
+## Enlaces
+
+- **Enlace al repositorio**
+  - https://github.com/aliskairraul/Bootcamp-Henry-Proyecto-Lab_2.git
+
+## Instalación y Requisitos
+
+**Requisitos:**
+
+- Requisitos para la app
+
+  - Python 3.10
+  - dash==2.16.1
+  - dash_daq==0.5.0
+  - pandas==2.2.2
+  - plotly==5.21.0
+  - polars==1.2.1
+  - pyarrow==17.0.0
+
+- Requisitos para los Notebooks
+  - Python 3.10
+  - jupyter==1.1.1
+  - pandas==2.2.2
+  - polars==1.7.1
+  - plotly==5.24.1
+  - fastexcel==0.11.6
+  - duckdb==1.1.0
+  - pyarrow==17.0.0
+  - sqlalchemy==2.0.35
+  - PyMySQL==1.1.1
+
+**Pasos de instalación:**
+
+1. Clonar el repositorio: `git clone https://github.com/aliskairraul/Bootcamp-Henry-Proyecto-Lab_2.git`
+2. Partamos del echo de que esto debe tratarse como 2 sub-proyectos por separado (un Análisis y una Aplicación realizada en Dash). Cree dos carpetas dentro de su ordenador
+
+- Una Carpeta va todo lo referente al análisis y el modelo (Allí va a copiar sólo la Carpeta `notebooks` de este repositorio)
+- En la otra Carpeta tendrá todo lo referente a la App de Dash (Allí va `TODO el Repositorio, excepto la Carpeta notebooks`)
+
+4. Crear un entorno virtual en cada carpeta: `python3.10 -m venv nombre_del_entorno`
+5. El Archivo `requirements.txt` en la raiz del proyecto son las dependencias para la App realizada en Dash y es el que debe usar para la carpeta en que tenga dicha App
+6. El Archivo `requirements.txt` que se encuentra dentro de la carpeta `notebooks` es el que debe usar para instalar las dependencias del análisis
+7. Activar en cada proyecto el entorno virtual:
+   - Windows: `nombre_del_entorno\Scripts\activate`
+   - macOS/Linux: `source nombre_del_entorno/bin/activate`
+8. Instalar las dependencias: `pip install -r requirements.txt`
+
+## Estructura del Proyecto
+
+1. **Para la parte del Análisis**<br>
+
+- `notebooks/`
+  - Incluye los siguiente:
+  - `assets/`
+    - Imagenes ilustrativas.
+  - `tablas/`
+    - Aca se guardaran los archivos con estructura similar al EDR de la descripción del proyecto.
+  - `tablas_dash/`
+    - Aca se guardaran tablas especialmenete creadas para darle velocidad a la herramienta de visualización cuando interactúe con el usuario.
+  - `db/`
+    - Contiene los siguientes archivos:
+      - `db/connection.py` Se encarga de la conección con la Base de datos Mysql
+      - `db/tables.py` Tiene TODA la estructura del EDR desarrollada en el ORM SqlAlchemy de Python. Funcional para cualquier motor de base de datos SQL, contiene Todas las tablas y sus relaciones.
+      - `db/create_tables.py` Script de Python que al ejecutarlo crea la base de tablas y relaciones de la Base de datos
+  - `docker/`
+    - contiene los siguientes archivos
+      - `docker/Dockerfile` Dockerfile de la imagen Mysql
+      - `docker/pasos_en_la_terminal.txt` Explicación de lo concerniente a Docker y Mysql
+  - `utils/`
+    -Contiene archivos con extensión `.py` que tienen funciones que dan soporte a los cuadernos Jupyter notebooks.
+  - `01_normalizando_internet.ipynb`
+    - Normalización de los datos contenidos en el archivo Internet.xlsx
+  - `02_normalizando_otros.ipynb`
+    - Normalización de los datos contenidos en los archivos
+      - Telefonia_fija.xlsx
+      - Telefonia_movil.xlsx
+      - Television.xlsx
+  - `03_creando_data_tablero.ipynb`
+    - Donde se crean unas tablas customizadas para la herramineta de Visualización
+  - `04_eda_comparando_tecnologias.ipynb`
+    - Análisis de la evolución de los distintos sectores de las telecomunicaciones
+  - `05_eda_internet.ipynb`
+    - Análisis enfocado en el sector Internet de las telecomunicaciones
+
+2. **Para la parte de la App Dash - Herramineta de Visualización**
+
+- `data/`: Contiene los archivos `parquet` necesarios para la visualización.
+- `components/`: Carpeta donde se guardan los archivos `.py ` que contienen los distintos componentes de la visualización.
+- `utils/` Guarda un archivo `.py` donde se realizan unos filtros necesarios en la visualización del Mapa de Oportunidades.
+- `main.py` Arhivo raiz de la App de Dash
+- `requirements.txt` dependencias necesarias para la App
+- `README.md`: Archivo de documentación del proyecto.
+
+## Uso y Ejecución
+
+1. **Para la parte del Análisis**:
+
+- Ejecute los siguientes archivos en el Orden que se nombran a continuación:
+  - `01_normalizando_internet.ipynb`
+  - `02_normalizando_otros.ipynb`
+  - `03_creando_data_tablero.ipynb`
+  - `04_eda_comparando_tecnologias.ipynb`
+  - `05_eda_internet.ipynb`
+
+2. **Para la parte de la App de Dash, la Visualización**:
+
+- Asegurese de que la estructura de este repositorio, a excepción de la Carpeta `notebooks`, se copió Integramente en la locación de su computador que dispuso para ello.
+- Con el entorno virtual activado ejecute `python main:app` espere que se ejecute y desde el navegador `http://127.0.0.1:8050` para que vaya directamente en la visualización desde su navegador.
+
+## Datos y Fuentes
+
+<p style="text-align: justify; text-indent: 2em;">
+Los Datasets Iniciales fueron extraídos de la  del Ente Nacional de Comunicaciones (ENACOM) de Argentina, en su gran Mayoria, sólo el archivo <b>tipos-de-cambio-historicos.csv</b> no viene de allí, este se saco de la pagina del Banco Central de Argentina. 
+</p>
+<br>
+
+## Metodología
+
+1. **Recolección de Datos**
+<p style="text-align: justify; text-indent: 2em;">
+Los datos utilizados en este proyecto fueron extraídos del Ente Nacional de Comunicaciones (ENACOM) de Argentina. Se recopilaron datos históricos de los últimos diez años sobre los ingresos y la penetración de mercado en los sectores de Telefonía Fija, Telefonía Móvil, Internet y Televisión.
+</p>
+
+2. **Normalización de Datos**
+<p style="text-align: justify; text-indent: 2em;">
+Antes de proceder con el análisis, se normalizaron los datos para asegurar su consistencia y precisión. Este proceso incluyó la limpieza de datos, la eliminación de duplicados y la corrección de valores Nulos.
+</p>
+
+3. **Creación del Modelo de Datos (EDR)**
+<p style="text-align: justify; text-indent: 2em;">
+Se diseñó y creó un modelo de datos en SQL (EDR) que sirve como data warehouse para la empresa. Este modelo organiza los datos de manera eficiente y está preparado para soportar futuros estudios y análisis.
+</p>
+
+4. **Análisis de Datos**
+<p style="text-align: justify; text-indent: 2em;">
+El análisis se centró en la evolución de los ingresos y la penetración de mercado en los sectores mencionados. Se realizó un estudio detallado del sector de Internet, examinando el comportamiento del mercado en relación con las tecnologías que brindan el servicio, tales como ADSL, WIRELESS, Fibra Óptica y Cable Modem y las distintas Velocidades Medias de Bajada que presentan las conexiones.
+</p>
+
+5. **Definición de KPI’s y Métricas**
+<p style="text-align: justify; text-indent: 2em;">
+Para una mejor comprensión del comportamiento del sector, se definieron dos KPI’s a nivel de provincias y tres métricas nacionales, todas ellas de seguimiento trimestral, y se encuentran a detalle en la parte de <b>Descripción</b> de este Documento
+</p>
+
+6. **Visualización de Datos**
+<p style="text-align: justify; text-indent: 2em;">
+Se desarrolló una herramienta interactiva de visualización utilizando Python y el framework Dash de la librería Plotly. Esta herramienta permite a los usuarios explorar los datos de manera intuitiva y obtener insights valiosos.
+</p>
+
+7. **Documentación y Presentación**
+<p style="text-align: justify; text-indent: 2em;">
+Finalmente, se documentaron todos los procesos y resultados del análisis. La documentación incluye la descripción del modelo de datos, los métodos de análisis utilizados, y las visualizaciones generadas. Esta documentación está diseñada para ser clara y accesible, facilitando su uso por parte de otros analistas y compañeros dentro de la Empresa.
+</p>
+
+## Conclusiones
+
+1. **Impacto de la Inflación y Devaluación**:
+<p style="text-align: justify; text-indent: 2em;">
+La comparación de la evolución del mercado en dólares y pesos Argentinos muestra resultados significativamente diferentes, lo que sugiere la presencia de inflación y/o devaluación durante el período estudiado. Es crucial consultar con economistas y expertos locales antes de realizar inversiones para comprender mejor la situación económica actual.
+</p>
+
+2. **Reducción de Ingresos en el Sector de Telecomunicaciones**:
+<p style="text-align: justify; text-indent: 2em;">
+En la última década, los ingresos en dólares de los distintos sectores de telecomunicaciones se han reducido a la mitad. El sector de Internet es el único que ha experimentado una caída leve en ingresos, mientras que su penetración en el mercado ha seguido aumentando. Sin embargo, no se dispone de datos sobre los costos de masificación de estas tecnologías, lo que limita el análisis completo del sector.
+</p>
+
+3. **Preferencias del Mercado**:
+<p style="text-align: justify; text-indent: 2em;">
+Los datos indican una clara preferencia de los consumidores argentinos por servicios de Internet que ofrecen mayores velocidades. Esto se refleja en la disminución drástica de la participación de mercado de la tecnología ADSL y el aumento en la velocidad media de bajada de Internet en los últimos tres años. Las tecnologías dominantes en el mercado actual son CableModem y Fibra Óptica, aunque ambas requieren infraestructura de cableado, lo que puede no ser rentable en áreas de baja densidad poblacional.
+</p>
+
+## Recomendaciones
+
+1. **Consulta con Expertos Económicos**:
+<p style="text-align: justify; text-indent: 2em;">
+Antes de realizar inversiones en el sector de telecomunicaciones en Argentina, es recomendable consultar con economistas y expertos locales para obtener una comprensión detallada de la situación económica y los posibles riesgos asociados.
+</p>
+
+2. **Análisis de Costo-Beneficio**:
+<p style="text-align: justify; text-indent: 2em;">
+Realizar un análisis de costo-beneficio detallado del sector de Internet es esencial antes de incursionar en él. Esto ayudará a identificar las oportunidades y desafíos específicos del mercado y a tomar decisiones informadas.
+</p>
+
+3. **Exploración de Tecnologías Inalámbricas**:
+<p style="text-align: justify; text-indent: 2em;">
+Dado que las tecnologías CableModem y Fibra Óptica tienen limitaciones en áreas de baja densidad poblacional, se recomienda estudiar la viabilidad de tecnologías inalámbricas de alta velocidad, como la tecnología satelital, para penetrar en estos mercados. Esto podría representar una gran oportunidad para expandir la cobertura de Internet en localidades con menor número de habitantes.
+</p>
+
+## Autores:
+
+Este proyecto fue realizado por: Aliskair Rodríguez.<br>
+[linkedin.com/in/aliskair-rodriguez-782b3641](https://www.linkedin.com/in/aliskair-rodriguez-782b3641/)

assets/styles.css

@@ -0,0 +1,281 @@
+body {
+  background-color: rgb(30, 30, 30);
+} 
+
+.work_container {
+  width: 98vw;     
+  height: 93vh;       
+  display: flex;
+  justify-content: space-around;
+}
+
+.tab_subcontainers{
+  margin-top: 1em;
+  height: 97%;
+  background-color: #2b2b2b;
+  border: 0.05em solid #656565;
+  border-radius: 0.5em;
+}
+
+/*                                          TAB HOME */
+#tab_home{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 99%;
+}
+
+#title_home{
+  margin-top: 3%;
+  text-align: center;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 3.5rem;
+}
+
+.pestanas{
+  font-weight: bold;
+  font-size: 1.75rem;
+}
+
+.textos_pestanas{
+  font-weight: normal;
+  font-size: 1.5rem;
+}
+
+.home-content {
+  background-color: #2b2b2b;
+  padding: 2%;
+  color: #ffffff;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+
+
+
+
+/*                                          TAB 2 */
+#tab2_left{
+  width: 20%;
+}
+
+#tab2_right{
+  width: 78%;
+  text-align: center;
+}
+
+#title_right_tab2{
+  margin-top: 0.5rem;
+  display: inline-block;
+  width: 100%;
+  height: 10%;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+#grafico_right_tab2{
+  width: 100%;
+  height: 89%;
+}
+
+#container_graficos_tab2{
+  width: 100%;
+  height: 100%;
+}
+
+#container_control_slides{
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+.parrafo_left{
+  margin-left: 2%;
+  margin-right: 2%;
+  color: #ffffff;
+  /* font-weight: bold; */
+}
+
+
+/*                                          TAB 3 */
+#tab3_right{
+  /* margin-top: 1em; */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 99%;
+  height: 97%;
+  text-align: center;
+}
+
+#zona_tarjeta_tab3{
+  height: 18%;
+  display: flex;
+  justify-content: space-between;
+}
+
+#drop_tab3{
+  width: 24%;
+  height: 100%;
+}
+
+
+#tarjeta_1{
+  width: 24%;
+  height: 100%;
+}
+
+#tarjeta_2{
+  width: 24%;
+  height: 100%;
+}
+
+#tarjeta_3{
+  width: 24%;
+  height: 100%;
+}
+
+#zona_grafica_tab3{
+  height: 80%;
+  display: flex;
+  justify-content:space-between;
+}
+
+#zona_barras_tab3{
+  width: 60%;
+  height: 100%;
+}
+
+#barras_tab3{
+  width: 100%;
+  height: 100%;
+}
+
+#zona_pies_tab3{
+  width: 39%;
+  height: 100%;
+}
+
+#pies_tab3{
+  width: 100%;
+  height: 100%;
+}
+
+#grafico_rangos_tab3{
+  width: 60%;
+  height: 60%;
+}
+
+#label_periodo{
+  margin-top: 4%;
+  text-align: left;
+  font-size: 1.3rem;
+}
+
+#grafico_barras_tab3{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.tarjetas{
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 2.5rem;
+}
+
+#pie_pagina_tab3{
+  font-size: 1.2rem;
+  color: #ffffff;
+}
+
+
+/*                                          TAB 4 */
+#tab4_left{
+  width: 20%;
+}
+
+#tab4_center{
+  width: 37%;
+}
+
+#tab4_right{
+  width: 40%;
+}
+
+.one_drop_tab4{
+  width: 90%;
+  color: #ffffff;
+  font-weight: bold;
+  margin-left: 5%;
+}
+
+#tab4_rangos_response{
+  width: 100%;
+  text-align: center;
+  color: #ffffff;
+  font-weight: bold
+}
+
+#texto_tab4{
+  display: inline-block;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 1.3rem;
+  
+
+}
+
+#tab4_texto_resultados{
+  width: 100%;
+  text-align: center;
+}
+
+#contenedor_pies_tab4{
+  margin-top: 2%;
+  text-align: center;
+}
+
+
+/*                                      LETRAS DROPS */
+
+.title_left{
+  margin-top: 3%;
+  text-align: center;
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+.titles{
+  margin-top: 3%;
+  text-align: center;
+  /* color: #d2d0ce; */
+  color: #ffffff;
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+.tab_left{
+  height: 100%;
+  width: 100%;
+}
+
+.btns{
+  display: inline-block;
+  /* background-color: #70cbff; */
+  background-color: #ffffff;
+  width: 30%;
+  height: 2rem;
+  border-radius: 0.3rem;
+}
+
+.btn-container{
+  width: 100%;
+  text-align: center;
+}

components/component_home.py

@@ -0,0 +1,37 @@
+from dash import html
+
+component_home = html.Div([
+    html.Div([
+        html.Div([
+            html.Div(html.Label("Telecomunicaciones Argentina"), id='title_home'),
+            html.Br(),
+            html.Br(),
+            html.Br(),
+            html.Ul([
+                html.Li([
+                    "¿Porqué Internet?:",
+                    html.Ul([
+                        html.Li("Análisis del comportamiento de las Distintas Tecnologías de Telecomunicación")
+                    ], className='textos_pestanas')
+                ], id="contexto", className="pestanas"),
+                html.Br(),
+                html.Br(),
+                html.Li([
+                    "Seguimiento a Métricas:",
+                    html.Ul([
+                        html.Li("Seguimiento a los Indicadores de Gestión Trimestrales del Internet")
+                    ], className='textos_pestanas')
+                ], id="tablero", className="pestanas"),
+                html.Br(),
+                html.Br(),
+                html.Li([
+                    "Mapa de Oportunidades:",
+                    html.Ul([
+                        html.Li("Mapa de seguimiento de Oportunidades por Rangos de Población")
+                    ], className='textos_pestanas')
+                ], id="mapa", className="pestanas")
+            ])
+
+        ], className="home-content"),
+    ], id='tab_home'),
+], className='work_container', id='tab2_component')

components/component_tab2.py

@@ -0,0 +1,11 @@
+from dash import html
+from components.component_tab2_left import component_tab2_left
+
+
+component_tab_2 = html.Div([
+    html.Div([component_tab2_left], className='tab_subcontainers', id='tab2_left'),
+    html.Div([
+        html.Div([], id='title_right_tab2'),
+        html.Div([], id='grafico_right_tab2'),
+    ], className='tab_subcontainers', id='tab2_right')
+], className='work_container', id='tab2_component')

components/component_tab2_grafico.py

@@ -0,0 +1,274 @@
+import polars as pl
+from dash import html, dcc
+import plotly.express as px
+import plotly.graph_objects as go
+from plotly.subplots import make_subplots
+
+internet_pais = pl.read_parquet('data/internet_tab2.parquet')
+telefonia_movil = pl.read_parquet('data/telefonia_movil_tab2.parquet')
+telefonia_fija = pl.read_parquet('data/telefonia_fija_tab2.parquet')
+television = pl.read_parquet('data/television_tab2.parquet')
+df_pies = pl.read_parquet('data/df_pie_tab2.parquet')
+tecnologias_grafico_9 = pl.read_parquet('data/tecnologias_internet_graficos_tab2.parquet')
+rangos_grafico_10 = pl.read_parquet('data/rangos_internet_graficos_tab2.parquet')
+
+# Listas de Dataframes, Nombres de Graficos y Colores Para los Gráficos con 4 Lineas
+dfs_4 = [internet_pais, telefonia_movil, telefonia_fija, television]
+list_4 = ["Internet", "Telefonía Móvil", "Telefonía Fija", "Televisión"]
+colors_4 = ['#22D3EE', '#38C172', '#F6993F', '#FFED4A']
+
+
+# Listas de Datagrames, Nombres de Graficos y Colores Para los Gráficos con 3 Lineas
+dfs_3 = [internet_pais, telefonia_fija, television]
+list_3 = ["Internet", "Telefonía Fija", "Televisión"]
+colors_3 = ['#22D3EE', '#F6993F', '#FFED4A']
+
+
+# ESTA FUNCION CREA LAS GRAFICAS 1, 2 y 4 del Tab 2
+def crear_grafica(df_list: list, y_column: str, list_names: list, colors: list) -> px.line:
+    """Crear gráfica: Función para crear gráficas de tendencias
+
+    Args:
+        df_list (list): Lista de Dataframes
+        y_column (str): Columna del dataframe a graficar
+        title (str): Título del gráfico
+        list_names (list): Lista de Nombres de los gráficos
+        colors (list): Lista de Colores
+
+    Returns:
+        px.line: Grafica de linea de la Libreria plotly
+    """
+    fig = px.line()
+    # Aca esto es como 3 ciclos for en paralelo cada variable
+    for df, name, color in zip(df_list, list_names, colors):
+        fig.add_scatter(x=df["fecha"], y=df[y_column], mode='lines', name=name, line=dict(color=color))
+
+    fig.update_layout(
+        xaxis_title='Periodo',
+        yaxis_title=y_column,
+        font=dict(color='#ffffff', size=16),
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',  # Fondo de la grilla transparente
+        xaxis=dict(showgrid=False, zeroline=True, linecolor='#ffffff'),
+        yaxis=dict(showgrid=False, zeroline=True, linecolor='#ffffff'),
+        height=600,
+    )
+    return fig
+
+
+# ESTA SOLO HACE EL GRAFICO DE TORTAS DEL TAB 2
+def crear_graf_pie(df: pl.DataFrame, colors: list):
+    """crear_graf_pie: Crea un Subplot de Pies de Plotly. Muestran la comparación
+                       de ingresos en Dolares entre 2014 y 2024 en la Tab 2 "¿Porqué Internet?
+
+    Args:
+        df (pl.DataFrame): Dataframe con la información
+        colors (list): ancho del gráfico
+
+    Returns:
+        go.Fig: Suplots de Pies de la Libreria Plotly
+    """
+
+    fig = make_subplots(rows=1, cols=2, specs=[[{'type': 'pie'}, {'type': 'pie'}]],
+                        subplot_titles=("Ingresos 2014", "Ingresos 2024"))
+
+    # Gráfico de Pie para Ingresos 2014
+    fig.add_trace(go.Pie(labels=df["Tecnología"], values=df["Ingresos 2014"],
+                         name="Ingresos 2014", marker=dict(colors=colors), scalegroup='one'), row=1, col=1)
+
+    # Gráfico de Pie para Ingresos 2024 con tamaño proporcional
+    fig.add_trace(go.Pie(labels=df["Tecnología"], values=df["Ingresos 2024"],
+                         name="Ingresos 2024", marker=dict(colors=colors), scalegroup='one'), row=1, col=2)
+
+    fig.update_layout(
+        font=dict(color='#ffffff', size=16),
+        paper_bgcolor='rgba(0,0,0,0)',
+        height=600,
+        annotations=[dict(text='2014', x=0.22, y=1.0, font_size=24, showarrow=False),
+                     dict(text='2024', x=0.77, y=0.85, font_size=24, showarrow=False),
+                     ])
+
+    return fig
+
+# ESTA FUNCION CREA LAS GRAFICAS 6 y 7 del Tab 2
+
+
+def crear_graf_df(columns: list, names: list, colors: list, y_title: str, df: pl.DataFrame) -> px.line:
+    """crear_graf_df: recibe de un mismo Dataframe la inf necesaria para graficar la tendencia de varias
+                      columnas
+
+    Args:
+        columns (list): Lista con los nombres de las columnas a Graficar
+        names (list): Lista con los nombres de Cada Linea en el Gráfico
+        colors (list): Lista con los colores  usar en el Gráfico
+        y_title (str): Titulo del eje y
+        df (pl.DataFrame): Dataframe del cual se sacarán los datos a graficar
+
+    Returns:
+        px.line: Grafico tipo linea de la libreria plotly
+    """
+
+    fig = px.line()
+    for i in range(3):
+        fig.add_scatter(x=df['fecha'], y=df[columns[i]],
+                        name=names[i], mode='lines', line=dict(color=colors[i]))
+    fig.update_layout(
+        xaxis_title='Periodo',
+        yaxis_title=y_title,
+        font=dict(color='#ffffff', size=16),
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',  # Fondo de la grilla transparente
+        xaxis=dict(showgrid=False, zeroline=True, linecolor='#ffffff'),
+        yaxis=dict(showgrid=False, zeroline=True, linecolor='#ffffff'),
+        height=580,
+        margin=dict(l=100, r=0, t=0, b=0)
+    )
+
+    return fig
+
+
+# ESTA FUNCION CREA LA TABLA DE LA DIAPOSITIVA 8 DEL CONTEXTO
+def crear_tabla(df: pl.DataFrame) -> go.Figure:
+    """crear_tabla: Crea la tabla donde se comparan las Variaciones de Ingresos
+                    y accesos de las distintas tecnologías en el 04_eda_comparando_tecnologias.ipynb
+
+    Args:
+        df (pl.DataFrame): Dataframe con la información a mostrar en la tabla
+
+    Returns:
+        go.Fig: Tabla de la Libreria Plotly
+    """
+    df = df.with_columns([
+        ((pl.col('Accesos 2024') / pl.col('Accesos 2014')) - 1).alias('Variación Accesos'),
+        ((pl.col('Ingresos 2024') / pl.col('Ingresos 2014')) - 1).alias('Variación Ingresos')
+    ])
+    lista_varia_accesos = []
+    lista_varia_ingresos = []
+    for i in range(4):
+        lista_varia_accesos.append(str(round((df[i, 5] * 100), 2)) + ' %')
+        lista_varia_ingresos.append(str(round((df[i, 6] * 100), 2)) + ' %')
+
+    header = dict(values=['Tecnología', 'Variación Accesos', 'Variación Ingresos'],
+                  fill_color='lavender',
+                  align='center')
+
+    cells = dict(values=[
+        ['Internet', 'Telefonía Móvil', 'Telefonía Fija', 'Televisión'],
+        lista_varia_accesos,
+        lista_varia_ingresos
+    ],
+        fill_color=[['#22D3EE', '#38C172', '#F6993F', '#FFED4A'],  # Colores personalizados para cada fila
+                    ['#22D3EE', '#38C172', '#F6993F', '#FFED4A'],  # Colores de fondo para Variación Accesos
+                    ['#22D3EE', '#38C172', '#F6993F', '#FFED4A']],  # Colores de fondo para Variación Ingresos
+        align=['left', 'center', 'center'],
+        height=30,
+    )
+
+    fig = go.Figure(data=[go.Table(header=header, cells=cells, columnwidth=[300, 300, 300],)])
+
+    # Ajustar el layout para que se ajuste al tamaño de la tabla
+    fig.update_layout(
+        font=dict(color='black', size=18),
+        paper_bgcolor='rgba(0,0,0,0)',
+        width=800,
+        height=600,
+        margin=dict(l=300, r=0, t=170, b=0)
+    )
+
+    # Retorna la tabla
+    return fig
+
+
+# FUNCION QUE DEVUELVE LAS GRAFICAS DE LAS DIAPOSITIVAS 9 Y 10
+def crea_graficas_9_10(df: pl.DataFrame, num_diapositiva: int) -> px.line:
+    """Se encarga de Graficar las Diapositivas 9 y 10 de la Tab2 "¿Porqué Internet?
+
+    Args:
+        df (pl.DataFrame): Dataframe con los Datos a Graficar
+        num_diapositiva (int): Numero de la Diapositiva a representar
+
+    Returns:
+        px.Line: Grafico de Lineas de Tendencias de Rangos de Velocidad o Tecnologias (según
+        sea el parámetro num_diapositiva recibido) de la libreria Plotly Express
+    """
+    if num_diapositiva == 9:
+        columns = ['ADSL', 'CABLEMODEM', 'FIBRA', 'WIRELESS']
+        colors = ['#FFA15A', '#19D3F3', '#FF6692', '#B6E880']
+    else:
+        colors = ['#636EFA', '#EF553B', '#00CC96', '#AB63FA']
+        columns = ['Hasta 10 Mbps', '10.01 - 30 Mbps', '30.01 - 100 Mbps', 'Mayor a 100 Mbps']
+    names = columns
+
+    fig = px.line()
+    for i in range(len(columns)):
+        fig.add_scatter(x=df['Fecha'], y=df[columns[i]],
+                        name=names[i], mode='lines', line=dict(color=colors[i]))
+    fig.update_layout(
+        xaxis_title='Periodo',
+        yaxis_title='Cantidad de Accesos',
+        font=dict(color='#ffffff', size=16),
+        paper_bgcolor='rgba(0,0,0,0)',
+        plot_bgcolor='rgba(0,0,0,0)',  # Fondo de la grilla transparente
+        xaxis=dict(showgrid=False, zeroline=True, linecolor='#ffffff'),
+        yaxis=dict(showgrid=False, zeroline=True, linecolor='#ffffff'),
+        # width=800,
+        height=580,
+        margin=dict(l=100, r=0, t=0, b=0)
+    )
+    return fig
+
+
+def retorna_grafico_tab2(numero_graf: int) -> html.Div:
+    """retorna_grafico_tab2: Según sea el numero de grafico solicitado se apoya en las funciones
+                             que se encuentran en este mismo archivo para solicitarles la grafica,
+                             y encapsularla dentro de un dcc.Graph que va a ser contenido en un
+                             contenedor html.Div.
+                             Hablamos de los Graficos de la Pestaña o Tab 2 "¿Porqué Internet?
+
+    Args:
+        numero_graf (int): Numero de grafico solicitado
+
+    Returns:
+        html.Div: Componente con el Grafico a Devolver
+    """
+    if numero_graf in [1, 2, 4]:
+        if numero_graf == 1:
+            fig = crear_grafica(df_list=dfs_4, y_column='ingresos_miles',
+                                list_names=list_4, colors=colors_4)
+        elif numero_graf == 2:
+            fig = crear_grafica(df_list=dfs_4, y_column='ingresos_dolar_miles',
+                                list_names=list_4, colors=colors_4)
+        else:
+            fig = crear_grafica(df_list=dfs_3, y_column='accesos_100_hab',
+                                list_names=list_3, colors=colors_3)
+    elif numero_graf == 3:
+        fig = fig = crear_graf_pie(df=df_pies, colors=colors_4)
+    elif numero_graf in [5, 6, 7]:
+        if numero_graf == 5:
+            columns = ['total_accesos_post', 'total_accesos_pre', 'total_accesos']
+            names = ['Accesos Post-Pagos', 'Accesos Pre-Pagos', 'Total Accesos']
+            y_title = 'Accesos'
+        elif numero_graf == 6:
+            columns = ['llamadas_post_miles', 'llamadas_pre_miles', 'total_llamadas']
+            names = ['Llamadas Post-Pagos (miles)', 'Llamadas Pre-Pagos (miles)', 'Total Llamadas (miles)']
+            y_title = 'Llamadas'
+        else:
+            columns = ['minutos_post_miles', 'minutos_pre_miles', 'total_minutos']
+            names = ['Minutos Post-Pagos (miles)', 'Minutos Pre-Pagos (miles)', 'Total Minutos (miles)']
+            y_title = 'Minutos'
+        colors = ['#9fbc12', ' #045426 ', '#38C172']
+        fig = crear_graf_df(columns=columns, names=names, colors=colors,
+                            y_title=y_title, df=telefonia_movil)
+    elif numero_graf == 8:
+        fig = crear_tabla(df=df_pies)
+    elif numero_graf == 9:
+        fig = crea_graficas_9_10(df=tecnologias_grafico_9.sort('Fecha'), num_diapositiva=9)
+    elif numero_graf == 10:
+        fig = crea_graficas_9_10(df=rangos_grafico_10.sort('Fecha'), num_diapositiva=10)
+
+    config = {'displayModeBar': False}
+
+    componente_graf_tab4 = html.Div([
+        dcc.Graph(figure=fig, config=config)
+    ])
+    return componente_graf_tab4

components/component_tab2_left.py

@@ -0,0 +1,24 @@
+from dash import html
+import dash_daq as daq
+
+component_tab2_left = html.Div([
+    html.Div(html.Label("Tendencias Tecnologías"), className='title_left'),
+    html.Br(),
+    html.Br(),
+    html.Div([
+        html.Label("Diapositiva Número "),
+        daq.NumericInput(
+            id='control_slides_tab2',
+            value=0,
+            min=0,
+            max=10,
+            size=60,
+            style={'backgroundColor': '#f0f0f0'}  # Cambia el color de fondo aquí
+        ),
+    ], id='container_control_slides'),
+    html.Br(),
+    html.Br(),
+    html.Br(),
+    html.Br(),
+    html.Div(id='texto_tab2')
+])

components/component_tab2_textos.py

@@ -0,0 +1,160 @@
+from dash import html
+
+componente_1 = html.Div([
+    html.Div(html.Label('Importante Analizar'), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.P([
+            'Desde el Año ',
+            html.B('2018'),
+            ' al ',
+            html.B('2024'),
+            ' se observa un aumento superior a ',
+            html.B('1000 %'),
+            ' !!!'
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        })
+    ], className='parrafo_left')
+])
+
+componente_2 = html.Div([
+    html.Div(html.Label('Analizando lo Observado'), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.P([
+            'Escenario de Inflación y/o Devaluación Local',
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        })
+    ], className='parrafo_left')
+])
+
+componente_3 = html.Div([
+    html.Div(html.Label('Analizando lo Observado'), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.P([
+            'Ingresos de 2024 representan ',
+            html.B('48.79 %'),
+            ' con respecto a 2014'
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        })
+    ], className='parrafo_left')
+])
+
+componente_4 = html.Div([
+    html.Div(html.Label('Analizando lo Observado'), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.P([
+            'Claramente Internet es la única Tecnología que aumento su ',
+            'penetración de Mercado'
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        })
+    ], className='parrafo_left')
+])
+
+componente_7 = html.Div([
+    html.Div(html.Label('Analizando lo Observado'), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.P([
+            'A pesar de la caida de minutos consumidos y llamadas realizadas los ',
+            'accesos a la Telefonía Móvil han variado MUY POCO'
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        })
+    ], className='parrafo_left')
+])
+
+
+componente_8 = html.Div([
+    html.Div(html.Label('Queda Muy Claro !!!'), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.P([
+            'EL Internet es la Tecnología de Telecomunicaciones con mayor avance ',
+            'de penetración en la última Decada'
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        })
+    ], className='parrafo_left')
+])
+
+componente_9 = html.Div([
+    html.Div(html.Label('A tener en Cuenta !!!'), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.P([
+            'A pesar de que los Accesos a Internet han venido creciendo con el tiempo ',
+            'se observan tipos de tecnologías para acceder a ella, que vienen en declive'
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        })
+    ], className='parrafo_left')
+])
+
+
+componente_10 = html.Div([
+    html.Div(html.Label('Acá puede haber una Oportunidad'), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.P([
+            'Es claro que la población desea migrar a servicios de Internet, que les ofrezcan ',
+            'una conexión de mayor velocidad, por eso la migración hacia FIBRA OPTICA y CABLEMODEM, ',
+            'en deprimento de ADSL y WIFI'
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        }),
+        html.Br(),
+        html.P([
+            'PEEERO y en aquellas Localidades donde la Densidad de Población No Justifique un Cableado ??? ',
+        ], style={
+            'text-indent': '1.5rem',  # Sangría del párrafo
+            'line-height': '1.6',    # Espacio de interlineado
+            'text-align': 'justify',  # Justificado
+            'font-size': '1.1rem'      # Tamaño de la letra
+        }),
+    ], className='parrafo_left')
+])
+
+
+textos_left_tab2 = [
+    componente_1,
+    componente_2,
+    componente_3,
+    componente_4,
+    None,
+    None,
+    componente_7,
+    componente_8,
+    componente_9,
+    componente_10
+]

components/component_tab3.py

@@ -0,0 +1,34 @@
+from dash import html
+from components.component_tab3_drop import retorna_tab3_drop
+
+
+def retorna_tab3(periodos: list) -> html.Div:
+    """retorna_tab3: Componente que encapsula Todo el Tablero de la Visualización
+
+    Args:
+        periodos (list): Lista de periodos a mostrar en el Drop
+
+    Returns:
+        html.Div: Contenedor General del Tablero
+    """
+    component_tab_3 = html.Div([
+        # html.Div([retorna_tab3_left(periodos=periodos)], className='tab_subcontainers', id='tab3_left'),
+        html.Div([
+            html.Div([
+                html.Div([retorna_tab3_drop(periodos=periodos)], className='tab_subcontainers', id='drop_tab3'),
+                html.Div([], className='tab_subcontainers', id='tarjeta_1'),
+                html.Div([], className='tab_subcontainers', id='tarjeta_2'),
+                html.Div([], className='tab_subcontainers', id='tarjeta_3'),
+            ], id='zona_tarjeta_tab3'),
+            html.Div([
+                html.Div([
+                    html.Div([], className='tab_subcontainers', id='barras_tab3'),
+                ], id='zona_barras_tab3'),
+                html.Div([
+                    html.Div([], className='tab_subcontainers', id='pies_tab3'),
+                ], id='zona_pies_tab3')
+
+            ], id='zona_grafica_tab3')
+        ], id='tab3_right')
+    ], className='work_container', id='tab3_component')
+    return component_tab_3

components/component_tab3_barras.py

@@ -0,0 +1,74 @@
+import plotly.express as px
+from dash import dcc, html
+import polars as pl
+import pandas as pd
+
+
+def retorna_barras_tab3(df: pl.DataFrame) -> html.Div:
+    """retorna_barras_tab3: Retorna el Grafico de Barras que se muestra en el Tablero
+
+    Args:
+        df (pl.DataFrame): Dataframe con los datos necesarios para realizar el Gráfico
+
+    Returns:
+        html.Div: Contenedor con el Grafico de Barras
+    """
+    df = df.to_pandas()
+
+    df_grouped = df.melt(id_vars='Provincia',
+                         value_vars=['Accesos 100 Hog', 'MBPS Media Bajada'],
+                         var_name='Metrica',
+                         value_name='Valor')
+
+    df_grouped = pd.merge(df_grouped, df[['Provincia', 'Accesos 100 Hog Anterior', 'KPI 100 Hog',
+                                          'Cumplimineto KPI 100 Hog', 'Crecimiento Trimestral Accesos 100 Hog',
+                                          'MBPS Anterior', 'KPI MBPS', 'Cumplimineto KPI MBPS',
+                                          'Crecimiento Trimestral MBPS', 'Accesos 100 Hog', 'MBPS Media Bajada']],
+                          on='Provincia', how='left')
+
+    fig = px.bar(df_grouped, x='Provincia', y='Valor', color='Metrica', barmode='group',
+                 custom_data=df_grouped)
+
+    fig.update_traces(
+        hovertemplate="<br>".join([
+            "<b>Provincia: %{customdata[0]}</b>",
+            "Accesos 100 Hog del Trimestre: %{customdata[11]}",
+            "MBPS del Trimestre: %{customdata[12]}",
+            "</br>"
+            "<b>KPI Accesos 100 Hog: Crecimiento Trimestral 2%</b>",
+            "Valor Anterior: %{customdata[3]}",
+            "<b>Objetivo KPI: %{customdata[4]}</b>",
+            "<b>Cumplimiento KPI: %{customdata[5]} %</b>",
+            "Crecimiento Trimestral: %{customdata[6]} %",
+            "<br>"
+            "<b>KPI MBPS: Crecimiento Trimestral 5%</b>",
+            "Valor Anterior: %{customdata[7]}",
+            "<b>Objetivo KPI: %{customdata[8]}</b>",
+            "<b>Cumplimiento KPI: %{customdata[9]} % </b>",
+            "Crecimiento Trimestral: %{customdata[10]} %",
+        ]),
+        hoverlabel=dict(bgcolor="white", font_color="black", font_size=16),
+        width=0.4,
+    )
+
+    fig.update_layout(
+        xaxis_title="",
+        yaxis_title="Accesos",
+        font=dict(color='#ffffff', size=14),
+        plot_bgcolor='rgba(0,0,0,0)',
+        paper_bgcolor='rgba(0,0,0,0)',
+        xaxis=dict(showgrid=False, zeroline=True, linecolor='#ffffff', tickangle=-90),
+        yaxis=dict(showgrid=False, zeroline=True, linecolor='#ffffff'),
+        legend=dict(
+            x=0.8,
+            y=1.1,
+            orientation='v'
+        )
+    )
+    componente = html.Div([
+        html.Label("Accesos a Internet por cada 100 Hogares y Velocidad Media de Bajada", className='title_left'),
+        html.Br(),
+        dcc.Graph(figure=fig, config={'displayModeBar': False}),
+        html.Label("Nota: Los KPIs por PROVINCIA se muestran en los ToolTips", id='pie_pagina_tab3')
+    ], style={'width': '100%', 'height': '80%'}, id='grafico_barras_tab3')
+    return componente

components/component_tab3_donuts.py

@@ -0,0 +1,84 @@
+import polars as pl
+import plotly.graph_objects as go
+from dash import html, dcc
+
+
+def retorna_pies_tab3(df: pl.DataFrame) -> html.Div:
+    """retorna_pies_tab3: Retorna los Graficos tipo torta del Tablero
+
+    Args:
+        df (pl.DataFrame): Dataframe con la data para generar los gráficos
+
+    Returns:
+        html.Div: Contenedor con los Gráficos tipo barra
+    """
+    valores_pie_rangos = [df['Hasta 10 Mbps'].sum(), df['10.01 - 30 Mbps'].sum(),
+                          df['30.01 - 100 Mbps'].sum(), df['Mayor a 100 Mbps'].sum()]
+    valores_tecnologias = [df['ADSL'].sum(), df['CABLEMODEM'].sum(), df['FIBRA'].sum(), df['WIRELESS'].sum()]
+
+    # Crear gráfico Donut para rangos
+    fig_rangos = go.Figure(go.Pie(
+        labels=['Hasta 10 Mbps', '10.01 - 30 Mbps', '30.01 - 100 Mbps', 'Mayor a 100 Mbps'],
+        values=valores_pie_rangos,
+        marker=dict(colors=['#636EFA', '#EF553B', '#00CC96', '#AB63FA']),
+        legendgroup='rangos',
+        hoverlabel=dict(
+            font_size=16,
+            font_color="black",
+        )
+    ))
+
+    fig_rangos.update_layout(
+        font=dict(color='#ffffff', size=14),
+        paper_bgcolor='rgba(0,0,0,0)',
+        height=230,
+        margin=dict(t=20, b=0, l=0, r=20),
+        legend=dict(
+            title="Rangos",
+            yanchor="top",
+            y=0.9,
+            xanchor="left",
+            x=1.0,
+            traceorder='normal'
+        )
+    )
+
+    # Crear gráfico Donut para tecnologias
+    fig_tecnologias = go.Figure(go.Pie(
+        labels=['ADSL', 'CABLEMODEM', 'FIBRA', 'WIRELESS'],
+        values=valores_tecnologias,
+        marker=dict(colors=['#FFA15A', '#19D3F3', '#FF6692', '#B6E880']),
+        legendgroup='tecnologias',
+        hoverlabel=dict(
+            font_size=16,
+            font_color="black",
+        )
+    ))
+
+    fig_tecnologias.update_layout(
+        font=dict(color='#ffffff', size=14),
+        paper_bgcolor='rgba(0,0,0,0)',
+        height=230,
+        margin=dict(t=0, b=0, l=0, r=20),
+        legend=dict(
+            title="Tecnologías",
+            yanchor="top",
+            y=0.9,
+            xanchor="left",
+            x=1.0,
+            traceorder='normal'
+        )
+    )
+
+    config = {'displayModeBar': False}
+
+    # Crear los componentes dcc.Graph dentro de un html.Div
+    componente_graf_tab3 = html.Div([
+        html.Label("Accesos por Rangos de Velocidad y tecnologías", className='title_left'),
+        dcc.Graph(figure=fig_rangos, config=config),
+        html.Br(),
+        html.Br(),
+        dcc.Graph(figure=fig_tecnologias, config=config)
+    ])
+
+    return componente_graf_tab3

components/component_tab3_drop.py

@@ -0,0 +1,33 @@
+from dash import html, dcc
+
+
+def retorna_tab3_drop(periodos: list) -> html.Div:
+    """retorna_tab3_drop: Retorna el componente Drop del Tablero
+
+    Args:
+        periodos (list): Lista de Periodos a desplegar en el Drop
+
+    Returns:
+        html.Div: Contenedor con el componente Drop
+    """
+    component_drop = html.Div([
+        # html.Div(html.Label("Accesos Internet"), className='title_left'),
+        html.Div(html.Label("Selecciona el Periodo (Trim)"), className='title_left'),
+        html.Br(),
+        html.Div([
+            # html.Div(html.Label("Periodo"), id='label_periodo'),
+            dcc.Dropdown(
+                id="drop-tab3",
+                options=periodos,
+                value=periodos[0],
+                style={
+                    "backgroundColor": "#ffffff",
+                    "fontSize": 18,
+                    "color": "rgb(51, 51, 51)",
+                    "border-radius": "1vh",
+                },
+            ),
+        ], className='one_drop_tab4'),
+
+    ], className='tab_left')
+    return component_drop

components/component_tab3_tarjetas.py

@@ -0,0 +1,36 @@
+from dash import html
+import polars as pl
+
+
+def retorna_tarjetas_tab3(df: pl.DataFrame, accesos: int) -> tuple[html.Div, html.Div, html.Div]:
+    """retorna_tarjetas_tab3: Retorna las 3 tarjetas del Tablero de la visualización
+
+    Args:
+        df (pl.DataFrame): Dataframe con la información de las primeras 2 tarjetas
+        accesos (int): Información a Colocar en la Tercera Tarjeta
+
+    Returns:
+        tuple[html.Div, html.Div, html.Div]:
+        html.Div: Tarjeta que muestra "Variacion Trimestral Acc 100 Hog"
+        html.Div: Tarjeta que muestra "Variacion Trimestral MBPS"
+        html.Div: Tarjeta que muestra "Total Accesos Trimestre"
+    """
+    tarjeta_1 = html.Div([
+        html.Div(html.Label('Variación Trimestral Acc 100 Hog'), className='title_left'),
+        html.Br(),
+        html.Div(html.Label(f'{df["Crecimiento Accesos 100 Hog"][0]} %'), className='tarjetas')
+    ], className='contenedor_tarjetas')
+
+    tarjeta_2 = html.Div([
+        html.Div(html.Label('Variación Trimestral MBPS'), className='title_left'),
+        html.Br(),
+        html.Div(html.Label(f'{df["Crecimineto MBPS Media Bajada"][0]} %'), className='tarjetas')
+    ], className='contenedor_tarjetas')
+
+    tarjeta_3 = html.Div([
+        html.Div(html.Label('Total Accesos en Trimestre'), className='title_left'),
+        html.Br(),
+        html.Div(html.Label(f'{accesos:,}'), className='tarjetas')
+    ], className='contenedor_tarjetas')
+
+    return (tarjeta_1, tarjeta_2, tarjeta_3)

components/component_tab4.py

@@ -0,0 +1,14 @@
+from dash import html
+import plotly.express as px
+import polars as pl
+from components.component_tab4_left import component_tab4_left
+
+
+df_accesos_localidades = pl.read_parquet('data/accesos_localidades_dash.parquet')
+
+
+component_tab_4 = html.Div([
+    html.Div([component_tab4_left], className='tab_subcontainers', id='tab4_left'),
+    html.Div([], className='tab_subcontainers', id='tab4_center'),
+    html.Div([], className='tab_subcontainers', id='tab4_right')
+], className='work_container' , id='tab4_component')

components/component_tab4_donuts.py

@@ -0,0 +1,87 @@
+import polars as pl
+import plotly.graph_objects as go
+from dash import html, dcc
+
+
+def retorna_graf_tab4(df_pie_rangos: pl.DataFrame, df_tecnologias: pl.DataFrame) -> html.Div:
+    """retorna_graf_tab4: Retorna el contenedor que contiene los Gráficos tipo Tortas de la pestaña
+                          que muestra el Mapa en la visualizació
+    Args:
+        df_pie_rangos (pl.DataFrame): Dataframe con la data para el gráfico de Rangos de Velocidades
+        df_tecnologias (pl.DataFrame): Dataframe con la data pata el gráfico de las tecnologías
+
+    Returns:
+        html.Div: contenedor con los gráficos tipo torta
+    """
+    # Convertir columnas a listas de valores
+    valores_pie_rangos = [df_pie_rangos[0, i] for i in range(len(df_pie_rangos.columns))]
+    valores_tecnologias = [df_tecnologias[0, i] for i in range(len(df_tecnologias.columns))]
+
+    # Crear gráfico Donut para df_pie_rangos
+    fig_rangos = go.Figure(go.Pie(
+        labels=df_pie_rangos.columns,
+        values=valores_pie_rangos,
+        marker=dict(colors=['#636EFA', '#EF553B', '#00CC96', '#AB63FA']),
+        legendgroup='rangos',
+        hoverlabel=dict(
+            font_size=16,
+            font_color="black",
+        )
+    ))
+
+    fig_rangos.update_layout(
+        font=dict(color='#ffffff', size=16),
+        paper_bgcolor='rgba(0,0,0,0)',
+        height=270,
+        margin=dict(t=0, b=0, l=0, r=0),
+        legend=dict(
+            title='Rangos',
+            yanchor="top",
+            y=0.7,
+            xanchor="left",
+            x=0.9,
+            traceorder='normal'
+        )
+    )
+
+    # Crear gráfico Donut para df_tecnologias
+    fig_tecnologias = go.Figure(go.Pie(
+        labels=df_tecnologias.columns,
+        values=valores_tecnologias,
+        marker=dict(colors=['#FFA15A', '#19D3F3', '#FF6692', '#B6E880']),
+        legendgroup='tecnologias',
+        hoverlabel=dict(
+            font_size=16,
+            font_color="black",
+        )
+    ))
+
+    fig_tecnologias.update_layout(
+        font=dict(color='#ffffff', size=16),
+        paper_bgcolor='rgba(0,0,0,0)',
+        height=270,
+        margin=dict(t=0, b=0, l=0, r=0),
+        legend=dict(
+            title="Tecnologías",
+            yanchor="top",
+            y=0.7,
+            xanchor="left",
+            x=1.0,
+            traceorder='normal'
+        )
+    )
+
+    config = {'displayModeBar': False}
+
+    # Crear los componentes dcc.Graph dentro de un html.Div
+    componente_graf_tab4 = html.Div([
+        html.Label("Accesos por Rangos de Velocidad y tecnologías", className='title_left'),
+        html.Br(),
+        html.Br(),
+        html.Br(),
+        dcc.Graph(figure=fig_rangos, config=config),
+        html.Br(),
+        dcc.Graph(figure=fig_tecnologias, config=config)
+    ], id='contenedor_pies_tab4')
+
+    return componente_graf_tab4

components/component_tab4_left.py

@@ -0,0 +1,54 @@
+from dash import html, dcc
+
+
+minimos = [2000, 5000, 10000, 20000, 50000, 100000, 500000]
+maximos = [5000, 10000, 20000, 50000, 100000, 500000, 3000000]
+
+
+component_tab4_left = html.Div([
+    dcc.Store(id="store_tab4", data={"btn_tab4": 0}),
+    html.Div(html.Label("Rango Habitantes"), className='title_left'),
+    html.Br(),
+    html.Div([
+        html.Label("Minimo"),
+        dcc.Dropdown(
+            id="drop-minimo_tab4",
+            options=minimos,
+            value=minimos[0],
+            style={
+                "backgroundColor": "#ffffff",
+                "fontSize": 14,
+                "color": "rgb(51, 51, 51)",
+                "border-radius": "1vh",
+            },
+        ),
+    ], className='one_drop_tab4'),
+    html.Br(),
+    html.Div([
+        html.Label("Máximo"),
+        dcc.Dropdown(
+            id="drop-maximo_tab4",
+            options=maximos,
+            value=maximos[0],
+            style={
+                # "backgroundColor": "#70cbff",
+                "backgroundColor": "#ffffff",
+                "fontSize": 14,
+                "color": "rgb(51, 51, 51)",
+                "border-radius": "1vh",
+            },
+        ),
+    ], className='one_drop_tab4'),
+    html.Br(),
+    html.Br(),
+    html.Div(
+        html.Button("Ok", className="btns", id="btn_tab4"),
+        className="btn-container",
+        id="btn_container_tab4",
+    ),
+    html.Br(),
+    html.Div([], id='tab4_rangos_response'),
+    html.Br(),
+    # html.Br(),
+    html.Div([], id='tab4_texto_resultados')
+], className='tab_left')

components/component_tab4_mapa.py

@@ -0,0 +1,119 @@
+from dash import dcc
+import plotly.express as px
+import polars as pl
+import pandas as pd
+
+
+def retorna_mapa(df: pl.DataFrame) -> dcc.Graph:
+    """retorna_mapa: Retorna el componente del Mapa de la visualizacion
+
+    Args:
+        df (pl.DataFrame): Dataframe con la data necesaria para el mapa
+
+    Returns:
+        dcc.Graph: Componente Grafico que encapsula al mapa
+    """
+    df = df.to_pandas()
+
+    # rangos de la población
+    bins = [2000, 5000, 10000, 20000, 50000, 100000, 500000, 10000000]
+    labels = [
+        '2.000-5.000 Hab',
+        '5.001-10.000 Hab',
+        '10.001-20.000 Hab',
+        '20.001-50.000 Hab',
+        '50.001-100.000 Hab',
+        '100.001-500.000 Hab',
+        'Más de 500.000 Hab'
+    ]
+    df['Rango'] = pd.cut(df['Población'], bins=bins, labels=labels)
+
+    # Ajustando para que todas las burbujas sean del mismo tamaño
+    size_map = {
+        '2.000-5.000 Hab': 0.01,
+        '5.001-10.000 Hab': 0.01,
+        '10.001-20.000 Hab': 0.01,
+        '20.001-50.000 Hab': 0.01,
+        '50.001-100.000 Hab': 0.01,
+        '100.001-500.000 Hab': 0.01,
+        'Más de 500.000 Hab': 0.01,
+    }
+    # Estableciendo los colores por Region que sean Fijos (siempre los mismos)
+    color_map = {
+        '2.000-5.000 Hab': '#1f77b4',
+        '5.001-10.000 Hab': '#ff7f0e',
+        '10.001-20.000 Hab': '#2ca02c',
+        '20.001-50.000 Hab': '#d62728',
+        '50.001-100.000 Hab': '#9467bd',
+        '100.001-500.000 Hab': '#8c564b',
+        'Más de 500.000 Hab': '#e377c2'
+    }
+    df['Size'] = df['Rango'].map(size_map)
+    df['Size'] = 0.01
+    df['Color'] = df['Rango'].map(color_map)
+
+    fig = px.scatter_mapbox(
+        df,
+        lat="Latitud",
+        lon="Longitud",
+        hover_name="Localidad",
+        hover_data={"Provincia": True, "Partido": True, "Población": True, "Accesos 100 Hab": True,
+                    "Size": False, "Rango": False, "Latitud": False, "Longitud": False},
+        size="Size",
+        size_max=5,
+        color="Rango",
+        color_discrete_map=color_map,
+        category_orders={"Rango": labels},
+        zoom=3.5,
+        height=660
+    )
+
+    # Estilo del Mapa
+    fig.update_layout(mapbox_style="carto-darkmatter")
+    fig.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0})
+    fig.update_layout(mapbox=dict(center=dict(lat=-38.4161, lon=-63.6167), zoom=3.5))
+
+    fig.update_layout(
+        legend=dict(
+            title="Rango de Población",
+            x=0.60,
+            y=0.08,
+            traceorder="normal",
+            font=dict(color="#ffffff"),
+            bgcolor='rgba(0,0,0,0)'
+        )
+    )
+
+    fig.update_layout(
+        hoverlabel=dict(
+            font_size=18,
+            font_color="white",
+        )
+    )
+
+    fig.update_layout(clickmode='event+select')
+
+    fig.update_layout(mapbox_zoom=3.5)
+    config = {'displayModeBar': False}
+    mapa = dcc.Graph(id='mapa', figure=fig, config=config)
+    return mapa
+
+
+'''
+“open-street-map”: El estilo Inicial                     SI CORRE
+“carto-positron”: Un estilo claro y minimalista.         SI CORRE
+“carto-darkmatter”: Un estilo oscuro y minimalista.      SI CORRE
+“stamen-terrain”: Un estilo que resalta el terreno.       NO CORRE
+“stamen-toner”: Un estilo en blanco y negro con líneas claras.   NO CORRE
+“stamen-watercolor”: Un estilo artístico que parece pintado con acuarelas.  NO CORRE
+“basic”: Un estilo básico y limpio.           NO CORRE
+“streets”: Un estilo que resalta las calles.   NO CORRE
+“outdoors”: Un estilo que resalta las áreas al aire libre.  NO CORRE
+“light”: Un estilo claro.
+“dark”: Un estilo oscuro.     No corre
+“satellite”: Un estilo de imagen satelital.  NO CORRE
+“satellite-streets”: Imagen satelital con calles resaltadas.  NO CORRE
+
+
+
+'''

components/component_tab4_retorna_texto.py

@@ -0,0 +1,41 @@
+from dash import html
+
+
+def retorna_tab4_texto_resultado(
+        total_poblacion: int, total_localidades: int, total_accesos: int
+) -> html.Div:
+    """retorna_tab4_texto_resultado: Retorna la informacion tipo texto que se muestra en la parte
+                                     izquierda en la pestaña del mapa
+
+    Args:
+        total_poblacion (int): Número de habitantes en el Rango de habitantes escogido
+        total_localidades (int): Número de localidades en el Rango de habitantes escogido
+        total_accesos (int): Número de accesos a internet en el Rango de habitantes escogido
+
+    Returns:
+        html.Div: Contenedor con la Información tipo texto mostrada en la pestaña del Mapa
+    """
+    accesos_100_hab = round(100 * (total_accesos / total_poblacion), 2)
+    component = html.Div([
+        html.Div(html.Label('Datos de Valor'), className='title_left'),
+        html.Br(),
+        html.Label('Localidades del Rango'),
+        html.Br(),
+        html.Label(f"{total_localidades:,}"),
+        html.Br(),
+        html.Br(),
+        html.Label('Población del Rango'),
+        html.Br(),
+        html.Label(f"{total_poblacion:,}"),
+        html.Br(),
+        html.Br(),
+        html.Label('Total Accesos en Rango'),
+        html.Br(),
+        html.Label(f"{total_accesos:,}"),
+        html.Br(),
+        html.Br(),
+        html.Label('Accesos Cada 100 Hab'),
+        html.Br(),
+        html.Label(accesos_100_hab)
+    ], id='texto_tab4')
+    return component

main.py

@@ -0,0 +1,246 @@
+from dash import Dash, dcc, html, Input, Output, callback, State
+import polars as pl
+from utils.retorna_dfs_grfaicos_tab4 import retorna_dfs_graficos_tab4
+from components.component_home import component_home
+from components.component_tab2 import component_tab_2
+from components.component_tab2_textos import textos_left_tab2
+from components.component_tab2_grafico import retorna_grafico_tab2
+from components.component_tab3 import retorna_tab3
+from components.component_tab3_tarjetas import retorna_tarjetas_tab3
+from components.component_tab3_barras import retorna_barras_tab3
+from components.component_tab3_donuts import retorna_pies_tab3
+from components.component_tab4 import component_tab_4
+from components.component_tab4_mapa import retorna_mapa
+from components.component_tab4_donuts import retorna_graf_tab4
+from components.component_tab4_retorna_texto import retorna_tab4_texto_resultado
+
+accesos_localidades = pl.read_parquet('data/accesos_localidades_dash.parquet')
+rangos_localidades = pl.read_parquet('data/rangos_localidades.parquet')
+data_tablero = pl.read_parquet('data/data_tablero_dashboard.parquet')
+tarjetas = pl.read_parquet('data/tarjetas.parquet')
+lista_periodos = data_tablero['Periodo Tablero'].unique().to_list()
+lista_periodos.sort()
+lista_periodos = [item[7:] for item in lista_periodos]
+periodos_dashboard = lista_periodos.copy()
+periodos_dashboard.pop(0)
+
+
+app = Dash(
+    __name__,
+    suppress_callback_exceptions=True,
+    title="Telecomunicaciones Argentina",
+    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
+)
+
+
+tabs_styles = {"height": "2em", "marginLeft": "0.5em", "marginRight": "1.5em"}
+tab_style = {
+    "border": "1px solid #656565",
+    "color": "#d0d0d0",
+    "backgroundColor": "#2b2b2b",
+    "padding": "0.5em",
+    "fontWeight": "bold",
+    "fontSize": "0.9em",
+}
+
+tab_selected_style = {
+    "borderTop": "1px solid #ffffff",
+    "borderLeft": "1px solid #656565",
+    "borderRight": "1px solid #656565",
+    "backgroundColor": "#2b2b2b",
+    "color": "#ffffff",
+    "padding": "0.5em",
+    "fontSize": "1.1em",
+}
+
+app.layout = html.Div(
+    [
+        dcc.Tabs(
+            id="tabs-inline",
+            value="tab-1",
+            children=[
+                dcc.Tab(
+                    label="Home",
+                    value="tab-1",
+                    style=tab_style,
+                    selected_style=tab_selected_style,
+                ),
+                dcc.Tab(
+                    label="¿Porqué Internet?",
+                    value="tab-2",
+                    style=tab_style,
+                    selected_style=tab_selected_style,
+                ),
+                dcc.Tab(
+                    label="Seguimiento a Métricas",
+                    value="tab-3",
+                    style=tab_style,
+                    selected_style=tab_selected_style,
+                ),
+                dcc.Tab(
+                    label="Mapa de Oportunidades",
+                    value="tab-4",
+                    style=tab_style,
+                    selected_style=tab_selected_style,
+                ),
+            ],
+            style=tabs_styles,
+        ),
+        html.Div(id="tabs-content-inline-3"),
+    ]
+)
+
+
+@callback(Output("tabs-content-inline-3", "children"), Input("tabs-inline", "value"))
+def render_content(tab):
+    if tab == "tab-1":
+        return component_home
+    elif tab == "tab-2":
+        return component_tab_2
+    elif tab == "tab-3":
+        return retorna_tab3(periodos=periodos_dashboard)
+    elif tab == "tab-4":
+        return component_tab_4
+
+
+@app.callback(
+    Output('tab4_rangos_response', 'children'),
+    Output('tab4_center', 'children'),
+    Output('tab4_right', 'children'),
+    Output('tab4_texto_resultados', 'children'),
+    Output("store_tab4", "data"),
+    Input('btn_tab4', 'n_clicks'),
+    Input('drop-minimo_tab4', 'value'),
+    Input('drop-maximo_tab4', 'value'),
+    State("store_tab4", "data"),
+    prevent_initial_call=True,
+)
+def update_tab_4(n_clicks: int, min_value: int, max_value: int, data: dict
+                 ) -> tuple[html.Label | html.Br, html.Div | None , html.Div | None, html.Div | None, dict]:
+    """update_tab_4: Actualiza los componentes de La Pestaña 4 o "Mapa de Oportunidades"
+
+    Args:
+        n_clicks (int): Numero de Veces que se le ha dado click al boton del tab 4
+        min_value (int): Valor seleccionado por el Usuario, capturado por un componente dcc.Drop (mínimo población)
+        max_value (int): Valor seleccionado por el Usuario, capturado por un componente dcc.Drop (máximo población)
+        data (dict): Banco de Datos tipo dcc.Store. pertenece al componente con el id="store_tab4" en el archivo
+                     component_tab4_left.py Utilizado para llevar un paralelo de cuantas veces an clickleado el boton
+
+    Returns:
+        tuple[html.Label|html.Br, html.Div|None , html.Div|None, html.Div|None, dict]:
+            html.Label|html.Br: Label cuando se selecciona mal un rango, Br cuando es correcto el rango
+            html.Div|None : Componente que tiene el Mapa de la Tab 4
+            html.Div|None: Componente que contiene los dos graficos tipo pies de la tab 4
+            html.Div|None: Componente de Texto que se muestra en la parte izquierda de la pestaña
+                           Tab_4 donde se dice Numero de Localidades, cantidad de Hab, etc
+            dict: Banco de Datos dcc.Store con id="store_tab4"
+    """
+    btn_tab4 = data.get("btn_tab4")
+    if not n_clicks or n_clicks == btn_tab4:
+        return (html.Br(), None, None, None, data)
+    if n_clicks > btn_tab4:
+        btn_tab4 += 1
+        data["btn_tab4"] = btn_tab4
+        if max_value > min_value:
+            response = html.Br()
+            df_mapa, df_pie_rangos, df_tecnologias, n_accesos, n_localidades = retorna_dfs_graficos_tab4(
+                df_accesos_localidades=accesos_localidades,
+                df_rangos=rangos_localidades,
+                hab_minimo=min_value,
+                hab_maximo=max_value
+            )
+            poblacion_total_rango = df_mapa['Población'].sum()
+            componente_texto = retorna_tab4_texto_resultado(
+                total_poblacion=poblacion_total_rango,
+                total_localidades=n_localidades,
+                total_accesos=n_accesos
+            )
+            mapa = retorna_mapa(df=df_mapa)
+            graficos_tab4 = retorna_graf_tab4(
+                df_pie_rangos=df_pie_rangos,
+                df_tecnologias=df_tecnologias['ADSL', 'CABLEMODEM', 'FIBRA', 'WIRELESS']
+            )
+        else:
+            response = html.Label('Rango no Permitido !!!')
+            mapa = None
+            graficos_tab4 = None
+            componente_texto = None
+        return (response, mapa, graficos_tab4, componente_texto, data)
+
+
+@callback(
+    Output('title_right_tab2', 'children'),
+    Output('grafico_right_tab2', 'children'),
+    Output('texto_tab2', 'children'),
+    Input('control_slides_tab2', 'value'),
+    prevent_initial_call=True,
+)
+def update_tab_2(value: int) -> tuple[str | None, html.Div | None, html.Div | None]:
+    """update_tab_2: Se encarga de actualizar los componentes de la pesataña Tab2 o "¿Porque Internet?
+
+    Args:
+        value (int): Valor que se recibe del componente daq.NumericInput del archivo
+                     component_tab2_left.py
+
+    Returns:
+        tuple[str|None, html.Div|None, html.Div|None]:
+            str|None: Título de la Diapositiva en la Tab 2 o "¿Porque Internet?
+            html.Div|None: Diapositiva (Gráfico) en la Tab 2 o "¿Porque Internet?
+            html.Div|None: Texto que se muestra en la parte izquierda de la pantalla
+                           en la Tab 2 o "¿Porque Internet?
+    """
+    titulos_diapositivas = [
+        'Ingresos en Miles de Pesos Argentinos',
+        'Ingresos en Miles de Dolares',
+        'Comparación de Ingresos en Dolares por Tecnología',
+        'Accesos por cada 100 Habitantes',
+        'Accesos de Telefonía Movil',
+        'Cantidad de Llamadas Telefonía Movil',
+        'Cantidad de Minutos Consumidos Telefonía Movil',
+        'Evolución en Accesos e Ingresos en la última Decada',
+        'Evolución de los Accesos de las Tecnologías para el Acceso a Internet',
+        'Evolución de los Accesos a Internet en los Distintos Rangos de Velocidad',
+    ]
+    if value in range(1, 11):
+        componente = retorna_grafico_tab2(numero_graf=value)
+        title = html.Label(titulos_diapositivas[value - 1])
+        texto = textos_left_tab2[value - 1] if value in [1, 2, 3, 4, 7, 8, 9, 10] else None
+        return (title, componente, texto)
+    else:
+        return (None, None, None)
+
+
+@app.callback(
+    Output('tarjeta_1', 'children'),
+    Output('tarjeta_2', 'children'),
+    Output('tarjeta_3', 'children'),
+    Output('barras_tab3', 'children'),
+    Output('pies_tab3', 'children'),
+    Input('drop-tab3', 'value'),
+)
+def update_tab_3(value: str) -> tuple[html.Div, html.Div, html.Div, html.Div, html.Div]:
+    """update_tab_3: Se encarga de actualizar los componentes de la Tab 3 o "Seguimiento a Métricas"
+
+    Args:
+        value (str): Periodo Seleccionado por el Usuario en la Pestaña del Tablero
+
+    Returns:
+        tuple[html.Div, html.Div, html.Div, html.Div, html.Div]:
+            html.Div: Componente que se Ubica en la tarjeta Variacion Trimestral Accesos 100 Hog
+            html.Div: Componente que se Ubica en la tarjeta Variacion Trimestral MBPS
+            html.Div: Componente que se Ubica en la tarjeta Total Accesos en Trimestre
+            html.Div: Componente con el Grafico de Barras del Tablero
+            html.Div  Componente con los dos Graficos tipo Pie del tablero
+    """
+    mask = data_tablero['Periodo'] == value
+    df = data_tablero.filter(mask)
+    barras = retorna_barras_tab3(df=df)
+    pies = retorna_pies_tab3(df=df)
+    mask = tarjetas['Periodo'] == value
+    df_tarjetas = tarjetas.filter(mask)
+    tarjeta_1, tarjeta_2, tarjeta_3 = retorna_tarjetas_tab3(df=df_tarjetas, accesos=df['Total Accesos'].sum())
+    return (tarjeta_1, tarjeta_2, tarjeta_3, barras, pies)
+
+
+if __name__ == "__main__":
+    app.run(debug=False)

requirements.txt

@@ -0,0 +1,6 @@
+dash==2.16.1
+dash_daq==0.5.0
+pandas==2.2.2
+plotly==5.21.0
+polars==1.2.1
+pyarrow==17.0.0

utils/retorna_dfs_grfaicos_tab4.py

@@ -0,0 +1,71 @@
+import polars as pl
+
+
+def retorna_dfs_graficos_tab4(
+        df_accesos_localidades: pl.DataFrame,
+        df_rangos: pl.DataFrame,
+        hab_minimo: int,
+        hab_maximo: int) -> tuple[pl.DataFrame, pl.DataFrame, pl.DataFrame, int, int]:
+    """retorna_dfs_graficos_tab4: Es llamada desde la Callback que actualiza el TAB 4 o
+                                  'Mapa de Oportunidades` en la visualización. Se encarga de preparar la
+                                  data para los distintos componentes de esa pestaña de la visualización
+
+    Args:
+        df_accesos_localidades (pl.DataFrame): Dataframe con la Data de todas las localidades
+        df_rangos (pl.DataFrame): Dataframe con la data de los Rangos de Velocidad asociados a las localidades
+        hab_minimo (int): Rango inferior de habitantes selecionado por el usuario
+        hab_maximo (int): Rango superior de Habitantes selecionado por el usuario
+
+    Returns:
+        tuple[pl.DataFrame,pl.DataFrame, pl.DataFrame, int, int]:
+                df_mapa: Dataframe con información de localidades seleccionadas con sus latitudes y longitudes
+                         e informacion para el tooltip
+                df_pie_rangos: Dataframe que va dirigido a alimentar el Grafico de Pie de Rango de Velocidades
+                df_tecnologias: Dataframe que va dirigido a alimentar el Grafico de Pies de las Tecnologias
+                total_accesos: Dato que se muestra en la Seccion Izquierda de la pestaña, donde se muestra texto
+                total_localidades:Dato que se muestra en la Seccion Izquierda de la pestaña, donde se muestra texto
+
+
+
+    """
+    '''Obteniendo la Data que va para el Mapa, df_mapa'''
+    mask = (df_accesos_localidades['Población'] >= hab_minimo) &\
+        (df_accesos_localidades['Población'] <= hab_maximo)
+
+    # Esta lista de Localidades (en el rango de poblacion) la utilizaré para filtrar en el
+    # dataframe de rangos de velocidades
+    lista_ids_localidades = df_accesos_localidades.filter(mask)['id_localidad'].to_list()
+    total_localidades = len(lista_ids_localidades)
+
+    columns = ['Provincia', 'Partido', 'Localidad', 'Población', 'Accesos 100 Hab', 'Longitud', 'Latitud']
+    df_mapa = df_accesos_localidades.filter(mask)[columns]
+
+    '''Obteniendo la Data para el grafico que clasifica por tipo de Tecnologia'''
+    df_tecnologias = pl.DataFrame()
+    adsl = df_accesos_localidades.filter(mask)['ADSL'].sum()
+    cable_modem = df_accesos_localidades.filter(mask)['CABLEMODEM'].sum()
+    fibra = df_accesos_localidades.filter(mask)['FIBRA'].sum()
+    wireless = df_accesos_localidades.filter(mask)['WIRELESS'].sum()
+    satelital = df_accesos_localidades.filter(mask)['SATELITAL'].sum()
+    winmax = df_accesos_localidades.filter(mask)['WINMAX'].sum()
+    tecnologias = [adsl, cable_modem, fibra, wireless, satelital, winmax]
+    columns = ['ADSL', 'CABLEMODEM', 'FIBRA', 'WIRELESS', 'SATELITAL', 'WINMAX']
+    for i in range(6):
+        df_tecnologias = df_tecnologias.with_columns(pl.lit(tecnologias[i]).alias(columns[i]))
+
+    '''Obteniendo la Data que va para el Pie con Rangos de Velocidades, df_pie_rangos'''
+    df_pie_rangos = pl.DataFrame()
+    rangos = ['Hasta 10 Mbps', '10.01 - 30 Mbps', '30.01 - 100 Mbps', 'Mayor a 100 Mbps']
+    velocidades = [(0, 10), (10.01, 30), (30.01, 100), (100.01, 1000000)]
+
+    total_accesos = 0
+    for i in range(4):
+        menor = velocidades[i][0]
+        mayor = velocidades[i][1]
+        mask = (df_rangos['id_localidad'].is_in(lista_ids_localidades)) &\
+               (df_rangos['velocidad_mbps'].is_between(menor, mayor))
+        accesos = df_rangos.filter(mask)['accesos'].sum()
+        total_accesos += accesos
+        df_pie_rangos = df_pie_rangos.with_columns(pl.lit(accesos).alias(rangos[i]))
+
+    return (df_mapa, df_pie_rangos, df_tecnologias, total_accesos, total_localidades)