Dashboards Interactivos con StreamlitStreamlit

import streamlit as st
import pandas as pd
import numpy as np
import plotly.graph_objects as go
from streamlit_option_menu import option_menu
from datetime import datetime

# Configuración de página
st.set_page_config(
    page_title="Dashboard Profesional",
    layout="wide",
    initial_sidebar_state="expanded",
    page_icon="📊"
)

# Cargar estilos CSS desde archivo externo
with open("estilos.css") as f:
    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

# SIDEBAR con contenido centrado
with st.sidebar:
    st.markdown('<div class="sidebar-content">', unsafe_allow_html=True)
    st.image("imagen1.png", width=200)
    st.markdown('<div class="sidebar-name">Jesica Gimenez</div>', unsafe_allow_html=True)
    st.markdown('<div class="sidebar-role">Analista de Datos</div>', unsafe_allow_html=True)
    selected = option_menu(
        menu_title=None,
        options=["Inicio", "Dashboard", "Configuración"],
        icons=["house", "bar-chart-line", "gear"],
        menu_icon="cast",
        default_index=1,
        orientation="vertical",
        styles={
            "container": {"padding": "0!important", "background-color": "#1e1e2f", "width":"100%"},
            "icon": {"color": "#8e8e8e", "font-size": "18px"},
            "nav-link": {"font-size": "16px", "text-align": "center", "margin":"5px 0", "--hover-color": "#6200ea"},
            "nav-link-selected": {"background-color": "#bb86fc", "color": "#121212"},
        }
    )
    st.markdown('</div>', unsafe_allow_html=True)

# Datos ficticios
np.random.seed(42)
dates = pd.date_range(end=datetime.today(), periods=30)
visits = np.random.poisson(lam=11000, size=30) + np.linspace(0, 5000, 30).astype(int)
conversion_labels = ['Orgánico', 'Pago', 'Referido', 'Directo']
conversion_values = [45, 25, 15, 15]
categories = ['Tecnología', 'Moda', 'Hogar', 'Libros', 'Deportes']
cat_values = [2100, 1800, 1600, 1400, 1200]
heatmap_data = np.random.randint(0, 100, size=(7, 24))
days = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom']
hours = [f"{h}:00" for h in range(24)]
kpi_values = [78, 54, 92]
kpi_labels = ["Satisfacción", "Retención", "Crecimiento"]

# Gráficos
def circular_progress(value, label, color):
    fig = go.Figure(go.Indicator(
        mode="gauge+number",
        value=value,
        domain={'x': [0, 1], 'y': [0, 1]},
        title={'text': label, 'font': {'size': 16}},
        gauge={
            'axis': {'range': [0, 100], 'visible': False},
            'bar': {'color': color},
            'bgcolor': "#3a3a65",
            'borderwidth': 0,
            'threshold': {
                'line': {'color': "white", 'width': 2},
                'thickness': 0.75,
                'value': value}
        }
    ))
    fig.update_layout(
        margin=dict(l=0, r=0, t=20, b=0),
        height=140,
        paper_bgcolor="#29294a",
        font=dict(color="white", family="Montserrat")
    )
    return fig

def radar_chart(labels, values):
    fig = go.Figure()
    fig.add_trace(go.Scatterpolar(
        r=values,
        theta=labels,
        fill='toself',
        line_color='#bb86fc'
    ))
    fig.update_layout(
        polar=dict(
            bgcolor='#29294a',
            radialaxis=dict(visible=True, range=[0, 100], gridcolor='gray'),
            angularaxis=dict(gridcolor='gray')
        ),
        showlegend=False,
        margin=dict(l=10, r=10, t=25, b=10),
        paper_bgcolor="#29294a",
        font=dict(color="white", family="Montserrat"),
        height=250,
    )
    return fig

# MAIN
if selected == "Inicio":
    show_inicio()
elif selected == "Dashboard":
    show_dashboard()
else:
    show_configuracion()