Référence API

Voici le contrat complet de metrics : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.

Inputs

Réglez metrics à votre goût avec 19 inputs. Liez-les comme n’importe quel @Input Angular.

Nom	Type	Par défaut	Description
`hub-progress · value`	`number`	`0`	Valeur de progression actuelle, exprimée sur l'échelle [0, max].
`hub-progress · max`	`number`	`100`	Borne supérieure de l'échelle de progression.
`hub-progress · indeterminate`	`boolean`	`false`	Affiche une barre en boucle pour un travail de durée inconnue ; supprime aria-valuenow.
`hub-progress · color`	`HubMetricsColor`	`'primary'`	Accent sémantique déterminant la couleur de l'indicateur, mappé sur la famille de tokens --hub-sys-color-*.
`hub-progress · size`	`HubProgressSize`	`'md'`	Token de taille contrôlant l'épaisseur de la barre (sm, md ou lg).
`hub-progress · showValue`	`boolean`	`false`	Indique si le pourcentage arrondi est affiché à côté de la barre.
`hub-progress · label`	`string`	`''`	Étiquette accessible décrivant ce que mesure la barre de progression.
`hub-meter · value`	`number`	`0`	Mesure actuelle, exprimée sur l'échelle [min, max].
`hub-meter · min`	`number`	`0`	Borne inférieure de l'échelle.
`hub-meter · max`	`number`	`1`	Borne supérieure de l'échelle.
`hub-meter · low`	`number \| undefined`	`undefined`	Limite supérieure de la région « low » ; par défaut min si omise.
`hub-meter · high`	`number \| undefined`	`undefined`	Limite inférieure de la région « high » ; par défaut max si omise.
`hub-meter · optimum`	`number \| undefined`	`undefined`	Point préféré de la plage ; par défaut le point médian si omis.
`hub-ring · value`	`number`	`0`	Valeur de score, exprimée sous forme de ratio 0..1 ou d'un nombre 0..max.
`hub-ring · max`	`number`	`1`	Borne supérieure par rapport à laquelle la valeur est normalisée.
`hub-ring · size`	`number \| string`	`'4rem'`	Diamètre extérieur de l'anneau (un nombre est traité comme des px, ou n'importe quelle chaîne de longueur CSS).
`hub-ring · thickness`	`number \| string`	`'0.5rem'`	Épaisseur du trait de l'anneau (un nombre est traité comme des px, ou n'importe quelle chaîne de longueur CSS).
`hub-ring · thresholds`	`HubRingThresholds \| undefined`	`undefined`	Seuils de couleur optionnels recolorant l'indicateur par plage (low/high).
`hub-ring · showValue`	`boolean`	`true`	Indique si le pourcentage arrondi est affiché au centre.

Outputs

Aucun output documenté pour le moment.

Templates

Faites-le vôtre — 1 emplacements de template vous permettent de projeter votre propre balisage.

Nom	Description	Exemple
`hub-ring · <ng-content>`	Contenu projeté au centre de l'anneau en tant que légende, affiché à côté (ou à la place) du pourcentage intégré.	`<hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }">Score</hub-ring>`