@zerodep-dev/vue-tsx-pro-ui 0.3.0 → 0.3.2

package/dist/charts/ChordChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChordChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/ChordChart.tsx"],"sourcesContent":["/**\n * 弦图：节点排成一圈，两两之间的流量画成弦，看几方之间相互往来的多少（部门协作、地区间人口流动、贸易往来）。\n *\n *   <ChordChart aria-label=\"部门协作\" nodes={departments} links={collaborations} />\n *\n * 数据同 SankeyChart（节点 { id, label?, color? }，流向 { source, target, value }）；弦取起点节点的颜色。\n * 悬停一段弧出这个节点的总量，悬停一根弦出“起点 → 终点”的流量；点图例隐藏一个节点，连同它的弦。\n * 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。\n */\nimport { ChordDiagram, ChordLabelAlignment } 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 } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport type { NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { flowData, resolveFlowNodes, type FlowLink, type FlowNode } from './flow';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { useSingleChart, type SingleChart } from './single';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface ChordChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly FlowNode[];\n  /** 流向 */\n  links: readonly FlowLink[];\n  /** 数值的格式（可缩放，如以万元为单位）：提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 320\n   */\n  height?: number | string;\n  /**\n   * 图例：点一下隐藏节点；关掉时节点名写在弧的外侧\n   * @default true\n   */\n  legend?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示一个圆形的骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 隐藏的节点（存 id）：点图例时写回，父级可以写 _hiddenNodes={ids} */\n  _hiddenNodes?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n}\n\n/** ChordChart 的样式：root（--vis-chord-diagram-* 主题变量）、skeleton */\nexport const chordChartStyles = css.create({\n  root: {\n    '--vis-chord-diagram-link-opacity': '0.45',\n    '--vis-chord-diagram-link-stroke-color': colors.surface,\n    '--vis-chord-diagram-link-stroke-opacity': '0.6',\n    '--vis-chord-diagram-link-highlighted-opacity': '0.85',\n    '--vis-chord-diagram-link-dimmed-opacity': '0.12',\n    '--vis-chord-diagram-node-dimmed-opacity': '0.3',\n    '--vis-chord-diagram-label-text-font-size': fontSizes.xs,\n  },\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n});\n\n/** 交给 Unovis 的节点、流向 */\ntype Data = ReturnType<typeof flowData>;\ntype Node = Data['nodes'][number];\ntype Link = Data['links'][number];\n\n/** 弦图 */\nexport const ChordChart = _component(\n  ({\n    nodes,\n    links,\n    valueFormat,\n    unit,\n    height = 320,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    _hiddenNodes: hiddenNodes = _bindable<string[]>([]),\n    empty,\n    sx,\n    ...rest\n  }: ChordChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const resolved = _derived(resolveFlowNodes(nodes));\n    const visible = _derived(new Map([...resolved].filter(([id]) => !hiddenNodes.includes(id))));\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const labelOf = (id: string) => resolved.get(id)?.label ?? id;\n\n    function toggle(id: string) {\n      hiddenNodes = hiddenNodes.includes(id)\n        ? hiddenNodes.filter((item) => item !== id)\n        : [...hiddenNodes, id];\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 chord = instance(\n          'chord',\n          () => new ChordDiagram<Node, Link>({ linkValue: (link) => link.amount }),\n        );\n        chord.setConfig({\n          linkValue: (link) => link.amount,\n          nodeColor: (node) => (node as Node).color,\n          linkColor: (link) => (link.source as Node).color,\n          // 有图例时不在弧旁写名字：径向排的中文在上下两侧是竖着的，不好读\n          nodeLabel: (node) => (legend ? '' : (node as Node).label),\n          padAngle: 0.04,\n          nodeWidth: 14,\n          nodeLabelAlignment: ChordLabelAlignment.Perpendicular,\n          nodeLabelColor: () => colors.textMuted,\n        });\n        return {\n          component: chord,\n          data: flowData(visible, links),\n          triggers: {\n            [ChordDiagram.selectors.node]: (node: { data: Node; _state: { value?: number } }) =>\n              chart.tooltip(\n                chartTooltip(node.data.label, [\n                  {\n                    label: lang.chartTotal,\n                    color: node.data.color,\n                    value: valueText(node._state.value),\n                  },\n                ]),\n              ),\n            [ChordDiagram.selectors.link]: (ribbon: {\n              data: { source: Node; target: Node; value: NumericValue };\n            }) =>\n              chart.tooltip(\n                chartTooltip(\n                  lang.chartFlowLabel(ribbon.data.source.label, ribbon.data.target.label),\n                  [\n                    {\n                      label: lang.chartValue,\n                      color: ribbon.data.source.color,\n                      value: valueText(ribbon.data.value),\n                    },\n                  ],\n                ),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        sx={[chordChartStyles.root, sx]}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? [...resolved.values()].map((node) => ({\n                key: node.id,\n                label: node.label,\n                color: node.color,\n              }))\n            : []\n        }\n        hiddenKeys={hiddenNodes}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={chordChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        table={{\n          columns: [lang.chartFlow, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: links\n            .filter((link) => visible.has(link.source) && visible.has(link.target))\n            .map((link) => ({\n              header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n              cells: [format.number(link.value, valueFormat)],\n            })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ChordChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/ChordChart.tsx"],"sourcesContent":["/**\n * 弦图：节点排成一圈，两两之间的流量画成弦，看几方之间相互往来的多少（部门协作、地区间人口流动、贸易往来）。\n *\n *   <ChordChart aria-label=\"部门协作\" nodes={departments} links={collaborations} />\n *\n * 数据同 SankeyChart（节点 { id, label?, color? }，流向 { source, target, value }）；弦取起点节点的颜色。\n * 悬停一段弧出这个节点的总量，悬停一根弦出“起点 → 终点”的流量；点图例隐藏一个节点，连同它的弦。\n * 单位、加载与空状态、给读屏的数据表（每条流向一行）同其他图表（见 ChartFrame）。\n */\nimport { ChordDiagram, ChordLabelAlignment } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { 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 } from '../config/theme/tokens';\nimport { Skeleton } from '../feedback/Skeleton';\nimport type { NumericValue } from '../utils/data/numeric';\nimport type { PartProps } from '../utils/props';\nimport { flowData, resolveFlowNodes, type FlowLink, type FlowNode } from './flow';\nimport { ChartFrame, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { useSingleChart, type SingleChart } from './single';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface ChordChartProps extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 节点 */\n  nodes: readonly FlowNode[];\n  /** 流向 */\n  links: readonly FlowLink[];\n  /** 数值的格式（可缩放，如以万元为单位）：提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 320\n   */\n  height?: number | string;\n  /**\n   * 图例：点一下隐藏节点；关掉时节点名写在弧的外侧\n   * @default true\n   */\n  legend?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示一个圆形的骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 隐藏的节点（存 id）：点图例时写回，父级可以写 _hiddenNodes={ids} */\n  _hiddenNodes?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n}\n\n/** ChordChart 的样式：root（--vis-chord-diagram-* 主题变量）、skeleton */\nexport const chordChartStyles = css.create({\n  root: {\n    '--vis-chord-diagram-link-opacity': '0.45',\n    '--vis-chord-diagram-link-stroke-color': colors.surface,\n    '--vis-chord-diagram-link-stroke-opacity': '0.6',\n    '--vis-chord-diagram-link-highlighted-opacity': '0.85',\n    '--vis-chord-diagram-link-dimmed-opacity': '0.12',\n    '--vis-chord-diagram-node-dimmed-opacity': '0.3',\n    '--vis-chord-diagram-label-text-font-size': fontSizes.xs,\n  },\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n});\n\n/** 交给 Unovis 的节点、流向 */\ntype Data = ReturnType<typeof flowData>;\ntype Node = Data['nodes'][number];\ntype Link = Data['links'][number];\n\n/** 弦图 */\nexport const ChordChart = _component(\n  ({\n    nodes,\n    links,\n    valueFormat,\n    unit,\n    height = 320,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    _hiddenNodes: hiddenNodes = _bindable<string[]>([]),\n    empty,\n    sx,\n    ...rest\n  }: ChordChartProps) => {\n    const lang = useLang();\n    const format = useFormat();\n    const resolved = _derived(resolveFlowNodes(nodes));\n    const visible = _derived(new Map([...resolved].filter(([id]) => !hiddenNodes.includes(id))));\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const labelOf = (id: string) => resolved.get(id)?.label ?? id;\n\n    function toggle(id: string) {\n      hiddenNodes = hiddenNodes.includes(id)\n        ? hiddenNodes.filter((item) => item !== id)\n        : [...hiddenNodes, id];\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 chord = instance(\n          'chord',\n          () => new ChordDiagram<Node, Link>({ linkValue: (link) => link.amount }),\n        );\n        chord.setConfig({\n          linkValue: (link) => link.amount,\n          nodeColor: (node) => (node as Node).color,\n          linkColor: (link) => (link.source as Node).color,\n          // 有图例时不在弧旁写名字：径向排的中文在上下两侧是竖着的，不好读\n          nodeLabel: (node) => (legend ? '' : (node as Node).label),\n          padAngle: 0.04,\n          nodeWidth: 14,\n          nodeLabelAlignment: ChordLabelAlignment.Perpendicular,\n          nodeLabelColor: () => colors.textMuted,\n        });\n        return {\n          component: chord,\n          data: flowData(visible, links),\n          triggers: {\n            [ChordDiagram.selectors.node]: (node: { data: Node; _state: { value?: number } }) =>\n              chart.tooltip(\n                chartTooltip(node.data.label, [\n                  {\n                    label: lang.chartTotal,\n                    color: node.data.color,\n                    value: valueText(node._state.value),\n                  },\n                ]),\n              ),\n            [ChordDiagram.selectors.link]: (ribbon: {\n              data: { source: Node; target: Node; value: NumericValue };\n            }) =>\n              chart.tooltip(\n                chartTooltip(\n                  lang.chartFlowLabel(ribbon.data.source.label, ribbon.data.target.label),\n                  [\n                    {\n                      label: lang.chartValue,\n                      color: ribbon.data.source.color,\n                      value: valueText(ribbon.data.value),\n                    },\n                  ],\n                ),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        sx={[chordChartStyles.root, sx]}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? [...resolved.values()].map((node) => ({\n                key: node.id,\n                label: node.label,\n                color: node.color,\n              }))\n            : []\n        }\n        hiddenKeys={hiddenNodes}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={chordChartStyles.skeleton} />}\n        isEmpty={nodes.length === 0}\n        empty={empty}\n        table={{\n          columns: [lang.chartFlow, unit ? `${lang.chartValue}（${unit}）` : lang.chartValue],\n          rows: links\n            .filter((link) => visible.has(link.source) && visible.has(link.target))\n            .map((link) => ({\n              header: lang.chartFlowLabel(labelOf(link.source), labelOf(link.target)),\n              cells: [format.number(link.value, valueFormat)],\n            })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/charts/DonutChart.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
 import type { VNodeChild } from 'vue';
 import { type NumericFormat } from '../config/lang/format';
 import type { PartProps } from '../utils/props';

package/dist/charts/DonutChart.js

@@ -7,7 +7,7 @@ import { resolveColor, seriesValue } from "./series.js";
 import { useSingleChart } from "./single.js";
 import { computed, createVNode, shallowRef } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Donut } from "@unovis/ts";
 //#region src/charts/DonutChart.tsx
 /**

package/dist/charts/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/DonutChart.tsx"],"sourcesContent":["/**\n * 环形图（arcWidth 为 0 时是饼图）：每一行一个扇区，中间写合计；悬停扇区出提示框（数值与占比），点图例隐藏一项。\n *\n *   <DonutChart aria-label=\"访问来源\" data={channels} index=\"name\" value=\"visits\" />\n *   <DonutChart data={budget} index=\"dept\" value=\"amount\" unit=\"万元\" valueFormat={{ maximumFractionDigits: 0 }} />\n *\n * 颜色默认按顺序取图表色板（itemColor 可以按行给）；值可以是 number、bigint、Decimal，提示框与数据表按原值显示。\n * 图例、单位、加载与空状态、给读屏的数据表（类目、数值、占比）同其他图表（见 ChartFrame）。\n */\nimport { Donut } 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 { 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 { useSingleChart, type SingleChart } from './single';\nimport { resolveColor, seriesValue, type ChartColor, type NumericKey } from './series';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface DonutChartProps<T extends object>\n  extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 数据：每一行一个扇区 */\n  data: readonly T[];\n  /** 名称字段：图例、提示框、数据表里显示，也是隐藏一项时记的 key */\n  index: keyof T & string;\n  /** 数值字段 */\n  value: NumericKey<T>;\n  /** 每一项的颜色；不写时按顺序取图表色板 */\n  itemColor?: (row: T, index: number) => ChartColor | undefined;\n  /** 数值的格式（可缩放，如以万元为单位）：中间的合计、提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 240\n   */\n  height?: number | string;\n  /**\n   * 环的粗细（px）；0 是饼图\n   * @default 28\n   */\n  arcWidth?: number;\n  /** 中间的大字；默认是显示中各项的合计，false 时不写 */\n  centerLabel?: string | false;\n  /** 中间大字下面的小字；默认是“合计” */\n  centerSubLabel?: string;\n  /**\n   * 图例\n   * @default true\n   */\n  legend?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示一个圆形的骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 隐藏的项（存名称）：点图例时写回，父级可以写 _hiddenItems={names} */\n  _hiddenItems?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个扇区（下钻）：参数是这一行与它在 data 里的位置；写了它时指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (row: T, index: number) => void;\n}\n\n/** DonutChart 的样式：skeleton */\nexport const donutChartStyles = css.create({\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n});\n\n/** 扇区的数据：一行加上它的名字与颜色 */\ninterface Slice<T> {\n  row: T;\n  name: string;\n  color: string;\n  value: NumericValue | undefined;\n}\n\n/** 环形图 */\nexport const DonutChart = _component(\n  <T extends object>({\n    data,\n    index,\n    value,\n    itemColor,\n    valueFormat,\n    unit,\n    height = 240,\n    arcWidth = 28,\n    centerLabel,\n    centerSubLabel,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    onItemClick,\n    _hiddenItems: hiddenItems = _bindable<string[]>([]),\n    empty,\n    ...rest\n  }: DonutChartProps<T>) => {\n    const lang = useLang();\n    const format = useFormat();\n\n    // 颜色按原来的顺序定：隐藏一项时其余扇区不换色\n    const slices = _derived.by((): Slice<T>[] => {\n      return data.map((row, position) => ({\n        row,\n        name: String(row[index] ?? ''),\n        color: resolveColor(itemColor?.(row, position), position),\n        value: seriesValue(row, value),\n      }));\n    });\n    const visible = _derived(slices.filter((slice) => !hiddenItems.includes(slice.name)));\n    const total = _derived(\n      visible.reduce(\n        (sum, slice) => sum + (slice.value === undefined ? 0 : toNumber(slice.value)),\n        0,\n      ),\n    );\n\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const shareText = (amount: NumericValue | undefined) =>\n      amount === undefined || total === 0\n        ? lang.emptyValue\n        : format.number(toNumber(amount) / total, { style: 'percent', maximumFractionDigits: 1 });\n\n    function toggle(name: string) {\n      hiddenItems = hiddenItems.includes(name)\n        ? hiddenItems.filter((item) => item !== name)\n        : [...hiddenItems, name];\n    }\n\n    let plot = _state.raw<HTMLElement | null>(null);\n    const chart: SingleChart = useSingleChart<Slice<T>[]>(() => ({\n      element: plot,\n      ready: !loading && data.length > 0,\n      tooltip,\n      build: (instance) => {\n        const donut = instance('donut', () => new Donut<Slice<T>>({ value: () => 0 }));\n        donut.setConfig({\n          value: (slice) => (slice.value === undefined ? 0 : toNumber(slice.value)),\n          id: (slice) => slice.name,\n          color: (slice) => slice.color,\n          arcWidth,\n          padAngle: arcWidth > 0 ? 0.01 : 0,\n          cornerRadius: arcWidth > 0 ? 3 : 0,\n          centralLabel:\n            centerLabel === false ? undefined : (centerLabel ?? format.number(total, valueFormat)),\n          centralSubLabel: centerLabel === false ? undefined : (centerSubLabel ?? lang.chartTotal),\n          showBackground: true,\n          events: {\n            [Donut.selectors.segment]: {\n              click: (arc: { data: Slice<T> }) =>\n                onItemClick?.(arc.data.row, data.indexOf(arc.data.row)),\n            },\n          },\n        });\n        return {\n          component: donut,\n          data: [...visible],\n          triggers: {\n            [Donut.selectors.segment]: (arc: { data: Slice<T> }) =>\n              chart.tooltip(\n                chartTooltip(arc.data.name, [\n                  {\n                    label: lang.chartValue,\n                    color: arc.data.color,\n                    value: valueText(arc.data.value),\n                  },\n                  {\n                    label: lang.chartShare,\n                    color: 'transparent',\n                    value: shareText(arc.data.value),\n                  },\n                ]),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? slices.map((slice) => ({ key: slice.name, label: slice.name, color: slice.color }))\n            : []\n        }\n        hiddenKeys={hiddenItems}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={donutChartStyles.skeleton} />}\n        clickable={onItemClick != null}\n        isEmpty={data.length === 0}\n        empty={empty}\n        table={{\n          columns: [\n            lang.chartCategory,\n            unit ? `${lang.chartValue}（${unit}）` : lang.chartValue,\n            lang.chartShare,\n          ],\n          rows: visible.map((slice) => ({\n            header: slice.name,\n            cells: [\n              slice.value === undefined ? lang.emptyValue : format.number(slice.value, valueFormat),\n              shareText(slice.value),\n            ],\n          })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"DonutChart.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_computed","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/charts/DonutChart.tsx"],"sourcesContent":["/**\n * 环形图（arcWidth 为 0 时是饼图）：每一行一个扇区，中间写合计；悬停扇区出提示框（数值与占比），点图例隐藏一项。\n *\n *   <DonutChart aria-label=\"访问来源\" data={channels} index=\"name\" value=\"visits\" />\n *   <DonutChart data={budget} index=\"dept\" value=\"amount\" unit=\"万元\" valueFormat={{ maximumFractionDigits: 0 }} />\n *\n * 颜色默认按顺序取图表色板（itemColor 可以按行给）；值可以是 number、bigint、Decimal，提示框与数据表按原值显示。\n * 图例、单位、加载与空状态、给读屏的数据表（类目、数值、占比）同其他图表（见 ChartFrame）。\n */\nimport { Donut } from '@unovis/ts';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { 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, chartTooltip, useChartValueText, type ChartFrameParts } from './frame';\nimport { useSingleChart, type SingleChart } from './single';\nimport { resolveColor, seriesValue, type ChartColor, type NumericKey } from './series';\n\n/** 未声明的属性落到外层 div（role=\"figure\"）上，aria-label 是图表的名称 */\nexport interface DonutChartProps<T extends object>\n  extends PartProps<'div', 'role' | 'aria-busy'>, ChartFrameParts {\n  /** 数据：每一行一个扇区 */\n  data: readonly T[];\n  /** 名称字段：图例、提示框、数据表里显示，也是隐藏一项时记的 key */\n  index: keyof T & string;\n  /** 数值字段 */\n  value: NumericKey<T>;\n  /** 每一项的颜色；不写时按顺序取图表色板 */\n  itemColor?: (row: T, index: number) => ChartColor | undefined;\n  /** 数值的格式（可缩放，如以万元为单位）：中间的合计、提示框、数据表共用 */\n  valueFormat?: NumericFormat;\n  /** 单位：显示在左上方，数值后面带上 */\n  unit?: string;\n  /**\n   * 绘图区的高度；数字按 px\n   * @default 240\n   */\n  height?: number | string;\n  /**\n   * 环的粗细（px）；0 是饼图\n   * @default 28\n   */\n  arcWidth?: number;\n  /** 中间的大字；默认是显示中各项的合计，false 时不写 */\n  centerLabel?: string | false;\n  /** 中间大字下面的小字；默认是“合计” */\n  centerSubLabel?: string;\n  /**\n   * 图例\n   * @default true\n   */\n  legend?: boolean;\n  /**\n   * 悬停时的提示框\n   * @default true\n   */\n  tooltip?: boolean;\n  /**\n   * 加载中：绘图区显示一个圆形的骨架，带 aria-busy\n   * @default false\n   */\n  loading?: boolean;\n  /** 隐藏的项（存名称）：点图例时写回，父级可以写 _hiddenItems={names} */\n  _hiddenItems?: string[];\n  /** 没有数据时显示的内容，默认是“暂无数据” */\n  empty?: VNodeChild;\n  /**\n   * 点了一个扇区（下钻）：参数是这一行与它在 data 里的位置；写了它时指针是手形。\n   * 点图是鼠标的捷径：同样的去处在页面上还要有链接或按钮\n   */\n  onItemClick?: (row: T, index: number) => void;\n}\n\n/** DonutChart 的样式：skeleton */\nexport const donutChartStyles = css.create({\n  skeleton: {\n    display: 'block',\n    height: '100%',\n    aspectRatio: '1',\n    marginInline: 'auto',\n    borderRadius: '50%',\n  },\n});\n\n/** 扇区的数据：一行加上它的名字与颜色 */\ninterface Slice<T> {\n  row: T;\n  name: string;\n  color: string;\n  value: NumericValue | undefined;\n}\n\n/** 环形图 */\nexport const DonutChart = _component(\n  <T extends object>({\n    data,\n    index,\n    value,\n    itemColor,\n    valueFormat,\n    unit,\n    height = 240,\n    arcWidth = 28,\n    centerLabel,\n    centerSubLabel,\n    legend = true,\n    tooltip = true,\n    loading = false,\n    onItemClick,\n    _hiddenItems: hiddenItems = _bindable<string[]>([]),\n    empty,\n    ...rest\n  }: DonutChartProps<T>) => {\n    const lang = useLang();\n    const format = useFormat();\n\n    // 颜色按原来的顺序定：隐藏一项时其余扇区不换色\n    const slices = _derived.by((): Slice<T>[] => {\n      return data.map((row, position) => ({\n        row,\n        name: String(row[index] ?? ''),\n        color: resolveColor(itemColor?.(row, position), position),\n        value: seriesValue(row, value),\n      }));\n    });\n    const visible = _derived(slices.filter((slice) => !hiddenItems.includes(slice.name)));\n    const total = _derived(\n      visible.reduce(\n        (sum, slice) => sum + (slice.value === undefined ? 0 : toNumber(slice.value)),\n        0,\n      ),\n    );\n\n    const valueText = useChartValueText(() => ({ valueFormat, unit }));\n    const shareText = (amount: NumericValue | undefined) =>\n      amount === undefined || total === 0\n        ? lang.emptyValue\n        : format.number(toNumber(amount) / total, { style: 'percent', maximumFractionDigits: 1 });\n\n    function toggle(name: string) {\n      hiddenItems = hiddenItems.includes(name)\n        ? hiddenItems.filter((item) => item !== name)\n        : [...hiddenItems, name];\n    }\n\n    let plot = _state.raw<HTMLElement | null>(null);\n    const chart: SingleChart = useSingleChart<Slice<T>[]>(() => ({\n      element: plot,\n      ready: !loading && data.length > 0,\n      tooltip,\n      build: (instance) => {\n        const donut = instance('donut', () => new Donut<Slice<T>>({ value: () => 0 }));\n        donut.setConfig({\n          value: (slice) => (slice.value === undefined ? 0 : toNumber(slice.value)),\n          id: (slice) => slice.name,\n          color: (slice) => slice.color,\n          arcWidth,\n          padAngle: arcWidth > 0 ? 0.01 : 0,\n          cornerRadius: arcWidth > 0 ? 3 : 0,\n          centralLabel:\n            centerLabel === false ? undefined : (centerLabel ?? format.number(total, valueFormat)),\n          centralSubLabel: centerLabel === false ? undefined : (centerSubLabel ?? lang.chartTotal),\n          showBackground: true,\n          events: {\n            [Donut.selectors.segment]: {\n              click: (arc: { data: Slice<T> }) =>\n                onItemClick?.(arc.data.row, data.indexOf(arc.data.row)),\n            },\n          },\n        });\n        return {\n          component: donut,\n          data: [...visible],\n          triggers: {\n            [Donut.selectors.segment]: (arc: { data: Slice<T> }) =>\n              chart.tooltip(\n                chartTooltip(arc.data.name, [\n                  {\n                    label: lang.chartValue,\n                    color: arc.data.color,\n                    value: valueText(arc.data.value),\n                  },\n                  {\n                    label: lang.chartShare,\n                    color: 'transparent',\n                    value: shareText(arc.data.value),\n                  },\n                ]),\n              ),\n          },\n        };\n      },\n    }));\n\n    return () => (\n      <ChartFrame\n        {...rest}\n        unit={unit}\n        height={height}\n        legend={\n          legend\n            ? slices.map((slice) => ({ key: slice.name, label: slice.name, color: slice.color }))\n            : []\n        }\n        hiddenKeys={hiddenItems}\n        onLegendToggle={toggle}\n        loading={loading}\n        skeleton={<Skeleton sx={donutChartStyles.skeleton} />}\n        clickable={onItemClick != null}\n        isEmpty={data.length === 0}\n        empty={empty}\n        table={{\n          columns: [\n            lang.chartCategory,\n            unit ? `${lang.chartValue}（${unit}）` : lang.chartValue,\n            lang.chartShare,\n          ],\n          rows: visible.map((slice) => ({\n            header: slice.name,\n            cells: [\n              slice.value === undefined ? lang.emptyValue : format.number(slice.value, valueFormat),\n              shareText(slice.value),\n            ],\n          })),\n        }}\n        plotRef={(element) => (plot = element)}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/charts/FunnelChart.d.ts

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/charts/FunnelChart.js

@@ -7,7 +7,7 @@ import { ChartFrame } from "./frame.js";
 import { resolveColor } from "./series.js";
 import { computed, createTextVNode, createVNode } from "vue";
 import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/charts/FunnelChart.tsx
 /** 漏斗的一个环节 */
 /** 未声明的属性落到外层 div（role="figure"）上，aria-label 是图表的名称 */

package/dist/charts/FunnelChart.js.map

@@ -1 +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":";;;;;;;;;;;;;;AAgEA,IAAa,oBAAoB,IAAI,OAAO;CAE1C,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,WAAW;CACb;CACA,KAAK;EACH,SAAS;EACT,YAAY;EACZ,qBAAqB;EACrB,YAAY;EACZ,cAAc;EACd,eAAe;EACf,cAAc;CAChB;CACA,cAAc,EAAE,iBAAiB;EAAE,SAAS;EAAe,UAAU;CAAQ,EAAE;CAC/E,OAAO;EAAE,OAAO;EAAS,WAAW;EAAO,YAAY;CAAS;CAChE,OAAO;EAAE,SAAS;EAAQ,gBAAgB;CAAS;CACnD,KAAK;EACH,QAAQ;EACR,UAAU;EACV,cAAc;EACd,YAAY,SAAS,EAAE,UAAU,GAAE,GAAI,EAAE,QAAQ;CACnD;CACA,OAAO;EAAE,oBAAoB;EAAgB,YAAY;EAAW,YAAY;CAAS;CAEzF,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,qBAAqB;EACrB,eAAe;EACf,OAAO;EACP,UAAU;EACV,oBAAoB;EACpB,YAAY;CACd;CACA,UAAU;EAAE,YAAY;EAAK,WAAW;CAAS;CACjD,SAAS;EAAE,YAAY;EAAS,WAAW;EAAU,mBAAmB;CAAM;CAC9E,UAAU;EAAE,SAAS;EAAQ,eAAe;EAAU,YAAY;EAAU,KAAK;CAAM;CACvF,aAAa;EAAE,QAAQ;EAAW,cAAc;CAAM;AACxD,CAAC;;AAID,IAAa,2BAA2B,IAAI,OAAO;CACjD,UAAU,OAAe,WAAmB;EAAE;EAAO,iBAAiB;CAAM;CAC5E,gBAAgB,WAAmB,EAAE,MAAM;AAC7C,CAAC;;AAGD,IAAM,kBAAkB;CAAC;CAAO;CAAO;CAAO;AAAK;;AAGnD,IAAa,cAAc,0BACzB,QAAA,SAUwB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SANd,QAAQ;CAAA,MAAA,QAAAA,aAAA,QAAA,SACR,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,WACF,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAGZ,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CACzB,MAAM,UAAOC,eAAY,OAAA,MAAO,KAAK,UAAU,KAAK,IAAI,SAAS,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC;CAClF,MAAM,MAAGA,eAAY,KAAK,IAAI,GAAG,GAAA,QAAA,KAAU,CAAC;CAC5C,MAAM,WAAW,UACf,OAAO,OAAO,OAAO;EAAE,OAAO;EAAW,uBAAuB;CAAE,CAAC;;CAErE,MAAM,QAAQ,OAAe,SAC3B,QAAA,MAAQ,QAAQ,QAAQ,QAAA,MAAQ,SAAU,QAAA,MAAQ,KAAM,IAAI,KAAK;CACnE,MAAM,aAAa,UACjB,OAAO,OAAO,MAAM,OAAO,KAAA,QAAO;EAAE,GAAA,YAAA;EAAgB,QAAM,KAAA;CAAO,IAAC,YAAA,KAAc;CAElF,aAAOC,YAAA,YAAAC,cAEC,MAAI;EAAA,QAAA,KAAA;EAAA,UAAA;EAAA,UAAA,OAAA,OAAA,OAAA,KAGA,CAAA;EAAE,cAAA,OAAA,OAAA,OAAA,KACE,CAAA;EAAE,kBAAA,OAAA,OAAA,OAAA,WACQ,CAAC;EAAC,WAAA,QAAA;EAAA,YAAAD,YAAA,OAAAC,cAAA,EAAA,eAAA,OAAA,GAGM,IAAI,MAAM,kBAAkB,QAAQ,CAAC,GAAA,CAC9D,gBAAgB,KAAK,UAAKD,YAAA,UAAA;GAAA,OAElB;GAAK,MACN,CAAC,kBAAkB,aAAW,IAAA,KAAE,yBAAyB,qBAAa,CAAC,KAAK,CAAA,CAAA;EAAE,GAAA,IAAA,CAErF,CAAC,CAAA;EAAA,WAGG,OAAA,MAAO,WAAW;EAAC,SAAA,MAAA;EAAA,SAErB;GACL,SAAS;IACP,KAAK;IACL,KAAA,QAAO,GAAG,KAAK,WAAU,GAAA,KAAA,MAAA,KAAc,KAAK;IAC5C,KAAK;IACL,KAAK;GAAgB;GAEvB,MAAM,OAAA,MAAO,KAAK,OAAO,WAAW;IAClC,QAAQ,MAAM;IACd,OAAO;KACL,OAAO,OAAO,MAAM,OAAK,YAAA,KAAa;KACtC,UAAU,IAAI,KAAK,aAAa,KAAK,OAAO,QAAQ,CAAC;KACrD,UAAU,IAAI,KAAK,aAAa,KAAK,OAAO,CAAC;IAAC;GAElD,EAAE;EACJ;EAAC,QAAAA,YAAA,OAEU,IAAI,MAAM,kBAAkB,IAAI,GAAC,CACvC,OAAA,MAAO,KAAK,OAAO,UAAU,CAC5B,QAAQ,KAAC,MAAA,SAASA,YAAA,OAAAC,cAAA,EAAA,OACN,QAAQ,QAAO,GAAM,IAAI,MAAM,kBAAkB,IAAI,CAAC,GAAA,CAAAD,YAAA,QACpD,IAAI,MAAM,kBAAkB,QAAQ,GAAC,CAAAE,gBAAA,IAAA,GAAK,KAAK,OAAO,QAAQ,CAAC,CAAC,CAAA,CAAA,CAAA,GAE7EF,YAAA,OAAAC,cAAA,EAAA,OAEM,SAAS,QAAO,GACjB,IAAI,MAAM,kBAAkB,KAAK,YAAA,SAAe,kBAAkB,YAAY,GAAC,EAAA,WAC1E,YAAA,gBAAsB,YAAA,MAAY,OAAO,KAAK,GAAE,CAAA,GAAA;GAAAD,YAAA,QAE/C,IAAI,MAAM,kBAAkB,KAAK,GAAC,CAAG,MAAM,KAAK,CAAA;GAAAA,YAAA,QAChD,IAAI,MAAM,kBAAkB,KAAK,GAAC,CAAAA,YAAA,QAEpC,IAAI,MACN,kBAAkB,KAAG,IAAA,KACrB,yBAAyB,eAAO,CAC9B,IAAA,QAAM,GAAI,QAAA,MAAQ,SAAM,IAAA,QAAW,IAAG,KAAM,MAC5C,aAAa,MAAM,SAAK,MAAA,OAAW,KAAK,CAAC,CAAA,CAE7C,GAAC,IAAA,CAAA,CAAA;GAAAA,YAAA,QAGK,IAAI,MAAM,kBAAkB,KAAK,GAAC,CAAG,UAAU,KAAK,CAAC,CAAA;EAAA,CAAA,CAAA,CAElE,GACA,MAAA,SAAS,OAAA,MAAO,SAAS,KAACA,YAAA,OAChB,IAAI,MAAM,kBAAkB,IAAI,GAAC,CAAAA,YAAA,QAC9B,IAAI,MAAM,kBAAkB,OAAO,GAAC;GAC3C,KAAK;GAAgBE,gBAAA,GAAA;GAAG,KAAK,OAAA,MAAO,SAAS,GAAG,CAAC;EAAC,CAAA,CAAA,CAAA,CAGxD,CAAA;EAAA,aAGM,YAAA,SAAe;CAAI,CAAA,GAAA,IAAA;AAGpC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"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 { 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

@@ -1,4 +1,4 @@
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/charts/GraphChart.js

@@ -8,7 +8,7 @@ import { resolveColor } from "./series.js";
 import { useSingleChart } from "./single.js";
 import { computed, createVNode, shallowRef } from "vue";
 import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Graph, GraphLayoutType, GraphLinkArrowStyle, GraphLinkStyle, GraphNodeSelectionHighlightMode, GraphNodeShape } from "@unovis/ts";
 //#region src/charts/GraphChart.tsx
 /**

package/dist/charts/GraphChart.js.map

@@ -1 +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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"}
+{"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 { 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/MapChart.d.ts

@@ -25,7 +25,7 @@
  * zoomable 时可以拖动、按住 Ctrl 滚轮缩放，右上角有放大、缩小、复位的按钮。悬停看名称与数值；读屏的数据表列出各区域、地点与流向。
  */
 import { type TopoJSONMapConfigInterface } from '@unovis/ts';
-import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { 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';

package/dist/charts/MapChart.js

@@ -11,7 +11,7 @@ import { useSingleChart } from "./single.js";
 import { placeLabels, rectsOverlap } from "./label-layout.js";
 import { computed, createTextVNode, createVNode, ref, shallowRef } from "vue";
 import { _component, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
-import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Maximize, Minus, Plus } from "@lucide/icons";
 import { MapProjection, TopoJSONMap } from "@unovis/ts";
 import { presimplify, simplify } from "topojson-simplify";