Crear un dashboard con streamlit

Esta aplicación se desarrolla siguiendo la documentación oficial de Streamlit.io.

Instala una version actual de lenguaje de programacion python 3.x.x.

Instala desde la terminal el framework para crear interfaces de usuario python, llamado Streamlit.

$ python -m pip install streamlit
  • Python 3.xxx

  • Streamlit
  • Pymongo
  • Plotly
  • Pandas

Editar archivo database.py

from pymongo import MongoClient

def get_connection():
    client = MongoClient("mongodb://localhost:27017/")
    db = client["coppel"]  # nombre de tu base de datos
    return db

def get_ventas(db):
    coleccion = db["ventas"]
    datos = list(coleccion.find({}, {"_id": 0}))  # traer todos los documentos
    return datos

Editar archivo data.py

from pymongo import MongoClient

client = MongoClient("mongodb://localhost:27017/")

#database name
db = client["coppel"]

ventas = [
    {"mes": "Enero",    "ventas": 15000, "gastos": 9000,  "categoria": "Electrónica"},
    {"mes": "Febrero",  "ventas": 18000, "gastos": 11000, "categoria": "Ropa"},
    {"mes": "Marzo",    "ventas": 22000, "gastos": 13000, "categoria": "Electrónica"},
    {"mes": "Abril",    "ventas": 19000, "gastos": 10500, "categoria": "Hogar"},
    {"mes": "Mayo",     "ventas": 25000, "gastos": 14000, "categoria": "Electronica"},
    {"mes": "Junio",    "ventas": 30000, "gastos": 16000, "categoria": "Ropa"},
]

#use collection ventas
db["ventas"].insert_many(ventas)
print("✅ Datos insertados correctamente")

Editar archivo app.py

import streamlit as st
import pandas as pd
import plotly.express as px
from database import get_connection, get_ventas

# --- Configuración de la página ---
st.set_page_config(page_title="Coppel", page_icon="📊", layout="wide")
st.title("📊 Dashboard | Coppel Ventas")

# --- Conexión a MongoDB ---
db = get_connection()
datos = get_ventas(db)

if not datos:
    st.warning("No hay datos en la base de datos.")
    st.stop()

df = pd.DataFrame(datos)

# --- Métricas principales ---
col1, col2, col3 = st.columns(3)

with col1:
    st.metric("💰 Total Ventas", f"${df['ventas'].sum():,}")

with col2:
    st.metric("📉 Total Gastos", f"${df['gastos'].sum():,}")

with col3:
    ganancia = df['ventas'].sum() - df['gastos'].sum()
    st.metric("✅ Ganancia Neta", f"${ganancia:,}")

st.divider() #separador

# --- Gráficas ---
col4, col5 = st.columns(2)

with col4:
    st.subheader("Ventas por Mes")
    fig1 = px.bar(df, x="mes", y="ventas", color="categoria", barmode="group")
    st.plotly_chart(fig1, use_container_width=True)

with col5:
    st.subheader("Ventas vs Gastos")
    fig2 = px.line(df, x="mes", y=["ventas", "gastos"], markers=True)
    st.plotly_chart(fig2, use_container_width=True)

# --- Tabla de datos ---
st.subheader("📋 Tabla ventas y gastos")
st.dataframe(df, use_container_width=True)

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *