Mostrador Lab · Paneles de control / Retail
Cómo se construyó Mostrador
El panel que mira el responsable de una cadena de nueve tiendas: cuánto se ha vendido, cuánto falta para el objetivo, qué margen queda y qué está entrando por caja ahora mismo. Las cuatro pestañas de periodo y el selector de tienda no filtran una tabla estática: vuelven a generar el conjunto entero desde una semilla derivada de la combinación, de modo que la vista es distinta para cada corte y siempre la misma para el mismo corte. El objetivo de ventas se arrastra con el ratón o con el teclado y recalcula al vuelo cuánto falta; el gráfico del año lleva guía vertical y dos globos que siguen al puntero; y cada 2,2 s entra un ticket nuevo que sube la venta acumulada, el beneficio neto y el avance del objetivo.
Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.
Qué demuestra
- Datos generados con RNG mulberry32 seedeado por tienda, periodo y mes: cambiar de filtro recalcula todo y el mismo filtro devuelve siempre lo mismo
- Cuatro periodos (hoy, semana, mes, año) con su propio factor de escala y su propio número de puntos en las series
- Objetivo de ventas arrastrable con Pointer Events y navegable con flechas del teclado (paso fino y paso grueso con Shift), con rol slider y valores ARIA
- Gráfico del año con dos series —línea sólida y línea punteada—, guía vertical, marcadores y dos globos que siguen al puntero
- Sparkline de motas: la densidad de puntos de cada mes es proporcional al valor, con su propio RNG por columna para que no cambie entre repintados
- Barras diarias con dos tratamientos, rayado para el histórico y sólido para los días activos, resueltos con un pattern SVG
- Caja en directo: un ticket cada 2,2 s que empuja la venta acumulada, el beneficio neto y el avance del objetivo
- Las seis mini-barras de la tarjeta de saludo son botones: al pulsarlas cambian el mes de referencia y regeneran el panel
- Formato español en todo (Intl.NumberFormat es-ES, coma decimal y punto de millar)
- Repintado de los SVG en resize con antirrebote, para que las series se recalculen al tamaño real
- Cero dependencias: ni librería de gráficos ni framework