@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/charts/GraphChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/GraphChart.tsx"],"sourcesContent":["/**\n * 网络图：节点与连线，看谁和谁有关系、关系有多强（案例与触发事件的匹配、团队与供应商的协作、依赖关系）。\n *\n *   <GraphChart aria-label=\"协作关系\" nodes={nodes} links={links} layout=\"dagre\" groups={teams} />\n *\n * 节点是 { id, label?, sublabel?, group?, color?, shape?, size? }，连线是 { source, target, value?, label?, dashed? }。\n * 布局交给 Unovis 的 Graph：force（默认，力导向）、dagre（分层，direction 定方向）、circular、concentric、parallel\n * （按 group 分列）、elk（分层且支持分组框，较大，用到时才加载）。布局异步算好再画，第一帧是空的。\n * 写了 groups 时同组的节点框在一起（dagre、elk、parallel 布局；力导向、环形布局里组只决定颜色，框会互相盖住）；\n * 节点的颜色默认按组取色板，没有组时都是 chart1。\n * 连线写了 value 时按大小加粗（1–6px），悬停看“起点 → 终点”与数值。点节点选中它（selected 双向绑定），\n * 与它不相连的节点、连线变淡；点空白处取消。能缩放、拖动画布（zoom={false} 关掉），双击回到全图。\n * 给读屏的数据表每条连线一行；单位、加载与空状态同其他图表（见 ChartFrame）。\n */\nimport {\n  Graph,\n  GraphLayoutType,\n  GraphLinkArrowStyle,\n  GraphLinkStyle,\n  GraphNodeSelectionHighlightMode,\n  GraphNodeShape,\n} from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { useFormat, type NumericFormat } from '../config/lang/format';\nimport { colors, fontSizes, opacities } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { resolveColor, type ChartColor } from './series';\nimport { useSingleChart, type SingleChart } from './single';\n\n/** 节点的形状 */\nexport interface GraphChartShapes {\n  /** 圆（默认） */\n  circle: unknown;\n  /** 方块 */\n  square: unknown;\n  /** 六边形 */\n  hexagon: unknown;\n  /** 三角 */\n  triangle: unknown;\n}\n\n/** 布局 */\nexport interface GraphChartLayouts {\n  /** 力导向（默认）：相连的靠近、不相连的推开，适合看关系疏密 */\n  force: unknown;\n  /** 分层：沿 direction 一层层排开，适合有先后、上下游的关系 */\n  dagre: unknown;\n  /** 排成一圈 */\n  circular: unknown;\n  /** 同心圆：连得多的在中间 */\n  concentric: unknown;\n  /** 按 group 分列，组内按连接排 */\n  parallel: unknown;\n  /** 分层，分组框更规整（elkjs，约 1.6 MB，用到时才加载） */\n  elk: unknown;\n}\n\n/** 一个节点 */\nexport interface GraphChartNode {\n  /** id：连线里用它指节点 */\n  id: string;\n  /** 名称，写在节点下面；不写时用 id */\n  label?: string;\n  /** 名称下面的小字 */\n  sublabel?: string;\n  /** 所在的组（groups 里的 id）：同组的框在一起、颜色相同 */\n  group?: string;\n  /** 颜色；不写时按组取色板，没有组时是 chart1 */\n  color?: ChartColor;\n  /** 形状，默认 circle */\n  shape?: keyof GraphChartShapes;\n  /** 大小（px），默认 28 */\n  size?: number;\n}\n\n/** 一条连线 */\nexport interface GraphChartLink {\n  /** 起点节点的 id */\n  source: string;\n  /** 终点节点的 id */\n  target: string;\n  /** 强度：写了时按大小加粗；提示框、数据表里显示 */\n  value?: NumericValue;\n  /** 线上的短标签（几个字以内） */\n  label?: string;\n  /** 虚线：弱关系、待定的关系 */\n  dashed?: boolean;\n  /** 颜色；默认是边框色 */\n  color?: ChartColor;\n}\n\n/** 一组节点 */\nexport interface GraphChartGroup {\n  /** 组的 id：节点的 group 指它 */\n  id: string;\n  /** 组名：写在框上 */\n  label: string;\n  /** 颜色；不写时按组的顺序取色板 */\n  color?: ChartColor;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface GraphChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly GraphChartNode[];\n  /** 连线 */\n  links: readonly GraphChartLink[];\n  /** 分组：同组的节点框在一起（dagre、elk、parallel 布局），颜色相同 */\n  groups?: readonly GraphChartGroup[];\n  /**\n   * 布局\n   * @default 'force'\n   */\n  layout?: keyof GraphChartLayouts;\n  /**\n   * 分层布局（dagre、elk）的方向：LR 从左到右，TB 从上到下\n   * @default 'LR'\n   */\n  direction?: 'LR' | 'TB';\n  /** 连线带箭头；默认分层布局（dagre、elk）带，其余不带 */\n  arrows?: boolean;\n  /** 连线数值的格式：提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 连线数值的单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 360\n   */\n  height?: number | string;\n  /**\n   * 能缩放、拖动画布\n   * @default true\n   */\n  zoom?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /** 选中的节点 id：点节点时写回，父级写 _selected={x}；点空白处变回 null */\n  _selected?: string | null;\n  /**\n   * 加载中：绘图区显示骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个节点（下钻）：参数是这个节点与它的位置；写了它时节点的指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (node: GraphChartNode, index: number) => void;\n}\n\n/** GraphChart 的样式：root（--vis-graph-* 主题变量）、skeleton */\nexport const graphChartStyles = css.create({\n  root: {\n    '--vis-graph-node-stroke-color': colors.surface,\n    '--vis-graph-node-label-text-color': colors.text,\n    '--vis-graph-node-label-font-size': fontSizes.xs,\n    '--vis-graph-node-label-background': colors.surface,\n    '--vis-graph-node-sublabel-text-color': colors.textMuted,\n    '--vis-graph-node-sublabel-font-size': fontSizes.xs,\n    '--vis-graph-node-selection-color': colors.accent,\n    '--vis-graph-node-greyout-color': colors.surfaceMuted,\n    '--vis-graph-node-greyout-opacity': opacities.disabled,\n    '--vis-graph-link-stroke-color': colors.borderStrong,\n    '--vis-graph-link-greyout-opacity': '0.25',\n    '--vis-graph-link-label-background': colors.fill,\n    '--vis-graph-link-label-text-color-dark': colors.text,\n    '--vis-graph-link-label-font-size': fontSizes.xs,\n    '--vis-graph-panel-fill-color': colors.surfaceMuted,\n    '--vis-graph-panel-border-color': colors.borderMuted,\n    '--vis-graph-panel-label-color': colors.textMuted,\n    '--vis-graph-panel-label-background': colors.surface,\n    '--vis-graph-panel-label-font-size': fontSizes.xs,\n    '--vis-graph-panel-label-font-weight': '500',\n  },\n  skeleton: { display: 'block', width: '100%', height: '100%' },\n});\n\nconst LAYOUTS: Record<keyof GraphChartLayouts, GraphLayoutType> = {\n  force: GraphLayoutType.Force,\n  dagre: GraphLayoutType.Dagre,\n  circular: GraphLayoutType.Circular,\n  concentric: GraphLayoutType.Concentric,\n  parallel: GraphLayoutType.Parallel,\n  elk: GraphLayoutType.Elk,\n};\n\nconst SHAPES: Record<keyof GraphChartShapes, GraphNodeShape> = {\n  circle: GraphNodeShape.Circle,\n  square: GraphNodeShape.Square,\n  hexagon: GraphNodeShape.Hexagon,\n  triangle: GraphNodeShape.Triangle,\n};\n\n/** 交给 Unovis 的节点：带上名称与颜色；Unovis 会往上写布局用的字段，每次都复制一份 */\ninterface Node extends GraphChartNode {\n  label: string;\n  fill: string;\n  index: number;\n}\n/** 交给 Unovis 的连线：数值转成 number 算粗细 */\ninterface Link extends GraphChartLink {\n  amount: number | undefined;\n}\n/** Unovis 布局后：连线的起点、终点换成了节点对象 */\ntype LaidOutLink = Omit<Link, 'source' | 'target'> & { source: Node; target: Node };\n\n/** 网络图 */\nexport const GraphChart = _component(\n  ({\n    nodes,\n    links,\n    groups,\n    layout = 'force',\n    direction = 'LR',\n    arrows,\n    valueFormat,\n    unit,\n    height = 360,\n    zoom = true,\n    tooltip = true,\n    _selected: selected = _bindable<string | null>(null),\n    loading = false,\n    empty,\n    onItemClick,\n    sx,\n    ...rest\n  }: GraphChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n\n    const groupColors = _derived(\n      new Map(\n        (groups ?? []).map((group, position) => [group.id, resolveColor(group.color, position)]),\n      ),\n    );\n    const resolved = _derived(\n      nodes.map((node, index): Node => ({\n        ...node,\n        label: node.label ?? node.id,\n        fill: node.color\n          ? resolveColor(node.color, 0)\n          : ((node.group && groupColors.get(node.group)) ?? resolveColor('chart1', 0)),\n        index,\n      })),\n    );\n    const byId = _derived(new Map(resolved.map((node) => [node.id, node])));\n    const labelOf = (id: string) => byId.get(id)?.label ?? id;\n    // 只留两端都在的连线；最大值用来把粗细缩放到 1–6px\n    const shownLinks = _derived(\n      links\n        .filter((link) => byId.has(link.source) && byId.has(link.target))\n        .map((link): Link => ({\n          ...link,\n          amount: link.value === undefined ? undefined : toNumber(link.value),\n        })),\n    );\n    const maxAmount = _derived(Math.max(0, ...shownLinks.map((link) => link.amount ?? 0)));\n    const degree = _derived.by(() => {\n      const counts = new Map<string, number>();\n      for (const link of shownLinks) {\n        counts.set(link.source, (counts.get(link.source) ?? 0) + 1);\n        counts.set(link.target, (counts.get(link.target) ?? 0) + 1);\n      }\n      return counts;\n    });\n\n    let plot = _state.raw<HTMLElement | null>(null);\n    const chart: SingleChart = useSingleChart<{ nodes: Node[]; links?: Link[] }>(() => ({\n      element: plot,\n      ready: !loading && nodes.length > 0,\n      tooltip,\n      build: (instance) => {\n        const graph = instance('graph', () => new Graph<Node, Link>({}));\n        const layered = layout === 'dagre' || layout === 'elk';\n        // 分组框只在按层、按列排的布局里画：其余布局不按组排，框会互相盖住\n        const framed = layered || layout === 'parallel';\n        graph.setConfig({\n          layoutType: LAYOUTS[layout],\n          layoutNodeGroup: (node) => node.group ?? '',\n          layoutGroupOrder: groups?.map((group) => group.id),\n          // 分组框比节点宽出一圈：层与层之间留够，框不相互压住\n          dagreLayoutSettings: {\n            rankdir: direction,\n            nodesep: groups?.length ? 48 : 36,\n            ranksep: groups?.length ? 150 : 96,\n          },\n          layoutElkSettings: {\n            'elk.direction': direction === 'LR' ? 'RIGHT' : 'DOWN',\n            'elk.spacing.nodeNode': '36',\n            'elk.layered.spacing.nodeNodeBetweenLayers': '96',\n          },\n          layoutElkNodeGroups: groups?.length ? [(node) => node.group ?? ''] : undefined,\n          forceLayoutSettings: { linkDistance: 90, charge: -600 },\n          nodeSize: (node) => node.size ?? 28,\n          nodeShape: (node) => SHAPES[node.shape ?? 'circle'],\n          nodeFill: (node) => node.fill,\n          nodeStrokeWidth: 2,\n          nodeLabel: (node) => node.label,\n          nodeSubLabel: (node) => node.sublabel ?? '',\n          nodeLabelTrimLength: 16,\n          // 不用图标字体：节点只是色块\n          nodeIcon: () => '',\n          linkWidth: (link) =>\n            link.amount === undefined || maxAmount === 0 ? 1.5 : 1 + (5 * link.amount) / maxAmount,\n          linkStroke: (link) => (link.color ? resolveColor(link.color, 0) : undefined),\n          linkStyle: (link) => (link.dashed ? GraphLinkStyle.Dashed : GraphLinkStyle.Solid),\n          linkArrow: (arrows ?? layered) ? GraphLinkArrowStyle.Single : undefined,\n          linkLabel: (link) => (link.label ? { text: link.label } : undefined),\n          linkCurvature: layered ? 0 : 0.2,\n          panels: (framed ? (groups ?? []) : [])\n            .filter((group) => resolved.some((node) => node.group === group.id))\n            .map((group) => ({\n              nodes: resolved.filter((node) => node.group === group.id).map((node) => node.id),\n              label: group.label,\n              padding: 16,\n              borderColor: groupColors.get(group.id),\n            })),\n          selectedNodeId: selected ?? undefined,\n          nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,\n          disableZoom: !zoom,\n          disableDrag: !zoom,\n          disableBrush: true,\n          // 上方多留一些：分组框的组名写在框顶外面\n          fitViewPadding: { top: 48, right: 32, bottom: 32, left: 32 },\n          events: {\n            [Graph.selectors.node]: {\n              click: (node: Node) => {\n                selected = node.id;\n                onItemClick?.(nodes[node.index]!, node.index);\n              },\n            },\n            [Graph.selectors.background]: {\n              click: () => (selected = null),\n              // 双击空白回到全图\n              dblclick: () => graph.fitView(),\n            },\n          },\n        });\n        return {\n          component: graph,\n          data: {\n            nodes: resolved.map((node) => ({ ...node })),\n            links: shownLinks.map((link) => ({ ...link })),\n          },\n          triggers: {\n            [Graph.selectors.node]: (node: Node) =>\n              chart.tooltip(\n                chartTooltip(node.label, [\n                  ...(node.sublabel\n                    ? [{ label: node.sublabel, color: 'transparent', value: '' }]\n                    : []),\n                  {\n                    label: lang.chartDegree(degree.get(node.id) ?? 0),\n                    color: node.fill,\n                    value: '',\n                  },\n                ]),\n              ),\n            [Graph.selectors.link]: (link: LaidOutLink) =>\n              chart.tooltip(\n                chartTooltip(lang.chartFlowLabel(link.source.label, link.target.label), [\n                  ...(link.value === undefined\n                    ? []\n                    : [\n                        {\n                          label: lang.chartValue,\n                          color: link.source.fill,\n                          value: valueText(link.value),\n                        },\n                      ]),\n                  ...(link.label ? [{ label: link.label, color: 'transparent', value: '' }] : []),\n                ]),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        sx={[graphChartStyles.root, sx]}\n        unit={unit}\n        height={height}\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={<Skeleton sx={graphChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        clickable={onItemClick != null}\n        table={{\n          columns: [lang.chartLink, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: shownLinks.map((link) => ({\n            header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n            cells: [\n              [\n                link.value === undefined ? '' : format.number(link.value, valueFormat),\n                link.label ?? '',\n              ]\n                .filter(Boolean)\n                .join(' · ') || lang.emptyValue,\n            ],\n          })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/charts/LineChart.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 折线图：每个系列一条线，类目（通常是时间）沿横轴排开；悬停时十字线在各条线上标出当前点，提示框列出各系列的值。
+ *
+ *   <LineChart
+ *     aria-label="月度销售趋势"
+ *     data={months}
+ *     index="month"
+ *     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}
+ *     dots="hollow"
+ *   />
+ *
+ * 空值（null、undefined）处断开；颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart。
+ */
+import { CurveType } from '@unovis/ts';
+import { type XYChartProps } from './XYChart';
+/** 线的形状 */
+export interface LineCurves {
+    /** 折线：相邻的点直线相连（默认） */
+    linear: unknown;
+    /** 平滑曲线：不会越过数据点（单调插值），趋势更柔和 */
+    monotone: unknown;
+    /** 阶梯：值保持到下一个点才跳变，适合离散的状态、价格档位 */
+    step: unknown;
+}
+/** 数据点的样式 */
+export interface LineDots {
+    /** 不画数据点（默认），只在悬停时由十字线标出 */
+    none: unknown;
+    /** 实心圆点 */
+    filled: unknown;
+    /** 空心圆点：描边是系列颜色，中间是背景色 */
+    hollow: unknown;
+}
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+export interface LineChartProps<T extends object> extends XYChartProps<T> {
+    /** 线的形状，默认 linear */
+    curve?: keyof LineCurves;
+    /** 数据点，默认 none */
+    dots?: keyof LineDots;
+    /** 线宽（px），默认 2 */
+    lineWidth?: number;
+}
+/** 曲线的形状 → Unovis 的 CurveType（折线图、面积图共用） */
+export declare const CURVES: {
+    linear: CurveType.Linear;
+    monotone: CurveType.MonotoneX;
+    step: CurveType.StepAfter;
+};
+/** 折线图：直线、平滑或阶梯，可带数据点 */
+export declare const LineChart: <T extends object>(props: LineChartProps<T>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;

package/dist/charts/LineChart.js

@@ -0,0 +1,94 @@
+import { colors } from "../config/theme/tokens.js";
+import { XYChart } from "./XYChart.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { CurveType, Line, Scatter } from "@unovis/ts";
+//#region src/charts/LineChart.tsx
+/**
+* 折线图：每个系列一条线，类目（通常是时间）沿横轴排开；悬停时十字线在各条线上标出当前点，提示框列出各系列的值。
+*
+*   <LineChart
+*     aria-label="月度销售趋势"
+*     data={months}
+*     index="month"
+*     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}
+*     dots="hollow"
+*   />
+*
+* 空值（null、undefined）处断开；颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart。
+*/
+/** 线的形状 */
+/** 数据点的样式 */
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+/** 曲线的形状 → Unovis 的 CurveType（折线图、面积图共用） */
+var CURVES = {
+	linear: CurveType.Linear,
+	monotone: CurveType.MonotoneX,
+	step: CurveType.StepAfter
+};
+/** 数据点的直径（px） */
+var DOT_SIZE = 8;
+/** 折线图：直线、平滑或阶梯，可带数据点 */
+var LineChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const curve = readonlyProp(_props, "curve", "linear");
+	const dots = readonlyProp(_props, "dots", "none");
+	const lineWidth = readonlyProp(_props, "lineWidth", 2);
+	const hiddenSeries = bindable(_props, "_hiddenSeries", () => [], _ctx.emit);
+	const rest = restProps(_props, _ctx, true);
+	const kind = computed(() => ({
+		crosshairDots: true,
+		padding: {
+			left: 12,
+			right: 12,
+			top: 8
+		},
+		components: ({ series, x, y, instance }) => {
+			const line = instance("line", () => new Line({
+				x,
+				y: []
+			}));
+			line.setConfig({
+				x,
+				y: series.map(y),
+				color: (_rows, position) => series[position]?.color,
+				curveType: CURVES[curve.value],
+				lineWidth: lineWidth.value
+			});
+			if (dots.value === "none") return [line];
+			return [line, ...series.map((item) => {
+				const scatter = instance(`dots:${item.key}`, () => new Scatter({
+					x,
+					y: () => 0
+				}));
+				scatter.setConfig({
+					x,
+					y: y(item),
+					size: DOT_SIZE,
+					color: dots.value === "hollow" ? colors.surface : item.color,
+					strokeColor: item.color,
+					strokeWidth: dots.value === "hollow" ? 2 : 0
+				});
+				return scatter;
+			})];
+		}
+	}));
+	return () => createVNode(XYChart, mergeProps(rest, {
+		"_hiddenSeries": hiddenSeries.value,
+		"onUpdate:_hiddenSeries": _cache[0] || (_cache[0] = ($event) => hiddenSeries.value = $event),
+		"kind": kind.value
+	}), null);
+}, {
+	name: "LineChart",
+	props: [
+		"curve",
+		"dots",
+		"lineWidth",
+		"_hiddenSeries",
+		"onUpdate:_hiddenSeries"
+	]
+});
+//#endregion
+export { CURVES, LineChart };
+
+//# sourceMappingURL=LineChart.js.map

package/dist/charts/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/charts/LineChart.tsx"],"sourcesContent":["/**\n * 折线图：每个系列一条线，类目（通常是时间）沿横轴排开；悬停时十字线在各条线上标出当前点，提示框列出各系列的值。\n *\n *   <LineChart\n *     aria-label=\"月度销售趋势\"\n *     data={months}\n *     index=\"month\"\n *     series={[{ key: 'planned', label: '预期销售' }, { key: 'actual', label: '实际销售' }]}\n *     dots=\"hollow\"\n *   />\n *\n * 空值（null、undefined）处断开；颜色、坐标轴、提示框、图例、读屏的数据表见 XYChart。\n */\nimport { CurveType, Line, Scatter } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { colors } from '../config/theme/tokens';\nimport { XYChart, type XYChartKind, type XYChartProps } from './XYChart';\n\n/** 线的形状 */\nexport interface LineCurves {\n  /** 折线：相邻的点直线相连（默认） */\n  linear: unknown;\n  /** 平滑曲线：不会越过数据点（单调插值），趋势更柔和 */\n  monotone: unknown;\n  /** 阶梯：值保持到下一个点才跳变，适合离散的状态、价格档位 */\n  step: unknown;\n}\n\n/** 数据点的样式 */\nexport interface LineDots {\n  /** 不画数据点（默认），只在悬停时由十字线标出 */\n  none: unknown;\n  /** 实心圆点 */\n  filled: unknown;\n  /** 空心圆点：描边是系列颜色，中间是背景色 */\n  hollow: unknown;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上；aria-label 是图表的名称 */\nexport interface LineChartProps<T extends object> extends XYChartProps<T> {\n  /** 线的形状，默认 linear */\n  curve?: keyof LineCurves;\n  /** 数据点，默认 none */\n  dots?: keyof LineDots;\n  /** 线宽（px），默认 2 */\n  lineWidth?: number;\n}\n\n/** 曲线的形状 → Unovis 的 CurveType（折线图、面积图共用） */\nexport const CURVES = {\n  linear: CurveType.Linear,\n  monotone: CurveType.MonotoneX,\n  step: CurveType.StepAfter,\n} satisfies Record<keyof LineCurves, CurveType>;\n\n/** 数据点的直径（px） */\nconst DOT_SIZE = 8;\n\n/** 折线图：直线、平滑或阶梯，可带数据点 */\nexport const LineChart = _component(\n  <T extends object>({\n    curve = 'linear',\n    dots = 'none',\n    lineWidth = 2,\n    _hiddenSeries: hiddenSeries = _bindable<string[]>([]),\n    ...rest\n  }: LineChartProps<T>) => {\n    const kind = _derived<XYChartKind<T>>({\n      crosshairDots: true,\n      // 两端的点不贴着绘图区边缘，圆点与十字线的圆点能完整显示\n      padding: { left: 12, right: 12, top: 8 },\n      components: ({ series, x, y, instance }) => {\n        const line = instance('line', () => new Line<T>({ x, y: [] }));\n        line.setConfig({\n          x,\n          y: series.map(y),\n          color: (_rows: T[], position: number) => series[position]?.color,\n          curveType: CURVES[curve],\n          lineWidth,\n        });\n        if (dots === 'none') return [line];\n        const points = series.map((item) => {\n          const scatter = instance(`dots:${item.key}`, () => new Scatter<T>({ x, y: () => 0 }));\n          scatter.setConfig({\n            x,\n            y: y(item),\n            size: DOT_SIZE,\n            color: dots === 'hollow' ? colors.surface : item.color,\n            strokeColor: item.color,\n            strokeWidth: dots === 'hollow' ? 2 : 0,\n          });\n          return scatter;\n        });\n        return [line, ...points];\n      },\n    });\n    return () => <XYChart {...rest} _hiddenSeries={hiddenSeries} kind={kind} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiDA,IAAa,SAAS;CACpB,QAAQ,UAAU;CAClB,UAAU,UAAU;CACpB,MAAM,UAAU;AAClB;;AAGA,IAAM,WAAW;;AAGjB,IAAa,YAAY,0BACvB,QAAA,SAMyB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SALf,QAAQ;CAAA,MAAA,OAAAA,aAAA,QAAA,QACT,MAAM;CAAA,MAAA,YAAAA,aAAA,QAAA,aACD,CAAC;CAAA,MAAA,eAAAC,SAAA,QAAA,uBACqC,CAAA,GAAE,KAAA,IAAA;CAAA,MACjD,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAIC,gBAA4B;EACpC,eAAe;EAEf,SAAS;GAAE,MAAM;GAAI,OAAO;GAAI,KAAK;EAAE;EACvC,aAAa,EAAE,QAAQ,GAAG,GAAG,eAAe;GAC1C,MAAM,OAAO,SAAS,cAAc,IAAI,KAAQ;IAAE;IAAG,GAAG,CAAA;GAAG,CAAC,CAAC;GAC7D,KAAK,UAAU;IACb;IACA,GAAG,OAAO,IAAI,CAAC;IACf,QAAQ,OAAY,aAAqB,OAAO,SAAS,EAAE;IAC3D,WAAW,OAAM,MAAA;IACjB,WAAS,UAAA;GACX,CAAC;GACD,IAAI,KAAA,UAAS,QAAQ,OAAO,CAAC,IAAI;GAajC,OAAO,CAAC,MAAM,GAZC,OAAO,KAAK,SAAS;IAClC,MAAM,UAAU,SAAS,QAAQ,KAAK,aAAa,IAAI,QAAW;KAAE;KAAG,SAAS;IAAE,CAAC,CAAC;IACpF,QAAQ,UAAU;KAChB;KACA,GAAG,EAAE,IAAI;KACT,MAAM;KACN,OAAO,KAAA,UAAS,WAAW,OAAO,UAAU,KAAK;KACjD,aAAa,KAAK;KAClB,aAAa,KAAA,UAAS,WAAW,IAAI;IACvC,CAAC;IACD,OAAO;GACT,CACiB,CAAM;EACzB;CACF,EAAC;CACD,aAAOC,YAAA,SAAAC,WAAmB,MAAI;EAAA,iBAAA,aAAA;EAAA,0BAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAA,QAAA;EAAA,QAAA,KAAA;CAAA,CAAA,GAAA,IAAA;AAChC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/charts/MapChart.d.ts

@@ -0,0 +1,167 @@
+/**
+ * 地图：按区域着色（分省的销售额、各国的采购额），标出地点（工厂、供应商）与它们之间的流向。
+ * 地理数据是 TopoJSON：Unovis 自带中国省份、世界、美国等（`@unovis/ts/maps`），也可以用自己的。
+ *
+ *   import { ChinaTopoJSON } from '@unovis/ts/maps';
+ *   <MapChart
+ *     aria-label="各省销售额"
+ *     topology={ChinaTopoJSON}
+ *     feature="provinces"
+ *     areas={[{ id: 'CN-JS', label: '江苏', value: 623 }, …]}   // id 是地图要素的 id
+ *     points={[{ id: 'sh', label: '上海组装', longitude: 121.47, latitude: 31.23, value: 860 }]}
+ *     links={[{ from: 'xa', to: 'sh', value: 120 }]}
+ *     bins={5}
+ *     areaLabels
+ *   />
+ *
+ * 投影：默认按地理数据的范围选——一个国家、一个地区用以它为中心的等积圆锥投影（中国地图常用的 Albers，正着、不歪），
+ * 跨了大半个地球时用 Natural Earth；也可以指定 mercator、equalEarth、orthographic（地球仪）或自己的 d3 投影。
+ *
+ * 着色：sequential（默认）按数值深浅；diverging 以 midpoint 为界两头两种颜色（同比的涨跌）；
+ * bins 分成几档（分级着色，图例是几个色块），不写时连续着色（图例是色带）；区域写了 color 时按它（分类着色）。
+ * 没有数据的区域是底色。地点：value 决定大小（面积按比例），color、shape 决定颜色与形状；名字自动避让
+ * （换方位、挤时往外退并画引线，数值大的先放，放不下的悬停看；压住名字、地点的区域名藏起来）；
+ * links 是地点之间的流向，粗细按 value，flow 时有流动的粒子。
+ * zoomable 时可以拖动、按住 Ctrl 滚轮缩放，右上角有放大、缩小、复位的按钮。悬停看名称与数值；读屏的数据表列出各区域、地点与流向。
+ */
+import { type TopoJSONMapConfigInterface } from '@unovis/ts';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type NumericFormat } from '../config/lang/format';
+import { type NumericValue } from '../utils/data/numeric';
+import type { PartProps } from '../utils/props';
+import { type ChartFrameParts } from './frame';
+import { type ChartColor } from './series';
+/** 一个区域的数据 */
+export interface MapArea {
+    /** 地图要素的 id（Unovis 的中国省份是 'CN-JS' 这样的写法） */
+    id: string;
+    /** 显示的名称：提示框、区域名、数据表 */
+    label: string;
+    /** 数值：决定颜色 */
+    value?: NumericValue;
+    /** 指定颜色：不按数值着色（分类着色，如所属大区） */
+    color?: ChartColor;
+}
+/** 一个地点 */
+export interface MapPoint {
+    /** 标识：流向的 from、to 指向它 */
+    id: string;
+    /** 名称：写在点下方 */
+    label: string;
+    /** 经度 */
+    longitude: number;
+    /** 纬度 */
+    latitude: number;
+    /** 数值：决定点的大小（面积按比例），也显示在提示框 */
+    value?: NumericValue;
+    /** 颜色，默认 danger */
+    color?: ChartColor;
+    /** 形状，默认 circle */
+    shape?: 'circle' | 'square' | 'triangle';
+}
+/** 两个地点之间的流向 */
+export interface MapLink {
+    /** 起点（地点的 id） */
+    from: string;
+    /** 终点（地点的 id） */
+    to: string;
+    /** 数值：决定线的粗细，也显示在数据表 */
+    value?: NumericValue;
+    /** 颜色，默认次要色 */
+    color?: ChartColor;
+}
+/** 投影的预设 */
+export interface MapProjections {
+    /** 等积圆锥（Albers）：以数据为中心，一个国家、一个地区用它（中国地图常用），正着、面积不失真 */
+    conic: unknown;
+    /** 墨卡托：网页地图常见，高纬度会放大 */
+    mercator: unknown;
+    /** Natural Earth：世界地图，形状与面积都比较自然 */
+    naturalEarth: unknown;
+    /** Equal Earth：世界地图，面积准确 */
+    equalEarth: unknown;
+    /** 正射（地球仪）：以数据为中心看半个地球 */
+    orthographic: unknown;
+}
+/** d3 的投影（TopoJSONMap 的 projection） */
+export type MapGeoProjection = NonNullable<TopoJSONMapConfigInterface<MapArea>['projection']>;
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+export interface MapChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
+    /** 地理数据（TopoJSON），如 `@unovis/ts/maps` 的 ChinaTopoJSON、WorldMapTopoJSON */
+    topology: NonNullable<TopoJSONMapConfigInterface<MapArea>['topojson']>;
+    /** 画哪一组要素（TopoJSON 的 objects 里的名字），如中国省份是 'provinces'、世界是 'countries' */
+    feature: string;
+    /** 投影：预设的名字，或 d3 的投影；不写时按数据的范围选 conic 或 naturalEarth */
+    projection?: keyof MapProjections | MapGeoProjection;
+    /** 投影的中心 [经度, 纬度]：中央经线（世界地图写 [150, 0] 以太平洋为中心），orthographic 还用纬度；不写时取地理数据范围的中心 */
+    center?: readonly [number, number];
+    /** 各区域的数值 */
+    areas?: readonly MapArea[];
+    /** 地点 */
+    points?: readonly MapPoint[];
+    /** 地点之间的流向 */
+    links?: readonly MapLink[];
+    /** 着色方式：sequential 按数值深浅（默认），diverging 以 midpoint 为界两头两种颜色 */
+    scheme?: 'sequential' | 'diverging';
+    /** sequential 的基色，默认 accent */
+    color?: ChartColor;
+    /** diverging 的两头 [低, 高]，默认 ['danger', 'success'] */
+    divergingColors?: readonly [ChartColor, ChartColor];
+    /** diverging 的分界，默认 0 */
+    midpoint?: number;
+    /** 分成几档（分级着色）；不写时连续着色 */
+    bins?: number;
+    /** 在区域上写名字（区域够大时） */
+    areaLabels?: boolean;
+    /** 流向上有流动的粒子 */
+    flow?: boolean;
+    /** 数值的格式 */
+    valueFormat?: NumericFormat;
+    /** 单位：显示在左上方，提示框与数据表的数值后面带上 */
+    unit?: string;
+    /**
+     * 绘图区的高度；数字按 px
+     * @default 400
+     */
+    height?: number | string;
+    /** 可以拖动、滚轮缩放，右上角有放大、缩小、复位的按钮；默认关（不抢页面的滚动） */
+    zoomable?: boolean;
+    /** 加载中：绘图区显示骨架 */
+    loading?: boolean;
+    /** 没有数据时显示的内容 */
+    empty?: VNodeChild;
+    /** 悬停时的提示框，默认 true */
+    tooltip?: boolean;
+    /** 点了一个有数据的区域 */
+    onAreaClick?: (area: MapArea) => void;
+    /** 点了一个地点 */
+    onPointClick?: (point: MapPoint) => void;
+}
+/** MapChart 的样式 */
+export declare const mapChartStyles: Readonly<{
+    readonly root: css.CompiledStyles;
+    readonly skeleton: css.CompiledStyles;
+    readonly pointLabels: css.CompiledStyles;
+    readonly leader: css.CompiledStyles;
+    readonly zoom: css.CompiledStyles;
+    readonly wheelHint: css.CompiledStyles;
+    readonly legend: css.CompiledStyles;
+    readonly ramp: css.CompiledStyles;
+    readonly rampColors: (gradient: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly bin: css.CompiledStyles;
+    readonly swatch: css.CompiledStyles;
+    readonly swatchColor: (color: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+type MapTopology = MapChartProps['topology'];
+/**
+ * 简化地理数据：去掉与前后两点围成的三角形面积不到 minArea（坐标单位的平方，经纬度是平方度）的点
+ * （Visvalingam，topojson-simplify）。相邻区域共用的边界一起简化，不会出现缝隙；各段弧的两端总保留。
+ * minArea 按 2 的整数次幂分档缓存：绘图区大小变一点不重算。
+ */
+export declare function simplifyTopology(topology: MapTopology, minArea: number): MapTopology;
+/** TopoJSON 的经纬度范围 [西, 南, 东, 北]：有 bbox 用它，否则解出各段弧的坐标（量化的弧是逐点的差值） */
+export declare function topologyBounds(topology: MapChartProps['topology']): [number, number, number, number];
+/** 地图 */
+export declare const MapChart: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<MapChartProps>;
+export {};