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.
Última actualización 17 ago 2026
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-metricsIr 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
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
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
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
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)Características clave
Cambios recientes
Version 22.2.2 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.2.1 - 7/28/26, 12:00 AM
fixed: The package could not be published: tsconfig.lib.prod.json was missing "compilationMode": "partial", so production builds emitted full Ivy output, which npm publishing rejects. 22.2.0 never reached the registry; this release carries the 22.2.0 changes (canonical resolveHubAccent from ng-hub-ui-utils) plus the build fix.
Version 22.2.0 - 7/28/26, 12:00 AM
changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts (used by <hub-progress>) has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.
added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.
Version 22.1.0 - 7/7/26, 12:00 AM
changed: BREAKING (packaging) — SCSS ships at ng-hub-ui-metrics/styles. The theme mixin now builds to dist/metrics/styles/... (was dist/metrics/src/lib/styles/...), so @use 'ng-hub-ui-metrics/styles' resolves. Update any @use that reached into src/lib/styles.
changed: <hub-progress> color accepts ANY colour. On top of the built-in semantic accents, the input now also accepts a registered custom accent and a literal colour (#ff0000, rgb(...), oklch(...), a CSS named colour), resolved through the shared resolveHubAccent resolver (a local copy of the canonical ng-hub-ui-utils helper): a bareword becomes var(--hub-sys-color-<name>, <name>); a literal is used as-is. The single --hub-<comp>-accent slot derives the rest of the family, so built-in colours are unchanged.
changed: Internal — host bindings moved to the host metadata object. @HostBinding / @HostListener decorators were replaced by the host object in the component/directive metadata (Angular style guide). No public API or behaviour change.
Version 22.0.1 - 7/6/26, 12:00 AM
fixed: Wrapper / mixin theming now actually retints the primitives. Each component declares its token defaults on its own element (:where(.hub-progress) / :where(.hub-meter) / :where(.hub-ring)), and a custom property set on the element wins over one inherited from an ancestor — so a bare .wrapper { --hub-*: … } override, and the hub-metrics-theme() mixin that emitted such overrides, had no effect. The mixin now emits its token overrides ON the metrics elements as descendants of the include scope (<scope> :where(.hub-progress, .hub-meter, .hub-ring)), which beats the per-element defaults and reaches the components.
fixed: <hub-ring> host role corrected to meter (was img, which does not expose the aria-valuemin / -valuemax / -valuenow / -valuetext attributes the component sets).
changed: <hub-progress> color input is now optional (HubMetricsColor | undefined, default undefined). When set it is applied inline as a per-instance override; when omitted the accent falls back to the --hub-progress-accent token so a theme (mixin / token override) can drive it. The rendered default is unchanged (primary).
added: docs/css-variables-reference.md — complete CSS custom-property reference for <hub-progress>, <hub-meter> and <hub-ring>, with the theming guidance above.
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.