CHART
Grafico de lineas, barras, area, sectores o anillo con varias series, leyenda y tooltips accesibles (raton y teclado). SVG propio con colores del tema, sin librerias.
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 |
|---|---|---|---|---|---|
| kind | enum | No | "line""bar""area""pie""donut" | "line" | Tipo de grafico. |
| labels | arreglo de texto | No | — | — | Etiquetas del eje X (line, bar, area): una por valor de cada serie (max 120). |
| series | arreglo de objeto | No | — | — | Series (max 8) de line, bar y area. |
| data | arreglo de objeto | No | — | — | pie y donut: [{label,value,tone?}] (max 60). |
| stacked | booleano | No | truefalse | — | Apila las series (bar y area). |
| showLegend | booleano | No | truefalse | true | Muestra la leyenda. |
| showGrid | booleano | No | truefalse | true | Lineas guia horizontales. |
| valueFormat | enum | No | "number""compact""percent" | "number" | Formato de los valores en ejes y tooltips (percent: el valor ya es un porcentaje 0-100). |
| unit | texto | No | — | — | Unidad que se anade al valor en los tooltips (p. ej. correos). |
| height | enum | No | "sm""md""lg" | "md" | Altura. |
| centerLabel | texto | No | — | — | Texto central (donut). |
| title | texto | No | — | — | Titulo accesible. |
| description | texto | No | — | — | Resumen para lectores de pantalla. |
| emptyText | texto | No | — | — | Texto si no hay datos. |
| loading | booleano | No | truefalse | — | Muestra esqueleto. |
| error | texto | No | — | — | Mensaje de error en lugar del grafico. |
Estructuras anidadas
series[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| series[].label | texto | — | — | Nombre de la serie (leyenda y tooltip); admite {es,en}. |
| series[].data | arreglo de cualquiera | — | — | Valores, uno por etiqueta de labels. |
| series[].tone | enum | "neutral""primary""success""warning""danger""info" | — | Tono de la serie; por defecto se reparte por orden. |
data[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| data[].label | texto | — | — | Etiqueta. |
| data[].value | numero | — | — | Valor. |
| data[].tone | enum | "neutral""primary""success""warning""danger""info" | "primary" | Intencion semantica; el tema decide el color. |
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.
No tiene eventos propios (solo onLoad, común a todos).
| Evento | Recibe | Descripción |
|---|---|---|
| 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.items / data / rows / optionsLos datos suelen venir de
${state.<clave>}(rellenada porresultKeyde CALL_BACKEND) o de${context.*}.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[4] (punto PAGE).
{
"type": "CHART",
"props": {
"kind": "area",
"title": {
"es": "Spam bloqueado por día",
"en": "Blocked spam per day"
},
"description": {
"es": "Correos que acabaron en la carpeta de spam cada día.",
"en": "Mail that ended up in the spam folder each day."
},
"labels": "${state.metrics.chart.labels}",
"series": [
{
"label": {
"es": "Spam bloqueado",
"en": "Blocked spam"
},
"data": "${state.metrics.chart.spamBlocked}",
"tone": "danger"
}
],
"unit": {
"es": "correos",
"en": "emails"
},
"height": "sm",
"emptyText": {
"es": "Sin datos en este periodo",
"en": "No data in this period"
},
"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": "CHART",
"props": {
"kind": "area",
"title": {
"es": "Spam bloqueado por día",
"en": "Blocked spam per day"
},
"description": {
"es": "Correos que acabaron en la carpeta de spam cada día.",
"en": "Mail that ended up in the spam folder each day."
},
"labels": "${state.metrics.chart.labels}",
"series": [
{
"label": {
"es": "Spam bloqueado",
"en": "Blocked spam"
},
"data": "${state.metrics.chart.spamBlocked}",
"tone": "danger"
}
],
"unit": {
"es": "correos",
"en": "emails"
},
"height": "sm",
"emptyText": {
"es": "Sin datos en este periodo",
"en": "No data in this period"
},
"loading": "${state.$loading.getMetrics}",
"error": "${state.$error.getMetrics}"
}
}
}
]
}