---
title: KPIs y dashboard personalizado
section: admin
slug: kpi-dashboard
description: "Crear KPIs personalizados en el BO de PrestaShop: bloques de estadisticas, dashboard modules, graficas y metricas custom."
keywords: prestashop KPI dashboard estadisticas metricas graficas bloque admin panel
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/admin/kpi-dashboard"
---

# KPIs y dashboard personalizado

> Crear KPIs personalizados en el BO de PrestaShop: bloques de estadisticas, dashboard modules, graficas y metricas custom.

El dashboard de PrestaShop muestra KPIs clave (ventas, pedidos, visitas) y permite a los modulos añadir bloques personalizados con estadisticas, graficas y metricas especificas del negocio.

## Sistema de KPIs nativo

*KPIs del dashboard por defecto*

```text
BLOQUES NATIVOS
- dashtrends: Ventas, pedidos, visitas, tasa de conversion
- dashactivity: Visitantes online, carritos activos, clientes nuevos
- dashproducts: Productos mas vendidos, mas vistos
- dashgoals: Objetivos mensuales configurables

CONFIGURACION
- Periodo: Hoy, ayer, esta semana, este mes, este año
- Comparacion con periodo anterior
- Cada modulo de dashboard tiene su propia configuracion
- Los datos se calculan via AJAX para no bloquear la carga

INTERFAZ
- Zona superior: KPIs numericos en fila (tarjetas)
- Zona central: Graficas de tendencia
- Zona inferior: Tablas de datos (productos, ultimos pedidos)
- Todo drag & drop y redimensionable
```

## Crear un modulo de dashboard

*Modulo de dashboard basico*

```php
<?php

// ── Hooks necesarios ──
public function install(): bool
{
    return parent::install()
        && $this->registerHook('dashboardZoneTwo')  // Zona de graficas
        && $this->registerHook('dashboardData')     // Datos AJAX
        && $this->registerHook('actionAdminControllerSetMedia');
}

// ── Renderizar bloque HTML ──
public function hookDashboardZoneTwo(): string
{
    return $this->display(__FILE__, 'dashboard-block.tpl');
}

// ── Devolver datos via AJAX ──
public function hookDashboardData(array $params): array
{
    $dateFrom = $params['date_from'];
    $dateTo   = $params['date_to'];

    // Calcular KPIs del periodo
    $revenue = $this->getRevenue($dateFrom, $dateTo);
    $orders  = $this->getOrderCount($dateFrom, $dateTo);
    $aov     = $orders > 0 ? $revenue / $orders : 0;

    return [
        'data_value' => [
            'mymodule_revenue' => Tools::displayPrice($revenue),
            'mymodule_orders'  => (int) $orders,
            'mymodule_aov'     => Tools::displayPrice($aov),
        ],
        'data_chart' => [
            'mymodule_chart' => $this->getChartData($dateFrom, $dateTo),
        ],
    ];
}

private function getChartData(string $from, string $to): array
{
    // Datos para Chart.js
    $rows = Db::getInstance()->executeS(
        'SELECT DATE(date_add) AS day, SUM(total_paid_tax_incl) AS total
         FROM `' . _DB_PREFIX_ . "orders`
         WHERE date_add BETWEEN '" . pSQL($from) . "' AND '" . pSQL($to) . "'
           AND valid = 1
         GROUP BY DATE(date_add)
         ORDER BY day ASC"
    );

    return [
        'labels' => array_column($rows, 'day'),
        'data'   => array_map('floatval', array_column($rows, 'total')),
    ];
}
```

## Hooks del dashboard

| Hook | Zona | Uso |
| --- | --- | --- |
| dashboardZoneOne | Fila superior | KPIs numericos (tarjetas) |
| dashboardZoneTwo | Zona central | Graficas y charts |
| dashboardZoneThree | Zona inferior izquierda | Tablas de datos |
| dashboardZoneFour | Zona inferior derecha | Tablas auxiliares |
| dashboardData | AJAX | Devolver datos actualizados |
| actionDashboardDataTruncate | Accion | Al limpiar datos del dashboard |
| displayAdminStatsModules | Stats | Pestaña Estadisticas del BO |

## Graficas con Chart.js

*Template con grafica*

```html
<!-- dashboard-block.tpl -->
<section class="panel" id="mymodule-dashboard">
  <header class="panel-heading">
    <i class="icon-bar-chart"></i> Ventas por dia
  </header>
  <div class="panel-body">
    <canvas id="mymodule-chart" height="200"></canvas>
  </div>
</section>

<script>
// El JS se carga via hookActionAdminControllerSetMedia
// En el JS del modulo:
document.addEventListener('DOMContentLoaded', function() {
    // PS Dashboard llama a hookDashboardData via AJAX
    // Los datos llegan en el callback global
    window.dashboardUpdateCallback = function(data) {
        if (data.data_chart && data.data_chart.mymodule_chart) {
            var chartData = data.data_chart.mymodule_chart;
            new Chart(document.getElementById('mymodule-chart'), {
                type: 'line',
                data: {
                    labels: chartData.labels,
                    datasets: [{
                        label: 'Ventas',
                        data: chartData.data,
                        borderColor: '#25b9d7',
                        tension: 0.3,
                        fill: true
                    }]
                }
            });
        }
    };
});
</script>
```


---

*Fuente: [https://ayudaprestashop.es/admin/kpi-dashboard](https://ayudaprestashop.es/admin/kpi-dashboard). Version Markdown generada automaticamente para consumo por LLMs.*