Angular 进度条、计量表与环形指标 | ng-hub-ui-metrics
只读的 Angular 指标基元——一个线性进度条、一个分级计量表和一个圆环形仪表——由设计系统令牌驱动，并具备完整的 ARIA 语义。
最后更新 2026年8月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-*` 系列）为单个基元着色，或用一次调用的 SCSS mixin `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.