@zerodep-dev/vue-tsx-pro-ui 0.3.3 → 0.4.1

package/dist/charts/plot.d.ts

@@ -0,0 +1,107 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+/**
+ * 绘图区进入过视口：之前不画，进来之后一直算看见（滚出去不拆掉）。一页很多图表时先画看得见的，
+ * 其余的滚到附近再画（地图要投影几万个点、网络图要迭代布局）。在 setup 里调用，渲染时读返回的函数。
+ * 挂上时就在视口附近的立即算看见（不等观察器的第一次回调；没有布局的测试环境里框都在原点，也算看见）；
+ * 打印前全部画上；没有 IntersectionObserver 的环境当作看见了。
+ */
+export declare function usePlotSeen(plot: () => HTMLElement | null | undefined): () => boolean;
+/** 绘图区里画图形的矩形（SVG 坐标，px） */
+export interface PlotRect {
+    /** 左 */
+    left: number;
+    /** 上 */
+    top: number;
+    /** 宽 */
+    width: number;
+    /** 高 */
+    height: number;
+}
+/** usePlotArea 的返回值 */
+export interface PlotArea {
+    /** 交给 ChartFrame 的 plotRef */
+    ref: (element: HTMLElement | null) => void;
+    /** 绘图区元素 */
+    readonly element: HTMLElement | null;
+    /** 宽（px） */
+    readonly width: number;
+    /** 高（px） */
+    readonly height: number;
+    /** 可以画了：量到了大小，也进入过视口 */
+    readonly ready: boolean;
+}
+/** 绘图区的元素、大小与可见性（在 setup 里调用）；没有布局的环境（服务端、测试）里大小是 0，不画 */
+export declare function usePlotArea(): PlotArea;
+/** 事件在元素里的坐标（px） */
+export declare function pointerIn(event: {
+    clientX: number;
+    clientY: number;
+}, element: Element): {
+    x: number;
+    y: number;
+};
+/** 图表 SVG 的共用样式 */
+export declare const chartSvgStyles: Readonly<{
+    readonly svg: css.CompiledStyles;
+    readonly grid: css.CompiledStyles;
+    readonly baseline: css.CompiledStyles;
+    readonly tick: css.CompiledStyles;
+    readonly axisTitle: css.CompiledStyles;
+    readonly crosshair: css.CompiledStyles;
+    readonly hoverBand: css.CompiledStyles;
+    readonly halo: css.CompiledStyles;
+    readonly label: css.CompiledStyles;
+    readonly labelMuted: css.CompiledStyles;
+    readonly labelStrong: css.CompiledStyles;
+    readonly noPointer: css.CompiledStyles;
+    readonly fadeIn: css.CompiledStyles;
+    readonly dimmable: css.CompiledStyles;
+    readonly dimmed: css.CompiledStyles;
+    readonly fill: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly stroke: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 坐标轴上的一个刻度 */
+export interface AxisTick {
+    /** 位置：竖轴是纵坐标，横轴是横坐标（px） */
+    position: number;
+    /** 文字；空串时只画网格线 */
+    label: string;
+}
+/** chartAxis 的参数 */
+export interface ChartAxisOptions {
+    /** 刻度文字在绘图区的哪一边 */
+    side: 'left' | 'right' | 'bottom';
+    /** 刻度 */
+    ticks: readonly AxisTick[];
+    /** 绘图区 */
+    plot: PlotRect;
+    /** 画网格线（穿过绘图区） */
+    grid?: boolean;
+    /** 刻度文字与绘图区的距离，默认 8 */
+    gap?: number;
+}
+/** 坐标轴：刻度文字，可带网格线（键是位置，更新时文字原地换） */
+export declare function chartAxis({ side, ticks, plot, grid, gap, }: ChartAxisOptions): VNodeChild;
+/** 一个提示框：指针在绘图区里的位置与内容 */
+export interface ChartTip {
+    /** 横坐标（px，相对绘图区） */
+    x: number;
+    /** 纵坐标 */
+    y: number;
+    /** 内容（chartTooltip 生成） */
+    content: VNodeChild;
+}
+/** 提示框的样式 */
+export declare const chartTooltipStyles: Readonly<{
+    box: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+}>;
+/**
+ * 跟着指针的提示框：放在指针右侧，过了绘图区的一半放到左侧；纵向以指针为中线。
+ * 消失时保留上一次的内容淡出。给读屏的是数据表，提示框和绘图区一样对读屏隐藏
+ */
+export declare const ChartTooltipBox: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<{
+    tip: ChartTip | null;
+    width: number;
+}>;

package/dist/charts/plot.js

@@ -0,0 +1,231 @@
+import { svgNumber } from "../utils/data/number.js";
+import { t } from "../config/theme/tokens.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { useIntersectionObserver } from "../utils/dom/intersection.js";
+import { useEventListener } from "../utils/dom/event-listener.js";
+import { createVNode, shallowRef, watch } from "vue";
+import { _component, mergeJsxProps, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/charts/plot.tsx
+/** 绘图区离视口多近就算看见了（px）：滚到之前先画好，进来时已经是画好的 */
+var SEEN_MARGIN = 200;
+/**
+* 绘图区进入过视口：之前不画，进来之后一直算看见（滚出去不拆掉）。一页很多图表时先画看得见的，
+* 其余的滚到附近再画（地图要投影几万个点、网络图要迭代布局）。在 setup 里调用，渲染时读返回的函数。
+* 挂上时就在视口附近的立即算看见（不等观察器的第一次回调；没有布局的测试环境里框都在原点，也算看见）；
+* 打印前全部画上；没有 IntersectionObserver 的环境当作看见了。
+*/
+function usePlotSeen(plot) {
+	const seen = shallowRef(typeof IntersectionObserver === "undefined");
+	const near = (element) => {
+		const box = element.getBoundingClientRect();
+		return box.top < window.innerHeight + SEEN_MARGIN && box.bottom > -200 && box.left < window.innerWidth + SEEN_MARGIN && box.right > -200;
+	};
+	watch(plot, (element) => {
+		if (element && !seen.value && near(element)) seen.value = true;
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	useIntersectionObserver(() => seen.value ? null : plot(), (entries) => {
+		if (entries.some((entry) => entry.isIntersecting)) seen.value = true;
+	}, () => ({ rootMargin: `${SEEN_MARGIN}px` }));
+	useEventListener(() => window, "beforeprint", () => seen.value = true);
+	return () => seen.value;
+}
+/** 绘图区里画图形的矩形（SVG 坐标，px） */
+/** usePlotArea 的返回值 */
+/** 绘图区的元素、大小与可见性（在 setup 里调用）；没有布局的环境（服务端、测试）里大小是 0，不画 */
+function usePlotArea() {
+	const element = shallowRef(null);
+	const size = shallowRef({
+		width: 0,
+		height: 0
+	});
+	const seen = usePlotSeen(() => element.value);
+	useResizeObserver(() => element.value, (entries) => {
+		const box = entries.at(-1).contentRect;
+		if (box.width !== size.value.width || box.height !== size.value.height) size.value = {
+			width: box.width,
+			height: box.height
+		};
+	});
+	return {
+		ref: (value) => element.value = value,
+		get element() {
+			return element.value;
+		},
+		get width() {
+			return size.value.width;
+		},
+		get height() {
+			return size.value.height;
+		},
+		get ready() {
+			return seen() && size.value.width > 0 && size.value.height > 0;
+		}
+	};
+}
+/** 事件在元素里的坐标（px） */
+function pointerIn(event, element) {
+	const box = element.getBoundingClientRect();
+	return {
+		x: event.clientX - box.left,
+		y: event.clientY - box.top
+	};
+}
+/** 进场：淡入；还有从 0 长出来的（柱、点），时长取主题的 lg */
+var enter = `${t.durations.lg} ${t.easings.standard}`;
+/** 图表 SVG 的共用样式 */
+var chartSvgStyles = css.create({
+	svg: {
+		display: "block",
+		overflow: "visible",
+		userSelect: "none",
+		WebkitUserSelect: "none"
+	},
+	grid: {
+		stroke: "_borderMuted",
+		strokeWidth: 1,
+		shapeRendering: "crispEdges"
+	},
+	baseline: {
+		stroke: "_border",
+		strokeWidth: 1,
+		shapeRendering: "crispEdges"
+	},
+	tick: {
+		fill: "_textMuted",
+		fontSize: "_xs"
+	},
+	axisTitle: {
+		fill: "_textMuted",
+		fontSize: "_xs"
+	},
+	crosshair: {
+		stroke: "_borderStrong",
+		strokeWidth: 1,
+		strokeDasharray: "4 3",
+		pointerEvents: "none",
+		shapeRendering: "crispEdges"
+	},
+	hoverBand: {
+		fill: "_fill",
+		pointerEvents: "none"
+	},
+	halo: {
+		paintOrder: "stroke",
+		stroke: "_surface",
+		strokeWidth: 3,
+		strokeLinejoin: "round"
+	},
+	label: {
+		fill: "_text",
+		fontSize: "_xs"
+	},
+	labelMuted: {
+		fill: "_textMuted",
+		fontSize: "_xs"
+	},
+	labelStrong: {
+		fill: "_text",
+		fontSize: "_xs",
+		fontWeight: "_medium"
+	},
+	noPointer: { pointerEvents: "none" },
+	fadeIn: {
+		opacity: {
+			default: 1,
+			"@starting-style": 0
+		},
+		transition: `opacity ${enter}`
+	},
+	dimmable: { transition: `opacity ${t.durations.sm} ${t.easings.standard}` },
+	dimmed: { opacity: .25 },
+	fill: (color) => ({ fill: color }),
+	stroke: (color) => ({ stroke: color })
+});
+/** 坐标轴上的一个刻度 */
+/** chartAxis 的参数 */
+/** 坐标轴：刻度文字，可带网格线（键是位置，更新时文字原地换） */
+function chartAxis({ side, ticks, plot, grid = false, gap = 8 }) {
+	const right = plot.left + plot.width;
+	const bottom = plot.top + plot.height;
+	return createVNode("g", null, [grid && ticks.map((tick) => {
+		const p = Math.round(tick.position) + .5;
+		return side === "bottom" ? createVNode("line", mergeJsxProps({
+			"key": `g${tick.position}`,
+			"x1": p,
+			"x2": p,
+			"y1": plot.top,
+			"y2": bottom
+		}, css.attrs(chartSvgStyles.grid)), null) : createVNode("line", mergeJsxProps({
+			"key": `g${tick.position}`,
+			"x1": plot.left,
+			"x2": right,
+			"y1": p,
+			"y2": p
+		}, css.attrs(chartSvgStyles.grid)), null);
+	}), ticks.map((tick) => tick.label === "" ? null : side === "bottom" ? createVNode("text", mergeJsxProps({
+		"key": `t${tick.position}`,
+		"x": svgNumber(tick.position),
+		"y": bottom + gap,
+		"text-anchor": "middle",
+		"dominant-baseline": "hanging"
+	}, css.attrs(chartSvgStyles.tick)), [tick.label]) : createVNode("text", mergeJsxProps({
+		"key": `t${tick.position}`,
+		"x": side === "left" ? plot.left - gap : right + gap,
+		"y": svgNumber(tick.position),
+		"text-anchor": side === "left" ? "end" : "start",
+		"dominant-baseline": "central"
+	}, css.attrs(chartSvgStyles.tick)), [tick.label]))]);
+}
+/** 一个提示框：指针在绘图区里的位置与内容 */
+/** 提示框的样式 */
+var chartTooltipStyles = css.create({
+	box: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		zIndex: 1,
+		boxSizing: "border-box",
+		paddingBlock: "_sm",
+		paddingInline: "_md",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderMuted",
+		borderRadius: "_md",
+		backgroundColor: "_surfaceRaised",
+		color: "_text",
+		boxShadow: "_md",
+		whiteSpace: "nowrap",
+		pointerEvents: "none",
+		opacity: 1,
+		transition: `opacity ${t.durations.sm} ${t.easings.standard}, transform ${t.durations.sm} ${t.easings.standard}`
+	},
+	hidden: { opacity: 0 }
+});
+/**
+* 跟着指针的提示框：放在指针右侧，过了绘图区的一半放到左侧；纵向以指针为中线。
+* 消失时保留上一次的内容淡出。给读屏的是数据表，提示框和绘图区一样对读屏隐藏
+*/
+var ChartTooltipBox = /*#__PURE__*/ _component((_props, _ctx) => {
+	const tip = readonlyProp(_props, "tip");
+	const width = readonlyProp(_props, "width");
+	let last = null;
+	return () => {
+		if (tip.value) last = tip.value;
+		const shown = tip.value ?? last;
+		if (!shown) return null;
+		const flip = shown.x > width.value / 2;
+		const left = flip ? shown.x - 14 : shown.x + 14;
+		return createVNode("div", mergeJsxProps({ "data-part": "tooltip" }, css.attrs(chartTooltipStyles.box, !tip.value && chartTooltipStyles.hidden), { "style": { transform: `translate(${Math.round(left)}px, ${Math.round(shown.y)}px) translate(${flip ? "-100%" : "0"}, -50%)` } }), [shown.content]);
+	};
+}, {
+	name: "ChartTooltipBox",
+	props: ["tip", "width"]
+});
+//#endregion
+export { ChartTooltipBox, chartAxis, chartSvgStyles, chartTooltipStyles, pointerIn, usePlotArea, usePlotSeen };
+
+//# sourceMappingURL=plot.js.map

package/dist/charts/plot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plot.js","names":["_createVNode","_mergeProps","_vtp_readonlyProp"],"sources":["../../src/charts/plot.tsx"],"sourcesContent":["/**\n * 绘图区的公共部分：量出绘图区的大小（ResizeObserver），SVG 图形的共用样式（网格、刻度文字、十字线、描边的标签、进场），\n * 坐标轴的刻度与网格线，跟着指针的提示框。各种图表在 ChartFrame 的绘图区里用它们画自己的 SVG。\n *\n *   const area = usePlotArea();\n *   <ChartFrame plotRef={area.ref} plot={area.ready && <svg width={area.width} height={area.height}>…</svg>} />\n *   chartAxis({ side: 'bottom', ticks, plot, grid: true })\n *   <ChartTooltipBox tip={tip} width={area.width} />\n *\n * 颜色、字号都是主题 tokens（切换主题不用重画）；动画的时长是 durations（“减少动态效果”时为 0）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { shallowRef, watch, type VNodeChild } from 'vue';\nimport { t } from '../config/theme/tokens';\nimport { useEventListener } from '../utils/dom/event-listener';\nimport { useIntersectionObserver } from '../utils/dom/intersection';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { svgNumber } from '../utils/data/number';\n\n/** 绘图区离视口多近就算看见了（px）：滚到之前先画好，进来时已经是画好的 */\nconst SEEN_MARGIN = 200;\n\n/**\n * 绘图区进入过视口：之前不画，进来之后一直算看见（滚出去不拆掉）。一页很多图表时先画看得见的，\n * 其余的滚到附近再画（地图要投影几万个点、网络图要迭代布局）。在 setup 里调用，渲染时读返回的函数。\n * 挂上时就在视口附近的立即算看见（不等观察器的第一次回调；没有布局的测试环境里框都在原点，也算看见）；\n * 打印前全部画上；没有 IntersectionObserver 的环境当作看见了。\n */\nexport function usePlotSeen(plot: () => HTMLElement | null | undefined): () => boolean {\n  const seen = shallowRef(typeof IntersectionObserver === 'undefined');\n  const near = (element: Element) => {\n    const box = element.getBoundingClientRect();\n    return (\n      box.top < window.innerHeight + SEEN_MARGIN &&\n      box.bottom > -SEEN_MARGIN &&\n      box.left < window.innerWidth + SEEN_MARGIN &&\n      box.right > -SEEN_MARGIN\n    );\n  };\n  watch(\n    plot,\n    (element) => {\n      if (element && !seen.value && near(element)) seen.value = true;\n    },\n    { immediate: true, flush: 'post' },\n  );\n  useIntersectionObserver(\n    () => (seen.value ? null : plot()),\n    (entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) seen.value = true;\n    },\n    () => ({ rootMargin: `${SEEN_MARGIN}px` }),\n  );\n  useEventListener(\n    () => window,\n    'beforeprint',\n    () => (seen.value = true),\n  );\n  return () => seen.value;\n}\n\n/** 绘图区里画图形的矩形（SVG 坐标，px） */\nexport interface PlotRect {\n  /** 左 */\n  left: number;\n  /** 上 */\n  top: number;\n  /** 宽 */\n  width: number;\n  /** 高 */\n  height: number;\n}\n\n/** usePlotArea 的返回值 */\nexport interface PlotArea {\n  /** 交给 ChartFrame 的 plotRef */\n  ref: (element: HTMLElement | null) => void;\n  /** 绘图区元素 */\n  readonly element: HTMLElement | null;\n  /** 宽（px） */\n  readonly width: number;\n  /** 高（px） */\n  readonly height: number;\n  /** 可以画了：量到了大小，也进入过视口 */\n  readonly ready: boolean;\n}\n\n/** 绘图区的元素、大小与可见性（在 setup 里调用）；没有布局的环境（服务端、测试）里大小是 0，不画 */\nexport function usePlotArea(): PlotArea {\n  const element = shallowRef<HTMLElement | null>(null);\n  const size = shallowRef({ width: 0, height: 0 });\n  const seen = usePlotSeen(() => element.value);\n  useResizeObserver(\n    () => element.value,\n    (entries) => {\n      const box = entries.at(-1)!.contentRect;\n      if (box.width !== size.value.width || box.height !== size.value.height)\n        size.value = { width: box.width, height: box.height };\n    },\n  );\n  return {\n    ref: (value) => (element.value = value),\n    get element() {\n      return element.value;\n    },\n    get width() {\n      return size.value.width;\n    },\n    get height() {\n      return size.value.height;\n    },\n    get ready() {\n      return seen() && size.value.width > 0 && size.value.height > 0;\n    },\n  };\n}\n\n/** 事件在元素里的坐标（px） */\nexport function pointerIn(event: { clientX: number; clientY: number }, element: Element) {\n  const box = element.getBoundingClientRect();\n  return { x: event.clientX - box.left, y: event.clientY - box.top };\n}\n\n/** 进场：淡入；还有从 0 长出来的（柱、点），时长取主题的 lg */\nconst enter = `${t.durations.lg} ${t.easings.standard}`;\n\n/** 图表 SVG 的共用样式 */\nexport const chartSvgStyles = css.create({\n  svg: { display: 'block', overflow: 'visible', userSelect: 'none', WebkitUserSelect: 'none' },\n  grid: { stroke: '_borderMuted', strokeWidth: 1, shapeRendering: 'crispEdges' },\n  // 零线（数值轴有负数时）\n  baseline: { stroke: '_border', strokeWidth: 1, shapeRendering: 'crispEdges' },\n  tick: { fill: '_textMuted', fontSize: '_xs' },\n  axisTitle: { fill: '_textMuted', fontSize: '_xs' },\n  // 十字线：指针所在类目的竖线\n  crosshair: {\n    stroke: '_borderStrong',\n    strokeWidth: 1,\n    strokeDasharray: '4 3',\n    pointerEvents: 'none',\n    shapeRendering: 'crispEdges',\n  },\n  // 柱状图悬停的类目：整格一层浅底\n  hoverBand: { fill: '_fill', pointerEvents: 'none' },\n  // 文字描一圈表面色的边：压在图形上也看得清\n  halo: {\n    paintOrder: 'stroke',\n    stroke: '_surface',\n    strokeWidth: 3,\n    strokeLinejoin: 'round',\n  },\n  label: { fill: '_text', fontSize: '_xs' },\n  labelMuted: { fill: '_textMuted', fontSize: '_xs' },\n  labelStrong: { fill: '_text', fontSize: '_xs', fontWeight: '_medium' },\n  noPointer: { pointerEvents: 'none' },\n  fadeIn: {\n    opacity: { default: 1, '@starting-style': 0 },\n    transition: `opacity ${enter}`,\n  },\n  // 悬停别的图形时，其余的变淡\n  dimmable: { transition: `opacity ${t.durations.sm} ${t.easings.standard}` },\n  dimmed: { opacity: 0.25 },\n  fill: (color: string) => ({ fill: color }),\n  stroke: (color: string) => ({ stroke: color }),\n});\n\n/** 坐标轴上的一个刻度 */\nexport interface AxisTick {\n  /** 位置：竖轴是纵坐标，横轴是横坐标（px） */\n  position: number;\n  /** 文字；空串时只画网格线 */\n  label: string;\n}\n\n/** chartAxis 的参数 */\nexport interface ChartAxisOptions {\n  /** 刻度文字在绘图区的哪一边 */\n  side: 'left' | 'right' | 'bottom';\n  /** 刻度 */\n  ticks: readonly AxisTick[];\n  /** 绘图区 */\n  plot: PlotRect;\n  /** 画网格线（穿过绘图区） */\n  grid?: boolean;\n  /** 刻度文字与绘图区的距离，默认 8 */\n  gap?: number;\n}\n\n/** 坐标轴：刻度文字，可带网格线（键是位置，更新时文字原地换） */\nexport function chartAxis({\n  side,\n  ticks,\n  plot,\n  grid = false,\n  gap = 8,\n}: ChartAxisOptions): VNodeChild {\n  const right = plot.left + plot.width;\n  const bottom = plot.top + plot.height;\n  return (\n    <g>\n      {grid &&\n        ticks.map((tick) => {\n          const p = Math.round(tick.position) + 0.5;\n          return side === 'bottom' ? (\n            <line\n              key={`g${tick.position}`}\n              x1={p}\n              x2={p}\n              y1={plot.top}\n              y2={bottom}\n              {...css.attrs(chartSvgStyles.grid)}\n            />\n          ) : (\n            <line\n              key={`g${tick.position}`}\n              x1={plot.left}\n              x2={right}\n              y1={p}\n              y2={p}\n              {...css.attrs(chartSvgStyles.grid)}\n            />\n          );\n        })}\n      {ticks.map((tick) =>\n        tick.label === '' ? null : side === 'bottom' ? (\n          <text\n            key={`t${tick.position}`}\n            x={svgNumber(tick.position)}\n            y={bottom + gap}\n            text-anchor=\"middle\"\n            dominant-baseline=\"hanging\"\n            {...css.attrs(chartSvgStyles.tick)}\n          >\n            {tick.label}\n          </text>\n        ) : (\n          <text\n            key={`t${tick.position}`}\n            x={side === 'left' ? plot.left - gap : right + gap}\n            y={svgNumber(tick.position)}\n            text-anchor={side === 'left' ? 'end' : 'start'}\n            dominant-baseline=\"central\"\n            {...css.attrs(chartSvgStyles.tick)}\n          >\n            {tick.label}\n          </text>\n        ),\n      )}\n    </g>\n  );\n}\n\n/** 一个提示框：指针在绘图区里的位置与内容 */\nexport interface ChartTip {\n  /** 横坐标（px，相对绘图区） */\n  x: number;\n  /** 纵坐标 */\n  y: number;\n  /** 内容（chartTooltip 生成） */\n  content: VNodeChild;\n}\n\n/** 提示框的样式 */\nexport const chartTooltipStyles = css.create({\n  box: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    zIndex: 1,\n    boxSizing: 'border-box',\n    paddingBlock: '_sm',\n    paddingInline: '_md',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderMuted',\n    borderRadius: '_md',\n    backgroundColor: '_surfaceRaised',\n    color: '_text',\n    boxShadow: '_md',\n    whiteSpace: 'nowrap',\n    pointerEvents: 'none',\n    opacity: 1,\n    transition: `opacity ${t.durations.sm} ${t.easings.standard}, transform ${t.durations.sm} ${t.easings.standard}`,\n  },\n  hidden: { opacity: 0 },\n});\n\n/**\n * 跟着指针的提示框：放在指针右侧，过了绘图区的一半放到左侧；纵向以指针为中线。\n * 消失时保留上一次的内容淡出。给读屏的是数据表，提示框和绘图区一样对读屏隐藏\n */\nexport const ChartTooltipBox = _component(\n  ({ tip, width }: { tip: ChartTip | null; width: number }) => {\n    let last: ChartTip | null = null;\n    return () => {\n      if (tip) last = tip;\n      const shown = tip ?? last;\n      if (!shown) return null;\n      const flip = shown.x > width / 2;\n      const left = flip ? shown.x - 14 : shown.x + 14;\n      return (\n        <div\n          data-part=\"tooltip\"\n          {...css.attrs(chartTooltipStyles.box, !tip && chartTooltipStyles.hidden)}\n          style={{\n            transform: `translate(${Math.round(left)}px, ${Math.round(shown.y)}px) translate(${flip ? '-100%' : '0'}, -50%)`,\n          }}\n        >\n          {shown.content}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/charts/scale.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 图表的比例尺与刻度：数值 → 像素的线性比例尺，“好看”的刻度与取整的范围（d3-array 的 ticks、d3-scale 的 nice 的精简版），
+ * 时间刻度（月初、周、日、整点，同 d3 的 scaleTime().ticks）。
+ *
+ *   const y = linearScale(niceDomain([0, 236]), [200, 0]);   // 数值轴：0 在下沿
+ *   linearTicks(0, 250, 5)                                  // [0, 50, 100, 150, 200, 250]
+ *   timeTicks(start, end, 6)                                // 跨几个月时是各月的 1 日
+ */
+/** 线性比例尺：数值 → 坐标，invert 反过来 */
+export interface LinearScale {
+    /** 数值换成坐标 */
+    (value: number): number;
+    /** 数值的范围 [起, 止] */
+    readonly domain: readonly [number, number];
+    /** 坐标的范围 [起, 止]（数值轴的起点通常在下方，坐标是从大到小） */
+    readonly range: readonly [number, number];
+    /** 坐标换回数值 */
+    invert(position: number): number;
+}
+/** 线性比例尺；domain 两端相同时取中间的坐标 */
+export declare function linearScale(domain: readonly [number, number], range: readonly [number, number]): LinearScale;
+/** 约 count 格的刻度步长：正数是步长本身，负数 -k 表示步长 1 / k（同 d3 的 tickIncrement） */
+export declare function tickIncrement(start: number, stop: number, count: number): number;
+/** [start, stop] 里约 count 格的“好看”刻度：1、2、5 乘 10 的幂的整数倍，从小到大 */
+export declare function linearTicks(start: number, stop: number, count?: number): number[];
+/** 范围的两端扩到刻度上（同 d3 的 linear.nice）：[0, 236] → [0, 250] */
+export declare function niceDomain(domain: readonly [number, number], count?: number): [number, number];
+/** [start, stop]（毫秒）之间约 count 个整齐的时间刻度：整秒、整分、整点、日、周日、月初、年初（本地时间） */
+export declare function timeTicks(start: number, stop: number, count?: number): Date[];

package/dist/charts/scale.js

@@ -0,0 +1,244 @@
+//#region src/charts/scale.ts
+/** 线性比例尺；domain 两端相同时取中间的坐标 */
+function linearScale(domain, range) {
+	const [d0, d1] = domain;
+	const [r0, r1] = range;
+	const span = d1 - d0;
+	const scale = ((value) => span === 0 ? (r0 + r1) / 2 : r0 + (value - d0) / span * (r1 - r0));
+	return Object.assign(scale, {
+		domain,
+		range,
+		invert: (position) => r1 === r0 ? d0 : d0 + (position - r0) / (r1 - r0) * span
+	});
+}
+var E10 = Math.sqrt(50);
+var E5 = Math.sqrt(10);
+var E2 = Math.sqrt(2);
+/**
+* 刻度的整数区间 [i1, i2] 与步长：inc 为正时刻度是 i × inc；为负时是 i / -inc
+* （小数步长用除法表示，0.1 × 3 这类乘法会带进浮点误差）
+*/
+function tickSpec(start, stop, count) {
+	const step = (stop - start) / Math.max(0, count);
+	const power = Math.floor(Math.log10(step));
+	const error = step / 10 ** power;
+	const factor = error >= E10 ? 10 : error >= E5 ? 5 : error >= E2 ? 2 : 1;
+	let i1;
+	let i2;
+	let inc;
+	if (power < 0) {
+		inc = 10 ** -power / factor;
+		i1 = Math.round(start * inc);
+		i2 = Math.round(stop * inc);
+		if (i1 / inc < start) i1 += 1;
+		if (i2 / inc > stop) i2 -= 1;
+		inc = -inc;
+	} else {
+		inc = 10 ** power * factor;
+		i1 = Math.round(start / inc);
+		i2 = Math.round(stop / inc);
+		if (i1 * inc < start) i1 += 1;
+		if (i2 * inc > stop) i2 -= 1;
+	}
+	if (i2 < i1 && count >= .5 && count < 2) return tickSpec(start, stop, count * 2);
+	return [
+		i1,
+		i2,
+		inc
+	];
+}
+/** 约 count 格的刻度步长：正数是步长本身，负数 -k 表示步长 1 / k（同 d3 的 tickIncrement） */
+function tickIncrement(start, stop, count) {
+	return tickSpec(start, stop, count)[2];
+}
+/** [start, stop] 里约 count 格的“好看”刻度：1、2、5 乘 10 的幂的整数倍，从小到大 */
+function linearTicks(start, stop, count = 5) {
+	if (!(count > 0) || !Number.isFinite(start) || !Number.isFinite(stop)) return [];
+	if (start === stop) return [start];
+	const [low, high] = start < stop ? [start, stop] : [stop, start];
+	const [i1, i2, inc] = tickSpec(low, high, count);
+	if (!(i2 >= i1)) return [];
+	return Array.from({ length: i2 - i1 + 1 }, (_, i) => inc < 0 ? (i1 + i) / -inc : (i1 + i) * inc);
+}
+/** 范围的两端扩到刻度上（同 d3 的 linear.nice）：[0, 236] → [0, 250] */
+function niceDomain(domain, count = 5) {
+	let [start, stop] = domain[0] <= domain[1] ? domain : [domain[1], domain[0]];
+	let previous;
+	for (let guard = 0; guard < 10; guard += 1) {
+		const step = tickIncrement(start, stop, count);
+		if (step === previous || !Number.isFinite(step)) break;
+		if (step > 0) {
+			start = Math.floor(start / step) * step;
+			stop = Math.ceil(stop / step) * step;
+		} else if (step < 0) {
+			start = Math.ceil(start * step) / step;
+			stop = Math.floor(stop * step) / step;
+		} else break;
+		previous = step;
+	}
+	return [start, stop];
+}
+var SECOND = 1e3;
+var MINUTE = SECOND * 60;
+var HOUR = MINUTE * 60;
+var DAY = HOUR * 24;
+var WEEK = DAY * 7;
+var MONTH = DAY * 30;
+var YEAR = DAY * 365;
+/** 可选的间隔：单位、几个单位一格、大约多少毫秒（同 d3 的 tickIntervals） */
+var TIME_INTERVALS = [
+	[
+		"second",
+		1,
+		SECOND
+	],
+	[
+		"second",
+		5,
+		5 * SECOND
+	],
+	[
+		"second",
+		15,
+		15 * SECOND
+	],
+	[
+		"second",
+		30,
+		30 * SECOND
+	],
+	[
+		"minute",
+		1,
+		MINUTE
+	],
+	[
+		"minute",
+		5,
+		5 * MINUTE
+	],
+	[
+		"minute",
+		15,
+		15 * MINUTE
+	],
+	[
+		"minute",
+		30,
+		30 * MINUTE
+	],
+	[
+		"hour",
+		1,
+		HOUR
+	],
+	[
+		"hour",
+		3,
+		3 * HOUR
+	],
+	[
+		"hour",
+		6,
+		6 * HOUR
+	],
+	[
+		"hour",
+		12,
+		12 * HOUR
+	],
+	[
+		"day",
+		1,
+		DAY
+	],
+	[
+		"day",
+		2,
+		2 * DAY
+	],
+	[
+		"week",
+		1,
+		WEEK
+	],
+	[
+		"month",
+		1,
+		MONTH
+	],
+	[
+		"month",
+		3,
+		3 * MONTH
+	],
+	[
+		"year",
+		1,
+		YEAR
+	]
+];
+/** 本地时间里这个单位的起点：月取 1 日 0 点、周取周日 0 点 */
+function floorTime(date, unit) {
+	const result = new Date(date);
+	if (unit === "second") result.setMilliseconds(0);
+	else if (unit === "minute") result.setSeconds(0, 0);
+	else if (unit === "hour") result.setMinutes(0, 0, 0);
+	else {
+		result.setHours(0, 0, 0, 0);
+		if (unit === "week") result.setDate(result.getDate() - result.getDay());
+		if (unit === "month") result.setDate(1);
+		if (unit === "year") result.setMonth(0, 1);
+	}
+	return result;
+}
+/** 往后数一个单位（按日历走：跨夏令时、大小月都对） */
+function nextTime(date, unit) {
+	const result = new Date(date);
+	if (unit === "second") result.setSeconds(result.getSeconds() + 1);
+	else if (unit === "minute") result.setMinutes(result.getMinutes() + 1);
+	else if (unit === "hour") result.setHours(result.getHours() + 1);
+	else if (unit === "day") result.setDate(result.getDate() + 1);
+	else if (unit === "week") result.setDate(result.getDate() + 7);
+	else if (unit === "month") result.setMonth(result.getMonth() + 1);
+	else result.setFullYear(result.getFullYear() + 1);
+	return result;
+}
+/** 几个单位一格时按哪个字段取整：每 3 个月取 1、4、7、10 月，每 6 小时取 0、6、12、18 点 */
+function timeField(date, unit) {
+	if (unit === "second") return date.getSeconds();
+	if (unit === "minute") return date.getMinutes();
+	if (unit === "hour") return date.getHours();
+	if (unit === "day") return date.getDate() - 1;
+	if (unit === "month") return date.getMonth();
+	if (unit === "year") return date.getFullYear();
+	return 0;
+}
+/** [start, stop]（毫秒）之间约 count 个整齐的时间刻度：整秒、整分、整点、日、周日、月初、年初（本地时间） */
+function timeTicks(start, stop, count = 6) {
+	if (!Number.isFinite(start) || !Number.isFinite(stop) || stop < start) return [];
+	const target = (stop - start) / count;
+	const index = TIME_INTERVALS.findIndex(([, , duration]) => duration > target);
+	let unit;
+	let every;
+	if (index < 0) {
+		unit = "year";
+		every = Math.max(1, tickIncrement(start / YEAR, stop / YEAR, count));
+	} else if (index === 0) {
+		unit = "second";
+		every = 1;
+	} else {
+		const [before, after] = [TIME_INTERVALS[index - 1], TIME_INTERVALS[index]];
+		[unit, every] = target / before[2] < after[2] / target ? before : after;
+	}
+	const ticks = [];
+	for (let date = floorTime(new Date(start), unit); date.getTime() <= stop;) {
+		if (date.getTime() >= start && timeField(date, unit) % every === 0) ticks.push(date);
+		date = nextTime(date, unit);
+	}
+	return ticks;
+}
+//#endregion
+export { linearScale, linearTicks, niceDomain, tickIncrement, timeTicks };
+
+//# sourceMappingURL=scale.js.map

package/dist/charts/scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale.js","names":[],"sources":["../../src/charts/scale.ts"],"sourcesContent":["/**\n * 图表的比例尺与刻度：数值 → 像素的线性比例尺，“好看”的刻度与取整的范围（d3-array 的 ticks、d3-scale 的 nice 的精简版），\n * 时间刻度（月初、周、日、整点，同 d3 的 scaleTime().ticks）。\n *\n *   const y = linearScale(niceDomain([0, 236]), [200, 0]);   // 数值轴：0 在下沿\n *   linearTicks(0, 250, 5)                                  // [0, 50, 100, 150, 200, 250]\n *   timeTicks(start, end, 6)                                // 跨几个月时是各月的 1 日\n */\n\n/** 线性比例尺：数值 → 坐标，invert 反过来 */\nexport interface LinearScale {\n  /** 数值换成坐标 */\n  (value: number): number;\n  /** 数值的范围 [起, 止] */\n  readonly domain: readonly [number, number];\n  /** 坐标的范围 [起, 止]（数值轴的起点通常在下方，坐标是从大到小） */\n  readonly range: readonly [number, number];\n  /** 坐标换回数值 */\n  invert(position: number): number;\n}\n\n/** 线性比例尺；domain 两端相同时取中间的坐标 */\nexport function linearScale(\n  domain: readonly [number, number],\n  range: readonly [number, number],\n): LinearScale {\n  const [d0, d1] = domain;\n  const [r0, r1] = range;\n  const span = d1 - d0;\n  const scale = ((value: number) =>\n    span === 0 ? (r0 + r1) / 2 : r0 + ((value - d0) / span) * (r1 - r0)) as LinearScale;\n  return Object.assign(scale, {\n    domain,\n    range,\n    invert: (position: number) => (r1 === r0 ? d0 : d0 + ((position - r0) / (r1 - r0)) * span),\n  });\n}\n\n// 步长取 1、2、5 乘 10 的幂：误差超过这几个界时换大一档（同 d3-array）\nconst E10 = Math.sqrt(50);\nconst E5 = Math.sqrt(10);\nconst E2 = Math.sqrt(2);\n\n/**\n * 刻度的整数区间 [i1, i2] 与步长：inc 为正时刻度是 i × inc；为负时是 i / -inc\n * （小数步长用除法表示，0.1 × 3 这类乘法会带进浮点误差）\n */\nfunction tickSpec(start: number, stop: number, count: number): [number, number, number] {\n  const step = (stop - start) / Math.max(0, count);\n  const power = Math.floor(Math.log10(step));\n  const error = step / 10 ** power;\n  const factor = error >= E10 ? 10 : error >= E5 ? 5 : error >= E2 ? 2 : 1;\n  let i1: number;\n  let i2: number;\n  let inc: number;\n  if (power < 0) {\n    inc = 10 ** -power / factor;\n    i1 = Math.round(start * inc);\n    i2 = Math.round(stop * inc);\n    if (i1 / inc < start) i1 += 1;\n    if (i2 / inc > stop) i2 -= 1;\n    inc = -inc;\n  } else {\n    inc = 10 ** power * factor;\n    i1 = Math.round(start / inc);\n    i2 = Math.round(stop / inc);\n    if (i1 * inc < start) i1 += 1;\n    if (i2 * inc > stop) i2 -= 1;\n  }\n  if (i2 < i1 && count >= 0.5 && count < 2) return tickSpec(start, stop, count * 2);\n  return [i1, i2, inc];\n}\n\n/** 约 count 格的刻度步长：正数是步长本身，负数 -k 表示步长 1 / k（同 d3 的 tickIncrement） */\nexport function tickIncrement(start: number, stop: number, count: number): number {\n  return tickSpec(start, stop, count)[2];\n}\n\n/** [start, stop] 里约 count 格的“好看”刻度：1、2、5 乘 10 的幂的整数倍，从小到大 */\nexport function linearTicks(start: number, stop: number, count = 5): number[] {\n  if (!(count > 0) || !Number.isFinite(start) || !Number.isFinite(stop)) return [];\n  if (start === stop) return [start];\n  const [low, high] = start < stop ? [start, stop] : [stop, start];\n  const [i1, i2, inc] = tickSpec(low, high, count);\n  if (!(i2 >= i1)) return [];\n  return Array.from({ length: i2 - i1 + 1 }, (_, i) =>\n    inc < 0 ? (i1 + i) / -inc : (i1 + i) * inc,\n  );\n}\n\n/** 范围的两端扩到刻度上（同 d3 的 linear.nice）：[0, 236] → [0, 250] */\nexport function niceDomain(domain: readonly [number, number], count = 5): [number, number] {\n  let [start, stop] = domain[0] <= domain[1] ? domain : [domain[1], domain[0]];\n  let previous: number | undefined;\n  for (let guard = 0; guard < 10; guard += 1) {\n    const step = tickIncrement(start, stop, count);\n    if (step === previous || !Number.isFinite(step)) break;\n    if (step > 0) {\n      start = Math.floor(start / step) * step;\n      stop = Math.ceil(stop / step) * step;\n    } else if (step < 0) {\n      start = Math.ceil(start * step) / step;\n      stop = Math.floor(stop * step) / step;\n    } else break;\n    previous = step;\n  }\n  return [start, stop];\n}\n\n/** 时间刻度的单位 */\ntype TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';\n\nconst SECOND = 1000;\nconst MINUTE = SECOND * 60;\nconst HOUR = MINUTE * 60;\nconst DAY = HOUR * 24;\nconst WEEK = DAY * 7;\nconst MONTH = DAY * 30;\nconst YEAR = DAY * 365;\n\n/** 可选的间隔：单位、几个单位一格、大约多少毫秒（同 d3 的 tickIntervals） */\nconst TIME_INTERVALS: readonly (readonly [TimeUnit, number, number])[] = [\n  ['second', 1, SECOND],\n  ['second', 5, 5 * SECOND],\n  ['second', 15, 15 * SECOND],\n  ['second', 30, 30 * SECOND],\n  ['minute', 1, MINUTE],\n  ['minute', 5, 5 * MINUTE],\n  ['minute', 15, 15 * MINUTE],\n  ['minute', 30, 30 * MINUTE],\n  ['hour', 1, HOUR],\n  ['hour', 3, 3 * HOUR],\n  ['hour', 6, 6 * HOUR],\n  ['hour', 12, 12 * HOUR],\n  ['day', 1, DAY],\n  ['day', 2, 2 * DAY],\n  ['week', 1, WEEK],\n  ['month', 1, MONTH],\n  ['month', 3, 3 * MONTH],\n  ['year', 1, YEAR],\n];\n\n/** 本地时间里这个单位的起点：月取 1 日 0 点、周取周日 0 点 */\nfunction floorTime(date: Date, unit: TimeUnit): Date {\n  const result = new Date(date);\n  if (unit === 'second') result.setMilliseconds(0);\n  else if (unit === 'minute') result.setSeconds(0, 0);\n  else if (unit === 'hour') result.setMinutes(0, 0, 0);\n  else {\n    result.setHours(0, 0, 0, 0);\n    if (unit === 'week') result.setDate(result.getDate() - result.getDay());\n    if (unit === 'month') result.setDate(1);\n    if (unit === 'year') result.setMonth(0, 1);\n  }\n  return result;\n}\n\n/** 往后数一个单位（按日历走：跨夏令时、大小月都对） */\nfunction nextTime(date: Date, unit: TimeUnit): Date {\n  const result = new Date(date);\n  if (unit === 'second') result.setSeconds(result.getSeconds() + 1);\n  else if (unit === 'minute') result.setMinutes(result.getMinutes() + 1);\n  else if (unit === 'hour') result.setHours(result.getHours() + 1);\n  else if (unit === 'day') result.setDate(result.getDate() + 1);\n  else if (unit === 'week') result.setDate(result.getDate() + 7);\n  else if (unit === 'month') result.setMonth(result.getMonth() + 1);\n  else result.setFullYear(result.getFullYear() + 1);\n  return result;\n}\n\n/** 几个单位一格时按哪个字段取整：每 3 个月取 1、4、7、10 月，每 6 小时取 0、6、12、18 点 */\nfunction timeField(date: Date, unit: TimeUnit): number {\n  if (unit === 'second') return date.getSeconds();\n  if (unit === 'minute') return date.getMinutes();\n  if (unit === 'hour') return date.getHours();\n  if (unit === 'day') return date.getDate() - 1;\n  if (unit === 'month') return date.getMonth();\n  if (unit === 'year') return date.getFullYear();\n  return 0;\n}\n\n/** [start, stop]（毫秒）之间约 count 个整齐的时间刻度：整秒、整分、整点、日、周日、月初、年初（本地时间） */\nexport function timeTicks(start: number, stop: number, count = 6): Date[] {\n  if (!Number.isFinite(start) || !Number.isFinite(stop) || stop < start) return [];\n  const target = (stop - start) / count;\n  const index = TIME_INTERVALS.findIndex(([, , duration]) => duration > target);\n  let unit: TimeUnit;\n  let every: number;\n  if (index < 0) {\n    // 比一年还长：年份按“好看”的步长\n    unit = 'year';\n    every = Math.max(1, tickIncrement(start / YEAR, stop / YEAR, count));\n  } else if (index === 0) {\n    unit = 'second';\n    every = 1;\n  } else {\n    // 取与目标间隔之比更接近 1 的那一档\n    const [before, after] = [TIME_INTERVALS[index - 1]!, TIME_INTERVALS[index]!];\n    [unit, every] = target / before[2] < after[2] / target ? before : after;\n  }\n  const ticks: Date[] = [];\n  for (let date = floorTime(new Date(start), unit); date.getTime() <= stop;) {\n    if (date.getTime() >= start && timeField(date, unit) % every === 0) ticks.push(date);\n    date = nextTime(date, unit);\n  }\n  return ticks;\n}\n"],"mappings":"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"}