API-Referenz

Hier ist der vollständige Vertrag für metrics: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle metrics mit 19 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`hub-progress · value`	`number`	`0`	Aktueller Fortschrittswert, ausgedrückt auf der [0, max]-Skala.
`hub-progress · max`	`number`	`100`	Obere Grenze der Fortschrittsskala.
`hub-progress · indeterminate`	`boolean`	`false`	Stellt einen sich wiederholenden Balken für Vorgänge unbekannter Dauer dar; lässt aria-valuenow weg.
`hub-progress · color`	`HubMetricsColor`	`'primary'`	Semantischer Akzent, der die Farbe des Indikators bestimmt, abgebildet auf die Token-Familie --hub-sys-color-*.
`hub-progress · size`	`HubProgressSize`	`'md'`	Größen-Token, das die Dicke des Balkens steuert (sm, md oder lg).
`hub-progress · showValue`	`boolean`	`false`	Ob der gerundete Prozentwert neben dem Balken angezeigt wird.
`hub-progress · label`	`string`	`''`	Barrierefreie Beschriftung, die beschreibt, was der Fortschrittsbalken misst.
`hub-meter · value`	`number`	`0`	Aktueller Messwert, ausgedrückt auf der [min, max]-Skala.
`hub-meter · min`	`number`	`0`	Untere Grenze der Skala.
`hub-meter · max`	`number`	`1`	Obere Grenze der Skala.
`hub-meter · low`	`number \| undefined`	`undefined`	Obere Grenze des „low“-Bereichs; entspricht standardmäßig min, wenn nicht angegeben.
`hub-meter · high`	`number \| undefined`	`undefined`	Untere Grenze des „high“-Bereichs; entspricht standardmäßig max, wenn nicht angegeben.
`hub-meter · optimum`	`number \| undefined`	`undefined`	Bevorzugter Punkt des Bereichs; entspricht standardmäßig der Mitte, wenn nicht angegeben.
`hub-ring · value`	`number`	`0`	Wert, ausgedrückt als Verhältnis 0..1 oder als Zahl 0..max.
`hub-ring · max`	`number`	`1`	Obere Grenze, gegen die der Wert normalisiert wird.
`hub-ring · size`	`number \| string`	`'4rem'`	Außendurchmesser des Rings (eine Zahl wird als px interpretiert, oder eine beliebige CSS-Längenangabe).
`hub-ring · thickness`	`number \| string`	`'0.5rem'`	Strichbreite des Rings (eine Zahl wird als px interpretiert, oder eine beliebige CSS-Längenangabe).
`hub-ring · thresholds`	`HubRingThresholds \| undefined`	`undefined`	Optionale Farbschwellen, die den Indikator je nach Bereich umfärben (low/high).
`hub-ring · showValue`	`boolean`	`true`	Ob der gerundete Prozentwert in der Mitte angezeigt wird.

Outputs

Noch keine Outputs dokumentiert.

Templates

Mach es zu deinem — 1 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`hub-ring · <ng-content>`	Inhalt, der als Beschriftung in die Mitte des Rings projiziert und neben (oder anstelle) des integrierten Prozentwerts angezeigt wird.	`<hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }">Score</hub-ring>`