Update app.py

app.py

@@ -1,27 +1,10 @@
 import streamlit as st
+import plotly.express as px
 import pandas as pd
 
 # Configuración de la página
 st.set_page_config(page_title="Generador de Gráficos", layout="wide")
 
-# Estilo de la aplicación
-st.markdown(
-    """
-    <style>
-    .sidebar .sidebar-content {
-        background-color: #f0f2f6;
-    }
-    .css-1aumxhk {
-        display: none;
-    }
-    .css-1d391kg {
-        padding: 2rem 1rem 1rem 1rem;
-    }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
-
 # Sidebar para la configuración del gráfico
 st.sidebar.header("Configuración del Gráfico")
 
@@ -30,7 +13,7 @@ chart_type = st.sidebar.selectbox("Tipo de Gráfico", ["Línea", "Barras"])
 
 # Ingresar valores para el eje X
 x_values = st.sidebar.text_area("Valores para X (separados por comas)", "2013,2014,2015,2016,2017")
-x = [int(i) for i in x_values.split(",")]
+x = x_values.split(",")
 
 # Ingresar valores para el eje Y
 y_values = st.sidebar.text_area("Valores para Y (separados por comas)", "10,18,5,9,12")
@@ -40,41 +23,17 @@ 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:
-    # Convertir los datos a un formato JSON para ApexCharts
-    data = [{"x": x[i], "y": y[i]} for i in range(len(x))]
+    # Crear un DataFrame
+    data = pd.DataFrame({"X": x, "Y": y})
 
-    # Definir el tipo de gráfico
+    # Generar el gráfico basado en el tipo seleccionado
     if chart_type == "Línea":
-        chart_type_js = "line"
+        fig = px.line(data, x="X", y="Y", title="Line Chart")
     elif chart_type == "Barras":
-        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'
-            }}
-        }};
+        fig = px.bar(data, x="X", y="Y", title="Bar Chart")
 
-        var chart = new ApexCharts(document.querySelector("#chart"), options);
-        chart.render();
-        </script>
-        """,
-        unsafe_allow_html=True,
-    )
+    # Mostrar el gráfico
+    st.plotly_chart(fig)
 
 # Información adicional
-st.write("Este es un generador básico de gráficos utilizando Streamlit y ApexCharts en Hugging Face Spaces.")
+st.write("Este es un generador básico de gráficos utilizando Streamlit y Plotly.")