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

package/dist/charts/MapChart.js

@@ -0,0 +1,627 @@
+import { toNumber } from "../utils/data/numeric.js";
+import { colors } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { IconButton } from "../base/IconButton.js";
+import { useEventListener } from "../utils/dom/event-listener.js";
+import { useFormat } from "../config/lang/format.js";
+import { Skeleton } from "../feedback/Skeleton.js";
+import { ChartFrame, chartTooltip } from "./frame.js";
+import { resolveColor } from "./series.js";
+import { useSingleChart } from "./single.js";
+import { placeLabels, rectsOverlap } from "./label-layout.js";
+import { computed, createTextVNode, createVNode, mergeProps, ref, shallowRef } from "vue";
+import { _component, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as 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";
+//#region src/charts/MapChart.tsx
+/**
+* 地图：按区域着色（分省的销售额、各国的采购额），标出地点（工厂、供应商）与它们之间的流向。
+* 地理数据是 TopoJSON：Unovis 自带中国省份、世界、美国等（`@unovis/ts/maps`），也可以用自己的。
+*
+*   import { ChinaTopoJSON } from '@unovis/ts/maps';
+*   <MapChart
+*     aria-label="各省销售额"
+*     topology={ChinaTopoJSON}
+*     feature="provinces"
+*     areas={[{ id: 'CN-JS', label: '江苏', value: 623 }, …]}   // id 是地图要素的 id
+*     points={[{ id: 'sh', label: '上海组装', longitude: 121.47, latitude: 31.23, value: 860 }]}
+*     links={[{ from: 'xa', to: 'sh', value: 120 }]}
+*     bins={5}
+*     areaLabels
+*   />
+*
+* 投影：默认按地理数据的范围选——一个国家、一个地区用以它为中心的等积圆锥投影（中国地图常用的 Albers，正着、不歪），
+* 跨了大半个地球时用 Natural Earth；也可以指定 mercator、equalEarth、orthographic（地球仪）或自己的 d3 投影。
+*
+* 着色：sequential（默认）按数值深浅；diverging 以 midpoint 为界两头两种颜色（同比的涨跌）；
+* bins 分成几档（分级着色，图例是几个色块），不写时连续着色（图例是色带）；区域写了 color 时按它（分类着色）。
+* 没有数据的区域是底色。地点：value 决定大小（面积按比例），color、shape 决定颜色与形状；名字自动避让
+* （换方位、挤时往外退并画引线，数值大的先放，放不下的悬停看；压住名字、地点的区域名藏起来）；
+* links 是地点之间的流向，粗细按 value，flow 时有流动的粒子。
+* zoomable 时可以拖动、按住 Ctrl 滚轮缩放，右上角有放大、缩小、复位的按钮。悬停看名称与数值；读屏的数据表列出各区域、地点与流向。
+*/
+/** 一个区域的数据 */
+/** 一个地点 */
+/** 两个地点之间的流向 */
+/** 投影的预设 */
+/** d3 的投影（TopoJSONMap 的 projection） */
+/** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
+/** MapChart 的样式 */
+var mapChartStyles = css.create({
+	root: {
+		"--vis-map-feature-color": colors.fill,
+		"--vis-map-boundary-color": colors.surface,
+		"--vis-map-point-label-text-color-dark": colors.text,
+		"--vis-map-point-label-text-color-light": colors.text,
+		"--vis-map-area-label-text-color": colors.text,
+		"--vis-map-area-label-font-size": "10px",
+		"--vis-map-area-label-font-weight": "400",
+		"--vis-map-point-default-stroke-color": colors.surface,
+		"--vis-map-point-default-stroke-width": "1.5px"
+	},
+	skeleton: {
+		display: "block",
+		width: "100%",
+		height: "100%"
+	},
+	pointLabels: {
+		fontWeight: 600,
+		fill: colors.text,
+		stroke: colors.surface,
+		paintOrder: "stroke",
+		strokeLinejoin: "round",
+		pointerEvents: "none"
+	},
+	leader: { stroke: colors.textMuted },
+	zoom: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "2px",
+		marginInlineStart: "auto"
+	},
+	wheelHint: {
+		marginInlineEnd: "_sm",
+		color: "_textMuted",
+		fontSize: "_xs"
+	},
+	legend: {
+		display: "flex",
+		flexWrap: "wrap",
+		alignItems: "center",
+		columnGap: "_md",
+		rowGap: "_xs",
+		fontSize: "_xs",
+		color: "_textMuted",
+		paddingInline: "_sm"
+	},
+	ramp: {
+		flexGrow: 1,
+		maxWidth: "16rem",
+		height: "0.5rem",
+		borderRadius: "_full"
+	},
+	rampColors: (gradient) => ({ backgroundImage: gradient }),
+	bin: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.375em",
+		whiteSpace: "nowrap"
+	},
+	swatch: {
+		width: "0.875rem",
+		height: "0.625rem",
+		borderRadius: "2px"
+	},
+	swatchColor: (color) => ({ backgroundColor: color })
+});
+/** 地点的标签四周留的空（屏幕像素） */
+var labelPadding = 3;
+/** 新建一个 SVG 元素 */
+var svgElement = (name) => document.createElementNS("http://www.w3.org/2000/svg", name);
+/** 混色：基色占 percent，其余透明（落在底色上） */
+var tint = (color, percent) => `color-mix(in srgb, ${color} ${Math.round(percent)}%, transparent)`;
+/** 算好了各点权重的地理数据：同一份 TopoJSON 只算一次 */
+var presimplified = /* @__PURE__ */ new WeakMap();
+/**
+* 简化过的地理数据放进这个类的实例：Unovis 的 setConfig 深拷贝配置，但跳过类的实例，
+* 每次更新就不必把整份 TopoJSON 再拷一遍
+*/
+var SharedTopology = class {};
+/** 简化过的地理数据：TopoJSON → 档位 → 结果 */
+var simplified = /* @__PURE__ */ new WeakMap();
+/**
+* 简化地理数据：去掉与前后两点围成的三角形面积不到 minArea（坐标单位的平方，经纬度是平方度）的点
+* （Visvalingam，topojson-simplify）。相邻区域共用的边界一起简化，不会出现缝隙；各段弧的两端总保留。
+* minArea 按 2 的整数次幂分档缓存：绘图区大小变一点不重算。
+*/
+function simplifyTopology(topology, minArea) {
+	if (!(minArea > 0) || !Number.isFinite(minArea)) return topology;
+	const level = 2 ** Math.floor(Math.log2(minArea));
+	let byLevel = simplified.get(topology);
+	if (!byLevel) simplified.set(topology, byLevel = /* @__PURE__ */ new Map());
+	let result = byLevel.get(level);
+	if (!result) {
+		let weighted = presimplified.get(topology);
+		if (!weighted) presimplified.set(topology, weighted = presimplify(topology));
+		result = Object.assign(new SharedTopology(), simplify(weighted, level));
+		byLevel.set(level, result);
+	}
+	return result;
+}
+/** TopoJSON 的经纬度范围 [西, 南, 东, 北]：有 bbox 用它，否则解出各段弧的坐标（量化的弧是逐点的差值） */
+function topologyBounds(topology) {
+	if (topology.bbox) {
+		const [west, south, east, north] = topology.bbox;
+		return [
+			west,
+			south,
+			east,
+			north
+		];
+	}
+	const quantized = topology.transform;
+	const [scaleX, scaleY] = quantized?.scale ?? [1, 1];
+	const [translateX, translateY] = quantized?.translate ?? [0, 0];
+	let [west, south, east, north] = [
+		Infinity,
+		Infinity,
+		-Infinity,
+		-Infinity
+	];
+	for (const arc of topology.arcs) {
+		let x = 0;
+		let y = 0;
+		for (const position of arc) {
+			x = quantized ? x + position[0] : position[0];
+			y = quantized ? y + position[1] : position[1];
+			const longitude = x * scaleX + translateX;
+			const latitude = y * scaleY + translateY;
+			west = Math.min(west, longitude);
+			east = Math.max(east, longitude);
+			south = Math.min(south, latitude);
+			north = Math.max(north, latitude);
+		}
+	}
+	return [
+		west,
+		south,
+		east,
+		north
+	];
+}
+/** 地图 */
+var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const topology = readonlyProp(_props, "topology");
+	const feature = readonlyProp(_props, "feature");
+	const projection = readonlyProp(_props, "projection");
+	const center = readonlyProp(_props, "center");
+	const areas = readonlyProp(_props, "areas", () => []);
+	const points = readonlyProp(_props, "points", () => []);
+	const links = readonlyProp(_props, "links", () => []);
+	const scheme = readonlyProp(_props, "scheme", "sequential");
+	const color = readonlyProp(_props, "color", "accent");
+	const divergingColors = readonlyProp(_props, "divergingColors", () => ["danger", "success"]);
+	const midpoint = readonlyProp(_props, "midpoint", 0);
+	const bins = readonlyProp(_props, "bins");
+	const areaLabels = readonlyProp(_props, "areaLabels", false);
+	const flow = readonlyProp(_props, "flow", false);
+	const valueFormat = readonlyProp(_props, "valueFormat");
+	const unit = readonlyProp(_props, "unit");
+	const height = readonlyProp(_props, "height", 400);
+	const zoomable = readonlyProp(_props, "zoomable", false);
+	const loading = readonlyProp(_props, "loading", false);
+	const empty = readonlyProp(_props, "empty");
+	const tooltip = readonlyProp(_props, "tooltip", true);
+	const onAreaClick = readonlyProp(_props, "onAreaClick");
+	const onPointClick = readonlyProp(_props, "onPointClick");
+	const sx = readonlyProp(_props, "sx");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const bounds = computed(() => topologyBounds(topology.value));
+	const numbers = computed(() => areas.value.flatMap((area) => area.value === void 0 ? [] : [toNumber(area.value)]));
+	const extent = computed(() => numbers.value.length ? [Math.min(...numbers.value), Math.max(...numbers.value)] : null);
+	const largest = (values) => Math.max(0, ...values.map((item) => item.value === void 0 ? 0 : toNumber(item.value)));
+	const valueText = (value) => value === void 0 ? lang.emptyValue : format.number(value, unit.value ? {
+		...valueFormat.value,
+		suffix: unit.value
+	} : valueFormat.value);
+	const numberText = (value) => format.number(value, valueFormat.value);
+	/** 数值 → 颜色：sequential 从 12% 到 100%；diverging 两头各自从分界往外加深；bins 时按档取 */
+	function colorOf(value) {
+		const [low, high] = extent.value ?? [0, 0];
+		if (scheme.value === "diverging") {
+			const [lowColor, highColor] = divergingColors.value.map((item) => resolveColor(item, 0));
+			const reach = Math.max(midpoint.value - low, high - midpoint.value) || 1;
+			let ratio = Math.min(Math.abs(value - midpoint.value) / reach, 1);
+			if (bins.value) ratio = Math.max(Math.ceil(ratio * bins.value), 1) / bins.value;
+			return tint(value < midpoint.value ? lowColor : highColor, 12 + ratio * 88);
+		}
+		let ratio = high === low ? 1 : (value - low) / (high - low);
+		if (bins.value) ratio = Math.min(Math.floor(ratio * bins.value), bins.value - 1) / Math.max(bins.value - 1, 1);
+		return tint(resolveColor(color.value, 0), 12 + ratio * 88);
+	}
+	const areaColor = (area) => area.color ? resolveColor(area.color, 0) : area.value === void 0 ? void 0 : colorOf(toNumber(area.value));
+	/** 投影：预设按中心旋转；不写时按范围选 */
+	function createProjection() {
+		if (projection.value && typeof projection.value !== "string") return projection.value;
+		const [west, south, east, north] = bounds.value;
+		const [longitude, latitude] = center.value ?? [(west + east) / 2, (south + north) / 2];
+		const kind = projection.value ?? (east - west > 180 ? "naturalEarth" : "conic");
+		if (kind === "conic") return MapProjection.ConicEqualArea().rotate([-longitude, 0]).parallels([south + (north - south) / 6, north - (north - south) / 6]);
+		if (kind === "orthographic") return MapProjection.Orthographic().rotate([-longitude, -latitude]);
+		return (kind === "mercator" ? MapProjection.Mercator : kind === "equalEarth" ? MapProjection.EqualEarth : MapProjection.NaturalEarth1)().rotate([-longitude, 0]);
+	}
+	let mapKey = [];
+	let generation = 0;
+	let mapProjection;
+	function updateProjection() {
+		const key = [
+			projection.value,
+			center.value?.[0],
+			center.value?.[1],
+			...bounds.value
+		];
+		if (key.some((item, index) => item !== mapKey[index])) {
+			if (mapKey.length) {
+				map?.destroy();
+				generation += 1;
+			}
+			mapKey = key;
+			mapProjection = createProjection();
+		}
+	}
+	function drawnTopology() {
+		const width = plot.value?.clientWidth ?? 0;
+		const height = plot.value?.clientHeight ?? 0;
+		if (!width || !height) return topology.value;
+		const [west, south, east, north] = bounds.value;
+		const degreesPerPixel = Math.max((east - west) / width, (north - south) / height) / (zoomable.value ? 2 : 1);
+		return simplifyTopology(topology.value, degreesPerPixel ** 2);
+	}
+	const pointOf = (id) => points.value.find((point) => point.id === id);
+	/** Unovis 画连线时给的是 { source, target }（克隆过的地点），不是原来的流向：按两端的 id 找回 */
+	const linkOf = (drawn) => {
+		const { source, target } = drawn;
+		return links.value.find((link) => link.from === source.id && link.to === target.id);
+	};
+	let map;
+	let plot = shallowRef(null);
+	const pointMax = computed(() => largest(points.value));
+	const radiusOf = (point) => point.value === void 0 || pointMax.value === 0 ? 4 : 3 + Math.sqrt(toNumber(point.value) / pointMax.value) * 5;
+	let labelFrame = 0;
+	/** 画完、缩放之后，下一帧重排地点的标签 */
+	function scheduleLabels() {
+		cancelAnimationFrame(labelFrame);
+		labelFrame = requestAnimationFrame(layoutLabels);
+	}
+	effect(() => () => cancelAnimationFrame(labelFrame));
+	/**
+	* 地点的标签：Unovis 的标签相撞时只会藏起来，这里用 placeLabels 挪到放得下的方位（挤时画引线），
+	* 画在地点那一组里（跟着缩放、拖动）；压在标签、地点上的区域名藏起来。
+	* 按屏幕像素算：地点那一组的坐标乘缩放级别
+	*/
+	function layoutLabels() {
+		const root = map?.g.node();
+		const group = root?.querySelector(`.${TopoJSONMap.selectors.points}`);
+		const svg = group?.ownerSVGElement;
+		if (!root || !group || !svg || !mapProjection) return;
+		const projectionAt = mapProjection;
+		const zoom = Number(svg.style.getPropertyValue("--vis-map-current-zoom-level")) || 1;
+		const layer = group.querySelector(":scope > [data-point-labels]") ?? svgElement("g");
+		layer.setAttribute("data-point-labels", "");
+		layer.setAttribute("class", css.attrs(mapChartStyles.pointLabels).class ?? "");
+		layer.style.fontSize = `${11 / zoom}px`;
+		layer.style.strokeWidth = `${3 / zoom}px`;
+		group.append(layer);
+		const items = points.value.flatMap((point) => {
+			const position = projectionAt([point.longitude, point.latitude]);
+			if (!position || !point.label) return [];
+			const text = svgElement("text");
+			text.textContent = point.label;
+			text.setAttribute("text-anchor", "middle");
+			return [{
+				point,
+				text,
+				x: position[0] * zoom,
+				y: position[1] * zoom
+			}];
+		});
+		layer.replaceChildren(...items.map((item) => item.text));
+		const glyphs = items.map((item) => item.text.getBBox());
+		const anchors = items.map((item, index) => {
+			const box = glyphs[index];
+			return {
+				x: item.x,
+				y: item.y,
+				radius: radiusOf(item.point),
+				width: box.width * zoom + 6,
+				height: box.height * zoom + 6,
+				priority: item.point.value === void 0 ? 0 : toNumber(item.point.value)
+			};
+		});
+		const areaTexts = [...root.querySelectorAll(`text.${TopoJSONMap.selectors.areaLabel}`)].filter((text) => text.getAttribute("visibility") !== "hidden");
+		const areaBoxes = areaTexts.map((text) => {
+			text.style.display = "";
+			const { e, f } = text.transform.baseVal.consolidate()?.matrix ?? {
+				e: 0,
+				f: 0
+			};
+			const box = text.getBBox();
+			return {
+				x: (e + box.x) * zoom,
+				y: (f + box.y) * zoom,
+				width: box.width * zoom,
+				height: box.height * zoom
+			};
+		});
+		const bounds = zoom === 1 ? {
+			x: 0,
+			y: 0,
+			width: svg.clientWidth,
+			height: svg.clientHeight
+		} : void 0;
+		const placements = placeLabels(anchors, {
+			bounds,
+			soft: areaBoxes
+		});
+		const taken = anchors.map((anchor) => ({
+			x: anchor.x - anchor.radius,
+			y: anchor.y - anchor.radius,
+			width: anchor.radius * 2,
+			height: anchor.radius * 2
+		}));
+		placements.forEach((placement, index) => {
+			const { text } = items[index];
+			if (!placement) {
+				text.remove();
+				return;
+			}
+			const { box, leader } = placement;
+			taken.push(box);
+			text.setAttribute("x", String((box.x + box.width / 2) / zoom));
+			text.setAttribute("y", String((box.y + labelPadding) / zoom - glyphs[index].y));
+			if (leader) layer.insertBefore(leaderLine(anchors[index], box, zoom), text);
+		});
+		areaTexts.forEach((text, index) => {
+			if (taken.some((rect) => rectsOverlap(rect, areaBoxes[index]))) text.style.display = "none";
+		});
+	}
+	/** 引线：从标记的边到标签矩形上离标记最近的点 */
+	function leaderLine(anchor, box, zoom) {
+		const toX = Math.min(Math.max(anchor.x, box.x), box.x + box.width);
+		const toY = Math.min(Math.max(anchor.y, box.y), box.y + box.height);
+		const length = Math.hypot(toX - anchor.x, toY - anchor.y) || 1;
+		const line = svgElement("line");
+		line.setAttribute("class", css.attrs(mapChartStyles.leader).class ?? "");
+		line.setAttribute("x1", String((anchor.x + (toX - anchor.x) / length * anchor.radius) / zoom));
+		line.setAttribute("y1", String((anchor.y + (toY - anchor.y) / length * anchor.radius) / zoom));
+		line.setAttribute("x2", String(toX / zoom));
+		line.setAttribute("y2", String(toY / zoom));
+		line.style.strokeWidth = `${1 / zoom}px`;
+		return line;
+	}
+	const chart = useSingleChart(() => ({
+		element: plot.value,
+		ready: !loading.value,
+		tooltip: tooltip.value,
+		build: (instance) => {
+			const linkMax = largest(links.value);
+			updateProjection();
+			map = instance(`map-${generation}`, () => {
+				const created = new TopoJSONMap();
+				created.g.select("filter#heatmapFilter").remove();
+				const observer = new MutationObserver(scheduleLabels);
+				queueMicrotask(() => {
+					const svg = created.g.node()?.parentElement;
+					if (svg) observer.observe(svg, {
+						attributes: true,
+						attributeFilter: ["style"]
+					});
+				});
+				const destroy = created.destroy.bind(created);
+				created.destroy = () => {
+					observer.disconnect();
+					destroy();
+				};
+				return created;
+			});
+			map.setConfig({
+				topojson: drawnTopology(),
+				mapFeatureName: feature.value,
+				projection: mapProjection,
+				disableZoom: !zoomable.value,
+				areaId: (area) => area.id,
+				areaColor,
+				areaLabel: areaLabels.value ? (area) => area.label : void 0,
+				areaCursor: onAreaClick.value ? () => "pointer" : void 0,
+				pointId: (point) => point.id,
+				longitude: (point) => point.longitude,
+				latitude: (point) => point.latitude,
+				pointColor: (point) => resolveColor(point.color ?? "danger", 0),
+				pointRadius: radiusOf,
+				pointShape: (point) => point.shape ?? "circle",
+				pointCursor: onPointClick.value ? () => "pointer" : void 0,
+				pointLabel: () => "",
+				pointBottomLabel: () => "",
+				linkSource: (link) => link.from,
+				linkTarget: (link) => link.to,
+				linkColor: (drawn) => resolveColor(linkOf(drawn)?.color ?? "neutral", 0),
+				linkWidth: (drawn) => {
+					const value = linkOf(drawn)?.value;
+					return value === void 0 || linkMax === 0 ? 1.5 : 1 + toNumber(value) / linkMax * 4;
+				},
+				enableFlowAnimation: flow.value,
+				sourceLongitude: (link) => pointOf(link.from)?.longitude,
+				sourceLatitude: (link) => pointOf(link.from)?.latitude,
+				targetLongitude: (link) => pointOf(link.to)?.longitude,
+				targetLatitude: (link) => pointOf(link.to)?.latitude,
+				sourcePointRadius: 0,
+				flowParticleColor: (link) => resolveColor(link.color ?? "accent", 0),
+				flowParticleRadius: 2,
+				flowParticleDensity: .15,
+				events: {
+					[TopoJSONMap.selectors.feature]: { click: (shape) => {
+						if (shape.data) onAreaClick.value?.(shape.data);
+					} },
+					[TopoJSONMap.selectors.point]: { click: (point) => onPointClick.value?.(point) }
+				}
+			});
+			return {
+				component: map,
+				onRender: scheduleLabels,
+				data: {
+					areas: [...areas.value],
+					points: [...points.value],
+					links: links.value.filter((link) => pointOf(link.from) && pointOf(link.to))
+				},
+				triggers: {
+					[TopoJSONMap.selectors.feature]: (shape) => shape.data ? chart.tooltip(chartTooltip(shape.data.label, [{
+						label: lang.chartValue,
+						color: areaColor(shape.data) ?? "transparent",
+						value: valueText(shape.data.value)
+					}])) : void 0,
+					[TopoJSONMap.selectors.point]: (point) => chart.tooltip(chartTooltip(point.label, [{
+						label: lang.chartValue,
+						color: resolveColor(point.color ?? "danger", 0),
+						value: valueText(point.value)
+					}]))
+				}
+			};
+		}
+	}));
+	/** 图例：分档时每档一个色块与范围，连续时一条色带两端写最小最大 */
+	function legend() {
+		if (!extent.value || areas.value.every((area) => area.color)) return null;
+		const [low, high] = extent.value;
+		if (bins.value) {
+			const step = (high - low) / bins.value;
+			return createVNode("div", mergeProps(css.attrs(mapChartStyles.legend), { "aria-hidden": "true" }), [Array.from({ length: bins.value }, (_, index) => {
+				const from = low + step * index;
+				const to = index === bins.value - 1 ? high : from + step;
+				return createVNode("span", mergeProps({ "key": index }, css.attrs(mapChartStyles.bin)), [
+					createVNode("span", css.attrs(mapChartStyles.swatch, mapChartStyles.swatchColor(colorOf((from + to) / 2))), null),
+					numberText(from),
+					createTextVNode(" – "),
+					numberText(to)
+				]);
+			})]);
+		}
+		const stops = scheme.value === "diverging" ? [
+			colorOf(low),
+			colors.fill,
+			colorOf(high)
+		] : [colorOf(low), colorOf(high)];
+		return createVNode("div", mergeProps(css.attrs(mapChartStyles.legend), { "aria-hidden": "true" }), [
+			createVNode("span", null, [numberText(low)]),
+			createVNode("span", css.attrs(mapChartStyles.ramp, mapChartStyles.rampColors(`linear-gradient(to right, ${stops.join(", ")})`)), null),
+			createVNode("span", null, [numberText(high)])
+		]);
+	}
+	let wheelHint = ref(false);
+	let hintTimer;
+	useEventListener(() => zoomable.value ? plot.value : null, "wheel", (event) => {
+		if (event.ctrlKey || event.metaKey) return;
+		event.stopPropagation();
+		wheelHint.value = true;
+		clearTimeout(hintTimer);
+		hintTimer = setTimeout(() => wheelHint.value = false, 1500);
+	}, { capture: true });
+	effect(() => () => clearTimeout(hintTimer));
+	/** 缩放按钮：放大、缩小、复位；前面是滚轮的提示 */
+	const zoomButtons = () => createVNode("span", css.attrs(mapChartStyles.zoom), [wheelHint.value && createVNode("span", mergeProps(css.attrs(mapChartStyles.wheelHint), { "role": "status" }), [lang.chartZoomWheelHint]), [
+		[
+			Plus,
+			lang.chartZoomIn,
+			() => map?.zoomIn()
+		],
+		[
+			Minus,
+			lang.chartZoomOut,
+			() => map?.zoomOut()
+		],
+		[
+			Maximize,
+			lang.chartZoomFit,
+			() => map?.fitView()
+		]
+	].map(([icon, label, action]) => createVNode(IconButton, {
+		"key": label,
+		"icon": icon,
+		"size": "sm",
+		"variant": "ghost",
+		"tone": "neutral",
+		"aria-label": label,
+		"onClick": action
+	}, null))]);
+	return () => createVNode(ChartFrame, mergeProps(rest, {
+		"sx": [mapChartStyles.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": mapChartStyles.skeleton }, null),
+		"isEmpty": false,
+		"empty": empty.value,
+		"actions": zoomable.value ? zoomButtons() : void 0,
+		"footer": legend(),
+		"table": {
+			columns: [lang.chartCategory, unit.value ? `${lang.chartValue}（${unit.value}）` : lang.chartValue],
+			rows: [
+				...areas.value.map((area) => ({
+					header: area.label,
+					value: area.value
+				})),
+				...points.value.map((point) => ({
+					header: point.label,
+					value: point.value
+				})),
+				...links.value.map((link) => ({
+					header: lang.chartFlowLabel(pointOf(link.from)?.label ?? link.from, pointOf(link.to)?.label ?? link.to),
+					value: link.value
+				}))
+			].map((row) => ({
+				header: row.header,
+				cells: [row.value === void 0 ? lang.emptyValue : format.number(row.value, valueFormat.value)]
+			}))
+		},
+		"plotRef": _cache[3] || (_cache[3] = (element) => plot.value = element)
+	}), null);
+}, {
+	name: "MapChart",
+	props: [
+		"topology",
+		"feature",
+		"projection",
+		"center",
+		"areas",
+		"points",
+		"links",
+		"scheme",
+		"color",
+		"divergingColors",
+		"midpoint",
+		"bins",
+		"areaLabels",
+		"flow",
+		"valueFormat",
+		"unit",
+		"height",
+		"zoomable",
+		"loading",
+		"empty",
+		"tooltip",
+		"onAreaClick",
+		"onPointClick",
+		"sx"
+	]
+});
+//#endregion
+export { MapChart, mapChartStyles, simplifyTopology, topologyBounds };
+
+//# sourceMappingURL=MapChart.js.map