Referencia API

Aquí tienes el contrato completo de metrics: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.

Inputs

Ajusta metrics a tu gusto con 21 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`hub-progress · value`	`number`	`0`	Valor de progreso actual, expresado en la escala [0, max].
`hub-progress · max`	`number`	`100`	Límite superior de la escala de progreso.
`hub-progress · indeterminate`	`boolean`	`false`	Muestra una barra en bucle para trabajos de duración desconocida; omite aria-valuenow.
`hub-progress · color`	`HubMetricsColor \| undefined`	`undefined`	Acento opcional que determina el color del indicador: una palabra suelta (nombre semántico, acento registrado o color con nombre CSS) se asigna a --hub-sys-color-<nombre> con la propia palabra como reserva, mientras que un literal (#hex, rgb(), oklch(), var()…) se pasa tal cual. Se aplica inline cuando se define; omítelo para que el token --hub-progress-accent mande el acento.
`hub-progress · size`	`HubProgressSize`	`'md'`	Token de tamaño que controla el grosor de la barra (sm, md o lg).
`hub-progress · showValue`	`boolean`	`false`	Si el porcentaje redondeado se muestra junto a la barra.
`hub-progress · label`	`string`	`''`	Etiqueta accesible que describe qué mide la barra de progreso.
`hub-meter · value`	`number`	`0`	Medición actual, expresada en la escala [min, max].
`hub-meter · min`	`number`	`0`	Límite inferior de la escala.
`hub-meter · max`	`number`	`1`	Límite superior de la escala.
`hub-meter · low`	`number \| undefined`	`undefined`	Límite superior de la región «baja»; si se omite, toma por defecto el valor de min.
`hub-meter · high`	`number \| undefined`	`undefined`	Límite inferior de la región «alta»; si se omite, toma por defecto el valor de max.
`hub-meter · optimum`	`number \| undefined`	`undefined`	Punto preferido del rango; si se omite, toma por defecto el punto medio.
`hub-meter · label`	`string`	`''`	Etiqueta accesible que nombra qué mide el medidor; a role=meter solo lo nombra quien lo usa, así que sin ella se queda sin nombre.
`hub-ring · value`	`number`	`0`	Valor de la puntuación, expresado como una proporción 0..1 o una cifra 0..max.
`hub-ring · max`	`number`	`1`	Límite superior respecto al cual se normaliza el valor.
`hub-ring · size`	`number \| string \| undefined`	`undefined`	Diámetro exterior del anillo (un número se interpreta como px, o cualquier cadena de longitud CSS); se aplica inline cuando se define. Omítelo para que mande el token --hub-ring-size.
`hub-ring · thickness`	`number \| string \| undefined`	`undefined`	Grosor del trazo del anillo (un número se interpreta como px, o cualquier cadena de longitud CSS); se aplica inline cuando se define. Omítelo para que mande el token --hub-ring-thickness.
`hub-ring · thresholds`	`HubRingThresholds \| undefined`	`undefined`	Umbrales de color opcionales que recolorean el indicador por banda (low/high).
`hub-ring · showValue`	`boolean`	`true`	Si el porcentaje redondeado se muestra en el centro.
`hub-ring · label`	`string`	`''`	Etiqueta accesible que nombra qué puntúa el anillo; ni el rótulo proyectado ni el porcentaje central pueden nombrar un role=meter.

Outputs

Todavía no hay outputs documentados.

Templates

Hazlo tuyo — 1 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`hub-ring · <ng-content>`	Contenido proyectado en el centro del anillo como texto, que se muestra junto al porcentaje integrado (o en su lugar). Es decoración, no un nombre: a un elemento con role="meter" lo nombra quien lo escribe, así que usa la entrada `label`.	`<hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }" label="Quality score">Score</hub-ring>`