Partida · Lab · Paneles de control / Contabilidad

Cómo se construyó Partida

Un informe de gastos de los que se miran a final de trimestre: tres partidas arriba, una regla fina debajo y las barras del año. La regla no es un adorno: es un tick por cada día del ejercicio, con la altura del gasto de ese día, en oscuro dentro del periodo seleccionado y en gris fuera, así que los picos —el alquiler el día 1, los gastos excepcionales— se ven a simple vista sin abrir ninguna tabla. Sobre las barras se arrastra para acotar el periodo, y esa selección recalcula los tres KPI con su variación contra la media del ejercicio. Cada KPI es además un conmutador de categoría: apagando partidas se recompone el gráfico y la regla entera. Los datos salen de un generador seedeado por día y partida, con estacionalidad y picos, y el botón de exportar baja el periodo seleccionado en CSV con separador y decimales españoles.

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

• Regla de ticks con un trazo por cada uno de los 365 días del ejercicio, con la altura del gasto diario y coloreado según el periodo seleccionado
• Datos generados a nivel de día y partida con RNG seedeado: estacionalidad senoidal, picos excepcionales al 3,5 % y el alquiler concentrado en el día 1 de cada mes
• Selección de periodo arrastrando sobre las barras con Pointer Events y captura de puntero, usando elementFromPoint para seguir el mes bajo el dedo
• Los tres KPI se recalculan sobre el rango elegido y comparan contra la media mensual del ejercicio, con signo y color
• Cada KPI es un conmutador de partida: al apagar una, barras, regla y título se recomponen
• Barras del spec al pie de la letra: fantasma rayado detrás, barra sólida con degradado delante, valor flotando encima y píldora de mes debajo
• Escala del eje recalculada en miles de euros contra el máximo del periodo visible
• Exportación del rango seleccionado a CSV con punto y coma y decimales con coma, generado en el navegador con Blob y URL.createObjectURL
• Botón «Otro ejercicio» que cambia la semilla y regenera los 365 días de golpe
• Formato español (Intl.NumberFormat es-ES) y cifras en tabular-nums
• Cero dependencias