Angular のプログレス、メーター、リングメトリクス | ng-hub-ui-metrics
読み取り専用の Angular メトリクスプリミティブ — リニアプログレスバー、段階付きメーター、円形リングゲージ — デザインシステムトークンで駆動され、完全な ARIA セマンティクスを備えています。
概要
チームがこのライブラリを探す理由
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.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.