Angular Progress, Meter и Ring | ng-hub-ui-metrics
Примитивы метрик Angular только для чтения — линейный индикатор прогресса, градуированный измеритель и круговой кольцевой измеритель — управляемые токенами дизайн-системы с полной семантикой ARIA.
Последнее обновление 17 авг. 2026 г.
Обзор
Почему команды ищут эту библиотеку
Используйте ng-hub-ui-metrics, когда вашему Angular-приложению нужно визуализировать одно значение — прогресс загрузки, ёмкость, оценку или рейтинг — без подключения полноценной библиотеки для построения диаграмм.
Установка
npm install ng-hub-ui-metricsПерейти к
Идеально для
- прогресс загрузок и задач
- измерители диска, памяти и ёмкости
- оценки качества и рейтинги
- кольца KPI для дашбордов
О библиотеке metrics
ng-hub-ui-metrics — это небольшое семейство презентационных примитивов. `hub-progress` отрисовывает определённую или неопределённую линейную полосу; `hub-meter` градуирует скаляр относительно плато `[low, high]`, следуя семантике HTML `<meter>`; `hub-ring` рисует нормализованную оценку в виде SVG-дуги с необязательной проецируемой подписью. Ни один из компонентов не задаёт цвет жёстко — они читают общие семейства `--hub-sys-color-*` и предоставляют пользовательские свойства `--hub-progress-*`, `--hub-meter-*` и `--hub-ring-*` для темизации.
Руководства по возможностям
Линейный прогресс
Определённый или неопределённый индикатор прогресса с шкалой размеров, семантическими цветами и необязательной подписью значения.
Примеры:
Индикаторы прогресса
Индикаторы прогресса
Градуированный измеритель
Шкала, следующая семантике HTML <meter>, которая перекрашивает себя по диапазону относительно плато low/high и точки оптимума.
Примеры:
Градуированные измерители
Градуированные измерители
Круговой кольцевой измеритель
SVG-кольцо, отображающее нормализованную оценку, с цветовыми порогами и подписью, проецируемой через <ng-content>.
Примеры:
Кольцевые измерители
Кольцевые измерители
Оформление
Окрасьте один примитив семантическим входом `color` (сопоставленным с семействами `--hub-sys-color-*` из ds) или перекрасьте все три сразу с помощью SCSS-миксина `hub-metrics-theme()` за один вызов и пользовательских свойств `--hub-*`.
Примеры:
Оформление через mixin и семантические цвета
Оформление через mixin и семантические цвета
color input reads the design-system --hub-sys-color-* familieshub-metrics-theme() include retints all three primitives at once (see the CSS tab)Ключевые возможности
Последние изменения
Version 22.2.2 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.2.1 - 7/28/26, 12:00 AM
fixed: The package could not be published: tsconfig.lib.prod.json was missing "compilationMode": "partial", so production builds emitted full Ivy output, which npm publishing rejects. 22.2.0 never reached the registry; this release carries the 22.2.0 changes (canonical resolveHubAccent from ng-hub-ui-utils) plus the build fix.
Version 22.2.0 - 7/28/26, 12:00 AM
changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts (used by <hub-progress>) has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.
added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.
Version 22.1.0 - 7/7/26, 12:00 AM
changed: BREAKING (packaging) — SCSS ships at ng-hub-ui-metrics/styles. The theme mixin now builds to dist/metrics/styles/... (was dist/metrics/src/lib/styles/...), so @use 'ng-hub-ui-metrics/styles' resolves. Update any @use that reached into src/lib/styles.
changed: <hub-progress> color accepts ANY colour. On top of the built-in semantic accents, the input now also accepts a registered custom accent and a literal colour (#ff0000, rgb(...), oklch(...), a CSS named colour), resolved through the shared resolveHubAccent resolver (a local copy of the canonical ng-hub-ui-utils helper): a bareword becomes var(--hub-sys-color-<name>, <name>); a literal is used as-is. The single --hub-<comp>-accent slot derives the rest of the family, so built-in colours are unchanged.
changed: Internal — host bindings moved to the host metadata object. @HostBinding / @HostListener decorators were replaced by the host object in the component/directive metadata (Angular style guide). No public API or behaviour change.
Version 22.0.1 - 7/6/26, 12:00 AM
fixed: Wrapper / mixin theming now actually retints the primitives. Each component declares its token defaults on its own element (:where(.hub-progress) / :where(.hub-meter) / :where(.hub-ring)), and a custom property set on the element wins over one inherited from an ancestor — so a bare .wrapper { --hub-*: … } override, and the hub-metrics-theme() mixin that emitted such overrides, had no effect. The mixin now emits its token overrides ON the metrics elements as descendants of the include scope (<scope> :where(.hub-progress, .hub-meter, .hub-ring)), which beats the per-element defaults and reaches the components.
fixed: <hub-ring> host role corrected to meter (was img, which does not expose the aria-valuemin / -valuemax / -valuenow / -valuetext attributes the component sets).
changed: <hub-progress> color input is now optional (HubMetricsColor | undefined, default undefined). When set it is applied inline as a per-instance override; when omitted the accent falls back to the --hub-progress-accent token so a theme (mixin / token override) can drive it. The rendered default is unchanged (primary).
added: docs/css-variables-reference.md — complete CSS custom-property reference for <hub-progress>, <hub-meter> and <hub-ring>, with the theming guidance above.
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.