Métricas - Detalles
Visualiza gráficos de líneas con los indicadores de una métrica, navega entre periodos, ajusta la periodicidad y gestiona indicadores en tiempo real
Desde Métricas Detalle puedes visualizar gráficamente los datos de rendimiento de una métrica específica. Esta vista muestra un gráfico de líneas interactivo que representa los valores de cada indicador a lo largo del tiempo, con controles para ajustar la periodicidad, el rango de fechas y los indicadores en tiempo real.
Esta vista se accede desde el módulo de Métricas al seleccionar Ver detalles en el menú contextual de una métrica. La ruta es Inicio > Logística > Métricas > Detalles.
Vista principal — Gráfico de métricas
Al ingresar, el sistema carga automáticamente los datos de la métrica seleccionada y genera el gráfico con los últimos 15 puntos de datos según la periodicidad configurada.
Barra de herramientas
En la parte superior se encuentran los siguientes controles:
| Control | Tipo | Descripción |
|---|---|---|
| Consulta automática | Toggle button (p-toggleButton) | Activa/desactiva la actualización automática del gráfico cada 5 segundos. Icono activo: pi pi-pause, icono inactivo: pi pi-play |
| Actualizar | Botón (pi pi-refresh) | Regenera el gráfico con los datos actuales del servidor |
| Tiempo / Duración | Botón con badge | Abre un panel flotante para modificar la periodicidad y duración. El badge muestra el valor actual en formato TIPO/INTERVALO (ej: MES/1) en color rojo |
| Modo de tiempo | Botón | Abre un panel flotante para cambiar entre modo ABSOLUTO y RELATIVO, y ajustar las fechas |
| Indicadores | Botón | Abre un diálogo modal para gestionar los indicadores de la métrica |
Gráfico
El gráfico principal es un gráfico de barras/líneas (p-chart tipo bar) con las siguientes características:
| Propiedad | Valor |
|---|---|
| Tipo | Barras con líneas superpuestas |
| Altura | 500px |
| Ancho | Automático (responsive) |
| Puntos de datos | 15 por vista |
| Color de etiquetas | #495057 |
| Color de cuadrícula | #ebedef |
Cada indicador se muestra como una línea dentro del gráfico:
- El color de la línea corresponde al color configurado en el indicador
- El nombre de la leyenda corresponde al nombre del indicador
- El grosor de línea es de 2px
- Sin relleno bajo la línea (
fill: false)
Barra de progreso
Mientras los datos se están cargando, se muestra una barra de progreso indeterminada (p-progressBar mode="indeterminate") sobre el gráfico.
Navegación entre periodos
Debajo de la barra de herramientas y sobre el gráfico, hay dos botones de navegación:
| Botón | Icono | Descripción |
|---|---|---|
| Anterior | pi pi-step-backward | Retrocede un periodo completo (15 puntos hacia atrás). Si el gráfico no está cargado, no hace nada |
| Siguiente | pi pi-step-forward | Avanza un periodo completo (15 puntos hacia adelante). Si el gráfico no está cargado, no hace nada |
La navegación calcula los nuevos rangos de fecha según el tipo de tiempo configurado. Por ejemplo, si la periodicidad es POR MES con duración 1, al presionar "Anterior" se retroceden 15 meses desde la fecha de inicio actual, y al presionar "Siguiente" se avanzan 15 meses desde la fecha de fin actual.
Consulta automática
Al activar el toggle de consulta automática, el sistema ejecuta la función generar() cada 5 segundos (5000 ms) usando un setInterval. Al desactivar el toggle, se limpia el intervalo y las consultas automáticas se detienen.
La consulta automática puede generar una carga significativa en el servidor si se mantiene activa durante periodos prolongados. Utilícela solo cuando necesite monitoreo en tiempo real.
Panel de Tiempo / Duración
Al presionar el botón "Tiempo / Duración", se abre un panel flotante (p-overlayPanel) de 450px de ancho con los siguientes campos:
| Campo | Tipo | Obligatorio | Descripción |
|---|---|---|---|
| Tiempo | Dropdown (p-dropdown) | Sí | Define la unidad de periodicidad |
| Duración | Numérico (p-inputNumber) | Sí | Define cuántas unidades agrupa cada punto del gráfico. Valor mínimo: 1 |
Opciones de Tiempo
| Opción | Valor | Formato de fecha en el gráfico |
|---|---|---|
| POR MINUTO | 1 | YYYY-MM-DD HH:mm |
| POR HORA | 2 | YYYY-MM-DD HH:00 |
| POR DIA | 3 | YYYY-MM-DD |
| POR MES | 4 | YYYY-MM |
| POR AÑO | 5 | YYYY |
Al cambiar el tipo de tiempo, el sistema ajusta automáticamente las fechas de la métrica:
- POR MINUTO / POR HORA / POR DIA: Fecha inicio = primer día del mes anterior, fecha fin = fin del año actual.
- POR MES: Fecha inicio = 12 meses atrás, fecha fin = fin del año actual.
- POR AÑO: Fecha inicio = 12 años atrás, fecha fin = fin del año actual.
Al presionar Guardar (pi pi-save), el sistema valida el formulario, actualiza la métrica en el servidor vía PUT y regenera el gráfico automáticamente.
Mensajes
| Escenario | Tipo | Mensaje |
|---|---|---|
| Formulario inválido | Error | "Revise bien, hay formularios por validar." |
| Actualización exitosa | Éxito | "Actualización exitoso." |
Panel de Modo de tiempo
Al presionar el botón "Modo de tiempo", se abre un panel flotante (p-overlayPanel) de 450px de ancho con los siguientes campos:
| Campo | Tipo | Obligatorio | Descripción |
|---|---|---|---|
| Modo de tiempo | Dropdown (p-dropdown) | Sí | ABSOLUTO (0) o RELATIVO (1) |
| Fecha inicio | Calendario (p-calendar) | Sí (solo modo ABSOLUTO) | Solo se muestra en modo ABSOLUTO |
| Fecha fin | Calendario (p-calendar) | Sí (solo modo ABSOLUTO) | Solo se muestra en modo ABSOLUTO |
Comportamiento por modo
| Modo | Valor | Comportamiento |
|---|---|---|
| ABSOLUTO | 0 | Muestra los campos de fecha inicio y fin. Los campos son obligatorios. El formato del calendario se adapta al tipo de tiempo seleccionado (minuto muestra hora, mes muestra selector de mes, año muestra selector de año) |
| RELATIVO | 1 | Oculta los campos de fecha. Internamente se establecen las fechas a 2000-01-01 00:00:00 hasta 2100-12-31 23:59:59 |
Al presionar Guardar (pi pi-save), el sistema valida, actualiza la métrica en el servidor y regenera el gráfico.
Gestión de indicadores
Al presionar el botón "Indicadores", se abre un diálogo modal con ancho del 50% de la ventana.
Encabezado
- Título: "Indicadores"
- Subtítulo: "Aqui puede editar la indicadores"
Tabla de indicadores
La tabla muestra los indicadores configurados con las siguientes columnas:
| Columna | Ancho | Descripción |
|---|---|---|
| Nombre | 100px | Nombre del indicador |
| Indicador | 200px | Código del indicador |
| Filtros | Auto | Muestra los filtros aplicados: VENDEDORES, ZONAS, PUNTOS VENTAS, ALMACENES |
| (Acciones) | Auto | Botones de editar (pi pi-pencil, amarillo) y eliminar (pi pi-trash, rojo) |
Botones
| Botón | Descripción |
|---|---|
| Agregar Indicador | Abre el sub-diálogo de configuración de indicador |
| Cancelar | Cierra el diálogo sin guardar |
| Guardar | Valida que haya al menos un indicador, actualiza la métrica en el servidor y regenera el gráfico |
Configuración de indicador (sub-diálogo)
Al presionar "Agregar Indicador" o el botón de editar en un indicador, se abre un sub-diálogo con ancho del 50%.
Encabezado
- Título: "Configuración"
- Subtítulo: "Aqui puede editar la configuración"
Campos
| Campo | Tipo | Obligatorio | Descripción |
|---|---|---|---|
| Nombre | Texto (pInputText) | Sí | Nombre del indicador |
| Color | Selector de color (p-colorPicker) | Sí | Color de la línea en el gráfico. Por defecto: #000000 |
| Indicador | Dropdown (p-dropdown) | Sí | Código del tipo de indicador. Las opciones se cargan desde parámetros del sistema (ERPX_ANALITICAS_METRICAS_CRITERIOS_CODIGOS) y también incluye valores por defecto |
Tipos de indicadores predefinidos
| Etiqueta | Valor |
|---|---|
| VENTAS CANTIDAD | VENTAS_CANTIDAD |
| VENTAS MONTO | VENTAS_MONTO |
| PEDIDOS CANTIDAD | PEDIDOS_CANTIDAD |
| PEDIDOS MONTO | PEDIDOS_MONTO |
Estos valores predefinidos se complementan con los códigos adicionales cargados desde los parámetros del sistema (ERPX_ANALITICAS_METRICAS_CRITERIOS_CODIGOS). Los parámetros del sistema tienen prioridad y reemplazan la lista predefinida.
Filtros del indicador
El sub-diálogo incluye el componente de filtros que permite refinar los datos del indicador por:
| Filtro | Componente | Descripción |
|---|---|---|
| VENDEDORES | p-multiSelect | Selección múltiple de colaboradores. Se muestran como Apellido_paterno Apellido_materno Nombres |
| ZONAS | p-multiSelect | Selección múltiple de zonas geográficas |
| PUNTOS VENTAS | p-multiSelect | Selección múltiple de puntos de venta |
| ALMACENES | p-multiSelect | Selección múltiple de almacenes (elementos de infraestructura tipo 3) |
Los filtros se aplican como parámetros de búsqueda en la consulta al Data Warehouse: vendedor_id, zona_id, punto_venta_id, almacen_id.
Validaciones
| Campo | Validación | Mensaje de error |
|---|---|---|
| Nombre | Obligatorio | " Obligatorio"* |
| Color | Obligatorio | " Obligatorio"* |
| Indicador | Obligatorio | " Obligatorio"* |
| Formulario inválido | Al guardar | "Revise bien, hay formularios por validar." |
Cómo se generan los datos del gráfico
Cálculo de etiquetas (labels)
El sistema calcula los últimos 15 puntos de tiempo a partir de la fecha actual (o la fecha de navegación), retrocediendo según la periodicidad y duración configuradas. Por ejemplo, con POR MES y duración 1, genera las etiquetas de los últimos 15 meses.
Consulta al Data Warehouse
Para cada indicador, el sistema realiza una consulta al endpoint /v2.0.1/erpx/analiticas/dwh/valores con los siguientes filtros:
- Rango de fechas: basado en las etiquetas calculadas, limitado por las fechas de la métrica
- Tipo de tiempo: minuto, hora, día, mes o año
- Código del indicador: ej.
VENTAS_CANTIDAD,PEDIDOS_MONTO - Filtros de indicador: vendedor_id, zona_id, punto_venta_id, almacen_id
Todas las consultas se ejecutan en paralelo usando forkJoin.
Procesamiento de datos
Los datos devueltos por el DWH contienen un campo tiempo_codigo que se parsea según el tipo de tiempo:
- Minuto: formato
YYYYMMDDHHmm→YYYY-MM-DD HH:mm - Hora: formato
YYYYMMDDHH→YYYY-MM-DD HH:mm - Día: formato
YYYYMMDD→YYYY-MM-DD - Mes: formato
YYYYMM→YYYY-MM - Año: formato
YYYY→YYYY
Los valores se agrupan por intervalo de duración, sumando los valores dentro de cada intervalo.
Renderizado del gráfico
Los datos procesados se asignan al modelo del gráfico como datasets de tipo line, cada uno con el color y nombre del indicador correspondiente.
Endpoints de la API
Todos los endpoints requieren los headers Authorization: Bearer \{token\} y enterprise-id: \{id_empresa\}.
Métricas
| Método | Endpoint | Descripción |
|---|---|---|
GET | /v2.0.3/erpx/analiticas/metricas/\{id\} | Obtener la métrica por ID con sus detalles (indicadores) |
PUT | /v2.0.3/erpx/analiticas/metricas/\{id\} | Actualizar la métrica (periodicidad, fechas, indicadores) |
PATCH | /v2.0.3/erpx/analiticas/metricas/\{id\} | Actualizar parcialmente la métrica |
Data Warehouse (DWH)
| Método | Endpoint | Descripción |
|---|---|---|
GET | /v2.0.1/erpx/analiticas/dwh/?search=\{filtros\} | Consultar datos del Data Warehouse |
GET | /v2.0.1/erpx/analiticas/dwh/valores?search=\{filtros\} | Obtener valores agregados del DWH para el gráfico. Filtros: fecha, tiempo_tipo, indicador_nombre, vendedor_id, zona_id, punto_venta_id, almacen_id |
Gateway de métricas
| Método | Endpoint | Descripción |
|---|---|---|
GET | /v2.0.3/erpx/analiticas/gateway-metricas-data/ventas/?search=\{filtros\} | Obtener datos de ventas para métricas |
Recursos auxiliares
| Método | Endpoint | Descripción |
|---|---|---|
GET | /v2.0.3/erpx/rrhh/colaboradores/?search=\{filtros\} | Listar colaboradores (vendedores) |
GET | /v2.0.1/erpx/global/zonas/?search=\{filtros\} | Listar zonas geográficas |
GET | /v2.0.1/erpx/comercial/puntos-ventas/?search=\{filtros\} | Listar puntos de venta |
GET | /v2.0.1/erpx/global/elementos-infraestructuras/?search=\{filtros\} | Listar almacenes (tipo 3) |
GET | /v2.0.1/erpx/global/params/?search=\{filtros\} | Obtener parámetros del sistema |
GET | /v2.0.1/erpx/comercial/gateway-ventas/?search=\{filtros\} | Consultar gateway de ventas |
Problemas comunes
| Problema | Causa | Solución |
|---|---|---|
| El gráfico no muestra datos | No hay registros en el DWH para el rango de fechas y tipo de indicador seleccionado | Verifica que el rango de fechas de la métrica contiene datos. Usa los botones "Anterior" / "Siguiente" para navegar a otros periodos |
| El gráfico muestra todos los valores en cero | El indicador_codigo no coincide con los datos del DWH | Verifica que el código de indicador configurado (VENTAS_CANTIDAD, PEDIDOS_MONTO, etc.) tiene datos registrados en el sistema |
| "Revise bien, hay formularios por validar" | Campos obligatorios vacíos al guardar tiempo, modo o indicadores | Completa todos los campos marcados como obligatorios antes de guardar |
| La consulta automática no se detiene | El toggle está activo | Presiona el toggle button para cambiar de pi pi-pause a pi pi-play y detener las consultas automáticas |
| El gráfico tarda mucho en cargar | El rango de fechas es muy amplio o hay muchos indicadores con filtros | Reduce el rango de fechas, disminuye la cantidad de indicadores o utiliza filtros más específicos |
| Los botones Anterior/Siguiente no funcionan | El gráfico aún no se ha generado | Espera a que el gráfico se cargue por primera vez o presiona el botón de Actualizar |
| Error al actualizar la métrica | Error del servidor | Verifica la conexión al servidor y los permisos del usuario |
Páginas relacionadas
- Métricas — crear y gestionar métricas con indicadores
- Mapas de Calor — visualización geográfica de datos de ventas
- Reportes de Ventas — reportes de avance de ventas
Métricas
Crea, configura y gestiona métricas de rendimiento con indicadores personalizados, filtros por vendedor, zona, punto de venta y almacén
Mapas de calor
Visualiza en un mapa interactivo la ubicación de tus vendedores, puntos de venta pendientes y visitados, zonas comerciales y mapas de calor basados en oportunidades