Angular のプログレス、メーター、リングメトリクス | ng-hub-ui-metrics
読み取り専用の Angular メトリクスプリミティブ — リニアプログレスバー、段階付きメーター、円形リングゲージ — デザインシステムトークンで駆動され、完全な ARIA セマンティクスを備えています。
最終更新 2026/08/17
概要
チームがこのライブラリを探す理由
Angular アプリケーションで単一の値 — アップロードの進捗、容量、スコア、評価など — を、本格的なチャートライブラリを取り込むことなく可視化する必要があるときに ng-hub-ui-metrics を使用してください。
インストール
npm install ng-hub-ui-metricsジャンプ
最適な用途
- アップロードとタスクの進捗
- ディスク、メモリ、容量のメーター
- 品質スコアと評価
- ダッシュボードの KPI リング
について metrics
ng-hub-ui-metrics は、表示用プリミティブの小さなファミリーです。`hub-progress` は確定または不確定のリニアバーを描画し、`hub-meter` は HTML `<meter>` セマンティクスに従って `[low, high]` のプラトーに対してスカラーを段階付けし、`hub-ring` は正規化されたスコアを SVG の弧として描画し、任意で投影されたキャプションを備えます。いずれのコンポーネントも色をハードコードせず、共有された `--hub-sys-color-*` ファミリーを読み取り、テーマ設定のために `--hub-progress-*`、`--hub-meter-*`、`--hub-ring-*` のカスタムプロパティを公開します。
機能ガイド
リニアプログレス
サイズスケール、セマンティックカラー、任意の値ラベルを備えた、確定または不確定のプログレスバー。
サンプル:
プログレスバー
プログレスバー
段階付きメーター
HTML の <meter> セマンティクスに従うゲージで、low/high のプラトーと最適点を基準にバンドごとに色を変えます。
サンプル:
段階付きメーター
段階付きメーター
円形リングゲージ
正規化されたスコアを描画する SVG リングで、カラーしきい値と、<ng-content> を通して投影されるキャプションを備えています。
サンプル:
リングゲージ
リングゲージ
テーマ設定
セマンティックな `color` 入力(ds の `--hub-sys-color-*` ファミリーに対応)で 1 つのプリミティブを色付けするか、1 回の呼び出しで済む SCSS mixin `hub-metrics-theme()` と `--hub-*` カスタムプロパティで 3 つすべてを一度に色付けし直します。
サンプル:
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.