HIsheR
57 lines
2.5 KiB
TypeScript
57 lines
2.5 KiB
TypeScript
import { effect, h } from '@ui-arch/frame';
|
|
import type { ProgressRingProps } from './types.js';
|
|
|
|
const NS = 'http://www.w3.org/2000/svg';
|
|
// 缺省尺寸与环宽：96px 装得下百分比数字，8px 环宽在小尺寸下也不显笨
|
|
const SIZE = 96;
|
|
const THICK = 8;
|
|
|
|
/*** 建 SVG 元素并写属性：svg 必须 createElementNS，属性只能 setAttribute ***/
|
|
function svgEl(tag: string, attrs: Record<string, string | number>): SVGElement {
|
|
const el = document.createElementNS(NS, tag);
|
|
for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, String(v));
|
|
return el;
|
|
}
|
|
|
|
/*** 环形进度：SVG 双圆（底环 + 进度弧）靠 dasharray 画弧，value 变化时弧长与文字同步 ***/
|
|
export function progressRing(props: ProgressRingProps): HTMLElement {
|
|
const size = props.size ?? SIZE;
|
|
const thick = props.thickness ?? THICK;
|
|
const mid = size / 2;
|
|
const r = (size - thick) / 2; // 半径要扣掉环宽，否则弧会超出画布
|
|
const c = 2 * Math.PI * r; // 周长：dasharray 的分母
|
|
const read = (): number => (typeof props.value === 'function' ? props.value() : props.value); // 数值 / 信号同一口径
|
|
const svg = svgEl('svg', { viewBox: `0 0 ${size} ${size}`, width: size, height: size, 'aria-hidden': 'true' });
|
|
const track = svgEl('circle', { cx: mid, cy: mid, r, fill: 'none', 'stroke-width': thick, class: 'ua-ring-track' });
|
|
// 弧从 12 点方向顺时针长：整圆旋转 -90°，否则默认从 3 点位置起步
|
|
const arc = svgEl('circle', {
|
|
cx: mid, cy: mid, r, fill: 'none', 'stroke-width': thick,
|
|
class: 'ua-ring-arc', 'stroke-dasharray': `${0} ${c}`, 'stroke-linecap': 'round',
|
|
transform: `rotate(-90 ${mid} ${mid})`,
|
|
});
|
|
const text = h('span', { class: 'ua-ring-text' });
|
|
const wrap = h(
|
|
'div',
|
|
{
|
|
class: 'ua-ring',
|
|
role: 'progressbar',
|
|
'aria-valuemin': '0',
|
|
'aria-valuemax': '100',
|
|
style: `width:${size}px;height:${size}px`,
|
|
},
|
|
svg,
|
|
text,
|
|
);
|
|
svg.append(track, arc); // 底环先画，进度弧盖在上面
|
|
|
|
/*** 重绘：把百分比夹到 0-100，弧长按比例裁，文字与 aria-valuenow 同步 ***/
|
|
const paint = (): void => {
|
|
const pct = Math.min(100, Math.max(0, Math.round(read())));
|
|
arc.setAttribute('stroke-dasharray', `${(c * pct) / 100} ${c}`); // 只画这一段，剩下留空
|
|
if (props.showText !== false) text.textContent = props.label ?? `${pct}%`;
|
|
wrap.setAttribute('aria-valuenow', String(pct));
|
|
};
|
|
effect(paint);
|
|
return wrap;
|
|
}
|