📊 KPI · Propiedades del Widget
Objetivo Principal: Permite al usuario configurar el widget KPI, utilizado para representar valores clave e indicadores de rendimiento industrial dentro de dashboards Analytics.
📸 Mapeo de Interfaz
La captura no muestra esto
La imagen corresponde a una versión anterior. En la 0.4.46 la pestaña "Datos" incluye además la sección "Objetivo" y, al marcar "Mostrar tendencia del periodo", el selector "Interpretación del cambio"; y la sección "Contenedor" de un dashboard ya no ofrece el selector "Fondo" ni el deslizador "Transparencia" —siguen estando al configurar el widget desde una vista SCADA— sino las casillas "Ocultar ventana temporal" y "Ocultar conteo de variables".
🧩 Despiece de Elementos Funcionales
Los elementos marcados con — no aparecen señalados en la captura: existen en la versión 0.4.46 pero la imagen no los numera.
| # | Nombre del Elemento | Tipo | Destino / Acción | Descripción Funcional |
|---|---|---|---|---|
| 1 | Pestañas de configuración | Navegación interna | Cambia sección de propiedades | Permite alternar entre las distintas categorías de configuración del widget. Para utilizarlo, el usuario debe pulsar "Datos", "Apariencia" o "Texto" según el tipo de configuración que quiera modificar. |
| 1.1 | Campo "Nombre del widget" | Campo de texto | Renombra el widget | Permite definir el nombre identificativo del widget dentro del dashboard. Para utilizarlo, el usuario debe escribir el nombre que quiera mostrar en la cabecera del widget. |
| 1.2 | Sección "Configuración General" | Configuración de datos | Configura variables y agregación | Permite seleccionar las variables que utilizará el widget y cómo se procesarán los datos. Para utilizarlo, el usuario debe pulsar "Editar", seleccionar variables y configurar agregación e intervalo. |
| 1.2.1 | Botón "Editar" variables | Botón de acción | Abre selector de variables | Permite acceder al selector de variables para asignar las fuentes de datos del widget. Para utilizarlo, el usuario debe pulsar el icono de edición junto al campo de variables. |
| 1.3 | Selector "Agregación" | Lista desplegable | Define método de agregación | Permite seleccionar cómo se agregan los datos de la variable (Promedio, Suma, Máximo, etc.). Para utilizarlo, el usuario debe seleccionar la opción deseada en el desplegable. |
| 1.4 | Selector "Intervalo" | Lista desplegable | Define intervalo temporal | Permite configurar el intervalo de agrupación de los datos. Para utilizarlo, el usuario debe seleccionar la opción deseada, siendo "Automático" la opción por defecto. |
| 1.5 | Sección "Rango de Tiempo" | Configuración temporal | Configura periodo de datos | Permite definir el rango temporal utilizado por el widget. Para utilizarlo, el usuario puede usar el filtro global o configurar un rango propio. El texto informativo indica que el widget usará el selector de fechas del dashboard cuando se selecciona "Filtro global". |
| 1.6 | Sección "Comparación del KPI" | Configuración de análisis | Configura tendencia comparativa | Permite activar la visualización de la tendencia del periodo, mostrando el % de cambio del valor actual respecto al inicio de la ventana temporal activa. Para utilizarlo, el usuario debe activar la casilla "Mostrar tendencia del periodo" y, en el selector "Interpretación del cambio" que se despliega debajo, elegir cómo debe leerse una subida: "General (Verde sube / Rojo baja)", "Económico (Rojo sube / Verde baja)" o "Térmico (Rojo sube / Azul baja)". |
| 1.7 | Sección "Tipografía" — Familia de fuente | Lista desplegable | Selecciona la fuente tipográfica | Permite elegir la familia tipográfica del widget. Por defecto utiliza "Sistema (default)". Para modificarla, el usuario debe desplegar el selector y elegir la fuente deseada. |
| 1.8 | Sección "Tipografía" — Tamaño de fuente (px) | Slider numérico | Ajusta el tamaño del texto | Permite configurar el tamaño en píxeles del texto del valor principal. Para utilizarlo, el usuario debe mover el slider o introducir un valor numérico directamente. |
| 1.9 | Sección "Tipografía" — Peso de fuente | Lista desplegable | Ajusta el grosor del texto | Permite seleccionar el peso tipográfico del texto, como "Negrita". Para utilizarlo, el usuario debe seleccionar la opción deseada en el desplegable. |
| 1.10 | Sección "Tipografía" — "Color del valor" y "Alineación" | Selector de color y botones de selección | Define el color y la alineación del valor | Reúne dos ajustes del valor principal. "Color del valor" permite elegir el color del texto del KPI, #1E293B por defecto; para cambiarlo, el usuario debe pulsar el selector de color o escribir el código directamente. "Alineación" alinea el contenido del widget mediante los botones "Izquierda", "Centro", "Derecha" y "Justificado". |
| 1.11 | Ajustes de formato del número — "Decimales", "Formato compacto (K, M)", "Prefijo" y "Sufijo / Unidad" | Lista desplegable, casilla de verificación y campos de texto | Ajusta cómo se escribe el valor | Reúne los cuatro ajustes que dan forma al número. "Decimales" define cuántos decimales se muestran eligiendo entre 0, 1, 2 y 3; el valor por defecto es 1. "Formato compacto (K, M)" abrevia los valores grandes —el propio panel lo explica con "Muestra valores grandes como 1.2k o 3.4M en lugar del número completo"—. "Prefijo" antepone un símbolo al valor y sugiere "Ej: $"; "Sufijo / Unidad" añade una unidad detrás y sugiere "Ej: kWh, %, ºC". Bajo ambos campos, el panel advierte que "Si no defines sufijo, se usará la unidad de la variable automáticamente". |
| 1.12 | Sección "Estados Booleanos (Opcional)" | Configuración condicional | Configura la lectura de una variable de dos estados | Permite personalizar cómo se lee una variable booleana. Mientras no haya ninguna variable seleccionada, la sección avisa con "Selecciona una variable booleana para habilitar esta configuración."; si la variable elegida no es booleana, indica que la sección no aplica. Con una variable booleana, el usuario puede escribir la "Etiqueta ON (true)" y la "Etiqueta OFF (false)" y activar "Diferenciar color por estado". |
| 2 | Pestaña "Apariencia" | Configuración visual | Personaliza el widget | Permite acceder a todas las configuraciones visuales del widget. |
| 2.1 | Sección "Contenedor" — Estilo de marco | Lista desplegable | Ajusta el estilo del contenedor | Permite seleccionar el estilo visual del marco del widget, como "Tarjeta". Para utilizarlo, el usuario debe seleccionar la opción deseada en el desplegable. |
| 2.2 | Opciones "Ocultar header" y "Ocultar borde" | Casillas de verificación | Controla la visibilidad de elementos | Permite ocultar la cabecera del widget y/o su borde exterior. Para utilizarlo, el usuario debe activar o desactivar cada casilla según el diseño deseado. |
| 2.3 | Selector "Fondo" | Selector de color | Define el color de fondo | Permite elegir el color de fondo del contenedor del widget, #FFFFFF por defecto. Sólo está disponible al configurar el widget desde una vista SCADA: en un dashboard esta opción no se muestra. |
| 2.4 | Deslizador "Transparencia" | Deslizador | Ajusta la opacidad del contenedor | Permite controlar el nivel de transparencia del contenedor, del 0 % al 100 %. Sólo está disponible al configurar el widget desde una vista SCADA: en un dashboard esta opción no se muestra. |
| 3 | Pestaña "Texto" | Configuración textual | Configura textos adicionales | Permite acceder a configuraciones relacionadas con textos auxiliares mostrados en el widget. |
| 3.1 | Campo "Subtítulo" | Campo de texto | Añade un texto secundario | Permite añadir un subtítulo que se muestra bajo el título principal del widget. Para utilizarlo, el usuario debe escribir el texto deseado en el campo "Texto secundario bajo el título". |
| 3.2 | Campo "Nota al pie" | Campo de texto | Añade una nota informativa | Permite añadir un texto pequeño al final del widget a modo de nota o aclaración. Para utilizarlo, el usuario debe escribir el texto deseado en el campo "Texto pequeño al final del widget". |
| — | Sección "Objetivo" | Configuración de análisis | Compara el valor con una meta | Permite fijar una meta para el indicador. Para utilizarlo, el usuario escribe la cifra en "Valor objetivo (vacío = sin objetivo)"; sin un objetivo válido no se muestra desviación ni estado de cumplimiento. |
| — | Casilla "Mostrar desviación y estado vs objetivo" | Casilla de verificación | Muestra la desviación y el cumplimiento | Aparece al informar un valor objetivo y añade la referencia "Objetivo", la desviación con flecha y el estado "Cumple", "Cerca del objetivo" o "No cumple". Al activarla se despliegan "Formato de la desviación" ("Puntos (pp)", "Porcentaje relativo (%)" o "Absoluto"), "Dirección del objetivo" ("Mayor es mejor" o "Menor es mejor") y "Factor de aviso (0–1)", que delimita la zona "Cerca del objetivo" y vale 0,85 por defecto. |
| — | Sección "Filtros de contexto" | Configuración de datos | Elige de qué contexto salen los datos | Aparece en la pestaña "Datos", debajo de "Rango de tiempo", al configurar el widget desde un dashboard. Permite que el widget siga los filtros generales del dashboard o que fije un contexto propio de "Planta", "Zona", "Máquina", "Grupo" y "Turno". Se cambia con los botones "Filtro global" y "Contexto propio", y la cabecera de la sección indica en cuál de los dos modos está. |
| — | Casillas "Ocultar ventana temporal" y "Ocultar conteo de variables" | Casillas de verificación | Limpian la cabecera del widget | En un dashboard, la sección "Contenedor" añade estas dos casillas, que esconden las etiquetas de rango temporal y de número de variables que el widget muestra en su cabecera. |
| — | Casilla "Mostrar al hacer hover" | Casilla de verificación | Recupera la cabecera al pasar el ratón | Aparece al marcar "Ocultar header" y hace que la cabecera vuelva a mostrarse cuando el cursor se sitúa sobre el widget. |
💡 Guía de Uso
El widget KPI está diseñado para representar un valor clave de forma destacada y clara dentro del dashboard.
Se utiliza principalmente para:
- Mostrar valores instantáneos de una variable
- Visualizar indicadores de rendimiento (KPIs)
- Comparar el valor actual frente a un periodo anterior
- Supervisar umbrales o estados críticos
- Mostrar datos con unidades y formato personalizado
- Monitorizar variables en tiempo real
- Representar estados booleanos de forma visual
✅ Cómo configurar correctamente el widget KPI
- Arrastra el widget al canvas.
- Selecciona el widget dentro del dashboard.
- Desde el panel de propiedades:
- Configura la variable y el método de agregación.
- Ajusta el intervalo y el rango temporal.
- Personaliza tipografía, color y alineación.
- Configura decimales, prefijo y sufijo.
- Activa el formato compacto si es necesario.
- Habilita la comparación del KPI para mostrar tendencias.
- Fija un "Valor objetivo" si quieres ver la desviación y el estado de cumplimiento.
- Personaliza el contenedor: estilo de marco y visibilidad de la cabecera, el borde y las etiquetas.
- Añade subtítulo y nota al pie si se requiere contexto adicional.
- Guarda los cambios realizados.