KPI_CARD
Indicador clave (KPI): valor destacado, variacion, mini-tendencia, estado de carga y error. Pulsable con onClick.
En esta página
Props
Tabla generada desde el esquema real (ui-schema.ts); si el esquema cambia, cambia esta tabla.
| Prop | Tipo | Requerido | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|---|
| label | texto | Sí | — | — | Nombre del indicador. |
| value | texto | No | — | — | Valor ya formateado (texto o numero). |
| unit | texto | No | — | — | Unidad tras el valor (%, ms, usuarios...). |
| delta | texto | No | — | — | Variacion (texto). |
| trend | enum | No | "up""down""flat" | "flat" | Direccion de la variacion. |
| invertTrend | booleano | No | truefalse | — | Si bajar es bueno (p. ej. spam): up pasa a malo y down a bueno. |
| description | texto | No | — | — | Texto de apoyo. |
| icon | icono (Lucide) | No | — | — | Icono: nombre Lucide (p. ej. "Mail"), "lucide:<Nombre>", "brand:<slug>" (logotipo de una app integrada, p. ej. "brand:zoom") o "initials:<XY>". Un nombre desconocido se muestra como icono generico. |
| tone | enum | No | "neutral""primary""success""warning""danger""info" | "neutral" | Intencion semantica; el tema decide el color. |
| sparkline | arreglo de numero | No | — | — | Serie de la mini-tendencia (max 60 puntos). |
| loading | booleano | No | truefalse | — | Muestra esqueleto. |
| error | texto | No | — | — | Mensaje de error en lugar del valor. |
| onClick | accion(es)acción | No | — | — | Hace la tarjeta pulsable. |
Props comunes a todos los componentes
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| hidden | booleano | truefalse | — | true oculta el componente (admite expresiones). |
| onLoad | accion(es)acción | — | — | Accion que se ejecuta una vez al montar. |
| onLoadWhen | cualquiera | — | — | Condicion: onLoad se ejecuta cuando pasa a verdadera. |
| ariaLabel | texto | — | — | Nombre accesible explicito. |
Eventos y acciones que acepta
Props que ejecutan una acción (o cadena de acciones). Las variables disponibles en ${...} dentro de la acción son las que recibe cada evento.
| Evento | Recibe | Descripción |
|---|---|---|
| onClick | — | Hace la tarjeta pulsable. |
| onLoad | — | Accion que se ejecuta una vez al montar. |
Estado y contexto que usa
Cómo interactúa con state y context (expresiones ${...}).
loadingAcepta
${state.$loading.<clave>}: CALL_BACKEND/CALL_API mantienen esa marca solos.value / defaultValueValor controlado por expresión (
${state.x}) o valor inicial único.hidden / onLoadWhenCondiciones comunes:
hidden: "${!state.x}"oculta el componente;onLoadWhenejecutaonLoadal pasar a verdadera.
Simulador interactivo
Renderiza el JSON validado con el mismo renderer y el mismo kit que la app, con el tema actual de esta página. Nada sale a la red: CALL_BACKEND usa una respuesta simulada.
Acciones relacionadas
Acciones que este componente puede disparar desde sus props de acción (cualquiera de UI_ACTIONS) y las que lo controlan. Detalle de cada acción en la sección de acciones.
Usadas en sus ejemplos y manifests
Ninguna.
Acciones que lo controlan
- SET_LOADING
Marca una clave como cargando (
state.$loading).Obligatorios:
key· Campos:keyvalue
Ejemplo en un manifest real
Tomado de bloomx-extensions/domain-metrics/manifest.json (core-domain-metrics), en mounts[0].component.children[2].children[2] (punto PAGE).
{
"type": "KPI_CARD",
"props": {
"label": {
"es": "Correos enviados",
"en": "Mail sent"
},
"value": "${state.metrics.kpis.sent}",
"icon": "Send",
"loading": "${state.$loading.getMetrics}",
"error": "${state.$error.getMetrics}"
}
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "PAGE",
"component": {
"type": "KPI_CARD",
"props": {
"label": {
"es": "Correos enviados",
"en": "Mail sent"
},
"value": "${state.metrics.kpis.sent}",
"icon": "Send",
"loading": "${state.$loading.getMetrics}",
"error": "${state.$error.getMetrics}"
}
}
}
]
}