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 21 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 \| undefined`	`undefined`	Optionaler Akzent, der die Farbe des Indikators bestimmt: ein einzelnes Wort (semantischer Name, registrierter Akzent oder benannte CSS-Farbe) wird auf --hub-sys-color-<name> abgebildet, mit dem Wort selbst als Fallback, während ein Literal (#hex, rgb(), oklch(), var()…) unverändert übernommen wird. Wird inline angewendet, wenn gesetzt; ohne Angabe bestimmt das Token --hub-progress-accent den Akzent.
`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-meter · label`	`string`	`''`	Barrierefreie Beschriftung, die benennt, was die Anzeige misst; role=meter erhält seinen Namen nur vom Autor, ohne sie bleibt die Anzeige namenlos.
`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 \| undefined`	`undefined`	Außendurchmesser des Rings (eine Zahl wird als px interpretiert, oder eine beliebige CSS-Längenangabe); wird inline angewendet, wenn gesetzt. Ohne Angabe bestimmt das Token --hub-ring-size den Durchmesser.
`hub-ring · thickness`	`number \| string \| undefined`	`undefined`	Strichbreite des Rings (eine Zahl wird als px interpretiert, oder eine beliebige CSS-Längenangabe); wird inline angewendet, wenn gesetzt. Ohne Angabe bestimmt das Token --hub-ring-thickness die Strichbreite.
`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.
`hub-ring · label`	`string`	`''`	Barrierefreie Beschriftung, die benennt, was der Ring bewertet; weder die projizierte Beschriftung noch der zentrierte Prozentwert können ein role=meter benennen.

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 wird und neben dem eingebauten Prozentwert (oder an dessen Stelle) erscheint. Er ist Dekoration, kein Name: Ein Element mit role="meter" wird allein vom Autor benannt — dafür gibt es die Eingabe `label`.	`<hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }" label="Quality score">Score</hub-ring>`