Angular Progress-, Meter- & Ring-Metriken | ng-hub-ui-metrics
Schreibgeschützte Angular-Metrik-Primitive — ein linearer Fortschrittsbalken, ein abgestufter Meter und eine kreisförmige Ringanzeige —, angetrieben von Design-System-Token mit vollständiger ARIA-Semantik.
Übersicht
Warum Teams nach dieser Bibliothek suchen
Verwenden Sie ng-hub-ui-metrics, wenn Ihre Angular-Anwendung einen einzelnen Wert visualisieren muss — Upload-Fortschritt, Kapazität, einen Score oder eine Bewertung — ohne eine vollständige Diagrammbibliothek einzubinden.
Installieren
npm install ng-hub-ui-metricsSpringen zu
Ideal für
- Upload- und Aufgabenfortschritt
- Datenträger-, Speicher- und Kapazitätsanzeigen
- Qualitätsscores und Bewertungen
- Dashboard-KPI-Ringe
Über metrics
ng-hub-ui-metrics ist eine kleine Familie von Darstellungs-Primitiven. `hub-progress` stellt einen bestimmten oder unbestimmten linearen Balken dar; `hub-meter` stuft einen Skalarwert gegen ein `[low, high]`-Plateau ein und folgt dabei der HTML-`<meter>`-Semantik; `hub-ring` zeichnet einen normalisierten Wert als SVG-Bogen mit einer optionalen projizierten Beschriftung. Keine der Komponenten kodiert eine Farbe fest — sie lesen die gemeinsamen `--hub-sys-color-*`-Familien und stellen die benutzerdefinierten Eigenschaften `--hub-progress-*`, `--hub-meter-*` und `--hub-ring-*` für das Theming bereit.
Funktionsleitfäden
Linearer Fortschritt
Ein bestimmter oder unbestimmter Fortschrittsbalken mit einer Größenskala, semantischen Farben und einer optionalen Wertbeschriftung.
Beispiele:
Fortschrittsbalken
Fortschrittsbalken
Abgestufter Meter
Eine Anzeige, die der HTML-<meter>-Semantik folgt und sich je nach Bereich relativ zum low/high-Plateau und zum Optimum-Punkt umfärbt.
Beispiele:
Abgestufte Meter
Abgestufte Meter
Kreisförmige Ringanzeige
Ein SVG-Ring, der einen normalisierten Wert darstellt, mit Farbschwellen und einer über <ng-content> projizierten Beschriftung.
Beispiele:
Ringanzeigen
Ringanzeigen
Theming
Färben Sie ein Primitive mit dem semantischen `color`-Input (den `--hub-sys-color-*`-Familien des ds zugeordnet) oder färben Sie alle drei auf einmal mit dem Ein-Aufruf-SCSS-Mixin `hub-metrics-theme()` und den `--hub-*`-Custom-Properties um.
Beispiele:
Theming mit dem Mixin und semantischen Farben
Theming mit dem Mixin und semantischen Farben
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)Hauptfunktionen
Letzte Änderungen
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.