Update app.py

app.py

@@ -1,5 +1,5 @@
 import streamlit as st
-import matplotlib.pyplot as plt
+import pandas as pd
 
 # Configuración de la página
 st.set_page_config(page_title="Generador de Gráficos", layout="wide")
@@ -17,22 +17,6 @@ st.markdown(
     .css-1d391kg {
         padding: 2rem 1rem 1rem 1rem;
     }
-    .stButton>button {
-        background-color: #4CAF50;
-        color: white;
-        border: none;
-        padding: 10px 24px;
-        text-align: center;
-        text-decoration: none;
-        display: inline-block;
-        font-size: 16px;
-        margin: 4px 2px;
-        cursor: pointer;
-        border-radius: 12px;
-    }
-    .stButton>button:hover {
-        background-color: #45a049;
-    }
     </style>
     """,
     unsafe_allow_html=True,
@@ -56,20 +40,41 @@ y = [int(i) for i in y_values.split(",")]
 if len(x) != len(y):
     st.error("Los valores de X y Y deben tener la misma cantidad de elementos.")
 else:
-    # Generar el gráfico basado en el tipo seleccionado
-    if chart_type == "Línea":
-        fig, ax = plt.subplots()
-        ax.plot(x, y, color='#FF5C5C', linewidth=2)
-        ax.set_title("Line Chart", fontsize=20, fontweight='bold')
-        ax.grid(True, linestyle='--', alpha=0.5)
-        st.pyplot(fig)
+    # Convertir los datos a un formato JSON para ApexCharts
+    data = [{"x": x[i], "y": y[i]} for i in range(len(x))]
 
+    # Definir el tipo de gráfico
+    if chart_type == "Línea":
+        chart_type_js = "line"
     elif chart_type == "Barras":
-        fig, ax = plt.subplots()
-        ax.bar(x, y, color='#5CCFFF', edgecolor='blue', linewidth=2)
-        ax.set_title("Bar Chart", fontsize=20, fontweight='bold')
-        ax.grid(True, linestyle='--', alpha=0.5)
-        st.pyplot(fig)
+        chart_type_js = "bar"
+
+    # Crear el gráfico con ApexCharts
+    st.markdown(
+        f"""
+        <div id="chart"></div>
+        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+        <script>
+        var options = {{
+            chart: {{
+                type: '{chart_type_js}',
+                height: 350
+            }},
+            series: [{{
+                name: 'Valores',
+                data: {data}
+            }}],
+            xaxis: {{
+                type: 'category'
+            }}
+        }};
+
+        var chart = new ApexCharts(document.querySelector("#chart"), options);
+        chart.render();
+        </script>
+        """,
+        unsafe_allow_html=True,
+    )
 
 # Información adicional
-st.write("Este es un generador básico de gráficos utilizando Streamlit en Hugging Face Spaces.")
+st.write("Este es un generador básico de gráficos utilizando Streamlit y ApexCharts en Hugging Face Spaces.")