Angular Progress, Meter & Ring Metrics | ng-hub-ui-metrics
Read-only Angular metric primitives — a linear progress bar, a graded meter and a circular ring gauge — driven by design-system tokens with full ARIA semantics.
API reference
Here's the full contract for metrics: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.
Inputs
Dial metrics in with 19 inputs. Bind them like any Angular @Input.
| Name | Type | Default | Description |
|---|---|---|---|
hub-progress · value | number | 0 | Current progress value, expressed on the [0, max] scale. |
hub-progress · max | number | 100 | Upper bound of the progress scale. |
hub-progress · indeterminate | boolean | false | Renders a looping bar for work of unknown duration; drops aria-valuenow. |
hub-progress · color | HubMetricsColor | 'primary' | Semantic accent driving the indicator colour, mapped to the --hub-sys-color-* token family. |
hub-progress · size | HubProgressSize | 'md' | Size token controlling the bar thickness (sm, md or lg). |
hub-progress · showValue | boolean | false | Whether the rounded percentage is rendered next to the bar. |
hub-progress · label | string | '' | Accessible label describing what the progress bar measures. |
hub-meter · value | number | 0 | Current measurement, expressed on the [min, max] scale. |
hub-meter · min | number | 0 | Lower bound of the scale. |
hub-meter · max | number | 1 | Upper bound of the scale. |
hub-meter · low | number | undefined | undefined | Upper limit of the "low" region; defaults to min when omitted. |
hub-meter · high | number | undefined | undefined | Lower limit of the "high" region; defaults to max when omitted. |
hub-meter · optimum | number | undefined | undefined | Preferred point of the range; defaults to the midpoint when omitted. |
hub-ring · value | number | 0 | Score value, expressed as a 0..1 ratio or a 0..max figure. |
hub-ring · max | number | 1 | Upper bound the value is normalized against. |
hub-ring · size | number | string | '4rem' | Outer diameter of the ring (number is treated as px, or any CSS length string). |
hub-ring · thickness | number | string | '0.5rem' | Stroke width of the ring (number is treated as px, or any CSS length string). |
hub-ring · thresholds | HubRingThresholds | undefined | undefined | Optional colour thresholds recolouring the indicator by band (low/high). |
hub-ring · showValue | boolean | true | Whether the rounded percentage is rendered in the centre. |
Outputs
No outputs documented yet.
Templates
Make it yours — 1 template slots let you project custom markup.
| Name | Description | Example |
|---|---|---|
hub-ring · <ng-content> | Content projected into the ring centre as a caption, rendered alongside (or instead of) the built-in percentage. | <hub-ring [value]="0.82" [thresholds]="{ low: 0.4, high: 0.75 }">Score</hub-ring> |