---
title: "Mostrador — cuadro de mando de una cadena de tiendas | Logic2b Lab"
description: "Demo técnica: panel de ventas retail multi-tienda con datos seedeados por periodo, objetivo arrastrable, gráficos SVG dibujados a mano y caja en directo. Sin librerías."
lang: es-ES
source_url:
  html: https://logic2b.com/lab/mostrador/
  md: https://logic2b.com/lab/mostrador/index.md
---

# Mostrador Lab · Paneles de control / Retail

lab.logic2b.com/mostrador

Ruta: [Lab](https://logic2b.com/lab) › [Cuadros de mando y analítica](https://logic2b.com/sistemas/cuadros-de-mando)

## 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

### Detalles

**Categoría**

Paneles de control / Retail

**Formato**

Demo interactiva, sin backend

### Stack usado

- JavaScript
- SVG

### Categorías

[Cuadros de mando y analítica](https://logic2b.com/sistemas/cuadros-de-mando) [Comercio y buscadores](https://logic2b.com/sistemas/comercio-buscadores) Retail Gráficos SVG Datos en vivo Filtros

### Lo ofrecemos con webs de

[Restaurantes](https://logic2b.com/diseno-web/restaurantes) [Farmacias](https://logic2b.com/diseno-web/farmacias) [Peluquerías y estética](https://logic2b.com/diseno-web/peluquerias-estetica)

## Labs relacionados

[Ver todos](https://logic2b.com/lab)

[**Recuento** Paneles de control](https://logic2b.com/lab/recuento) [**Estrado** Cuadros de mando](https://logic2b.com/lab/estrado) [**Pocillo** Cuadros de mando](https://logic2b.com/lab/pocillo)

---

Logic2b S.L. · Castellón (España) · [info@logic2b.com](mailto:info@logic2b.com) · [Contacto](https://logic2b.com/contacto/) · [Auditoría gratuita](https://logic2b.com/auditoria/) · [Índice para IA](https://logic2b.com/llms.txt)