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-*` для темизации.

Руководства по возможностям

Линейный прогресс

Определённый или неопределённый индикатор прогресса с шкалой размеров, семантическими цветами и необязательной подписью значения.

Примеры:
Индикаторы прогресса

Индикаторы прогресса

Determinate progress with value labelsDocuments92%Images68%Videos34%Archives12%
Size scale
IndeterminateSyncing workspace

Градуированный измеритель

Шкала, следующая семантике HTML <meter>, которая перекрашивает себя по диапазону относительно плато low/high и точки оптимума.

Примеры:
Градуированные измерители

Градуированные измерители

Primary storage40% used
Media library90% used
Battery reserve10% left

Круговой кольцевой измеритель

SVG-кольцо, отображающее нормализованную оценку, с цветовыми порогами и подписью, проецируемой через <ng-content>.

Примеры:
Кольцевые измерители

Кольцевые измерители

92%Coverage
58%Performance
34%SEO
A+Custom caption

Оформление

Окрасьте один примитив семантическим входом `color` (сопоставленным с семействами `--hub-sys-color-*` из ds) или перекрасьте все три сразу с помощью SCSS-миксина `hub-metrics-theme()` за один вызов и пользовательских свойств `--hub-*`.

Примеры:
Оформление через mixin и семантические цвета

Оформление через mixin и семантические цвета

Semantic colours — the color input reads the design-system --hub-sys-color-* familiesprimary70%success70%warning70%danger70%neutral70%
Custom theme — one hub-metrics-theme() include retints all three primitives at once (see the CSS tab)
Coverage64%86%Score

Ключевые возможности

Последние изменения

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.