Métricas de progreso, medidor y anillo para Angular | ng-hub-ui-metrics
Primitivas de métricas de solo lectura para Angular — una barra de progreso lineal, un medidor graduado y un indicador de anillo circular — gobernadas por tokens del sistema de diseño con semántica ARIA completa.
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 19 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 | 'primary' | Acento semántico que determina el color del indicador, asignado a la familia de tokens --hub-sys-color-*. |
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-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 | '4rem' | Diámetro exterior del anillo (un número se interpreta como px, o cualquier cadena de longitud CSS). |
hub-ring · thickness | number | string | '0.5rem' | Grosor del trazo del anillo (un número se interpreta como px, o cualquier cadena de longitud CSS). |
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. |
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). | <hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }">Score</hub-ring> |