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

package/dist/charts/FunnelChart.js

@@ -0,0 +1,181 @@
+import { toNumber } from "../utils/data/numeric.js";
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { useFormat } from "../config/lang/format.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { ChartFrame } from "./frame.js";
+import { resolveColor } from "./series.js";
+import { computed, createTextVNode, createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/charts/FunnelChart.tsx
+/** 漏斗的一个环节 */
+/** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
+/** FunnelChart 的样式：list、row、label、track、bar、value、rate… */
+var funnelChartStyles = css.create({
+	list: {
+		display: "grid",
+		gridTemplateColumns: "max-content minmax(0, 1fr) max-content",
+		columnGap: "_md"
+	},
+	row: {
+		display: "grid",
+		gridColumn: "1 / -1",
+		gridTemplateColumns: "subgrid",
+		alignItems: "center",
+		paddingBlock: "2px",
+		paddingInline: "_xs",
+		borderRadius: "_sm"
+	},
+	rowClickable: { backgroundColor: {
+		default: "transparent",
+		":hover": "_fill"
+	} },
+	label: {
+		color: "_text",
+		textAlign: "end",
+		whiteSpace: "nowrap"
+	},
+	track: {
+		display: "flex",
+		justifyContent: "center"
+	},
+	bar: {
+		height: "1.75rem",
+		minWidth: "2px",
+		borderRadius: "_sm",
+		transition: `width ${t.durations.md} ${t.easings.standard}`
+	},
+	value: {
+		fontVariantNumeric: "tabular-nums",
+		fontWeight: "_medium",
+		whiteSpace: "nowrap"
+	},
+	rate: {
+		display: "grid",
+		gridColumn: "1 / -1",
+		gridTemplateColumns: "subgrid",
+		paddingInline: "_xs",
+		color: "_textMuted",
+		fontSize: "_xs",
+		fontVariantNumeric: "tabular-nums",
+		lineHeight: "_tight"
+	},
+	rateText: {
+		gridColumn: "2",
+		textAlign: "center"
+	},
+	overall: {
+		gridColumn: "2 / 4",
+		textAlign: "center",
+		paddingBlockStart: "_xs"
+	},
+	skeleton: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		gap: "_sm"
+	},
+	skeletonBar: {
+		height: "1.75rem",
+		borderRadius: "_sm"
+	}
+});
+/** FunnelChart 的样式：barSize、skeletonWidth */
+var funnelChartDynamicStyles = css.create({
+	barSize: (width, color) => ({
+		width,
+		backgroundColor: color
+	}),
+	skeletonWidth: (width) => ({ width })
+});
+/** 骨架横条的宽度：从宽到窄 */
+var SKELETON_WIDTHS = [
+	"90%",
+	"68%",
+	"46%",
+	"28%"
+];
+/** 漏斗图 */
+var FunnelChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const stages = readonlyProp(_props, "stages");
+	const valueFormat = readonlyProp(_props, "valueFormat");
+	const unit = readonlyProp(_props, "unit");
+	const color = readonlyProp(_props, "color", "chart1");
+	const rates = readonlyProp(_props, "rates", true);
+	const loading = readonlyProp(_props, "loading", false);
+	const empty = readonlyProp(_props, "empty");
+	const onItemClick = readonlyProp(_props, "onItemClick");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const numbers = computed(() => stages.value.map((stage) => Math.max(toNumber(stage.value), 0)));
+	const max = computed(() => Math.max(0, ...numbers.value));
+	const percent = (value) => format.number(value, {
+		style: "percent",
+		maximumFractionDigits: 1
+	});
+	/** 第 index 个环节比 base 个环节的转化率；base 为 0 时没有 */
+	const rate = (index, base) => numbers.value[base] ? percent(numbers.value[index] / numbers.value[base]) : lang.emptyValue;
+	const valueText = (stage) => format.number(stage.value, unit.value ? {
+		...valueFormat.value,
+		suffix: unit.value
+	} : valueFormat.value);
+	return () => createVNode(ChartFrame, mergeProps(rest, {
+		"unit": unit.value,
+		"height": "auto",
+		"legend": _cache[0] || (_cache[0] = []),
+		"hiddenKeys": _cache[1] || (_cache[1] = []),
+		"onLegendToggle": _cache[2] || (_cache[2] = () => {}),
+		"loading": loading.value,
+		"skeleton": createVNode("div", mergeProps({ "aria-hidden": "true" }, css.attrs(funnelChartStyles.skeleton)), [SKELETON_WIDTHS.map((width) => createVNode(Skeleton, {
+			"key": width,
+			"sx": [funnelChartStyles.skeletonBar, css.bind(funnelChartDynamicStyles.skeletonWidth, () => [width])]
+		}, null))]),
+		"isEmpty": stages.value.length === 0,
+		"empty": empty.value,
+		"table": {
+			columns: [
+				lang.chartStage,
+				unit.value ? `${lang.chartValue}（${unit.value}）` : lang.chartValue,
+				lang.chartStepRate,
+				lang.chartOverallRate
+			],
+			rows: stages.value.map((stage, index) => ({
+				header: stage.label,
+				cells: [
+					format.number(stage.value, valueFormat.value),
+					index === 0 ? lang.emptyValue : rate(index, index - 1),
+					index === 0 ? lang.emptyValue : rate(index, 0)
+				]
+			}))
+		},
+		"plot": createVNode("div", css.attrs(funnelChartStyles.list), [stages.value.map((stage, index) => [index > 0 && rates.value && createVNode("div", mergeProps({ "key": `rate-${index}` }, css.attrs(funnelChartStyles.rate)), [createVNode("span", css.attrs(funnelChartStyles.rateText), [createTextVNode("↓ "), rate(index, index - 1)])]), createVNode("div", mergeProps({ "key": `stage-${index}` }, css.attrs(funnelChartStyles.row, onItemClick.value && funnelChartStyles.rowClickable), { "onClick": onItemClick.value && (() => onItemClick.value(stage, index)) }), [
+			createVNode("span", css.attrs(funnelChartStyles.label), [stage.label]),
+			createVNode("span", css.attrs(funnelChartStyles.track), [createVNode("span", css.attrs(funnelChartStyles.bar, css.bind(funnelChartDynamicStyles.barSize, () => [max.value ? `${numbers.value[index] / max.value * 100}%` : "0%", resolveColor(stage.color ?? color.value, index)])), null)]),
+			createVNode("span", css.attrs(funnelChartStyles.value), [valueText(stage)])
+		])]), rates.value && stages.value.length > 1 && createVNode("div", css.attrs(funnelChartStyles.rate), [createVNode("span", css.attrs(funnelChartStyles.overall), [
+			lang.chartOverallRate,
+			createTextVNode(" "),
+			rate(stages.value.length - 1, 0)
+		])])]),
+		"clickable": onItemClick.value != null
+	}), null);
+}, {
+	name: "FunnelChart",
+	props: [
+		"stages",
+		"valueFormat",
+		"unit",
+		"color",
+		"rates",
+		"loading",
+		"empty",
+		"onItemClick"
+	]
+});
+//#endregion
+export { FunnelChart, funnelChartDynamicStyles, funnelChartStyles };
+
+//# sourceMappingURL=FunnelChart.js.map

package/dist/charts/FunnelChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunnelChart.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps","_createTextVNode"],"sources":["../../src/charts/FunnelChart.tsx"],"sourcesContent":["/**\n * 漏斗图：一串前后相接的环节，看每一步留下多少、在哪一步流失最多（访问 → 注册 → 下单、线索转化）。\n *\n *   <FunnelChart aria-label=\"渠道转化\" stages={[{ label: '提交建议', value: 120 }, { label: '立项', value: 46 }]} unit=\"项\" />\n *\n * 每个环节一条居中的横条，长短按数值（最大的环节占满）；环节之间写比上一环节的转化率，末尾写总转化。\n * 横条默认同一个颜色（chart1），环节可以单独给 color。Unovis 没有漏斗图：这里用主题 tokens 直接画，\n * 外层结构（单位、加载与空状态、给读屏的数据表）同其他图表（见 ChartFrame）。\n */\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 { Skeleton } from '../feedback/Skeleton';\nimport { toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { ChartFrame, type ChartFrameParts } from './frame';\nimport { resolveColor, type ChartColor } from './series';\nimport { t } from '../config/theme/tokens';\n\n/** 漏斗的一个环节 */\nexport interface FunnelStage {\n  /** 名称 */\n  label: string;\n  /** 数值：number、bigint 或 Decimal */\n  value: NumericValue;\n  /** 颜色；不写时用图表的 color */\n  color?: ChartColor;\n}\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface FunnelChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 各环节：从上到下 */\n  stages: readonly FunnelStage[];\n  /** 数值的格式（可缩放）：横条旁的数值与数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 横条的颜色\n   * @default 'chart1'\n   */\n  color?: ChartColor;\n  /**\n   * 环节之间写转化率，末尾写总转化\n   * @default true\n   */\n  rates?: boolean;\n  /**\n   * 加载中：显示几条骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个环节（下钻）：参数是这个环节与它的位置；写了它时指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (stage: FunnelStage, index: number) => void;\n}\n\n/** FunnelChart 的样式：list、row、label、track、bar、value、rate… */\nexport const funnelChartStyles = css.create({\n  // 名称 | 居中的横条 | 数值：三列由整个列表定宽，各行用 subgrid 对齐\n  list: {\n    display: 'grid',\n    gridTemplateColumns: 'max-content minmax(0, 1fr) max-content',\n    columnGap: '_md',\n  },\n  row: {\n    display: 'grid',\n    gridColumn: '1 / -1',\n    gridTemplateColumns: 'subgrid',\n    alignItems: 'center',\n    paddingBlock: '2px',\n    paddingInline: '_xs',\n    borderRadius: '_sm',\n  },\n  rowClickable: { backgroundColor: { default: 'transparent', ':hover': '_fill' } },\n  label: { color: '_text', textAlign: 'end', whiteSpace: 'nowrap' },\n  track: { display: 'flex', justifyContent: 'center' },\n  bar: {\n    height: '1.75rem',\n    minWidth: '2px',\n    borderRadius: '_sm',\n    transition: `width ${t.durations.md} ${t.easings.standard}`,\n  },\n  value: { fontVariantNumeric: 'tabular-nums', fontWeight: '_medium', whiteSpace: 'nowrap' },\n  // 环节之间：转化率写在中间那一列，小号的次要文字\n  rate: {\n    display: 'grid',\n    gridColumn: '1 / -1',\n    gridTemplateColumns: 'subgrid',\n    paddingInline: '_xs',\n    color: '_textMuted',\n    fontSize: '_xs',\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: '_tight',\n  },\n  rateText: { gridColumn: '2', textAlign: 'center' },\n  overall: { gridColumn: '2 / 4', textAlign: 'center', paddingBlockStart: '_xs' },\n  skeleton: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '_sm' },\n  skeletonBar: { height: '1.75rem', borderRadius: '_sm' },\n});\n\n// 横条的宽度与颜色随数据变：单独一个 create（见 COMPONENTS.md §4）\n/** FunnelChart 的样式：barSize、skeletonWidth */\nexport const funnelChartDynamicStyles = css.create({\n  barSize: (width: string, color: string) => ({ width, backgroundColor: color }),\n  skeletonWidth: (width: string) => ({ width }),\n});\n\n/** 骨架横条的宽度：从宽到窄 */\nconst SKELETON_WIDTHS = ['90%', '68%', '46%', '28%'];\n\n/** 漏斗图 */\nexport const FunnelChart = _component(\n  ({\n    stages,\n    valueFormat,\n    unit,\n    color = 'chart1',\n    rates = true,\n    loading = false,\n    empty,\n    onItemClick,\n    ...rest\n  }: FunnelChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const numbers = _derived(stages.map((stage) => Math.max(toNumber(stage.value), 0)));\n    const max = _derived(Math.max(0, ...numbers));\n    const percent = (value: number) =>\n      format.number(value, { style: 'percent', maximumFractionDigits: 1 });\n    /** 第 index 个环节比 base 个环节的转化率；base 为 0 时没有 */\n    const rate = (index: number, base: number) =>\n      numbers[base] ? percent(numbers[index]! / numbers[base]!) : lang.emptyValue;\n    const valueText = (stage: FunnelStage) =>\n      format.number(stage.value, unit ? { ...valueFormat, suffix: unit } : valueFormat);\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height=\"auto\"\n        legend={[]}\n        hiddenKeys={[]}\n        onLegendToggle={() => {}}\n        loading={loading}\n        skeleton={\n          <div aria-hidden=\"true\" {...css.attrs(funnelChartStyles.skeleton)}>\n            {SKELETON_WIDTHS.map((width) => (\n              <Skeleton\n                key={width}\n                sx={[funnelChartStyles.skeletonBar, funnelChartDynamicStyles.skeletonWidth(width)]}\n              />\n            ))}\n          </div>\n        }\n        isEmpty={stages.length === 0}\n        empty={empty}\n        table={{\n          columns: [\n            lang.chartStage,\n            unit ? `${lang.chartValue}（${unit}）` : lang.chartValue,\n            lang.chartStepRate,\n            lang.chartOverallRate,\n          ],\n          rows: stages.map((stage, index) => ({\n            header: stage.label,\n            cells: [\n              format.number(stage.value, valueFormat),\n              index === 0 ? lang.emptyValue : rate(index, index - 1),\n              index === 0 ? lang.emptyValue : rate(index, 0),\n            ],\n          })),\n        }}\n        plot={\n          <div {...css.attrs(funnelChartStyles.list)}>\n            {stages.map((stage, index) => [\n              index > 0 && rates && (\n                <div key={`rate-${index}`} {...css.attrs(funnelChartStyles.rate)}>\n                  <span {...css.attrs(funnelChartStyles.rateText)}>↓ {rate(index, index - 1)}</span>\n                </div>\n              ),\n              <div\n                key={`stage-${index}`}\n                {...css.attrs(funnelChartStyles.row, onItemClick && funnelChartStyles.rowClickable)}\n                onClick={onItemClick && (() => onItemClick(stage, index))}\n              >\n                <span {...css.attrs(funnelChartStyles.label)}>{stage.label}</span>\n                <span {...css.attrs(funnelChartStyles.track)}>\n                  <span\n                    {...css.attrs(\n                      funnelChartStyles.bar,\n                      funnelChartDynamicStyles.barSize(\n                        max ? `${(numbers[index]! / max) * 100}%` : '0%',\n                        resolveColor(stage.color ?? color, index),\n                      ),\n                    )}\n                  />\n                </span>\n                <span {...css.attrs(funnelChartStyles.value)}>{valueText(stage)}</span>\n              </div>,\n            ])}\n            {rates && stages.length > 1 && (\n              <div {...css.attrs(funnelChartStyles.rate)}>\n                <span {...css.attrs(funnelChartStyles.overall)}>\n                  {lang.chartOverallRate} {rate(stages.length - 1, 0)}\n                </span>\n              </div>\n            )}\n          </div>\n        }\n        clickable={onItemClick != null}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/charts/GraphChart.d.ts

@@ -0,0 +1,135 @@
+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 GraphChartShapes {
+    /** 圆（默认） */
+    circle: unknown;
+    /** 方块 */
+    square: unknown;
+    /** 六边形 */
+    hexagon: unknown;
+    /** 三角 */
+    triangle: unknown;
+}
+/** 布局 */
+export interface GraphChartLayouts {
+    /** 力导向（默认）：相连的靠近、不相连的推开，适合看关系疏密 */
+    force: unknown;
+    /** 分层：沿 direction 一层层排开，适合有先后、上下游的关系 */
+    dagre: unknown;
+    /** 排成一圈 */
+    circular: unknown;
+    /** 同心圆：连得多的在中间 */
+    concentric: unknown;
+    /** 按 group 分列，组内按连接排 */
+    parallel: unknown;
+    /** 分层，分组框更规整（elkjs，约 1.6 MB，用到时才加载） */
+    elk: unknown;
+}
+/** 一个节点 */
+export interface GraphChartNode {
+    /** id：连线里用它指节点 */
+    id: string;
+    /** 名称，写在节点下面；不写时用 id */
+    label?: string;
+    /** 名称下面的小字 */
+    sublabel?: string;
+    /** 所在的组（groups 里的 id）：同组的框在一起、颜色相同 */
+    group?: string;
+    /** 颜色；不写时按组取色板，没有组时是 chart1 */
+    color?: ChartColor;
+    /** 形状，默认 circle */
+    shape?: keyof GraphChartShapes;
+    /** 大小（px），默认 28 */
+    size?: number;
+}
+/** 一条连线 */
+export interface GraphChartLink {
+    /** 起点节点的 id */
+    source: string;
+    /** 终点节点的 id */
+    target: string;
+    /** 强度：写了时按大小加粗；提示框、数据表里显示 */
+    value?: NumericValue;
+    /** 线上的短标签（几个字以内） */
+    label?: string;
+    /** 虚线：弱关系、待定的关系 */
+    dashed?: boolean;
+    /** 颜色；默认是边框色 */
+    color?: ChartColor;
+}
+/** 一组节点 */
+export interface GraphChartGroup {
+    /** 组的 id：节点的 group 指它 */
+    id: string;
+    /** 组名：写在框上 */
+    label: string;
+    /** 颜色；不写时按组的顺序取色板 */
+    color?: ChartColor;
+}
+/** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
+export interface GraphChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {
+    /** 节点 */
+    nodes: readonly GraphChartNode[];
+    /** 连线 */
+    links: readonly GraphChartLink[];
+    /** 分组：同组的节点框在一起（dagre、elk、parallel 布局），颜色相同 */
+    groups?: readonly GraphChartGroup[];
+    /**
+     * 布局
+     * @default 'force'
+     */
+    layout?: keyof GraphChartLayouts;
+    /**
+     * 分层布局（dagre、elk）的方向：LR 从左到右，TB 从上到下
+     * @default 'LR'
+     */
+    direction?: 'LR' | 'TB';
+    /** 连线带箭头；默认分层布局（dagre、elk）带，其余不带 */
+    arrows?: boolean;
+    /** 连线数值的格式：提示框、数据表共用 */
+    valueFormat?: NumericFormat;
+    /** 连线数值的单位：显示在左上方，数值后面带上 */
+    unit?: string;
+    /**
+     * 绘图区的高度；数字按 px
+     * @default 360
+     */
+    height?: number | string;
+    /**
+     * 能缩放、拖动画布
+     * @default true
+     */
+    zoom?: boolean;
+    /**
+     * 悬停时的提示框
+     * @default true
+     */
+    tooltip?: boolean;
+    /** 选中的节点 id：点节点时写回，父级写 _selected={x}；点空白处变回 null */
+    _selected?: string | null;
+    /**
+     * 加载中：绘图区显示骨架，带 aria-busy
+     * @default false
+     */
+    loading?: boolean;
+    /** 没有数据时显示的内容，默认是“暂无数据” */
+    empty?: VNodeChild;
+    /**
+     * 点了一个节点（下钻）：参数是这个节点与它的位置；写了它时节点的指针是手形。
+     * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮
+     */
+    onItemClick?: (node: GraphChartNode, index: number) => void;
+}
+/** GraphChart 的样式：root（--vis-graph-* 主题变量）、skeleton */
+export declare const graphChartStyles: Readonly<{
+    root: css.CompiledStyles;
+    skeleton: css.CompiledStyles;
+}>;
+/** 网络图 */
+export declare const GraphChart: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<GraphChartProps>;

package/dist/charts/GraphChart.js

@@ -0,0 +1,274 @@
+import { toNumber } from "../utils/data/numeric.js";
+import { colors, fontSizes, opacities } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { useFormat } from "../config/lang/format.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { ChartFrame, chartTooltip, useChartValueText } from "./frame.js";
+import { resolveColor } from "./series.js";
+import { useSingleChart } from "./single.js";
+import { computed, createVNode, mergeProps, shallowRef } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Graph, GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeSelectionHighlightMode, GraphNodeShape } from "@unovis/ts";
+//#region src/charts/GraphChart.tsx
+/**
+* 网络图：节点与连线，看谁和谁有关系、关系有多强（案例与触发事件的匹配、团队与供应商的协作、依赖关系）。
+*
+*   <GraphChart aria-label="协作关系" nodes={nodes} links={links} layout="dagre" groups={teams} />
+*
+* 节点是 { id, label?, sublabel?, group?, color?, shape?, size? }，连线是 { source, target, value?, label?, dashed? }。
+* 布局交给 Unovis 的 Graph：force（默认，力导向）、dagre（分层，direction 定方向）、circular、concentric、parallel
+* （按 group 分列）、elk（分层且支持分组框，较大，用到时才加载）。布局异步算好再画，第一帧是空的。
+* 写了 groups 时同组的节点框在一起（dagre、elk、parallel 布局；力导向、环形布局里组只决定颜色，框会互相盖住）；
+* 节点的颜色默认按组取色板，没有组时都是 chart1。
+* 连线写了 value 时按大小加粗（1–6px），悬停看“起点 → 终点”与数值。点节点选中它（selected 双向绑定），
+* 与它不相连的节点、连线变淡；点空白处取消。能缩放、拖动画布（zoom={false} 关掉），双击回到全图。
+* 给读屏的数据表每条连线一行；单位、加载与空状态同其他图表（见 ChartFrame）。
+*/
+/** 节点的形状 */
+/** 布局 */
+/** 一个节点 */
+/** 一条连线 */
+/** 一组节点 */
+/** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */
+/** GraphChart 的样式：root（--vis-graph-* 主题变量）、skeleton */
+var graphChartStyles = css.create({
+	root: {
+		"--vis-graph-node-stroke-color": colors.surface,
+		"--vis-graph-node-label-text-color": colors.text,
+		"--vis-graph-node-label-font-size": fontSizes.xs,
+		"--vis-graph-node-label-background": colors.surface,
+		"--vis-graph-node-sublabel-text-color": colors.textMuted,
+		"--vis-graph-node-sublabel-font-size": fontSizes.xs,
+		"--vis-graph-node-selection-color": colors.accent,
+		"--vis-graph-node-greyout-color": colors.surfaceMuted,
+		"--vis-graph-node-greyout-opacity": opacities.disabled,
+		"--vis-graph-link-stroke-color": colors.borderStrong,
+		"--vis-graph-link-greyout-opacity": "0.25",
+		"--vis-graph-link-label-background": colors.fill,
+		"--vis-graph-link-label-text-color-dark": colors.text,
+		"--vis-graph-link-label-font-size": fontSizes.xs,
+		"--vis-graph-panel-fill-color": colors.surfaceMuted,
+		"--vis-graph-panel-border-color": colors.borderMuted,
+		"--vis-graph-panel-label-color": colors.textMuted,
+		"--vis-graph-panel-label-background": colors.surface,
+		"--vis-graph-panel-label-font-size": fontSizes.xs,
+		"--vis-graph-panel-label-font-weight": "500"
+	},
+	skeleton: {
+		display: "block",
+		width: "100%",
+		height: "100%"
+	}
+});
+var LAYOUTS = {
+	force: GraphLayoutType.Force,
+	dagre: GraphLayoutType.Dagre,
+	circular: GraphLayoutType.Circular,
+	concentric: GraphLayoutType.Concentric,
+	parallel: GraphLayoutType.Parallel,
+	elk: GraphLayoutType.Elk
+};
+var SHAPES = {
+	circle: GraphNodeShape.Circle,
+	square: GraphNodeShape.Square,
+	hexagon: GraphNodeShape.Hexagon,
+	triangle: GraphNodeShape.Triangle
+};
+/** 交给 Unovis 的节点：带上名称与颜色；Unovis 会往上写布局用的字段，每次都复制一份 */
+/** 交给 Unovis 的连线：数值转成 number 算粗细 */
+/** Unovis 布局后：连线的起点、终点换成了节点对象 */
+/** 网络图 */
+var GraphChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const nodes = readonlyProp(_props, "nodes");
+	const links = readonlyProp(_props, "links");
+	const groups = readonlyProp(_props, "groups");
+	const layout = readonlyProp(_props, "layout", "force");
+	const direction = readonlyProp(_props, "direction", "LR");
+	const arrows = readonlyProp(_props, "arrows");
+	const valueFormat = readonlyProp(_props, "valueFormat");
+	const unit = readonlyProp(_props, "unit");
+	const height = readonlyProp(_props, "height", 360);
+	const zoom = readonlyProp(_props, "zoom", true);
+	const tooltip = readonlyProp(_props, "tooltip", true);
+	const selected = bindable(_props, "_selected", () => null, _ctx.emit);
+	const loading = readonlyProp(_props, "loading", false);
+	const empty = readonlyProp(_props, "empty");
+	const onItemClick = readonlyProp(_props, "onItemClick");
+	const sx = readonlyProp(_props, "sx");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const valueText = useChartValueText(() => ({
+		valueFormat: valueFormat.value,
+		unit: unit.value
+	}));
+	const groupColors = computed(() => new Map((groups.value ?? []).map((group, position) => [group.id, resolveColor(group.color, position)])));
+	const resolved = computed(() => nodes.value.map((node, index) => ({
+		...node,
+		label: node.label ?? node.id,
+		fill: node.color ? resolveColor(node.color, 0) : (node.group && groupColors.value.get(node.group)) ?? resolveColor("chart1", 0),
+		index
+	})));
+	const byId = computed(() => new Map(resolved.value.map((node) => [node.id, node])));
+	const labelOf = (id) => byId.value.get(id)?.label ?? id;
+	const shownLinks = computed(() => links.value.filter((link) => byId.value.has(link.source) && byId.value.has(link.target)).map((link) => ({
+		...link,
+		amount: link.value === void 0 ? void 0 : toNumber(link.value)
+	})));
+	const maxAmount = computed(() => Math.max(0, ...shownLinks.value.map((link) => link.amount ?? 0)));
+	const degree = computed(() => {
+		const counts = /* @__PURE__ */ new Map();
+		for (const link of shownLinks.value) {
+			counts.set(link.source, (counts.get(link.source) ?? 0) + 1);
+			counts.set(link.target, (counts.get(link.target) ?? 0) + 1);
+		}
+		return counts;
+	});
+	let plot = shallowRef(null);
+	const chart = useSingleChart(() => ({
+		element: plot.value,
+		ready: !loading.value && nodes.value.length > 0,
+		tooltip: tooltip.value,
+		build: (instance) => {
+			const graph = instance("graph", () => new Graph({}));
+			const layered = layout.value === "dagre" || layout.value === "elk";
+			const framed = layered || layout.value === "parallel";
+			graph.setConfig({
+				layoutType: LAYOUTS[layout.value],
+				layoutNodeGroup: (node) => node.group ?? "",
+				layoutGroupOrder: groups.value?.map((group) => group.id),
+				dagreLayoutSettings: {
+					rankdir: direction.value,
+					nodesep: groups.value?.length ? 48 : 36,
+					ranksep: groups.value?.length ? 150 : 96
+				},
+				layoutElkSettings: {
+					"elk.direction": direction.value === "LR" ? "RIGHT" : "DOWN",
+					"elk.spacing.nodeNode": "36",
+					"elk.layered.spacing.nodeNodeBetweenLayers": "96"
+				},
+				layoutElkNodeGroups: groups.value?.length ? [(node) => node.group ?? ""] : void 0,
+				forceLayoutSettings: {
+					linkDistance: 90,
+					charge: -600
+				},
+				nodeSize: (node) => node.size ?? 28,
+				nodeShape: (node) => SHAPES[node.shape ?? "circle"],
+				nodeFill: (node) => node.fill,
+				nodeStrokeWidth: 2,
+				nodeLabel: (node) => node.label,
+				nodeSubLabel: (node) => node.sublabel ?? "",
+				nodeLabelTrimLength: 16,
+				nodeIcon: () => "",
+				linkWidth: (link) => link.amount === void 0 || maxAmount.value === 0 ? 1.5 : 1 + 5 * link.amount / maxAmount.value,
+				linkStroke: (link) => link.color ? resolveColor(link.color, 0) : void 0,
+				linkStyle: (link) => link.dashed ? GraphLinkStyle.Dashed : GraphLinkStyle.Solid,
+				linkArrow: arrows.value ?? layered ? GraphLinkArrowStyle.Single : void 0,
+				linkLabel: (link) => link.label ? { text: link.label } : void 0,
+				linkCurvature: layered ? 0 : .2,
+				panels: (framed ? groups.value ?? [] : []).filter((group) => resolved.value.some((node) => node.group === group.id)).map((group) => ({
+					nodes: resolved.value.filter((node) => node.group === group.id).map((node) => node.id),
+					label: group.label,
+					padding: 16,
+					borderColor: groupColors.value.get(group.id)
+				})),
+				selectedNodeId: selected.value ?? void 0,
+				nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected,
+				disableZoom: !zoom.value,
+				disableDrag: !zoom.value,
+				disableBrush: true,
+				fitViewPadding: {
+					top: 48,
+					right: 32,
+					bottom: 32,
+					left: 32
+				},
+				events: {
+					[Graph.selectors.node]: { click: (node) => {
+						selected.value = node.id;
+						onItemClick.value?.(nodes.value[node.index], node.index);
+					} },
+					[Graph.selectors.background]: {
+						click: () => selected.value = null,
+						dblclick: () => graph.fitView()
+					}
+				}
+			});
+			return {
+				component: graph,
+				data: {
+					nodes: resolved.value.map((node) => ({ ...node })),
+					links: shownLinks.value.map((link) => ({ ...link }))
+				},
+				triggers: {
+					[Graph.selectors.node]: (node) => chart.tooltip(chartTooltip(node.label, [...node.sublabel ? [{
+						label: node.sublabel,
+						color: "transparent",
+						value: ""
+					}] : [], {
+						label: lang.chartDegree(degree.value.get(node.id) ?? 0),
+						color: node.fill,
+						value: ""
+					}])),
+					[Graph.selectors.link]: (link) => chart.tooltip(chartTooltip(lang.chartFlowLabel(link.source.label, link.target.label), [...link.value === void 0 ? [] : [{
+						label: lang.chartValue,
+						color: link.source.fill,
+						value: valueText(link.value)
+					}], ...link.label ? [{
+						label: link.label,
+						color: "transparent",
+						value: ""
+					}] : []]))
+				}
+			};
+		}
+	}));
+	return () => createVNode(ChartFrame, mergeProps(rest, {
+		"sx": [graphChartStyles.root, sx.value],
+		"unit": unit.value,
+		"height": height.value,
+		"legend": _cache[0] || (_cache[0] = []),
+		"hiddenKeys": _cache[1] || (_cache[1] = []),
+		"onLegendToggle": _cache[2] || (_cache[2] = () => {}),
+		"loading": loading.value,
+		"skeleton": createVNode(Skeleton, { "sx": graphChartStyles.skeleton }, null),
+		"isEmpty": nodes.value.length === 0,
+		"empty": empty.value,
+		"clickable": onItemClick.value != null,
+		"table": {
+			columns: [lang.chartLink, unit.value ? `${lang.chartValue}（${unit.value}）` : lang.chartValue],
+			rows: shownLinks.value.map((link) => ({
+				header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),
+				cells: [[link.value === void 0 ? "" : format.number(link.value, valueFormat.value), link.label ?? ""].filter(Boolean).join(" · ") || lang.emptyValue]
+			}))
+		},
+		"plotRef": _cache[3] || (_cache[3] = (element) => plot.value = element)
+	}), null);
+}, {
+	name: "GraphChart",
+	props: [
+		"nodes",
+		"links",
+		"groups",
+		"layout",
+		"direction",
+		"arrows",
+		"valueFormat",
+		"unit",
+		"height",
+		"zoom",
+		"tooltip",
+		"_selected",
+		"onUpdate:_selected",
+		"loading",
+		"empty",
+		"onItemClick",
+		"sx"
+	]
+});
+//#endregion
+export { GraphChart, graphChartStyles };
+
+//# sourceMappingURL=GraphChart.js.map