Angular 进度条、计量表与环形指标 | ng-hub-ui-metrics
只读的 Angular 指标基元——一个线性进度条、一个分级计量表和一个圆环形仪表——由设计系统令牌驱动,并具备完整的 ARIA 语义。
最后更新 2026年9月21日
概览
团队为何搜索这个库
当你的 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 平台区间及最优点的所在区段为自身重新着色。
示例:
分级计量表
分级计量表
The caption beside each bar is plain text: it is not attached to the gauge, and a meter is named by its author alone. label is what a screen reader reads out — it renders nothing, so the demo looks the same with it and without it.
圆环形仪表
一个用于呈现归一化分数的 SVG 环,具有颜色阈值以及通过 <ng-content> 投影的说明文字。
示例:
环形仪表
环形仪表
The projected caption is decoration, and so is the percentage in the middle: neither names a role="meter". label does, and it is the only way in — a ring used to announce itself as "92%", which says nothing about what was measured.
主题化
用语义化的 `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.4.2 - 9/21/26, 12:00 AM
fixed: hub-ring announces the value it actually draws. aria-valuenow was bound to the raw value while the arc paints the ratio clamped into 0..max, so a value past max drew a full ring and announced a number outside the range it was measured against.
Version 22.4.1 - 9/16/26, 12:00 AM
changed: Repository, issue and README links follow the move to the hub-env organization. Issues for every Hub UI package are now gathered in hub-env/hub-ui, and the repository and bugs fields of the manifest point at the new addresses. No code, types or styles change.
Version 22.4.0 - 9/8/26, 12:00 AM
changed: The three primitives keep their stylesheet to themselves. <hub-progress>, <hub-meter> and <hub-ring> shipped with ViewEncapsulation.None, which publishes every rule they emit into the application's global cascade, where it competes with rules the library never sees and cannot be removed by anyone who did not know it was there. None of the four reasons CODING_RULES.md allows for leaving encapsulation applied here: all three paint their own host and their own template and nothing else. The token defaults move from :where(.hub-progress) to :where(:host), which costs nothing because a custom property inherits, and the size and band modifiers, which ride on the host, are matched through :host(). Theming is untouched: the defaults stay at specificity zero and hub-metrics-theme() still emits its rules from your own sheet against the host element. See BREAKING_CHANGES.md for the one case that does change.
added: ng-hub-ui-ds is declared as an optional peer dependency (>=22.0.0). Every token in the three stylesheets has always resolved through the --hub-sys-* / --hub-ref-* ladder and the manifest said nothing about it, so a consumer reading the package on npm had no way to learn that installing the token package is what gives these primitives the family palette and its dark mode. It stays optional because it truly is: each token carries a literal fallback and the library renders without it.
Version 22.3.0 - 9/6/26, 12:00 AM
added: <hub-meter> and <hub-ring> accept a label input, mirroring <hub-progress>. An element with role=meter is named by its author alone: the meter renders no text of its own and the caption projected into the ring is not a name, so both primitives reached assistive technology unnamed and the ring could not even be named from outside. The input feeds aria-label through a host binding and is dropped when empty, so an outer aria-labelledby still applies; an aria-label written on the element itself does not, because the host binding owns the attribute and clears it whenever label is unset. See BREAKING_CHANGES.md.
added: FUNCTIONALITIES.md, the coverage table the rest of the family ships. Nothing stated which parts of the three primitives a live example actually demonstrates and which are only described in prose, so a reader had to open the docs site and infer it.
fixed: <hub-ring> no longer takes its accessible name from its own percentage. aria-label was hard-wired to the rounded value already carried by aria-valuetext, which announced the number twice and overwrote any name written on the element. The name now comes from the new label input, and the percentage stays in aria-valuetext.
fixed: <hub-ring> size and thickness no longer shadow their own tokens. Both defaulted to a concrete length written inline as a custom property on every render, so --hub-ring-size and --hub-ring-thickness, advertised as themeable by the README, the CSS reference and the ds token spec, could only be overridden with !important, and not even the hub-metrics-theme() mixin reached them. The inputs now default to undefined (their type widens accordingly) and the inline declaration is dropped when unset, leaving the stylesheet in charge with 4rem and var(--hub-ref-space-2, 0.5rem), the same values as before. Same shape as the 22.0.1 fix for the color input of <hub-progress>.
fixed: The README no longer advertises zero external dependencies. ng-hub-ui-utils has been a required peer since 22.2.0, because <hub-progress> imports resolveHubAccent from it, so anyone who followed the Quick Start installed a tree that cannot resolve. Both READMEs now state the dependency and the install command names it.
fixed: The <hub-progress> token table lists --hub-progress-accent. It is the root slot written by the color input and by the $accent of the mixin, and the one every other progress token derives from, yet it was the single token the table left out, so a theme author reading only the README could not see what to override.
fixed: HubRingThresholds.low described itself as inclusive (at or below) while the component treats a value equal to low as neutral. The JSDoc ships in the .d.ts, so the wrong sentence is what a consumer reads in their editor.
Version 22.2.4 - 9/1/26, 12:00 AM
changed: The homepage in the manifest points at this library's own documentation page rather than at the site root. It is the link a registry shows beside the package and the one a reader clicks from it, and landing on a front page they then have to search is a worse answer than landing on the reference for the package they were already looking at. Metadata only — no code, no types, no styles change, and nothing a consumer imports is affected.
Version 22.2.3 - 8/17/26, 12:00 AM
fixed: The published package declared no licence. An absent license field is not neutral — a registry reports it as unlicensed, which legally reads as all rights reserved, the most restrictive state possible rather than the most open. The intent was always MIT; it is now stated in package.json and carried in a LICENSE file that ships with the package.
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 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.
相关库
常见问题
在 Angular 里怎么做一个进度条?
安装 ng-hub-ui-metrics,同时装上必需的 peer 依赖 ng-hub-ui-utils,然后导入 HubProgressComponent。接着 <hub-progress [value]="72" label="Upload" showValue /> 就会渲染出这条进度条:max 默认 100,宿主带 role=progressbar 和 aria-valuenow,label 同时提供可见的说明文字和无障碍名称。时长未知时设置 indeterminate,它会去掉 aria-valuenow 并给宿主标上 aria-busy。
hub-progress、hub-meter 和 hub-ring 有什么区别?
hub-progress 是一条线性进度条,表示工作正在推进到完成,也是三者中唯一带不确定状态和 color 输入的。hub-meter 表示某个范围内的读数,用 low、high 和 optimum 划分区间,所以它声明 role=meter,并给出标明所在区间的 aria-valuetext。hub-ring 把同样的概念画成一段圆弧,可以配阈值,也是三者中唯一支持投影你自己说明文字的。注意默认值的差异:max 在 progress 上是 100,在 meter 和 ring 上是 1;showValue 在 progress 上默认关闭,在 ring 上默认开启。
怎么修改 Angular 进度条或仪表的颜色?
hub-progress 有一个 color 输入,可取 primary、secondary、success、danger、warning、info 和 neutral。hub-meter 和 hub-ring 则完全没有颜色输入:它们通过 --hub-progress-*、--hub-meter-* 和 --hub-ring-* 这些自定义属性改色,或者用 hub-metrics-theme() 这个 Sass mixin 一处改完。每个令牌都会回退到一个字面值,所以 ng-hub-ui-ds 是可选的,有没有它组件都能渲染。
ng-hub-ui-metrics 会采集分析数据或绘制图表吗?
两件都不会。它只提供三个只读元素,把你交给它的数字画出来;它不测量任何东西,不存储任何东西,也不往任何地方发送任何东西。这里没有图表,没有迷你折线图,没有 KPI 卡片,也没有数字滚动动画,底下更没有任何图表库依赖:那个圆环是手写的 SVG。如果你需要绘制一组数据序列,这不是你要的包。