Update app.py

app.py

@@ -1,11 +1,11 @@
 import pandas as pd
+import matplotlib.pyplot as plt
 import numpy as np
-import plotly.express as px
-import plotly.graph_objects as go
-import gradio as gr
+import matplotlib.dates as mdates
 from datetime import datetime
-
-#DATA
+import seaborn as sns
+import gradio as gr
+from matplotlib.figure import Figure
 
 cities_data = {
     'Abancay': {
@@ -1151,14 +1151,17 @@ cities_data = {
 }
 
 
-#DATA
-
+plt.rcParams['figure.figsize'] = (14, 9)
+plt.rcParams['font.size'] = 13
+plt.rcParams['font.family'] = 'sans-serif'
+plt.style.use('seaborn-v0_8-whitegrid')
 
 COLORES = {
     'Total': '#2C3E50',
     'Hombres': '#3498DB',
     'Mujeres': '#E74C3C',
-    'Brecha': '#8E44AD'
+    'Brecha': '#8E44AD',
+    'Fondo': '#F8F9F9'
 }
 
 def normalizar_nombres_ciudades(nombre):
@@ -1173,225 +1176,388 @@ def normalizar_nombres_ciudades(nombre):
         'Pura': 'Piura',
         'Posalipa': 'Pucallpa',
         'Tagapito': 'Talara',
-        'Juliana': 'Juliaca',
-        'Chimbote': 'Chimbote',
-        'Arequipa': 'Arequipa',
-        'Trujillo': 'Trujillo'
+        'Juliana': 'Juliaca'
     }
     return correcciones.get(nombre, nombre)
 
-def procesar_dataframe(df, cols):
-    return pd.DataFrame(df, columns=cols).apply(pd.to_numeric, errors='coerce', axis=1)
+def ordenar_trimestres(df, col_fecha='Trimestre'):
+    df = df.copy()
+    if col_fecha == 'Trimestre':
+        fechas = []
+        for t in df[col_fecha]:
+            if 'Q' in t:
+                año = t.split('-')[0]
+                trimestre = t.split('-')[1]
+                mes = {'Q1': '03', 'Q2': '06', 'Q3': '09', 'Q4': '12'}[trimestre]
+                fechas.append(f"{año}-{mes}")
+            else:
+                fechas.append(f"{t}-01")
+        df['fecha_orden'] = pd.to_datetime(fechas, format='%Y-%m')
+    else:
+        fechas = []
+        for p in df[col_fecha]:
+            if '/' in p:
+                fechas.append(p.split('/')[0])
+            else:
+                fechas.append(f"{p}-01")
+        df['fecha_orden'] = pd.to_datetime(fechas, format='%Y-%m', errors='coerce')
+    df = df.sort_values('fecha_orden')
+    return df
 
-def crear_grafico_lineas(df, titulo, eje_y, formato=None):
-    fig = go.Figure()
-    
-    for col in ['Total', 'Hombres', 'Mujeres']:
-        if col in df.columns:
-            fig.add_trace(go.Scatter(
-                x=df['Periodo'],
-                y=df[col],
-                name=col,
-                mode='lines+markers',
-                line=dict(color=COLORES[col], width=3),
-                marker=dict(size=8),
-                hovertemplate=f'<b>{col}</b>: %{{y:{formato or ".2f"}}}<extra></extra>'
-            ))
-    
-    fig.update_layout(
-        title=dict(text=titulo, x=0.5, font=dict(size=20)),
-        yaxis_title=eje_y,
-        xaxis_title='Periodo',
-        hovermode='x unified',
-        template='plotly_white',
-        legend=dict(
-            orientation="h",
-            yanchor="bottom",
-            y=1.02,
-            xanchor="right",
-            x=1
-        )
-    )
-    
-    if formato:
-        fig.update_layout(yaxis_tickformat=formato)
-    
+def calcular_rango_y(df, categorias, padding=0.15):
+    valores = df[categorias].values.flatten()
+    valores = valores[~np.isnan(valores)]
+    if len(valores) == 0:
+        return (0, 1)
+    min_val = np.nanmin(valores)
+    max_val = np.nanmax(valores)
+    rango = max_val - min_val
+    return (max(0, min_val - rango*padding), max_val + rango*padding)
+
+def graficar_datos_mejorados(df, titulo, subtitulo, ylabel, col_fecha='Trimestre', mostrar_valores=True, formato_valores='.1f'):
+    fig, ax = plt.subplots(figsize=(14, 8))
+    ax.set_facecolor(COLORES['Fondo'])
+    fig.patch.set_facecolor(COLORES['Fondo'])
+    ax.grid(axis='y', linestyle='--', alpha=0.7)
+
+    categorias = df.columns[1:4]
+    x_indices = np.arange(len(df))
+    ylim = calcular_rango_y(df, categorias)
+
+    for categoria in categorias:
+        if categoria in df.columns and not df[categoria].isna().all():
+            y_vals = df[categoria].values
+            valid_mask = ~np.isnan(y_vals)
+            
+            ax.plot(x_indices[valid_mask], y_vals[valid_mask], 
+                    marker='o', linewidth=3, markersize=8,
+                    label=categoria, color=COLORES[categoria])
+
+            if mostrar_valores:
+                for i, valor in zip(x_indices[valid_mask], y_vals[valid_mask]):
+                    offset = 0.2 if categoria == 'Hombres' else -0.8 if categoria == 'Mujeres' else 0
+                    ax.annotate(f'{valor:{formato_valores}}',
+                                xy=(i, valor),
+                                xytext=(0, 5 + offset),
+                                textcoords='offset points',
+                                ha='center', va='bottom',
+                                fontsize=10, fontweight='bold',
+                                color=COLORES[categoria],
+                                bbox=dict(boxstyle='round,pad=0.3', fc='white', alpha=0.7))
+
+    ax.set_title(titulo, fontsize=18, fontweight='bold', pad=20)
+    plt.figtext(0.5, 0.01, subtitulo, ha='center', fontsize=12, fontstyle='italic')
+    ax.set_ylabel(ylabel, fontsize=14, fontweight='bold')
+    ax.set_xticks(x_indices)
+    ax.set_xticklabels(df[col_fecha].astype(str), rotation=45, ha='right')
+    ax.set_ylim(ylim)
+
+    for spine in ['top', 'right']:
+        ax.spines[spine].set_visible(False)
+
+    legend = ax.legend(fontsize=12, frameon=True, framealpha=0.9, 
+                      facecolor='white', edgecolor='lightgrey', 
+                      loc='upper right', bbox_to_anchor=(0.98, 0.98))
+    plt.tight_layout(rect=[0, 0.03, 1, 1])
     return fig
 
-def analisis_comparativo_desempleo():
-    datos = []
-    
-    for ciudad, data in cities_data.items():
+def generar_analisis_global():
+    figuras = []
+    estilo_comun = {
+        'marker': 'o',
+        'linewidth': 2,
+        'markersize': 6,
+        'alpha': 0.8
+    }
+
+    # Gráfico de Desempleo Global
+    fig_desempleo = Figure(figsize=(16, 10))
+    ax_desempleo = fig_desempleo.add_subplot(111)
+    for ciudad, datos in cities_data.items():
         nombre = normalizar_nombres_ciudades(ciudad)
-        df = pd.DataFrame(data['desempleo_trimestral'], 
-                        columns=["Trimestre", "Total", "Hombres", "Mujeres"])
-        ultimo_valor = df['Total'].iloc[-1] if not df.empty else None
-        if ultimo_valor:
-            datos.append({'Ciudad': nombre, 'Desempleo': ultimo_valor})
+        df = ordenar_trimestres(pd.DataFrame(datos['desempleo_trimestral'], 
+                           columns=["Trimestre", "Total", "Hombres", "Mujeres"]))
+        if not df.empty:
+            ax_desempleo.plot(df['fecha_orden'], df['Total'], 
+                             label=nombre, **estilo_comun)
     
-    df_comparativo = pd.DataFrame(datos).sort_values('Desempleo', ascending=False)
+    ax_desempleo.set_title('TASA DE DESEMPLEO - COMPARATIVA ENTRE CIUDADES', 
+                          fontsize=18, fontweight='bold', pad=20)
+    ax_desempleo.set_ylabel('Tasa (%)', fontsize=14)
+    ax_desempleo.grid(True, linestyle='--', alpha=0.5)
+    ax_desempleo.xaxis.set_major_locator(mdates.YearLocator())
+    ax_desempleo.xaxis.set_major_formatter(mdates.DateFormatter('%Y'))
     
-    fig = px.bar(df_comparativo, 
-                x='Ciudad', 
-                y='Desempleo',
-                color='Desempleo',
-                color_continuous_scale='Bluered',
-                text_auto='.1f%',
-                title='Comparación de Tasa de Desempleo entre Ciudades')
+    handles, labels = ax_desempleo.get_legend_handles_labels()
+    leg = fig_desempleo.legend(handles, labels,
+                             loc='upper center',
+                             bbox_to_anchor=(0.5, -0.12),
+                             ncol=5,
+                             fontsize=10,
+                             frameon=True,
+                             fancybox=True,
+                             shadow=True,
+                             title='Ciudades',
+                             title_fontsize='12')
+    fig_desempleo.tight_layout(rect=[0, 0.1, 1, 0.95])
+    figuras.append(fig_desempleo)
+
+    # Gráfico de Ingresos Global
+    fig_ingresos = Figure(figsize=(16, 10))
+    ax_ingresos = fig_ingresos.add_subplot(111)
+    for ciudad, datos in cities_data.items():
+        nombre = normalizar_nombres_ciudades(ciudad)
+        df = ordenar_trimestres(pd.DataFrame(datos['ingresos_periodo'], 
+                               columns=["Periodo", "Total", "Hombres", "Mujeres"]), 
+                               'Periodo')
+        if not df.empty:
+            ax_ingresos.plot(df['fecha_orden'], df['Total'], 
+                            label=nombre, **estilo_comun)
     
-    fig.update_layout(
-        xaxis_title='',
-        yaxis_title='Tasa de Desempleo (%)',
-        coloraxis_showscale=False,
-        xaxis={'categoryorder':'total descending'},
-        hoverlabel=dict(bgcolor="white", font_size=12),
-        height=600
-    )
+    ax_ingresos.set_title('INGRESOS PROMEDIO - COMPARATIVA ENTRE CIUDADES', 
+                         fontsize=18, fontweight='bold', pad=20)
+    ax_ingresos.set_ylabel('Ingresos (Soles)', fontsize=14)
+    ax_ingresos.grid(True, linestyle='--', alpha=0.5)
+    ax_ingresos.xaxis.set_major_locator(mdates.YearLocator())
+    ax_ingresos.xaxis.set_major_formatter(mdates.DateFormatter('%Y'))
     
-    fig.update_traces(textfont_size=12, textangle=0, textposition="outside")
-    return fig
+    handles, labels = ax_ingresos.get_legend_handles_labels()
+    leg = fig_ingresos.legend(handles, labels,
+                            loc='upper center',
+                            bbox_to_anchor=(0.5, -0.12),
+                            ncol=5,
+                            fontsize=10,
+                            frameon=True,
+                            fancybox=True,
+                            shadow=True,
+                            title='Ciudades',
+                            title_fontsize='12')
+    fig_ingresos.tight_layout(rect=[0, 0.1, 1, 0.95])
+    figuras.append(fig_ingresos)
 
-def crear_radar_plot(dfs):
-    metricas = {
-        'Desempleo': dfs['desempleo']['Total'].iloc[-1],
-        'Informalidad': dfs['informal']['Total'].iloc[-1],
-        'Brecha Salarial': ((dfs['ingresos']['Hombres'].iloc[-1] - dfs['ingresos']['Mujeres'].iloc[-1]) / 
-                          dfs['ingresos']['Hombres'].iloc[-1]) * 100,
-        'Actividad': dfs['actividad']['Total'].iloc[-1]
-    }
-    
-    fig = go.Figure()
+    # Gráfico de Brecha Salarial Global
+    fig_brecha = Figure(figsize=(16, 10))
+    ax_brecha = fig_brecha.add_subplot(111)
+    for ciudad, datos in cities_data.items():
+        nombre = normalizar_nombres_ciudades(ciudad)
+        df = ordenar_trimestres(pd.DataFrame(datos['ingresos_periodo'], 
+                               columns=["Periodo", "Total", "Hombres", "Mujeres"]), 
+                               'Periodo')
+        if not df.empty and 'Hombres' in df.columns and 'Mujeres' in df.columns:
+            df['Brecha'] = (df['Hombres'] - df['Mujeres']) / df['Hombres'] * 100
+            ax_brecha.plot(df['fecha_orden'], df['Brecha'], 
+                          label=nombre, **estilo_comun)
     
-    fig.add_trace(go.Scatterpolar(
-        r=list(metricas.values()) + [metricas['Desempleo']],
-        theta=list(metricas.keys()) + ['Desempleo'],
-        fill='toself',
-        fillcolor='rgba(142, 68, 173, 0.2)',
-        line=dict(color=COLORES['Brecha'], width=2),
-        name='Indicadores'
-    ))
+    ax_brecha.set_title('BRECHA SALARIAL DE GÉNERO - COMPARATIVA ENTRE CIUDADES', 
+                       fontsize=18, fontweight='bold', pad=20)
+    ax_brecha.set_ylabel('Brecha (%)', fontsize=14)
+    ax_brecha.grid(True, linestyle='--', alpha=0.5)
+    ax_brecha.xaxis.set_major_locator(mdates.YearLocator())
+    ax_brecha.xaxis.set_major_formatter(mdates.DateFormatter('%Y'))
     
-    fig.update_layout(
-        polar=dict(
-            radialaxis=dict(
-                visible=True,
-                range=[0, 100],
-                tickfont=dict(size=12),
-                tickformat='.0f%'
-            ),
-            angularaxis=dict(
-                rotation=90,
-                direction='clockwise',
-                tickfont=dict(size=14)
-            )
-        ),
-        title=dict(text='Radar de Indicadores Laborales', x=0.5, font=dict(size=20)),
-        showlegend=False,
-        height=600
-    )
-    
-    return fig
+    handles, labels = ax_brecha.get_legend_handles_labels()
+    leg = fig_brecha.legend(handles, labels,
+                          loc='upper center',
+                          bbox_to_anchor=(0.5, -0.12),
+                          ncol=5,
+                          fontsize=10,
+                          frameon=True,
+                          fancybox=True,
+                          shadow=True,
+                          title='Ciudades',
+                          title_fontsize='12')
+    fig_brecha.tight_layout(rect=[0, 0.1, 1, 0.95])
+    figuras.append(fig_brecha)
+
+    return figuras
+
+def load_data(city):
+    data = cities_data[city]
+    return [
+        data['desempleo_trimestral'],
+        data['ingresos_periodo'],
+        data['informal_periodo'],
+        data['actividad_trimestral'],
+        data['poblacion_ocupada']
+    ]
+
+def generate_plots(desempleo_df, ingresos_df, informal_df, actividad_df, poblacion_df):
+    dfs = {
+        'desempleo': pd.DataFrame(desempleo_df, columns=["Trimestre", "Total", "Hombres", "Mujeres"]),
+        'ingresos': pd.DataFrame(ingresos_df, columns=["Periodo", "Total", "Hombres", "Mujeres"]),
+        'informal': pd.DataFrame(informal_df, columns=["Periodo", "Total", "Hombres", "Mujeres"]),
+        'actividad': pd.DataFrame(actividad_df, columns=["Trimestre", "Total", "Hombres", "Mujeres"]),
+        'poblacion': pd.DataFrame(poblacion_df, columns=["Trimestre", "Total", "Hombres", "Mujeres"])
+    }
+
+    for key in dfs:
+        for col in ["Total", "Hombres", "Mujeres"]:
+            dfs[key][col] = pd.to_numeric(dfs[key][col], errors='coerce')
+
+    for key in dfs:
+        dfs[key] = ordenar_trimestres(dfs[key], 'Trimestre' if key in ['desempleo', 'actividad', 'poblacion'] else 'Periodo')
 
-def generar_analisis_global():
     figs = []
+
+    # Radar Plot
+    problem_metrics = {
+        'Desempleo': dfs['desempleo']['Total'].iloc[-1] if not dfs['desempleo'].empty else 0,
+        'Informalidad': dfs['informal']['Total'].iloc[-1] if not dfs['informal'].empty else 0,
+        'Brecha Salarial': (
+            (dfs['ingresos']['Hombres'].iloc[-1] - dfs['ingresos']['Mujeres'].iloc[-1]) /
+            dfs['ingresos']['Hombres'].iloc[-1] * 100
+            if not dfs['ingresos'].empty and pd.notna(dfs['ingresos']['Hombres'].iloc[-1]) and pd.notna(dfs['ingresos']['Mujeres'].iloc[-1]) else 0
+        ),
+        'Actividad': dfs['actividad']['Total'].iloc[-1] if not dfs['actividad'].empty else 0
+    }
+
+    categories = list(problem_metrics.keys())
+    values = list(problem_metrics.values())
+    angles = np.linspace(0, 2*np.pi, len(categories), endpoint=False).tolist()
+    values += values[:1]
+    angles += angles[:1]
+
+    fig_radar, ax_radar = plt.subplots(figsize=(10, 10), subplot_kw=dict(polar=True))
+    ax_radar.fill(angles, values, color=COLORES['Brecha'], alpha=0.2)
+    ax_radar.set_theta_offset(np.pi/2)
+    ax_radar.set_theta_direction(-1)
+    ax_radar.set_thetagrids(np.degrees(angles[:-1]), labels=categories)
+    ax_radar.set_rlabel_position(0)
+    plt.yticks([20,40,60,80], ["20%","40%","60%","80%"], color="grey", size=10)
+    plt.ylim(0,100)
+    ax_radar.set_title(f'RADAR DE PROBLEMÁTICAS LABORALES\n{dfs["desempleo"]["Trimestre"].iloc[-1]}',
+                      pad=20, fontsize=14, fontweight='bold')
+    figs.append(fig_radar)
+
+    # Gráficos principales
+    figs.append(graficar_datos_mejorados(dfs['desempleo'], 'TASA DE DESEMPLEO', 'Evolución por género', 'Tasa (%)'))
+    figs.append(graficar_datos_mejorados(dfs['ingresos'], 'INGRESOS PROMEDIO', 'Por período y género', 'Ingreso (soles)', col_fecha='Periodo', formato_valores='.0f'))
+    figs.append(graficar_datos_mejorados(dfs['informal'], 'TASA DE INFORMALIDAD', 'Por período', 'Tasa (%)', col_fecha='Periodo'))
+    figs.append(graficar_datos_mejorados(dfs['actividad'], 'TASA DE ACTIVIDAD', 'Participación económica', 'Tasa (%)'))
+    figs.append(graficar_datos_mejorados(dfs['poblacion'], 'POBLACIÓN OCUPADA', 'En miles de personas', 'Población (miles)'))
+
+    # Brecha Salarial
+    ingresos = dfs['ingresos']
+    brecha = []
+    for h, m in zip(ingresos['Hombres'], ingresos['Mujeres']):
+        if pd.notna(h) and pd.notna(m) and h != 0:
+            brecha.append((h-m)/h*100)
+        else:
+            brecha.append(np.nan)
     
-    # Gráfico comparativo de desempleo
-    figs.append(analisis_comparativo_desempleo())
-    
-    # Gráfico de tendencia de ingresos
-    datos_ingresos = []
-    for ciudad, data in cities_data.items():
-        nombre = normalizar_nombres_ciudades(ciudad)
-        df = pd.DataFrame(data['ingresos_periodo'], 
-                        columns=["Periodo", "Total", "Hombres", "Mujeres"])
-        df['Ciudad'] = nombre
-        datos_ingresos.append(df)
-    
-    df_ingresos = pd.concat(datos_ingresos)
-    fig_ingresos = px.line(df_ingresos, 
-                          x='Periodo', 
-                          y='Total', 
-                          color='Ciudad',
-                          title='Evolución de Ingresos por Ciudad',
-                          markers=True)
-    fig_ingresos.update_layout(height=600)
-    figs.append(fig_ingresos)
-    
-    # Gráfico de brecha salarial
-    datos_brecha = []
-    for ciudad, data in cities_data.items():
-        nombre = normalizar_nombres_ciudades(ciudad)
-        df = pd.DataFrame(data['ingresos_periodo'], 
-                        columns=["Periodo", "Total", "Hombres", "Mujeres"])
-        df['Brecha'] = (df['Hombres'] - df['Mujeres']) / df['Hombres'] * 100
-        df['Ciudad'] = nombre
-        datos_brecha.append(df)
+    fig_brecha, ax_brecha = plt.subplots(figsize=(14,8))
+    valid_indices = [i for i, b in enumerate(brecha) if pd.notna(b)]
+    valid_periods = [str(ingresos['Periodo'].iloc[i]) for i in valid_indices]
+    valid_brecha = [brecha[i] for i in valid_indices]
     
-    df_brecha = pd.concat(datos_brecha)
-    fig_brecha = px.bar(df_brecha, 
-                       x='Periodo', 
-                       y='Brecha', 
-                       color='Ciudad',
-                       barmode='group',
-                       title='Evolución de Brecha Salarial por Ciudad',
-                       text_auto='.1f%')
-    fig_brecha.update_layout(height=600)
+    if valid_periods:
+        bars = ax_brecha.bar(valid_periods, valid_brecha, color=COLORES['Brecha'])
+        for bar in bars:
+            height = bar.get_height()
+            ax_brecha.text(bar.get_x() + bar.get_width()/2., height + 0.5, 
+                          f'{height:.1f}%', ha='center', va='bottom', 
+                          fontsize=10, fontweight='bold')
+    ax_brecha.set_title('BRECHA SALARIAL DE GÉNERO', fontsize=18, pad=20)
+    ax_brecha.set_ylabel('Brecha (%)', fontsize=14)
+    ax_brecha.grid(axis='y', linestyle='--', alpha=0.7)
     figs.append(fig_brecha)
-    
+
     return figs
 
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue"), css=".gradio-container {background-color: white}") as app:
-    gr.Markdown("# 📊 Dashboard Interactivo de Mercado Laboral")
-    
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue"), css=".gradio-container {background-color: #F8F9F9}") as app:
+    gr.Markdown("# 📊 Dashboard de Indicadores Laborales por Género")
+    gr.Markdown("Analiza los principales indicadores del mercado laboral con perspectiva de género")
+
     with gr.Row():
-        ciudad = gr.Dropdown(
+        city = gr.Dropdown(
             list(cities_data.keys()),
-            label="Seleccionar Ciudad",
+            label="Seleccione una Ciudad",
             value="Chimbote",
-            interactive=True
+            info="Elija la ciudad para visualizar sus datos"
         )
-    
-    with gr.Tab("Análisis por Ciudad"):
+
+    with gr.Tab("Datos"):
+        with gr.Accordion("Tasa de Desempleo", open=True):
+            desempleo_df = gr.Dataframe(
+                headers=["Trimestre", "Total", "Hombres", "Mujeres"],
+                datatype=["str", "number", "number", "number"],
+                label="Datos de Desempleo"
+            )
+        with gr.Accordion("Ingresos", open=False):
+            ingresos_df = gr.Dataframe(
+                headers=["Periodo", "Total", "Hombres", "Mujeres"],
+                datatype=["str", "number", "number", "number"],
+                label="Datos de Ingresos"
+            )
+        with gr.Accordion("Informalidad", open=False):
+            informal_df = gr.Dataframe(
+                headers=["Periodo", "Total", "Hombres", "Mujeres"],
+                datatype=["str", "number", "number", "number"],
+                label="Datos de Informalidad"
+            )
+        with gr.Accordion("Actividad Económica", open=False):
+            actividad_df = gr.Dataframe(
+                headers=["Trimestre", "Total", "Hombres", "Mujeres"],
+                datatype=["str", "number", "number", "number"],
+                label="Datos de Actividad"
+            )
+        with gr.Accordion("Población Ocupada", open=False):
+            poblacion_df = gr.Dataframe(
+                headers=["Trimestre", "Total", "Hombres", "Mujeres"],
+                datatype=["str", "number", "number", "number"],
+                label="Datos de Población Ocupada"
+            )
+
+    btn = gr.Button("Generar Visualizaciones", variant="primary")
+
+    with gr.Tab("Visualizaciones"):
         with gr.Row():
-            desempleo_plot = gr.Plotly(label="Tasa de Desempleo")
-            ingresos_plot = gr.Plotly(label="Ingresos Promedio")
+            radar_plot = gr.Plot(label="Radar de Problemáticas Laborales")
         with gr.Row():
-            informalidad_plot = gr.Plotly(label="Tasa de Informalidad")
-            actividad_plot = gr.Plotly(label="Tasa de Actividad")
+            desempleo_plot = gr.Plot(label="Tasa de Desempleo")
         with gr.Row():
-            radar_plot = gr.Plotly(label="Radar de Indicadores")
-            brecha_plot = gr.Plotly(label="Brecha Salarial")
-    
-    with gr.Tab("Análisis Comparativo"):
+            ingresos_plot = gr.Plot(label="Ingresos Promedio")
+            brecha_salarial_plot = gr.Plot(label="Brecha Salarial de Género")
         with gr.Row():
-            global_desempleo = gr.Plotly(label="Comparativa de Desempleo")
+            informalidad_plot = gr.Plot(label="Tasa de Informalidad")
+            actividad_plot = gr.Plot(label="Tasa de Actividad")
         with gr.Row():
-            global_ingresos = gr.Plotly(label="Evolución de Ingresos")
-            global_brecha = gr.Plotly(label="Evolución de Brecha Salarial")
-    
-    @app.change(inputs=ciudad, outputs=[desempleo_plot, ingresos_plot, informalidad_plot, actividad_plot, radar_plot, brecha_plot])
-    def actualizar_graficos(ciudad):
-        data = cities_data[ciudad]
-        
-        dfs = {
-            'desempleo': procesar_dataframe(data['desempleo_trimestral'], ["Trimestre", "Total", "Hombres", "Mujeres"]),
-            'ingresos': procesar_dataframe(data['ingresos_periodo'], ["Periodo", "Total", "Hombres", "Mujeres"]),
-            'informal': procesar_dataframe(data['informal_periodo'], ["Periodo", "Total", "Hombres", "Mujeres"]),
-            'actividad': procesar_dataframe(data['actividad_trimestral'], ["Trimestre", "Total", "Hombres", "Mujeres"])
-        }
-        
-        return [
-            crear_grafico_lineas(dfs['desempleo'], "Tasa de Desempleo", "Porcentaje (%)", ".1f"),
-            crear_grafico_lineas(dfs['ingresos'], "Ingresos Promedio", "Soles", ".0f"),
-            crear_grafico_lineas(dfs['informal'], "Tasa de Informalidad", "Porcentaje (%)", ".1f"),
-            crear_grafico_lineas(dfs['actividad'], "Tasa de Actividad", "Porcentaje (%)", ".1f"),
-            crear_radar_plot(dfs),
-            crear_grafico_lineas(dfs['ingresos'].assign(Brecha=lambda x: (x['Hombres'] - x['Mujeres']) / x['Hombres'] * 100), 
-                               "Brecha Salarial de Género", "Porcentaje (%)", ".1f")
+            poblacion_plot = gr.Plot(label="Población Ocupada")
+
+    with gr.Tab("Análisis Global"):
+        gr.Markdown("## Análisis Comparativo entre Ciudades")
+        global_btn = gr.Button("Generar Análisis Global", variant="primary")
+        with gr.Row():
+            global_desempleo_plot = gr.Plot(label="Comparativa de Desempleo")
+        with gr.Row():
+            global_ingresos_plot = gr.Plot(label="Comparativa de Ingresos")
+        with gr.Row():
+            global_brecha_plot = gr.Plot(label="Comparativa de Brecha Salarial")
+
+    city.change(
+        fn=load_data,
+        inputs=city,
+        outputs=[desempleo_df, ingresos_df, informal_df, actividad_df, poblacion_df]
+    )
+
+    btn.click(
+        fn=generate_plots,
+        inputs=[desempleo_df, ingresos_df, informal_df, actividad_df, poblacion_df],
+        outputs=[
+            radar_plot,
+            desempleo_plot,
+            ingresos_plot,
+            informalidad_plot,
+            actividad_plot,
+            poblacion_plot,
+            brecha_salarial_plot
         ]
-    
-    @app.click(inputs=None, outputs=[global_desempleo, global_ingresos, global_brecha])
-    def actualizar_analisis_global():
-        return generar_analisis_global()
+    )
+
+    global_btn.click(
+        fn=generar_analisis_global,
+        inputs=[],
+        outputs=[global_desempleo_plot, global_ingresos_plot, global_brecha_plot]
+    )
 
 app.launch(debug=True)