Update app.py

app.py

@@ -1,10 +1,11 @@
 import streamlit as st
 import plotly.express as px
 import pandas as pd
+import numpy as np
 from datetime import datetime
 
 # Configuración de la página
-st.set_page_config(page_title="Generador de Franjas de Tiempo Apiladas", layout="wide")
+st.set_page_config(page_title="Generador de Gráficos Personalizado", layout="wide")
 
 # Función para convertir HEX a RGBA con transparencia
 def hex_to_rgba(hex_color, alpha=1.0):
@@ -26,66 +27,219 @@ font_options = [
 st.sidebar.header("Configuración del Gráfico")
 
 # Título del gráfico
-chart_title = st.sidebar.text_input("Título del Gráfico", "Gráfico de Franjas de Tiempo Apiladas")
-
-# Seleccionar formato de tiempo
-time_format = st.sidebar.selectbox("Formato de Tiempo", ["Día", "Mes", "Año"])
-
-# Ingresar valores para franjas de tiempo
-y_values = {
-    'Y-1': ('2021-01-01', '2022-12-31'),
-    'Y-2': ('2020-01-01', '2021-12-31'),
-    'Y-3': ('2023-01-01', '2024-12-31')
-}
-
-# Crear el DataFrame con franjas de tiempo
-data_list = []
-for y_name, (start_date, end_date) in y_values.items():
-    data_list.append({
-        'Variable': y_name,
-        'Start': datetime.strptime(start_date, '%Y-%m-%d'),
-        'End': datetime.strptime(end_date, '%Y-%m-%d')
-    })
-
-data = pd.DataFrame(data_list)
-
-# Convertir el DataFrame para el gráfico
-data['Duration'] = data['End'] - data['Start']
-data['Start'] = pd.to_datetime(data['Start'])
-data['End'] = pd.to_datetime(data['End'])
-
-# Crear gráfico
-fig = px.timeline(data, x_start="Start", x_end="End", y="Variable", color="Variable", title=chart_title)
-fig.update_yaxes(categoryorder="total ascending")
-
-# Personalizar el formato de tiempo en el eje X
-if time_format == "Día":
-    tickformat = "%d-%m-%Y"
-elif time_format == "Mes":
-    tickformat = "%Y-%m"
+chart_title = st.sidebar.text_input("Título del Gráfico", "Generador de Gráfico")
+
+# Tipo de gráfico
+chart_type = st.sidebar.selectbox("Tipo de Gráfico", ["Línea", "Área", "Dispersión", "Barras", "Donut", "Línea temporal"])
+
+# Función para generar rangos de fechas
+def generate_date_range(start_date, end_date, freq):
+    return pd.date_range(start=start_date, end=end_date, freq=freq).strftime('%Y-%m-%d').tolist()
+
+if chart_type == "Línea temporal":
+    time_unit = st.sidebar.selectbox("Unidad de tiempo", ["Días", "Meses", "Años"])
+    
+    if time_unit == "Días":
+        start_date = st.sidebar.date_input("Fecha de inicio", datetime(2023, 1, 1))
+        end_date = st.sidebar.date_input("Fecha de fin", datetime(2023, 12, 31))
+        x = generate_date_range(start_date, end_date, 'D')
+    elif time_unit == "Meses":
+        start_date = st.sidebar.date_input("Fecha de inicio", datetime(2023, 1, 1))
+        end_date = st.sidebar.date_input("Fecha de fin", datetime(2023, 12, 31))
+        x = generate_date_range(start_date, end_date, 'M')
+    elif time_unit == "Años":
+        start_year = st.sidebar.number_input("Año de inicio", min_value=2000, max_value=2100, value=2020)
+        end_year = st.sidebar.number_input("Año de fin", min_value=2000, max_value=2100, value=2023)
+        x = [str(year) for year in range(start_year, end_year + 1)]
 else:
-    tickformat = "%Y"
-
-fig.update_layout(
-    xaxis_title="Tiempo",
-    yaxis_title="Variables",
-    xaxis=dict(
-        tickformat=tickformat,
-        titlefont=dict(size=14),
-        tickfont=dict(size=12),
-    ),
-    yaxis=dict(
-        titlefont=dict(size=14),
-        tickfont=dict(size=12),
-    ),
-    width=800,
-    height=600,
+    # Ingresar valores para los ejes
+    x_values = st.sidebar.text_area("Valores para X (separados por comas)", "2013,2014,2015,2016,2017,2018")
+    x = x_values.split(",")
+
+# Selector de número de variables Y
+num_y_vars = st.sidebar.number_input("Número de variables Y", min_value=1, max_value=100, value=1, step=1, key="num_y_vars")
+y_values_list = []
+y_names_list = []
+for i in range(num_y_vars):
+    if f"y_values_{i}" not in st.session_state:
+        st.session_state[f"y_values_{i}"] = ','.join([str(np.random.randint(1, 25)) for _ in x])
+    y_values = st.sidebar.text_area(f"Valores para Y-{i+1} (separados por comas)", st.session_state[f"y_values_{i}"], key=f"y_values_{i}")
+    y_name = st.sidebar.text_input(f"Nombre de la Variable Y-{i+1}", f"Variable Y-{i+1}", key=f"y_name_{i}")
+    y_values_list.append(y_values)
+    y_names_list.append(y_name)
+
+# Etiquetas personalizadas para los ejes
+x_label = st.sidebar.text_input("Etiqueta para el eje X", "X")
+y_label = st.sidebar.text_input("Etiqueta para el eje Y", "Y")
+
+# Desplegable de opciones adicionales
+with st.sidebar.expander("Opciones Adicionales"):
+    graph_width = st.slider("Ancho del Gráfico", min_value=400, max_value=1000, value=800, step=50)
+    graph_height = st.slider("Alto del Gráfico", min_value=300, max_value=800, value=600, step=50)
+    font_family = st.selectbox("Fuente", font_options, index=font_options.index("Times New Roman"))
+    show_legend = st.checkbox("Mostrar Leyenda", value=True)
+    opacity = st.slider("Opacidad (%)", min_value=0, max_value=100, value=30, step=1) / 100
+    border_width = st.slider("Grosor del Borde", min_value=0.0, max_value=3.0, value=1.5, step=0.1)
+    border_opacity = st.slider("Opacidad del Borde (%)", min_value=0, max_value=100, value=60, step=1) / 100
+    if chart_type == "Barras" and num_y_vars > 1:
+        stacked_bars = st.checkbox("Superpuestas", key="stacked_bars")
+    else:
+        stacked_bars = False
+    if chart_type == "Barras":
+        horizontal_bars = st.checkbox("Invertidas", key="horizontal_bars")
+    if chart_type == "Donut":
+        hole_size = st.slider("Tamaño del agujero (%)", min_value=0, max_value=100, value=30, step=1) / 100
+
+# Opción para múltiples colores (siempre activada para Donut)
+use_multiple_colors = st.sidebar.checkbox("Usar múltiples colores", value=True if chart_type == "Donut" or num_y_vars > 1 else False, key="use_multiple_colors")
+
+# Seleccionar color(es) para el gráfico
+selected_color = st.sidebar.color_picker("Color", "#24CBA0", key="single_color")
+
+# Definir colores
+if use_multiple_colors:
+    num_colors = len(x)
+    colors = [hex_to_rgba(st.sidebar.color_picker(f"Color {i+1}", predefined_colors[i % len(predefined_colors)], key=f"color_{i}"), alpha=opacity)
+              for i in range(num_colors)]
+    border_colors = [hex_to_rgba(st.sidebar.color_picker(f"Color de Borde {i+1}", predefined_colors[i % len(predefined_colors)], key=f"border_color_{i}"), alpha=border_opacity)
+                     for i in range(num_colors)]
+else:
+    color = hex_to_rgba(selected_color, alpha=opacity)
+    border_color = hex_to_rgba(selected_color, alpha=border_opacity)
+    colors = [color] * len(x)  # Definir colors para casos donde no se usa múltiple colores
+
+# Procesar valores
+y_values_lists = [[float(i) for i in y_values.split(",") if i.strip()] for y_values in y_values_list]
+
+# Asegurar que todas las listas de Y tengan el mismo tamaño que X
+for y_values in y_values_lists:
+    while len(y_values) < len(x):
+        y_values.append(0)
+    while len(y_values) > len(x):
+        y_values.pop()
+
+# Crear un DataFrame
+data = pd.DataFrame({"X": x})
+for idx, y_set in enumerate(y_values_lists):
+    data[y_names_list[idx]] = y_set
+
+# Configuración común para todos los gráficos
+common_layout = dict(
+    xaxis_title=x_label,
+    yaxis_title=y_label,
+    plot_bgcolor="white",
+    hovermode="x unified",
+    width=graph_width,
+    height=graph_height,
     margin=dict(l=60, r=40, t=100, b=40),
-    font=dict(family="Times New Roman", size=18, color="black")
+    xaxis=dict(showgrid=True, zeroline=True, gridcolor='rgba(211,211,211,0.5)', zerolinecolor='rgba(128,128,128,0.5)', autorange=True),
+    yaxis=dict(showgrid=True, zeroline=True, gridcolor='rgba(211,211,211,0.5)', zerolinecolor='rgba(128,128,128,0.5)', autorange=True),
+    font=dict(family=font_family, size=18, color="black"),
+    showlegend=show_legend,
+    legend=dict(orientation="v", yanchor="top", y=1, xanchor="left", x=1.02)
 )
 
-# Mostrar el gráfico
-st.plotly_chart(fig)
+# Personalizar el hovertemplate
+hovertemplate = '<b>%{y}</b>'
+
+# Generar el gráfico basado en el tipo seleccionado
+if chart_type == "Línea":
+    fig = px.line(data, x="X", y=y_names_list, line_shape="spline")
+    fig.update_traces(hovertemplate=hovertemplate)
+    if use_multiple_colors:
+        for i, name in enumerate(y_names_list):
+            fig.update_traces(selector=dict(name=name), line_color=colors[i % len(colors)])
+    else:
+        fig.update_traces(line_color=color)
+elif chart_type == "Área":
+    fig = px.area(data, x="X", y=y_names_list, line_shape="spline")
+    fig.update_traces(hovertemplate=hovertemplate)
+    if use_multiple_colors:
+        for i, name in enumerate(y_names_list):
+            fig.update_traces(selector=dict(name=name), line_color=colors[i % len(colors)], fillcolor=colors[i % len(colors)])
+    else:
+        fig.update_traces(line_color=color, fillcolor=color)
+elif chart_type == "Dispersión":
+    fig = px.scatter(data, x="X", y=y_names_list)
+    fig.update_traces(hovertemplate=hovertemplate)
+    if use_multiple_colors:
+        for i, name in enumerate(y_names_list):
+            fig.update_traces(selector=dict(name=name), marker_color=colors[i % len(colors)], marker_line_color=border_colors[i % len(border_colors)], marker_line_width=border_width)
+    else:
+        fig.update_traces(marker_color=color, marker_line_color=border_color, marker_line_width=border_width)
+elif chart_type == "Barras":
+    if horizontal_bars:
+        fig = px.bar(data, y="X", x=y_names_list, orientation='h', barmode='stack' if stacked_bars else 'group')
+    else:
+        fig = px.bar(data, x="X", y=y_names_list, barmode='stack' if stacked_bars else 'group')
+    fig.update_traces(hovertemplate=hovertemplate)
+    if use_multiple_colors:
+        if len(y_names_list) == 1:  # Solo una variable Y
+            fig.update_traces(marker_color=colors[:len(x)], marker_line_color=border_colors[:len(x)], marker_line_width=border_width)
+        else:
+            for i, trace in enumerate(fig.data):
+                trace.marker.color = colors[i % len(colors)]
+                trace.marker.line.color = border_colors[i % len(border_colors)]
+                trace.marker.line.width = border_width
+    else:
+        fig.update_traces(marker_color=color, marker_line_color=border_color, marker_line_width=border_width)
+    fig.update_layout(bargap=0.2)
+elif chart_type == "Donut":
+    figs = []
+    for i, y_name in enumerate(y_names_list):
+        fig = px.pie(data, values=y_name, names="X", hole=hole_size, color_discrete_sequence=colors[:len(x)])
+        fig.update_traces(hovertemplate='<b>%{label}</b>: %{value} (%{percent})', textinfo='percent+label')
+        fig.update_layout(
+            title=dict(
+                text=f"{chart_title}<br><sub>{y_name}</sub>" if len(y_names_list) > 1 else chart_title,
+                x=0.5,
+                y=0.95,
+                xanchor='center',
+                yanchor='top',
+                font=dict(
+                    family=font_family,
+                    size=18,
+                    color="#374151",
+                    weight="normal"
+                )
+            ),
+            **common_layout
+        )
+        figs.append(fig)
+    for fig in figs:
+        st.plotly_chart(fig)
+
+# Añadir anotación para el título
+if chart_type != "Donut":
+    fig.update_layout(
+        title=dict(
+            text=f"{chart_title}",
+            x=0.5,
+            y=0.95,
+            xanchor='center',
+            yanchor='top',
+            font=dict(
+                family=font_family,
+                size=18,
+                color="#374151",
+                weight="normal"
+            )
+        )
+    )
+    
+    # Aplicar configuración común
+    fig.update_layout(**common_layout)
+    
+    # Aplicar múltiples colores si se seleccionó la opción
+    if use_multiple_colors and chart_type != "Donut":
+        for i, trace in enumerate(fig.data):
+            trace.update(marker_color=colors[i % len(colors)], marker_line_color=border_colors[i % len(border_colors)], marker_line_width=border_width)
+    
+    # Mostrar el gráfico
+    st.plotly_chart(fig)
+
+    # Forzar el autoescale
+    fig.update_layout(xaxis_autorange=True, yaxis_autorange=True)
 
 # Información adicional
 st.write("Aquí puede añadir información adicional sobre los gráficos generados.")