Indicador semicircular

Una cifra de satisfacción o avance.

Definición

El indicador semicircular llena un arco con una sola cifra medida contra su máximo. El arco vacío cuenta tanto como el lleno: dice cuánto queda hasta el techo. Se usa en cuadros de mando para el grado de cumplimiento de un objetivo o la ocupación de un recurso.

Editar con tus datos SVG Spec JSON

Datos: label · value · max
Buena para: Enseñar qué parte de un máximo declarado se ha alcanzado.
Evítala cuando: Cuando hay más de una cifra que enseñar: la pieza admite una sola fila y se niega a dibujar si trae más.
Se lee bien: Entre 1 y 1 elementos; dibuja hasta 1
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` · opcional	string	El nombre de la medida, bajo la cifra central. Sin ninguna columna de texto la pieza devuelve cero filas y el medidor sale en blanco.
`value` · opcional	number	La cifra que llena el arco. UNA fila: si el spec trae más, la pieza lanza con la cuenta en vez de dibujar la primera y tirar el resto. Si además de la cifra viene una columna de unidad («unit», «units», «unidad»), se pega al numeral del centro.
`max`	number	El techo contra el que se mide, EXIGIDO por `requireColumn`: nombre exacto o normalizado, y si no casa la pieza lanza nombrando las columnas que sí trae el spec. Antes se resolvía con `findColumn(rows, [max], numérica)`, cuya caída por TIPO cogía la primera numérica —el propio valor— y dibujaba el arco lleno: medido, un 42 sin techo salía al 100 %.

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 × 384 px

Escritorio · 848 × 604 px

Cuándo usarla

Tres preguntas antes de elegirla

¿Es una sola cifra?

Si son varias métricas con sus objetivos, el gráfico de bala las pone en fila.

Sí: quédate con indicador semicircular

No: usa Gráfico de bala

¿Basta con la cifra contra su máximo?

Si hay que acompañarla de su variación frente a otro periodo, la tarjeta de KPI lo hace.

Sí: quédate con indicador semicircular

No: usa Tarjeta de KPI

¿Se quiere dibujar la proporción, no sólo escribirla?

Si basta con la cifra escrita junto a otras, el mosaico de cifras las presenta sin forma.

Sí: quédate con indicador semicircular

No: usa Mosaico de cifras

Código

La misma pieza, con tus datos

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

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

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

Dudas

¿Por qué hace falta el máximo?

Porque la cifra sólo significa algo contra su techo. La pieza exige la columna del máximo y, si no la encuentra, se niega a dibujar nombrando las columnas que sí trae.

¿Puedo añadir la unidad?

Sí: si viene una columna de unidad, se pega a la cifra central.

¿Dónde va el nombre de la medida?

Bajo la cifra central, tomado de la columna de texto. Sin ninguna columna de texto el medidor sale en blanco.

¿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