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.

Visión General

Por qué los equipos buscan esta librería

Usa ng-hub-ui-metrics cuando tu aplicación Angular necesite visualizar un único valor —progreso de subida, capacidad, una puntuación o una valoración— sin recurrir a una librería de gráficos completa.

Instalación

npm install ng-hub-ui-metrics

Ir a

Ideal para

  • progreso de subidas y tareas
  • medidores de disco, memoria y capacidad
  • puntuaciones de calidad y valoraciones
  • anillos de KPI para paneles

Sobre metrics

ng-hub-ui-metrics es una pequeña familia de primitivas de presentación. `hub-progress` representa una barra lineal determinada o indeterminada; `hub-meter` gradúa un escalar respecto a una meseta `[low, high]` siguiendo la semántica de `<meter>` de HTML; `hub-ring` dibuja una puntuación normalizada como un arco SVG con un texto proyectado opcional. Ninguno de los componentes fija un color de forma rígida: leen las familias compartidas `--hub-sys-color-*` y exponen propiedades personalizadas `--hub-progress-*`, `--hub-meter-*` y `--hub-ring-*` para su tematización.

Guías de uso

Progreso lineal

Una barra de progreso determinada o indeterminada con una escala de tamaños, colores semánticos y una etiqueta de valor opcional.

Ejemplos:
Barras de progreso

Barras de progreso

Determinate progress with value labelsDocuments92%Images68%Videos34%Archives12%
Size scale
IndeterminateSyncing workspace

Medidor graduado

Un indicador que sigue la semántica de <meter> de HTML y se recolorea por banda en función de la meseta low/high y del punto óptimo.

Ejemplos:
Medidores graduados

Medidores graduados

Primary storage40% used
Media library90% used
Battery reserve10% left

Indicador de anillo circular

Un anillo SVG que representa una puntuación normalizada, con umbrales de color y un texto proyectado mediante <ng-content>.

Ejemplos:
Indicadores de anillo

Indicadores de anillo

92%Coverage
58%Performance
34%SEO
A+Custom caption

Tematización

Tiñe una primitiva con el input semántico `color` (asignado a las familias `--hub-sys-color-*` del ds), o recolorea las tres a la vez con el mixin SCSS `hub-metrics-theme()` de una sola llamada y las propiedades personalizadas `--hub-*`.

Ejemplos:
Tematización con el mixin y colores semánticos

Tematización con el mixin y colores semánticos

Semantic colours — the color input reads the design-system --hub-sys-color-* familiesprimary70%success70%warning70%danger70%neutral70%
Custom theme — one hub-metrics-theme() include retints all three primitives at once (see the CSS tab)
Coverage64%86%Score

Características clave

Cambios recientes

Version 22.0.0 - 7/5/26, 12:00 AM

added: HubProgressComponent: a determinate/indeterminate linear progress bar with a size scale, semantic colours and an optional value label.

added: HubMeterComponent: a graded gauge following HTML <meter> semantics that selects its fill band from the low/high plateau and the optimum point.

added: HubRingComponent: a circular SVG ring gauge with colour thresholds, a projected centre caption and exportAs "hubGauge".

added: CSS-variable theming surface (--hub-progress-*, --hub-meter-*, --hub-ring-*) mapped onto the shared --hub-sys-color-* token families.

Librerías relacionadas

ng-hub-ui-skeleton ng-hub-ui-badges ng-hub-ui-stepper