Update modules/studentact/current_situation_interface.py

modules/studentact/current_situation_interface.py

@@ -111,11 +111,11 @@ def display_current_situation_interface(lang_code, nlp_models, t):
 
 def display_results(metrics):
     """
-    Muestra los resultados del análisis: métricas y gráfico radar.
+    Muestra los resultados del análisis: métricas verticalmente y gráfico radar.
     """
     try:
-        # Métricas en una fila con columnas uniformes
-        metric_cols = st.columns(4, gap="small")
+        # Crear dos columnas para métricas y gráfico
+        metrics_col, graph_col = st.columns([1, 1.5])
         
         metrics_config = [
             ("Vocabulario", metrics['vocabulary']['normalized_score'], "Riqueza y variedad del vocabulario"),
@@ -124,21 +124,33 @@ def display_results(metrics):
             ("Claridad", metrics['clarity']['normalized_score'], "Facilidad de comprensión del texto")
         ]
 
-        # Mostrar métricas
-        for i, (label, value, help_text) in enumerate(metrics_config):
-            metric_cols[i].metric(
-                label,
-                f"{value:.2f}",
-                "Meta: 1.00",
-                delta_color="off",
-                help=help_text
-            )
-
-        # Espacio entre métricas y gráfico
-        st.markdown("<div style='margin-top: 1rem;'></div>", unsafe_allow_html=True)
-
-        # Gráfico radar centrado
-        left_space, graph_col, right_space = st.columns([1, 2, 1])
+        # Mostrar métricas verticalmente
+        with metrics_col:
+            # Contenedor con bordes para las métricas
+            st.markdown("""
+                <style>
+                .metric-container {
+                    background-color: #ffffff;
+                    padding: 1rem;
+                    border-radius: 0.5rem;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                    margin-bottom: 0.5rem;
+                }
+                </style>
+            """, unsafe_allow_html=True)
+            
+            for label, value, help_text in metrics_config:
+                with st.container():
+                    st.metric(
+                        label,
+                        f"{value:.2f}",
+                        "Meta: 1.00",
+                        delta_color="off",
+                        help=help_text
+                    )
+                    st.markdown("<div style='margin-bottom: 1rem;'></div>", unsafe_allow_html=True)
+
+        # Gráfico radar en la columna derecha
         with graph_col:
             # Preparar datos para el gráfico
             categories = [m[0] for m in metrics_config]
@@ -146,7 +158,7 @@ def display_results(metrics):
             values_pattern = [1.0] * len(categories)
 
             # Crear y configurar gráfico
-            fig = plt.figure(figsize=(6, 6))
+            fig = plt.figure(figsize=(8, 8))  # Aumentado el tamaño
             ax = fig.add_subplot(111, projection='polar')
 
             # Configurar gráfico radar
@@ -157,18 +169,28 @@ def display_results(metrics):
 
             # Configurar ejes
             ax.set_xticks(angles[:-1])
-            ax.set_xticklabels(categories, fontsize=8)
+            ax.set_xticklabels(categories, fontsize=10)  # Aumentado el tamaño de fuente
             circle_ticks = np.arange(0, 1.1, 0.2)
             ax.set_yticks(circle_ticks)
             ax.set_yticklabels([f'{tick:.1f}' for tick in circle_ticks], fontsize=8)
             ax.set_ylim(0, 1)
 
-            # Dibujar gráfico
-            ax.plot(angles, values_pattern, 'g--', linewidth=1, label='Patrón', alpha=0.5)
-            ax.fill(angles, values_pattern, 'g', alpha=0.1)
-            ax.plot(angles, values_user, 'b-', linewidth=2, label='Tu escritura')
-            ax.fill(angles, values_user, 'b', alpha=0.2)
-            ax.legend(loc='upper right', bbox_to_anchor=(0.1, 0.1), fontsize=8)
+            # Dibujar gráfico con colores mejorados
+            ax.plot(angles, values_pattern, '#2ecc71', linestyle='--', linewidth=1, label='Patrón', alpha=0.5)
+            ax.fill(angles, values_pattern, '#2ecc71', alpha=0.1)
+            ax.plot(angles, values_user, '#3498db', linewidth=2, label='Tu escritura')
+            ax.fill(angles, values_user, '#3498db', alpha=0.2)
+            
+            # Ajustar leyenda
+            ax.legend(
+                loc='upper right', 
+                bbox_to_anchor=(0.1, 0.1), 
+                fontsize=10,
+                frameon=True,
+                facecolor='white',
+                edgecolor='none',
+                shadow=True
+            )
 
             plt.tight_layout()
             st.pyplot(fig)