# Demo 4 — Dashboard web de datos con gráficas

Un **tablero visual** que convierte tus números en gráficas claras: ventas por
mes, participación por categoría e indicadores clave (KPIs). Todo en un solo
archivo HTML que se abre en cualquier navegador.

**100% autocontenido: sin internet, sin CDNs, sin instalar nada.** Los gráficos
se dibujan con Canvas y JavaScript puro.

---

## Qué incluye

- **4 tarjetas de KPIs**: ingresos del año, unidades, ticket promedio y crecimiento.
- **Gráfico de barras**: ingresos mes a mes (con rejilla y ejes).
- **Gráfico circular (dona)**: participación de cada categoría, con leyenda.
- **Tabla de datos**: unidades, ingresos y participación por categoría, con
  mini-barras y fila de totales.

Los datos del ejemplo son ficticios y están al inicio del `<script>`
(variables `VENTAS_MES` y `CATEGORIAS`). Para usarlo con datos reales, solo se
reemplazan esos valores (o se conectan a tu Excel/CSV/API).

---

## Cómo usarlo en 3 pasos

1. Abre `index.html` con doble clic (cualquier navegador).
2. Mira el tablero: gráficas y tabla se dibujan solos.
3. Para tus datos: edita las variables `VENTAS_MES` y `CATEGORIAS` en el `<script>`.

---

## Qué le resuelvo a tu negocio 🇪🇸
Tienes los datos en una hoja de cálculo, pero "verlos" cuesta. Yo te armo un
tablero donde entiendes tu negocio de un vistazo: qué mes vendiste más, qué
categoría manda y hacia dónde vas. Sin programas caros ni instalaciones: un
archivo que abres y ya.

## What I solve for your business 🇬🇧
Your data lives in a spreadsheet, but actually *seeing* it is hard. I build you
a dashboard where you understand your business at a glance: which month sold
best, which category leads, and where you're heading. No expensive software, no
installs: a single file you just open.

---

## Para ejecutar · To run

**Español (3 pasos):**
1. Abre `index.html` con doble clic (cualquier navegador).
2. Mira el tablero: gráficas y tabla se dibujan solas.
3. Para tus datos, edita `VENTAS_MES` y `CATEGORIAS` en el `<script>`.

**English (3 steps):**
1. Open `index.html` with a double click (any browser).
2. Watch the dashboard: charts and table draw themselves.
3. For your data, edit `VENTAS_MES` and `CATEGORIAS` in the `<script>`.

---

## Archivos
| Archivo | Para qué sirve |
|---|---|
| `index.html` | El dashboard completo (gráficas + tabla + KPIs). |
| `ui_shots/` | Capturas de evidencia (pendientes de aprobación de Edge). |