Métriques Angular Progress, Meter et Ring | ng-hub-ui-metrics
Primitives de métriques Angular en lecture seule — une barre de progression linéaire, une jauge graduée et une jauge circulaire en anneau — pilotées par les tokens du design-system avec une sémantique ARIA complète.
Vue d’ensemble
Pourquoi les équipes recherchent cette bibliothèque
Utilisez ng-hub-ui-metrics lorsque votre application Angular a besoin de visualiser une valeur unique — progression d'un envoi, capacité, un score ou une note — sans intégrer une bibliothèque de graphiques complète.
Installation
npm install ng-hub-ui-metricsAller à
Idéal pour
- progression des envois et des tâches
- jauges de disque, de mémoire et de capacité
- scores de qualité et notes
- anneaux de KPI pour tableaux de bord
À propos de metrics
ng-hub-ui-metrics est une petite famille de primitives de présentation. `hub-progress` affiche une barre linéaire déterminée ou indéterminée ; `hub-meter` gradue un scalaire par rapport à un plateau `[low, high]` en suivant la sémantique HTML `<meter>` ; `hub-ring` dessine un score normalisé sous forme d'arc SVG avec une légende projetée optionnelle. Aucun des composants ne code une couleur en dur — ils lisent les familles partagées `--hub-sys-color-*` et exposent les propriétés personnalisées `--hub-progress-*`, `--hub-meter-*` et `--hub-ring-*` pour la thématisation.
Guides de fonctionnalités
Progression linéaire
Une barre de progression déterminée ou indéterminée avec une échelle de tailles, des couleurs sémantiques et une étiquette de valeur optionnelle.
Exemples:
Barres de progression
Barres de progression
Jauge graduée
Une jauge suivant la sémantique HTML <meter> qui se recolore par plage selon le plateau low/high et le point optimum.
Exemples:
Jauges graduées
Jauges graduées
Jauge circulaire en anneau
Un anneau SVG affichant un score normalisé, avec des seuils de couleur et une légende projetée via <ng-content>.
Exemples:
Jauges en anneau
Jauges en anneau
Thématisation
Teintez une primitive avec l'input sémantique `color` (associé aux familles `--hub-sys-color-*` du ds), ou recolorez les trois d'un coup avec le mixin SCSS `hub-metrics-theme()` en un seul appel et les propriétés personnalisées `--hub-*`.
Exemples:
Thématisation avec le mixin et les couleurs sémantiques
Thématisation avec le mixin et les couleurs sémantiques
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)Fonctionnalités clés
Changements récents
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.