Tarjeta de KPI

Una cifra clave con su contexto.

Definición

Una tarjeta de KPI pone una cifra clave en grande con su nombre, su variación y, si la hay, su objetivo y su línea de tendencia. Varias tarjetas forman una fila de indicadores que se leen con el mismo peso. Se usa en la cabecera de un cuadro de mando o de un informe.

Editar con tus datos SVG Spec JSON

Datos: label · value · change · sparkline · target · unit
Buena para: Dar unas pocas cifras clave con el contexto que las hace legibles: cuánto cambian y contra qué objetivo.
Evítala cuando: Cuando son muchos indicadores: más de ocho tarjetas dejan de leerse como cabecera.
Se lee bien: Entre 1 y 8 elementos; dibuja hasta 300
Datos que faltan: Dibuja el valor ausente como cero.
Accesibilidad: Lector de pantalla: tabla de datos · respeta «reducir movimiento»

Forma de los datos

Qué columnas pide

Columna	Tipo	Para qué
`label`	string	Nombre del indicador. OBLIGATORIA: sin ella la pieza LANZA (antes devolvía cero tarjetas con salida [ok]). Además decide el SIGNO: si contiene una palabra «mala» (coste, churn…), subir se pinta en rojo.
`value`	any	La cifra grande. OBLIGATORIA: sin ella la pieza LANZA (antes ponía 0 en todas y salía una rejilla de ceros). Se acepta compuesta («$1,2M», «34 %») y de ahí se DEDUCE la unidad si no hay columna de unidad.
`change` · opcional	any	Variación en %. Se resuelve SÓLO por nombre —sin paso de tipo—: con el paso de tipo caía en la columna del valor y la tarjeta estampaba la misma cifra como variación (medido: «↑ 10,0 %» para un valor de 10). Ausente, la insignia no se dibuja: nadie la midió.
`sparkline` · opcional	string	La SERIE de la línea de tendencia, separada por `;` o espacios («2.8;3.0;3.2»). Ausente = sin línea. Antes no existía este rol: la línea se FABRICABA a partir del valor y del % con ruido de seno y coseno, y se dibujaba como si fuera medida.
`target` · opcional	any	El objetivo contra el que se juzga la cifra. También sólo por nombre: por tipo caía en el valor y la barra de progreso salía al 100 % siempre.
`unit` · opcional	string	Símbolo de moneda o «%». Si falta se infiere del texto de `value`, nunca del locale.

Tamaños

Recompuesta, no encogida

El motor vuelve a componer la pieza a cada ancho: los rótulos conservan su cuerpo y la figura gana alto si lo necesita.

Móvil · 408 × 468 px

Escritorio · 848 × 642 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Cada cifra necesita su variación o su objetivo al lado?

Si basta con la cifra y su rótulo, el mosaico de cifras es más sobrio.

Sí: quédate con tarjeta de kpi

No: usa Mosaico de cifras

¿Son pocas cifras, hasta ocho?

Con muchos indicadores, una tabla con sparklines los ordena en filas.

Sí: quédate con tarjeta de kpi

No: usa Tabla con sparklines

¿La cifra es lo principal y el objetivo, contexto?

Si el argumento es cuánto falta para el objetivo y en qué tramo cae, el gráfico de bala lo mide.

Sí: quédate con tarjeta de kpi

No: usa Gráfico de bala

Código

La misma pieza, con tus datos

import { getPreset, renderComposition } from 'visx-render/node';

const spec = await getPreset('kpicard');
spec.data.rows = misFilas; // label, value
const { svg, warnings } = await renderComposition(spec);

También en React con Chart y prepareComposition. Guía para desarrolladores →

Dudas

¿Por qué una subida sale en rojo?

Porque el nombre del indicador decide el signo: si contiene una palabra que indica algo malo, como coste, subir es malo y se pinta en rojo.

¿De dónde sale la línea de tendencia?

De una columna con la serie escrita como valores separados por punto y coma o espacios. Sin esa columna no hay línea: no se inventa.

¿Cómo sabe la unidad?

Por una columna de unidad o, si no la hay, por el texto de la cifra («1,2 M€», «34 %»). Nunca por el idioma del sistema.

¿Qué hace si faltan datos?

Dibuja el valor ausente como cero. Si un hueco no es un cero en tus datos, rellénalo o elimina la fila antes de dibujar.

¿Cómo se ve en el móvil?

El motor la recompone a 360 px de ancho —rótulos, leyenda y alto— en vez de encoger la versión de escritorio.

Relacionadas

Otras formas de responder «comparar cifras»

Guía para elegir: comparar cifras →