Метрики Angular: Progress, Meter и Ring | ng-hub-ui-metrics

Примитивы метрик Angular только для чтения — линейный индикатор прогресса, градуированный измеритель и круговой кольцевой измеритель — управляемые токенами дизайн-системы с полной семантикой ARIA.

Обзор

Почему команды ищут эту библиотеку

Используйте 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.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.

Связанные библиотеки

ng-hub-ui-skeleton ng-hub-ui-badges ng-hub-ui-stepper