Dashboard: indicadores y gráficos directo de la base de datos.
El panel de abajo corre en la app de ejemplo, publicada en la Prueba online, sobre las mismas 52 ventas del listado y del PDF. Los ingresos cuadran al centavo. Nadie escribió una consulta a mano.
Ingresos, ticket promedio y pendientes en una sola pantalla
Indicadores, gráficos y tablas se declaran, no se programan. Cada uno hace su propia consulta a la base de datos, ya sumando o contando lo que necesita.
Indicadores que consultan la base de datos solos
Indicas la tabla, el campo y la cuenta: conteo, suma, promedio, mínimo o máximo (count, sum, avg, min, max). La tarjeta (<mad-db-metric-card>) hace la consulta sola. Puedes elegir el formato de moneda, el color y un filtro solo para esa tarjeta:
<mad-form-grid :cols="4"><mad-db-metric-card model="Venda" field="id" total="count"label="Ventas" icon="shopping-cart" format="integer" /><mad-db-metric-card model="Venda" field="valor_total" total="sum"label="Ingresos" icon="circle-dollar-sign" variant="success" format="money:$" /><mad-db-metric-card model="Venda" field="valor_total" total="avg"label="Ticket promedio" icon="trending-up" format="money:$" /><mad-db-metric-card model="Venda" field="id" total="count":filters="[['status', '=', 'pendente']]"label="Pendientes" icon="clock" variant="warning" format="integer" /></mad-form-grid>
Siete tipos de gráfico, que se cambian con un atributo
El atributo type elige el dibujo. Dices por qué campo agrupar y qué cuenta hacer, y el gráfico sale listo, dibujado con ECharts. Ajustes como área, barras horizontales, apiladas o en porcentaje (area, horizontal, stacked, percentage) se combinan con cualquier tipo.
{{-- los 7 valores aceptados en type= --}}<mad-db-chart type="bar" model="Venda" group-by="vendedor"field="valor_total" total="sum" format="currency:$" /><mad-db-chart type="line" model="Venda" group-by="data_venda"field="valor_total" total="sum" area format="currency:$" /><mad-db-chart type="pie" model="Venda" group-by="forma_pagamento"total="count" legend format="numeric:0" /><mad-db-chart type="donut" model="Venda" group-by="status"total="count" legend percentage format="numeric:0" /><mad-db-chart type="rose" model="Venda" group-by="vendedor"total="count" legend format="numeric:0" /><mad-db-chart type="funnel" model="Venda" group-by="status"total="count" legend format="numeric:0" /><mad-db-chart type="treemap" model="Venda" group-by="forma_pagamento"field="valor_total" total="sum" format="currency:$" />
Un listado y una tabla cruzada en el mismo panel
El dashboard puede tener dos tipos de tabla. Una es el listado completo, embebido (<mad-grid>), con estado coloreado, moneda, fecha formateada, búsqueda y paginación. La otra es una tabla cruzada (<mad-pivot-table>): un campo en las filas, otro en las columnas y el valor calculado en el cruce, con subtotales y exportación.
<mad-pivot-table model="Venda"title="Ingresos: vendedor x forma de pago" :height="360" subtotals><mad-pivot-row field="vendedor" label="Vendedor" /><mad-pivot-col field="forma_pagamento" label="Pago" /><mad-pivot-value field="valor_total" label="Ingresos"aggregation="sum" format="currency" currency="USD" /></mad-pivot-table>{{-- listado embebido: orden y filtro declarativos --}}<mad-grid model="Venda" order-by="data_venda desc":filters="[['status', '=', 'pago']]" per-page="8" searchable>...</mad-grid>
Filtros por mes y año, en siete formatos
Los filtros funcionan como los del listado, con un extra solo del dashboard: el selector de período por mes y año. El bloque de filtros (<mad-dash-filters>) puede aparecer de siete maneras, y las cambias modificando solo el style: toolbar, chips, form, drawer, modal, sidebar-left o sidebar-right.
<mad-dash-filters style="drawer" name="filtros" title="Filtros"><mad-period-monthyear /> {{-- período mes/año --}}<mad-search-field name="busca" label="Búsqueda" /><mad-select-field name="status" label="Estado" :items="[...]" /><mad-dbcombo-field name="cliente_id" label="Cliente" model="Pessoa" display="{nome}" /><mad-daterange-field name="periodo_venda" label="Período de la venta" /><mad-number-field name="valor_minimo" label="Valor mínimo" :min="0" /><mad-switch-field name="somente_pagas" label="Solo pagadas" /></mad-dash-filters>
Doce tipos de campo para filtrar
El bloque de filtros acepta doce tipos de campo. Cualquiera de ellos filtra todo el dashboard: indicadores, gráficos y tablas cambian juntos.
<mad-period-monthyear> Todos, mes, año o personalizado. Solo existe en el dashboard <mad-search-field> Búsqueda libre por texto <mad-input-field> Texto simple <mad-select-field> Lista fija de opciones <mad-dbselect-field> Lista que viene de una tabla <mad-dbcombo-field> Lista con búsqueda, que viene de la base de datos <mad-dbunique-search-field> Búsqueda de un registro en la base de datos <mad-date-field> Una fecha <mad-daterange-field> Rango de fechas <mad-number-field> Número, como un valor mínimo <mad-switch-field> Interruptor de encendido y apagado <mad-checkbox-field> Casilla de verificación, sí o no La imagen del panel lateral, más arriba, muestra siete de ellos juntos: período, búsqueda, lista de opciones, lista de la base de datos, rango de fechas, número e interruptor.
Y más
Crea la cuenta, arma una pantalla, descarga el proyecto.
Sin demo agendada ni llamada de descubrimiento. Si el Laravel que sale no pasa la revisión de tu equipo, perdiste una tarde.
- Crea la cuentaBeta abierta, sin tarjeta.
- Arma una pantallaEn el editor visual, en código o pidiéndoselo a la IA.
- Descarga el .zipUn proyecto Laravel que corre donde quieras.
