app.py

import streamlit as st
import plotly.express as px
import pandas as pd
from datetime import datetime, timedelta

# Configuración de la página
st.set_page_config(page_title="Generador de Franjas de Tiempo", layout="wide")

# Función para convertir HEX a RGBA con transparencia
def hex_to_rgba(hex_color, alpha=1.0):
    hex_color = hex_color.lstrip('#')
    return f'rgba({int(hex_color[0:2], 16)},{int(hex_color[2:4], 16)},{int(hex_color[4:6], 16)},{alpha})'

# Colores predefinidos
predefined_colors = [
    "#FF5C5C", "#5CCFFF", "#FFA500", "#90EE90", "#9370DB", "#FFD700"
]

# Lista de fuentes más utilizadas
font_options = [
    "Times New Roman", "Arial", "Helvetica", "Calibri", "Verdana", 
    "Tahoma", "Georgia", "Garamond", "Courier New", "Brush Script MT"
]

# Sidebar para la configuración del gráfico
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")

# Seleccionar formato de tiempo
time_format = st.sidebar.selectbox("Formato de Tiempo", ["Año", "Mes y Año"])

# Ingresar valores para franjas de tiempo
num_y_vars = st.sidebar.number_input("Número de Variables Y", min_value=1, max_value=30, value=3, step=1)

y_values = {}
for i in range(num_y_vars):
    year = 2020 + i % 10  # Esto asegura que el año sea siempre válido
    y_start = st.sidebar.text_input(f"Fecha de Inicio para Y-{i+1} (YYYY-MM-DD)", key=f"y_start_{i}", value=f"{year}-01-01")
    y_end = st.sidebar.text_input(f"Fecha de Fin para Y-{i+1} (YYYY-MM-DD)", key=f"y_end_{i}", value=f"{year + 1}-12-31")
    y_name = st.sidebar.text_input(f"Nombre de la Variable Y-{i+1}", key=f"y_name_{i}", value=f"Y-{i+1}")
    y_values[y_name] = (y_start, y_end)

# Personalizar las etiquetas de los ejes
x_axis_label = st.sidebar.text_input("Etiqueta para el Eje X", "Tiempo")
y_axis_label = st.sidebar.text_input("Etiqueta para el Eje Y", "Variables")

# Opciones adicionales
with st.sidebar.expander("Opciones Adicionales"):
    superposed = st.checkbox("Superpuestas", value=False)
    bar_width = st.slider("Ancho de la Barra de Variable", min_value=0.1, max_value=1.0, value=0.5, step=0.1)
    show_grid = st.checkbox("Mostrar Líneas de Rejilla", value=True)
    opacity = st.slider("Opacidad (%)", min_value=0, max_value=100, value=100, step=1) / 100
    border_width = st.slider("Grosor del Borde", min_value=0.0, max_value=3.0, value=1.0, step=0.1)
    border_opacity = st.slider("Opacidad del Borde (%)", min_value=0, max_value=100, value=100, step=1) / 100

# Opción para múltiples colores
use_multiple_colors = st.sidebar.checkbox("Usar múltiples colores", value=True, 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:
    colors = [st.sidebar.color_picker(f"Color {i+1}", predefined_colors[i % len(predefined_colors)], key=f"color_{i}")
              for i in range(num_y_vars)]
else:
    color = selected_color
    colors = [color] * num_y_vars  # Definir colors para casos donde no se usa múltiple colores

# Crear el DataFrame con franjas de tiempo
data_list = []
for idx, (y_name, (start_date, end_date)) in enumerate(y_values.items()):
    if start_date and end_date and y_name:
        color_with_opacity = hex_to_rgba(colors[idx], opacity)
        border_color_with_opacity = hex_to_rgba(colors[idx], border_opacity)
        data_list.append({
            'Variable': y_name,
            'Start': datetime.strptime(start_date, '%Y-%m-%d'),
            'End': datetime.strptime(end_date, '%Y-%m-%d'),
            'Category': '' if superposed else y_name,  # Cambiar categoría dependiendo de la opción seleccionada
            'Color': color_with_opacity,  # Asignar color a cada variable con opacidad
            'Border Width': border_width,
            'Border Color': border_color_with_opacity,  # Asignar color del borde con opacidad
            'Custom Hover': f'{y_name} ({start_date} - {end_date})'  # Texto personalizado para el hover
        })

data = pd.DataFrame(data_list)

# Ajustar fechas para simular apilamiento si está activado
if superposed:
    offset = timedelta(days=1)  # Ajusta el offset según el tamaño de la columna seleccionado
    for i in range(1, len(data)):
        data.loc[i, 'Start'] = data.loc[i-1, 'End']
        data.loc[i, 'End'] = data.loc[i, 'Start'] + (data.loc[i, 'End'] - data.loc[i, 'Start'])
    data['Category'] = ' '  # Usar una cadena vacía para ocultar el texto "Superpuestas"

# Crear gráfico de franjas de tiempo
fig = px.timeline(data, x_start="Start", x_end="End", y="Category", color="Variable", title=chart_title,
                  hover_data={'Variable': False, 'Start': False, 'End': False, 'Category': False, 'Custom Hover': True})

# Actualizar los colores y estilos de las franjas
for idx, row in data.iterrows():
    fig.data[idx].update(marker_color=row['Color'])
    fig.data[idx].update(marker_line=dict(width=row['Border Width'], color=row['Border Color']))
    fig.data[idx].update(hovertemplate=row['Custom Hover'])  # Usar el texto personalizado para el hover

# Ajustar el ancho de las barras si están superpuestas
if superposed:
    fig.update_traces(marker=dict(line_width=bar_width * 5))  # Ajusta el ancho de la barra en modo superpuesto

# Personalizar el formato de tiempo en el eje X
if time_format == "Año":
    tickformat = "%Y"
    dtick = "M12"  # Intervalo de 1 año
else:  # "Mes y Año"
    tickformat = "%b %Y"
    dtick = "M1"  # Intervalo de 1 mes

# Configuración de líneas de rejilla
grid_style = dict(showgrid=show_grid)

fig.update_layout(
    xaxis_title=x_axis_label,
    yaxis_title=y_axis_label,
    xaxis=dict(
        tickformat=tickformat,
        dtick=dtick,
        titlefont=dict(size=14),
        tickfont=dict(size=12),
        **grid_style
    ),
    yaxis=dict(
        titlefont=dict(size=14),
        tickfont=dict(size=12),
        **grid_style
    ),
    width=800,
    height=600,
    margin=dict(l=60, r=40, t=100, b=40),
    bargap=1-bar_width,  # Controlar el ancho de la barra con el bargap
    font=dict(family="Times New Roman", size=18, color="#374151"),  # Configuración de la fuente y color
    title=dict(
        text=chart_title,
        x=0.5,
        y=0.95,
        xanchor='center',
        yanchor='top',
        font=dict(
            family="Times New Roman",
            size=18,
            color="#374151",
            weight="normal"
        )
    ),
    legend_title_text=''  # Eliminar el texto del título de la leyenda
)

# Mostrar el gráfico
st.plotly_chart(fig)

# Información adicional
st.write("")