@sia.soul/sia-react-ui 0.1.3 → 0.1.4

package/dist/chart.cjs

@@ -1996,10 +1996,10 @@ function ChartRoamController({ x = 800, y = 5, onPan, onZoom }) {
 }
 
 // src/components/LineShareChart.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/Charts.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/ChartScatterMotion.tsx
 var import_react15 = require("react");
@@ -3950,7 +3950,7 @@ function layoutTreeNodes(root, options = {}) {
 }
 
 // src/components/ChartDataEditor.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/Button.tsx
 var import_react28 = require("react");
@@ -4008,14 +4008,35 @@ var Button = (0, import_react28.forwardRef)(function Button2({
   );
 });
 
-// src/components/TextArea.tsx
+// src/components/shared.ts
 var import_react29 = require("react");
+var PlaceholderModeContext = (0, import_react29.createContext)("default");
+function usePlaceholderMode(mode) {
+  const inherited = (0, import_react29.useContext)(PlaceholderModeContext);
+  return mode ?? inherited;
+}
+
+// src/components/FloatingPlaceholder.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var TextArea = (0, import_react29.forwardRef)(function TextArea2({
+function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
+  const enabled = usePlaceholderMode(mode) === "floating" && Boolean(placeholder);
+  return {
+    enabled,
+    className: enabled ? ` sia-placeholder-floating${filled ? " sia-placeholder-floating--filled" : ""}${active ? " sia-placeholder-floating--active" : ""}` : "",
+    label: enabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sia-floating-placeholder", "aria-hidden": "true", children: placeholder }) : null
+  };
+}
+
+// src/components/TextArea.tsx
+var import_react30 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var TextArea = (0, import_react30.forwardRef)(function TextArea2({
   label,
   hint,
   status = "default",
   showCount = false,
+  placeholder,
+  placeholderMode,
   className = "",
   id,
   disabled,
@@ -4025,18 +4046,19 @@ var TextArea = (0, import_react29.forwardRef)(function TextArea2({
   onChange,
   ...props
 }, ref) {
-  const fallbackId = (0, import_react29.useId)();
+  const fallbackId = (0, import_react30.useId)();
   const textAreaId = id ?? fallbackId;
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react29.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react30.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
   const currentText = value !== void 0 ? String(value) : uncontrolledValue;
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
   const hintId = `${textAreaId}-hint`;
   const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
   function handleChange(event) {
     setUncontrolledValue(event.target.value);
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${status}${disabled ? " is-disabled" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "textarea",
       {
         ...props,
@@ -4047,30 +4069,32 @@ var TextArea = (0, import_react29.forwardRef)(function TextArea2({
         value,
         defaultValue,
         maxLength,
+        placeholder,
         "aria-describedby": describedBy,
         "aria-invalid": status === "error" || void 0,
         onChange: handleChange
       }
     ),
-    showCount ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
+    floating.label,
+    showCount ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
       currentText.length,
       maxLength !== void 0 ? `/${maxLength}` : null
     ] }) : null
   ] });
-  if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
+  if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
     control,
-    hint ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
   ] });
 });
 
 // src/components/ChartDataEditor.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false }) {
-  const [draft, setDraft] = (0, import_react30.useState)(() => JSON.stringify(series.map((item) => item.data), null, 2));
-  const [error, setError] = (0, import_react30.useState)("");
-  const [applied, setApplied] = (0, import_react30.useState)(false);
+  const [draft, setDraft] = (0, import_react31.useState)(() => JSON.stringify(series.map((item) => item.data), null, 2));
+  const [error, setError] = (0, import_react31.useState)("");
+  const [applied, setApplied] = (0, import_react31.useState)(false);
   function apply() {
     try {
       const values = JSON.parse(draft);
@@ -4085,45 +4109,45 @@ function ChartDataEditor({ series, onApply, readOnly = false, allowNull = false
       setApplied(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "sia-chart-data-editor", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("p", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "sia-chart-data-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("p", { children: [
       "\u7CFB\u5217\u987A\u5E8F\uFF1A",
       series.map((item) => item.name).join("\u3001")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextArea, { "aria-label": "\u56FE\u8868\u6570\u503C\u6570\u636E", rows: 10, value: draft, readOnly, status: error ? "error" : "default", onChange: (event) => {
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextArea, { "aria-label": "\u56FE\u8868\u6570\u503C\u6570\u636E", rows: 10, value: draft, readOnly, status: error ? "error" : "default", onChange: (event) => {
       setDraft(event.target.value);
       setApplied(false);
     } }),
-    error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { role: "alert", children: error }) : null,
-    !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { onClick: apply, children: "\u5E94\u7528\u6570\u636E" }) : null,
-    applied ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { role: "status", children: "\u6570\u636E\u5DF2\u5E94\u7528" }) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { role: "alert", children: error }) : null,
+    !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { onClick: apply, children: "\u5E94\u7528\u6570\u636E" }) : null,
+    applied ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { role: "status", children: "\u6570\u636E\u5DF2\u5E94\u7528" }) : null
   ] });
 }
 
 // src/components/ChartBarStatistics.tsx
-var import_react31 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react32 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function ChartBarStatistics({ values, kinds, project, plot, horizontal, color, gradient, seriesName }) {
-  const id = (0, import_react31.useId)().replaceAll(":", "");
-  const [active, setActive] = (0, import_react31.useState)();
+  const id = (0, import_react32.useId)().replaceAll(":", "");
+  const [active, setActive] = (0, import_react32.useState)();
   const paint = gradient ? `url(#${id})` : color;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("g", { children: [
-    gradient ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("linearGradient", { id, gradientUnits: "userSpaceOnUse", x1: gradient.start[0], y1: gradient.start[1], x2: gradient.end[0], y2: gradient.end[1], children: gradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
+    gradient ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("linearGradient", { id, gradientUnits: "userSpaceOnUse", x1: gradient.start[0], y1: gradient.start[1], x2: gradient.end[0], y2: gradient.end[1], children: gradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
     kinds.map((kind) => {
       const value = values[kind], position = project(value), label = String(Number(value.toFixed(2))), name = { average: "\u5E73\u5747\u503C", max: "\u6700\u5927\u503C", min: "\u6700\u5C0F\u503C" }[kind];
       const start = horizontal ? [position, plot.y] : [plot.x, position], end = horizontal ? [position, plot.y + plot.height] : [plot.x + plot.width, position];
       const width = active === kind ? 3.5 : 1.5;
-      return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(ChartMark, { "data-bar-statistic": kind, "data-bar-statistic-value": value, label: `${seriesName} ${name} ${label}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { "data-bar-statistic": kind, "data-bar-statistic-value": value, label: `${seriesName} ${name} ${label}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
         seriesName,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("br", {}),
         name,
         "\uFF1A",
         label
       ] }), tooltipPoint: [end[0], end[1]], onPointerMove: () => setActive(kind), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(kind), onBlur: () => setActive(void 0), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("line", { x1: start[0], y1: start[1], x2: end[0], y2: end[1], stroke: paint, strokeWidth: width, strokeDasharray: "5 5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: start[0], cy: start[1], r: 2, fill: paint, stroke: paint, strokeWidth: width }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { transform: `translate(${end[0]} ${end[1]})${horizontal ? " rotate(90)" : ""}`, d: "M0 0 L-8 -4 L-6 0 L-8 4 Z", fill: paint, stroke: paint, strokeWidth: width }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("text", { x: end[0] + 6, y: end[1] + 4, fill: paint, style: { fontSize: 12, fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif" }, children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: start[0], y1: start[1], x2: end[0], y2: end[1], stroke: paint, strokeWidth: width, strokeDasharray: "5 5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: start[0], cy: start[1], r: 2, fill: paint, stroke: paint, strokeWidth: width }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { transform: `translate(${end[0]} ${end[1]})${horizontal ? " rotate(90)" : ""}`, d: "M0 0 L-8 -4 L-6 0 L-8 4 Z", fill: paint, stroke: paint, strokeWidth: width }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: end[0] + 6, y: end[1] + 4, fill: paint, style: { fontSize: 12, fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif" }, children: label })
       ] }, kind);
     })
   ] });
@@ -4160,7 +4184,7 @@ function lineSegments(points) {
 }
 
 // src/components/useBarMagicState.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/cartesianMagicState.ts
 function changeCartesianMagic(state, action) {
@@ -4175,8 +4199,8 @@ function changeCartesianMagic(state, action) {
 function useBarMagicState(toolbox, shape = "bar") {
   const initial3 = { shape, layout: "original" };
   const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
-  const [state, setState] = (0, import_react32.useState)(() => changeCartesianMagic(initial3, options?.activeMagicType ?? shape));
-  (0, import_react32.useEffect)(() => {
+  const [state, setState] = (0, import_react33.useState)(() => changeCartesianMagic(initial3, options?.activeMagicType ?? shape));
+  (0, import_react33.useEffect)(() => {
     if (options?.activeMagicType) setState((s) => changeCartesianMagic(s, options.activeMagicType));
   }, [options?.activeMagicType]);
   const resolved = options ? { ...options, activeMagicType: state.shape, activeMagicTypes: options.activeMagicTypes ?? (state.layout === "original" ? [state.shape] : [state.shape, state.layout]), onMagicTypeChange: (action) => {
@@ -4190,7 +4214,7 @@ function useBarMagicState(toolbox, shape = "bar") {
 }
 
 // src/components/useBarValueTransfer.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/components/barTransfer.ts
 function transferBarValue(series, source, target, categories) {
@@ -4207,10 +4231,10 @@ function transferBarValue(series, source, target, categories) {
 
 // src/components/useBarValueTransfer.ts
 function useBarValueTransfer(series, initial3, categories, enabled, publish, onError) {
-  const [islands, setIslands] = (0, import_react33.useState)([]);
-  const drag = (0, import_react33.useRef)();
-  const [offset, setOffset] = (0, import_react33.useState)();
-  (0, import_react33.useEffect)(() => {
+  const [islands, setIslands] = (0, import_react34.useState)([]);
+  const drag = (0, import_react34.useRef)();
+  const [offset, setOffset] = (0, import_react34.useState)();
+  (0, import_react34.useEffect)(() => {
     setIslands([]);
     drag.current = void 0;
     setOffset(void 0);
@@ -4310,13 +4334,13 @@ function logarithmicValueAt(progress, domain) {
 }
 
 // src/components/Charts.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var import_react35 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react36 = require("react");
 var PLOT = { x: 62, y: 48, width: 628, height: 250 };
 var PLOT_BOTTOM = PLOT.y + PLOT.height;
 function useLegendSelection(names, controlled, onChange) {
-  const [internal, setInternal] = (0, import_react34.useState)(() => Object.fromEntries(names.map((name) => [name, true])));
-  (0, import_react34.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react35.useState)(() => Object.fromEntries(names.map((name) => [name, true])));
+  (0, import_react35.useEffect)(() => {
     setInternal((current) => {
       const next = { ...current };
       names.forEach((name) => {
@@ -4340,21 +4364,21 @@ function getColor(index, color, palette) {
   return color ?? chartColor(index, palette ?? DEFAULT_CHART_PALETTE);
 }
 function TooltipValue({ name, series, value, formatter }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: name }),
-    series ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: series }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("b", { children: formatter ? formatter(value) : formatChartNumber(value) })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: name }),
+    series ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: series }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("b", { children: formatter ? formatter(value) : formatChartNumber(value) })
   ] });
 }
 function CartesianAxes({ categories, domain, band = false }) {
   const ticks = chartTicks(domain);
   const x = band ? categories.map((_, index) => PLOT.x + (index + 0.5) / Math.max(1, categories.length) * PLOT.width) : categories.map((_, index) => PLOT.x + index / Math.max(1, categories.length - 1) * PLOT.width);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { orientation: "left", x: PLOT.x, y: PLOT_BOTTOM, length: PLOT.height, labels: ticks.map(formatChartNumber), gridLength: PLOT.width }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT.x, y1: PLOT_BOTTOM, x2: PLOT.x + PLOT.width, y2: PLOT_BOTTOM, className: "sia-chart__axis-line" }),
-    categories.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: x[index], y1: PLOT_BOTTOM, x2: x[index], y2: PLOT_BOTTOM + 5, className: "sia-chart__axis-line" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: x[index], y: PLOT_BOTTOM + 21, textAnchor: "middle", className: "sia-chart__axis-label", children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { orientation: "left", x: PLOT.x, y: PLOT_BOTTOM, length: PLOT.height, labels: ticks.map(formatChartNumber), gridLength: PLOT.width }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT.x, y1: PLOT_BOTTOM, x2: PLOT.x + PLOT.width, y2: PLOT_BOTTOM, className: "sia-chart__axis-line" }),
+    categories.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: x[index], y1: PLOT_BOTTOM, x2: x[index], y2: PLOT_BOTTOM + 5, className: "sia-chart__axis-line" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: x[index], y: PLOT_BOTTOM + 21, textAnchor: "middle", className: "sia-chart__axis-label", children: label })
     ] }, `${label}-${index}`))
   ] });
 }
@@ -4405,18 +4429,18 @@ function logScale(value, domain, range) {
   return logarithmicScale(value, domain, range);
 }
 function lineSymbol(type, x, y, size, color, image, strokeWidth = 2) {
-  if (type === "image") return image ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("image", { "data-chart-symbol": "image", href: image, x: x - size / 2, y: y - size / 2, width: size, height: size, preserveAspectRatio: "none" }) : null;
-  if (type === "emptyCircle") return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: x, cy: y, r: size / 2, fill: "#fff", stroke: color, strokeWidth: 2 });
+  if (type === "image") return image ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("image", { "data-chart-symbol": "image", href: image, x: x - size / 2, y: y - size / 2, width: size, height: size, preserveAspectRatio: "none" }) : null;
+  if (type === "emptyCircle") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: x, cy: y, r: size / 2, fill: "#fff", stroke: color, strokeWidth: 2 });
   const pathType = type === "emptyHeart" ? "heart" : type === "emptyPin" ? "pin" : type;
-  if (pathType && ["heart", "droplet", "pin", "arrow"].includes(pathType)) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { "data-chart-symbol": type, d: chartMarkerPath(pathType, x, y, size), fill: type?.startsWith("empty") ? "#fff" : color, stroke: color, strokeWidth });
-  if (type === "star" || type === "star6") return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { "data-chart-symbol": type, points: chartStarPoints(x, y, size, type === "star" ? 5 : 6).map((p) => p.join(",")).join(" "), fill: color, stroke: color, strokeWidth });
-  if (type === "none") return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: x, cy: y, r: Math.max(6, size), fill: "transparent" });
-  if (type === "square") return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: x - size / 2, y: y - size / 2, width: size, height: size, rx: 1, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 });
-  if (type === "diamond") return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: x - size / 2, y: y - size / 2, width: size, height: size, rx: 1, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2, transform: `rotate(45 ${x} ${y})` });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: x, cy: y, r: size / 2, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 });
+  if (pathType && ["heart", "droplet", "pin", "arrow"].includes(pathType)) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { "data-chart-symbol": type, d: chartMarkerPath(pathType, x, y, size), fill: type?.startsWith("empty") ? "#fff" : color, stroke: color, strokeWidth });
+  if (type === "star" || type === "star6") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { "data-chart-symbol": type, points: chartStarPoints(x, y, size, type === "star" ? 5 : 6).map((p) => p.join(",")).join(" "), fill: color, stroke: color, strokeWidth });
+  if (type === "none") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: x, cy: y, r: Math.max(6, size), fill: "transparent" });
+  if (type === "square") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: x - size / 2, y: y - size / 2, width: size, height: size, rx: 1, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 });
+  if (type === "diamond") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: x - size / 2, y: y - size / 2, width: size, height: size, rx: 1, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2, transform: `rotate(45 ${x} ${y})` });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: x, cy: y, r: size / 2, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 });
 }
 function useZoom(value, defaultValue, onChange) {
-  const [internal, setInternal] = (0, import_react34.useState)([...defaultValue ?? [0, 100]]);
+  const [internal, setInternal] = (0, import_react35.useState)([...defaultValue ?? [0, 100]]);
   const current = value ?? internal;
   const update = (next) => {
     if (!value) setInternal(next);
@@ -4426,8 +4450,8 @@ function useZoom(value, defaultValue, onChange) {
 }
 function useToolboxMagicType(toolbox, fallback) {
   const options = toolbox === true ? {} : typeof toolbox === "object" ? toolbox : void 0;
-  const [internal, setInternal] = (0, import_react34.useState)(options?.activeMagicType ?? fallback);
-  (0, import_react34.useEffect)(() => {
+  const [internal, setInternal] = (0, import_react35.useState)(options?.activeMagicType ?? fallback);
+  (0, import_react35.useEffect)(() => {
     if (options?.activeMagicType) setInternal(options.activeMagicType);
   }, [options?.activeMagicType]);
   const active = options?.activeMagicType ?? internal;
@@ -4445,15 +4469,15 @@ function useToolboxMagicType(toolbox, fallback) {
   } : toolbox;
   return [active, resolved];
 }
-var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableMode = "resize", onTransferError, grid, valueTransfer: externalValueTransfer, categories, series: sourceSeries, appearance = "sia", categoryLabelInterval = 0, boundaryGap = false, showCategorySplitLine = true, categoryAxisName, valueAxisName, legendLayout, logBase = 10, logExponentStep = 1, animationProgress, animationDurationUpdate = 500, valueDomain, axisLabelFormatter, stacked = false, orientation = "vertical", xAxisType = "category", valueAxisType = "value", valueAxisInverse = false, tooltipTrigger = "item", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, dataZoom = false, zoomIndexMode = "points", zoomPosition = "bottom", zoomControlBounds, zoomPan = false, zoomSelectionShape = "band", zoomSelectionStyle, zoomMinSelectionSize, calculable = false, zoom, defaultZoom, onZoomChange, onDataChange, palette, toolbox, ...props }, ref) {
-  const [hoverIndex, setHoverIndex] = (0, import_react34.useState)(null);
-  const [editableSeries, setEditableSeries] = (0, import_react34.useState)(sourceSeries);
-  const [dragPoint, setDragPoint] = (0, import_react34.useState)(null);
-  const linePaintId = (0, import_react34.useId)().replaceAll(":", "");
-  const [hoveredLinePoint, setHoveredLinePoint] = (0, import_react34.useState)();
-  (0, import_react34.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
+var LineChart = (0, import_react35.forwardRef)(function LineChart2({ calculableMode = "resize", onTransferError, grid, valueTransfer: externalValueTransfer, categories, series: sourceSeries, appearance = "sia", categoryLabelInterval = 0, boundaryGap = false, showCategorySplitLine = true, categoryAxisName, valueAxisName, legendLayout, logBase = 10, logExponentStep = 1, animationProgress, animationDurationUpdate = 500, valueDomain, axisLabelFormatter, stacked = false, orientation = "vertical", xAxisType = "category", valueAxisType = "value", valueAxisInverse = false, tooltipTrigger = "item", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, dataZoom = false, zoomIndexMode = "points", zoomPosition = "bottom", zoomControlBounds, zoomPan = false, zoomSelectionShape = "band", zoomSelectionStyle, zoomMinSelectionSize, calculable = false, zoom, defaultZoom, onZoomChange, onDataChange, palette, toolbox, ...props }, ref) {
+  const [hoverIndex, setHoverIndex] = (0, import_react35.useState)(null);
+  const [editableSeries, setEditableSeries] = (0, import_react35.useState)(sourceSeries);
+  const [dragPoint, setDragPoint] = (0, import_react35.useState)(null);
+  const linePaintId = (0, import_react35.useId)().replaceAll(":", "");
+  const [hoveredLinePoint, setHoveredLinePoint] = (0, import_react35.useState)();
+  (0, import_react35.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
   const series = externalValueTransfer ? sourceSeries : editableSeries;
-  const initialTransferSeries = (0, import_react34.useMemo)(() => sourceSeries.map((item) => ({ ...item, data: item.data.map(lineValue) })), [sourceSeries]);
+  const initialTransferSeries = (0, import_react35.useMemo)(() => sourceSeries.map((item) => ({ ...item, data: item.data.map(lineValue) })), [sourceSeries]);
   const localTransfer = useBarValueTransfer(series.map((item) => ({ ...item, data: item.data.map(lineValue) })), initialTransferSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (nextBars) => {
     const next = series.map((item, row) => ({ ...item, data: item.data.map((datum, index) => {
       const value = barDatum(nextBars[row].data[index]).value;
@@ -4469,9 +4493,9 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
   const PLOT2 = plot;
   const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
   const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
-  const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...zoomControlBounds, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataZoom, { handleLabels: [categories[Math.min(categories.length - 1, Math.floor(Math.min(...zoomValue) / 100 * categories.length))] ?? "", categories[Math.max(0, Math.ceil(Math.max(...zoomValue) / 100 * categories.length) - 1)] ?? ""], shadowBounds: zoomControlBounds, panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), onChange: setZoomValue }) }) : null;
-  const [zoomBrushActive, setZoomBrushActive] = (0, import_react34.useState)(false);
-  const [zoomHistory, setZoomHistory] = (0, import_react34.useState)(() => dataZoom ? [defaultZoom ?? zoom ?? [0, 100]] : []);
+  const inlineZoom = dataZoom && zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("foreignObject", { className: "sia-chart__inline-zoom sia-chart__inline-zoom--compact", ...zoomControlBounds, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataZoom, { handleLabels: [categories[Math.min(categories.length - 1, Math.floor(Math.min(...zoomValue) / 100 * categories.length))] ?? "", categories[Math.max(0, Math.ceil(Math.max(...zoomValue) / 100 * categories.length) - 1)] ?? ""], shadowBounds: zoomControlBounds, panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), onChange: setZoomValue }) }) : null;
+  const [zoomBrushActive, setZoomBrushActive] = (0, import_react35.useState)(false);
+  const [zoomHistory, setZoomHistory] = (0, import_react35.useState)(() => dataZoom ? [defaultZoom ?? zoom ?? [0, 100]] : []);
   const zoomBrush = dataZoom && zoomBrushActive ? { minSelectionSize: zoomMinSelectionSize, selectionStyle: zoomSelectionStyle, selectionShape: zoomSelectionShape, bounds: PLOT2, onCancel: () => setZoomBrushActive(false), onSelect: (range) => {
     const start = Math.min(...zoomValue), span = Math.max(...zoomValue) - start;
     const next = [start + range[0] * span, start + range[1] * span];
@@ -4490,7 +4514,7 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
       setZoomValue([...next.at(-1) ?? [0, 100]]);
     } : void 0),
     zoomBackDisabled: resolvedToolbox.onZoomBack ? resolvedToolbox.zoomBackDisabled : zoomHistory.length === 0,
-    dataView: resolvedToolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { allowNull: true, readOnly: resolvedToolbox.dataViewReadOnly, series: series.map((item) => ({ name: item.name, data: item.data.map((datum) => {
+    dataView: resolvedToolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { allowNull: true, readOnly: resolvedToolbox.dataViewReadOnly, series: series.map((item) => ({ name: item.name, data: item.data.map((datum) => {
       const value = lineValue(datum);
       return Number.isFinite(value) ? value : null;
     }) })), onApply: (values2) => {
@@ -4518,11 +4542,11 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
   const categoryLabels = visibleCategories.map((label, index) => index % labelStep ? "" : label);
   const visibleSeries = series.filter((item) => legend.isSelected(item.name)).map((item) => ({ ...item, stack: lineMagic.layout === "tiled" ? void 0 : item.stack, data: item.data.slice(startIndex, endIndex) }));
   if (lineMagic.shape === "bar") {
-    const switched = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    const switched = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       BarChart,
       {
         ...props,
-        svgOverlay: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        svgOverlay: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
           props.svgOverlay,
           inlineZoom
         ] }),
@@ -4566,10 +4590,10 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
         toolbox: chartToolbox
       }
     );
-    return dataZoom && !zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-chart-with-zoom", children: [
-      zoomPosition === "top" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataZoom, { panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), showDetail: true, onChange: setZoomValue }) : null,
+    return dataZoom && !zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "sia-chart-with-zoom", children: [
+      zoomPosition === "top" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataZoom, { panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), showDetail: true, onChange: setZoomValue }) : null,
       switched,
-      zoomPosition === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataZoom, { panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), showDetail: true, onChange: setZoomValue }) : null
+      zoomPosition === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataZoom, { panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), showDetail: true, onChange: setZoomValue }) : null
     ] }) : switched;
   }
   const stackLayout = layoutBarValues(visibleSeries.map((item) => ({ stack: item.stack, data: item.data.map(lineValue) })), visibleCategories.length, effectiveStacked);
@@ -4593,11 +4617,11 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
   const xDomain = niceChartDomain(allXValues, false);
   const categoryAt = (index) => orientation === "vertical" ? PLOT2.x + (index + (boundaryGap ? 0.5 : 0)) / Math.max(1, visibleCategories.length - (boundaryGap ? 0 : 1)) * PLOT2.width : legacy ? PLOT_BOTTOM2 - index / Math.max(1, visibleCategories.length - 1) * PLOT2.height : PLOT2.y + index / Math.max(1, visibleCategories.length - 1) * PLOT2.height;
   const pointXAt = (datum, index) => xAxisType === "category" ? categoryAt(index) : linearScale(lineXValue(datum, index), [xDomain[0], xDomain[1]], [PLOT2.x, PLOT2.x + PLOT2.width]);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     SiaChart,
     {
       ...props,
-      svgOverlay: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      svgOverlay: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
         props.svgOverlay,
         inlineZoom
       ] }),
@@ -4609,41 +4633,41 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
       empty: !visibleCategories.length || !series.length,
       ariaLabel: props.ariaLabel ?? "\u6298\u7EBF\u56FE",
       children: [
-        showLegend ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { symbol: legacy ? "line" : "rect", x: legendLayout?.x ?? (props.viewBoxSize?.[0] ?? 720) / 2, y: legendLayout?.y ?? (legacy ? 14 : 20), align: legendLayout?.align, itemGap: legacy ? 10 : 18, items: series.map((item, index) => ({ name: item.name, fillGradient: item.fillGradient, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
-        legacy && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-          valueTicks.map((tick, i, ticks) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-            i < ticks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: PLOT2.x, y: valueAt(ticks[i + 1]), width: PLOT2.width, height: Math.abs(valueAt(tick) - valueAt(ticks[i + 1])), fill: i % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: valueAt(tick), y2: valueAt(tick), stroke: "#eee" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT2.x - 8, y: valueAt(tick) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: axisLabelFormatter?.(tick) ?? tick.toLocaleString("en-US") })
+        showLegend ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { symbol: legacy ? "line" : "rect", x: legendLayout?.x ?? (props.viewBoxSize?.[0] ?? 720) / 2, y: legendLayout?.y ?? (legacy ? 14 : 20), align: legendLayout?.align, itemGap: legacy ? 10 : 18, items: series.map((item, index) => ({ name: item.name, fillGradient: item.fillGradient, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
+        legacy && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+          valueTicks.map((tick, i, ticks) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+            i < ticks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: PLOT2.x, y: valueAt(ticks[i + 1]), width: PLOT2.width, height: Math.abs(valueAt(tick) - valueAt(ticks[i + 1])), fill: i % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: valueAt(tick), y2: valueAt(tick), stroke: "#eee" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT2.x - 8, y: valueAt(tick) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: axisLabelFormatter?.(tick) ?? tick.toLocaleString("en-US") })
           ] }, tick)),
-          categoryLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-            showCategorySplitLine ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: categoryAt(i), x2: categoryAt(i), y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#eee" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: categoryAt(i), y: PLOT_BOTTOM2 + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: label })
+          categoryLabels.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+            showCategorySplitLine ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: categoryAt(i), x2: categoryAt(i), y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#eee" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: categoryAt(i), y: PLOT_BOTTOM2 + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: label })
           ] }, i)),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x, y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: valueAt(0), y2: valueAt(0), stroke: "#008acd", strokeWidth: 2 }),
-          categoryAxisName ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT2.x + PLOT2.width + 5, y: valueAt(0) + 4, fill: "#008acd", fontSize: 12, children: categoryAxisName }) : null,
-          valueAxisName ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT2.x, y: PLOT2.y - 9, fill: "#008acd", fontSize: 12, children: valueAxisName }) : null
-        ] }) : legacy && orientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-          valueTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-            index < valueTicks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: valueAt(tick), y: PLOT2.y, width: Math.abs(valueAt(valueTicks[index + 1]) - valueAt(tick)), height: PLOT2.height, fill: index % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: valueAt(tick), x2: valueAt(tick), y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#eee" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: valueAt(tick), y: PLOT_BOTTOM2 + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: axisLabelFormatter?.(tick) ?? tick.toLocaleString("en-US") })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x, y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: valueAt(0), y2: valueAt(0), stroke: "#008acd", strokeWidth: 2 }),
+          categoryAxisName ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT2.x + PLOT2.width + 5, y: valueAt(0) + 4, fill: "#008acd", fontSize: 12, children: categoryAxisName }) : null,
+          valueAxisName ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT2.x, y: PLOT2.y - 9, fill: "#008acd", fontSize: 12, children: valueAxisName }) : null
+        ] }) : legacy && orientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+          valueTicks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+            index < valueTicks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: valueAt(tick), y: PLOT2.y, width: Math.abs(valueAt(valueTicks[index + 1]) - valueAt(tick)), height: PLOT2.height, fill: index % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: valueAt(tick), x2: valueAt(tick), y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#eee" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: valueAt(tick), y: PLOT_BOTTOM2 + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: axisLabelFormatter?.(tick) ?? tick.toLocaleString("en-US") })
           ] }, tick)),
-          categoryLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: categoryAt(index), y2: categoryAt(index), stroke: "#eee" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT2.x - 8, y: categoryAt(index) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: label })
+          categoryLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: categoryAt(index), y2: categoryAt(index), stroke: "#eee" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT2.x - 8, y: categoryAt(index) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: label })
           ] }, index)),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x, y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: PLOT_BOTTOM2, y2: PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 })
-        ] }) : orientation === "vertical" && xAxisType === "category" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CartesianAxes, { categories: categoryLabels, domain }) : orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { orientation: "left", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.height, labels: valueTicks.map(formatChartNumber), gridLength: PLOT2.width }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { orientation: "bottom", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.width, labels: chartTicks(xDomain).map((value) => xAxisType === "time" ? new Date(value).toLocaleDateString() : formatChartNumber(value)), gridLength: PLOT2.height })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { orientation: "bottom", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.width, labels: valueTicks.map(formatChartNumber), gridLength: PLOT2.height }),
-          categoryLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT2.x - 10, y: categoryAt(index) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: label }, `${label}-${index}`))
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x, y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: PLOT_BOTTOM2, y2: PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 })
+        ] }) : orientation === "vertical" && xAxisType === "category" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CartesianAxes, { categories: categoryLabels, domain }) : orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { orientation: "left", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.height, labels: valueTicks.map(formatChartNumber), gridLength: PLOT2.width }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { orientation: "bottom", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.width, labels: chartTicks(xDomain).map((value) => xAxisType === "time" ? new Date(value).toLocaleDateString() : formatChartNumber(value)), gridLength: PLOT2.height })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { orientation: "bottom", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.width, labels: valueTicks.map(formatChartNumber), gridLength: PLOT2.height }),
+          categoryLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT2.x - 10, y: categoryAt(index) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: label }, `${label}-${index}`))
         ] }),
-        tooltipTrigger === "axis" && hoverIndex != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        tooltipTrigger === "axis" && hoverIndex != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "line",
           {
             x1: orientation === "vertical" ? categoryAt(hoverIndex) : PLOT2.x,
@@ -4656,13 +4680,13 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
         tooltipTrigger === "axis" && xAxisType === "category" ? visibleCategories.map((name, index) => {
           const step = (orientation === "vertical" ? PLOT2.width : PLOT2.height) / Math.max(1, visibleCategories.length - 1);
           const coordinate = categoryAt(index);
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             ChartMark,
             {
               label: `${name}\uFF0C${visibleSeries.map((item) => `${item.name} ${lineValue(item.data[index] ?? 0)}`).join("\uFF0C")}`,
-              tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: name }),
-                visibleSeries.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+              tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: name }),
+                visibleSeries.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
                   item.name,
                   "\uFF1A",
                   valueFormatter ? valueFormatter(lineValue(item.data[index] ?? 0)) : formatChartNumber(lineValue(item.data[index] ?? 0))
@@ -4671,7 +4695,7 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
               tooltipPoint: orientation === "vertical" ? [coordinate, PLOT2.y + 12] : [PLOT2.x + PLOT2.width, coordinate],
               onPointerMove: () => setHoverIndex(index),
               onPointerLeave: () => setHoverIndex(null),
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: orientation === "vertical" ? coordinate - step / 2 : PLOT2.x, y: orientation === "vertical" ? PLOT2.y : coordinate - step / 2, width: orientation === "vertical" ? step : PLOT2.width, height: orientation === "vertical" ? PLOT2.height : step, fill: "transparent" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: orientation === "vertical" ? coordinate - step / 2 : PLOT2.x, y: orientation === "vertical" ? PLOT2.y : coordinate - step / 2, width: orientation === "vertical" ? step : PLOT2.width, height: orientation === "vertical" ? PLOT2.height : step, fill: "transparent" })
             },
             `axis-${name}-${index}`
           );
@@ -4692,7 +4716,7 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
             (stacked || item.stack) && !legacy ? valueAt(previous[index]) : valueAt(valueAxisType === "log" ? domain[0] : 0),
             point[1]
           ]);
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { points: item.area ? [...plotted, ...basePoints] : plotted, enabled: props.animation !== false && !dragPoint, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, horizontal: orientation === "horizontal", children: (animatedShape) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: item.area ? [...plotted, ...basePoints] : plotted, enabled: props.animation !== false && !dragPoint, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, horizontal: orientation === "horizontal", children: (animatedShape) => {
             const animatedPoints = animatedShape.slice(0, plotted.length);
             const animatedBase = animatedShape.slice(plotted.length);
             const areaRuns = [];
@@ -4711,34 +4735,34 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
             const average = itemValues.reduce((sum, value) => sum + value, 0) / Math.max(1, itemValues.length);
             const averageCoordinate = valueAt(average);
             const extremeIndexes = [item.markMin ? itemValues.indexOf(Math.min(...itemValues)) : -1, item.markMax ? itemValues.indexOf(Math.max(...itemValues)) : -1].filter((index) => index >= 0);
-            return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-              gradient ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: gradient.start[0], y1: gradient.start[1], x2: gradient.end[0], y2: gradient.end[1], children: gradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
-              statistics && item.statisticLines ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartBarStatistics, { values: statistics, kinds: item.statisticLines, project: valueAt, plot: PLOT2, horizontal: orientation === "horizontal", color, gradient, seriesName: item.name }) : null,
-              areaGradient ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("linearGradient", { id: areaGradientId, gradientUnits: "userSpaceOnUse", x1: areaGradient.start[0], y1: areaGradient.start[1], x2: areaGradient.end[0], y2: areaGradient.end[1], children: areaGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
-              item.area ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: areaPath, fill: areaGradient ? `url(#${areaGradientId})` : color, style: areaGradient ? { opacity: 1 } : void 0, className: "sia-chart__area" }) : null,
-              item.markAverage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { className: "sia-chart__mark-line", style: legacy ? { color } : void 0, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: orientation === "vertical" ? PLOT2.x : averageCoordinate, y1: orientation === "vertical" ? averageCoordinate : PLOT2.y, x2: orientation === "vertical" ? PLOT2.x + PLOT2.width : averageCoordinate, y2: orientation === "vertical" ? averageCoordinate : PLOT_BOTTOM2, stroke: color }),
-                legacy && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: PLOT2.x, cy: averageCoordinate, r: 2, fill: "#fff", stroke: color }),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: `M ${PLOT2.x + PLOT2.width - 8} ${averageCoordinate - 4} L ${PLOT2.x + PLOT2.width} ${averageCoordinate} L ${PLOT2.x + PLOT2.width - 8} ${averageCoordinate + 4} Z`, fill: color })
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+              gradient ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: gradient.start[0], y1: gradient.start[1], x2: gradient.end[0], y2: gradient.end[1], children: gradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
+              statistics && item.statisticLines ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartBarStatistics, { values: statistics, kinds: item.statisticLines, project: valueAt, plot: PLOT2, horizontal: orientation === "horizontal", color, gradient, seriesName: item.name }) : null,
+              areaGradient ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("linearGradient", { id: areaGradientId, gradientUnits: "userSpaceOnUse", x1: areaGradient.start[0], y1: areaGradient.start[1], x2: areaGradient.end[0], y2: areaGradient.end[1], children: areaGradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
+              item.area ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: areaPath, fill: areaGradient ? `url(#${areaGradientId})` : color, style: areaGradient ? { opacity: 1 } : void 0, className: "sia-chart__area" }) : null,
+              item.markAverage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { className: "sia-chart__mark-line", style: legacy ? { color } : void 0, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: orientation === "vertical" ? PLOT2.x : averageCoordinate, y1: orientation === "vertical" ? averageCoordinate : PLOT2.y, x2: orientation === "vertical" ? PLOT2.x + PLOT2.width : averageCoordinate, y2: orientation === "vertical" ? averageCoordinate : PLOT_BOTTOM2, stroke: color }),
+                legacy && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: PLOT2.x, cy: averageCoordinate, r: 2, fill: "#fff", stroke: color }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: `M ${PLOT2.x + PLOT2.width - 8} ${averageCoordinate - 4} L ${PLOT2.x + PLOT2.width} ${averageCoordinate} L ${PLOT2.x + PLOT2.width - 8} ${averageCoordinate + 4} Z`, fill: color })
                 ] }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: orientation === "vertical" ? PLOT2.x + PLOT2.width + (legacy ? 10 : -4) : averageCoordinate + 6, y: orientation === "vertical" ? averageCoordinate + (legacy ? 4 : -6) : PLOT2.y + 12, textAnchor: orientation === "vertical" && !legacy ? "end" : "start", children: legacy ? Number(average.toFixed(2)) : `\u5747\u503C ${formatChartNumber(average)}` })
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: orientation === "vertical" ? PLOT2.x + PLOT2.width + (legacy ? 10 : -4) : averageCoordinate + 6, y: orientation === "vertical" ? averageCoordinate + (legacy ? 4 : -6) : PLOT2.y + 12, textAnchor: orientation === "vertical" && !legacy ? "end" : "start", children: legacy ? Number(average.toFixed(2)) : `\u5747\u503C ${formatChartNumber(average)}` })
               ] }) : null,
-              lineSegments(animatedPoints).map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: linePath(segment, item.curve), fill: "none", stroke: strokePaint, strokeDasharray: item.lineStyle === "dashed" ? "7 5" : item.lineStyle === "dotted" ? "2 4" : void 0, style: { filter: item.lineShadow ? `drop-shadow(${item.lineShadow.offsetX ?? 0}px ${item.lineShadow.offsetY ?? 0}px ${item.lineShadow.blur}px ${item.lineShadow.color})` : void 0, strokeWidth: item.lineWidth ?? (legacy ? 2 : 2.5), animation: "none" }, className: "sia-chart__line" }, i)),
+              lineSegments(animatedPoints).map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: linePath(segment, item.curve), fill: "none", stroke: strokePaint, strokeDasharray: item.lineStyle === "dashed" ? "7 5" : item.lineStyle === "dotted" ? "2 4" : void 0, style: { filter: item.lineShadow ? `drop-shadow(${item.lineShadow.offsetX ?? 0}px ${item.lineShadow.offsetY ?? 0}px ${item.lineShadow.blur}px ${item.lineShadow.color})` : void 0, strokeWidth: item.lineWidth ?? (legacy ? 2 : 2.5), animation: "none" }, className: "sia-chart__line" }, i)),
               extremeIndexes.map((index) => {
                 const point = plotted[index];
                 const value = itemValues[index];
                 const kind = value === Math.max(...itemValues) ? "\u6700\u5927\u503C" : "\u6700\u5C0F\u503C";
-                return legacy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPin, { point, color, label: formatChartNumber(value) }, `${kind}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { className: "sia-chart__mark-point", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: point[0], cy: point[1], r: 10, fill: color }),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x: point[0], y: point[1] - 15, textAnchor: "middle", children: [
+                return legacy ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPin, { point, color, label: formatChartNumber(value) }, `${kind}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { className: "sia-chart__mark-point", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: point[0], cy: point[1], r: 10, fill: color }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x: point[0], y: point[1] - 15, textAnchor: "middle", children: [
                     kind,
                     " ",
                     formatChartNumber(value)
                   ] })
                 ] }, `${kind}-${index}`);
               }),
-              item.markPoints?.map((mark) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPin, { point: [categoryAt(mark.index - startIndex), valueAt(mark.value)], color, label: mark.label ?? formatChartNumber(mark.value) }, mark.name)),
+              item.markPoints?.map((mark) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPin, { point: [categoryAt(mark.index - startIndex), valueAt(mark.value)], color, label: mark.label ?? formatChartNumber(mark.value) }, mark.name)),
               animatedPoints.map((point, index) => {
                 if (!point.every(Number.isFinite)) {
                   if (!valueTransfer || Number.isFinite(lineValue(item.data[index] ?? NaN))) return null;
@@ -4751,14 +4775,14 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
                   const x = orientation === "vertical" ? coordinate : baseline;
                   const y = orientation === "vertical" ? baseline : categoryAt(index);
                   const emptyKey = `${item.name}:${index}`, highlighted = hoveredLinePoint === emptyKey;
-                  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { ...valueTransfer.props(series.findIndex((candidate) => candidate.name === item.name), index + startIndex), onPointerEnter: () => setHoveredLinePoint(emptyKey), onPointerLeave: () => setHoveredLinePoint(void 0), onFocus: () => setHoveredLinePoint(emptyKey), onBlur: () => setHoveredLinePoint(void 0), label: `${item.name}\uFF0C${visibleCategories[index]}\uFF0C\u7A7A\u69FD`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { ...valueTransfer.props(series.findIndex((candidate) => candidate.name === item.name), index + startIndex), onPointerEnter: () => setHoveredLinePoint(emptyKey), onPointerLeave: () => setHoveredLinePoint(void 0), onFocus: () => setHoveredLinePoint(emptyKey), onBlur: () => setHoveredLinePoint(void 0), label: `${item.name}\uFF0C${visibleCategories[index]}\uFF0C\u7A7A\u69FD`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
                     "\u62D6\u5165\u6570\u503C\uFF1A",
                     item.name,
                     " ",
                     visibleCategories[index]
                   ] }), children: [
-                    shapedEmpty ? lineSymbol(item.symbol, x, y, emptySize, highlighted ? item.emphasisColor ?? color : "#ccc", item.symbolImage, highlighted ? 4 : 2) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: x, cy: y, r: legacy ? emptySize / 2 : 7, fill: legacy && !highlighted ? "#ccc" : "#fff", stroke: legacy && !highlighted ? "#ccc" : color, strokeWidth: legacy ? highlighted ? 4 : 2 : 1, strokeDasharray: legacy ? void 0 : "2 2" }),
-                    legacy && highlighted && item.showEmphasisLabels ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y: y - emptySize / 2 - 5, textAnchor: "middle", className: "sia-chart__point-label", style: { fill: item.emphasisColor ?? color, fontSize: 12, fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif", ...item.labelStyle, ...item.emphasisLabelStyle }, children: "-" }) : null
+                    shapedEmpty ? lineSymbol(item.symbol, x, y, emptySize, highlighted ? item.emphasisColor ?? color : "#ccc", item.symbolImage, highlighted ? 4 : 2) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: x, cy: y, r: legacy ? emptySize / 2 : 7, fill: legacy && !highlighted ? "#ccc" : "#fff", stroke: legacy && !highlighted ? "#ccc" : color, strokeWidth: legacy ? highlighted ? 4 : 2 : 1, strokeDasharray: legacy ? void 0 : "2 2" }),
+                    legacy && highlighted && item.showEmphasisLabels ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y: y - emptySize / 2 - 5, textAnchor: "middle", className: "sia-chart__point-label", style: { fill: item.emphasisColor ?? color, fontSize: 12, fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif", ...item.labelStyle, ...item.emphasisLabelStyle }, children: "-" }) : null
                   ] }, `empty-${index}`);
                 }
                 const value = lineValue(item.data[index] ?? 0);
@@ -4779,12 +4803,12 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
                   ...pointStyle?.labelStyle,
                   ...emphasized ? { ...item.emphasisLabelStyle, ...pointStyle?.emphasisLabelStyle } : {}
                 };
-                return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                   ChartMark,
                   {
                     className: calculable ? "sia-chart__calculable" : void 0,
                     label: `${item.name}\uFF0C${name}\uFF0C${formatChartNumber(value)}`,
-                    tooltip: tooltipTrigger === "item" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }) : void 0,
+                    tooltip: tooltipTrigger === "item" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }) : void 0,
                     tooltipPoint: point,
                     onPointerDown: (event) => {
                       if (!calculable) return;
@@ -4819,8 +4843,8 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
                     onBlur: () => setHoveredLinePoint(void 0),
                     ...transferHandlers,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { transform: `rotate(${pointStyle?.symbolRotate ?? item.symbolRotate ?? 0} ${point[0]} ${point[1]})`, children: item.hollowSymbol && !pointStyle?.symbol ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: point[0], cy: point[1], r: (pointSize ?? 6) / 2, fill: "#fff", stroke: pointColor, strokeWidth: legacy && emphasized ? 4 : 2 }) : lineSymbol(item.showPoints === false ? "none" : pointStyle?.symbol ?? item.symbol, point[0], point[1], pointSize ?? 9, pointColor, pointStyle?.symbolImage ?? item.symbolImage) }),
-                      showLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: point[0], y: labelPosition === "inside" ? point[1] : point[1] - Math.max(10, (pointSize ?? 6) / 2 + 5), dominantBaseline: labelPosition === "inside" ? "middle" : void 0, textAnchor: "middle", className: "sia-chart__point-label", style: labelStyle, children: label }) : null
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { transform: `rotate(${pointStyle?.symbolRotate ?? item.symbolRotate ?? 0} ${point[0]} ${point[1]})`, children: item.hollowSymbol && !pointStyle?.symbol ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: point[0], cy: point[1], r: (pointSize ?? 6) / 2, fill: "#fff", stroke: pointColor, strokeWidth: legacy && emphasized ? 4 : 2 }) : lineSymbol(item.showPoints === false ? "none" : pointStyle?.symbol ?? item.symbol, point[0], point[1], pointSize ?? 9, pointColor, pointStyle?.symbolImage ?? item.symbolImage) }),
+                      showLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: point[0], y: labelPosition === "inside" ? point[1] : point[1] - Math.max(10, (pointSize ?? 6) / 2 + 5), dominantBaseline: labelPosition === "inside" ? "middle" : void 0, textAnchor: "middle", className: "sia-chart__point-label", style: labelStyle, children: label }) : null
                     ]
                   },
                   `${name}-${index}`
@@ -4829,46 +4853,46 @@ var LineChart = (0, import_react34.forwardRef)(function LineChart2({ calculableM
             ] }, `${item.name}-${seriesIndex}`);
           } }, item.name);
         }), legacy && stacked),
-        valueTransfer?.islands.map((island, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { ...valueTransfer.props(-1, index), label: `\u5B64\u5C9B ${island.name} ${island.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        valueTransfer?.islands.map((island, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { ...valueTransfer.props(-1, index), label: `\u5B64\u5C9B ${island.name} ${island.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
           island.seriesName,
           " ",
           island.name,
           "\uFF1A",
           island.value
         ] }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: island.x, cy: island.y, r: 20, fill: "#fff", stroke: "#2ec7c9", strokeWidth: 2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: island.x, y: island.y + 4, textAnchor: "middle", fontSize: 11, children: island.value })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: island.x, cy: island.y, r: 20, fill: "#fff", stroke: "#2ec7c9", strokeWidth: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: island.x, y: island.y + 4, textAnchor: "middle", fontSize: 11, children: island.value })
         ] }, `line-island-${index}`))
       ]
     }
   );
-  return dataZoom && !zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-chart-with-zoom", children: [
-    zoomPosition === "top" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataZoom, { panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), showDetail: true, onChange: setZoomValue }) : null,
+  return dataZoom && !zoomControlBounds ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "sia-chart-with-zoom", children: [
+    zoomPosition === "top" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataZoom, { panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), showDetail: true, onChange: setZoomValue }) : null,
     content,
-    zoomPosition === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataZoom, { panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), showDetail: true, onChange: setZoomValue }) : null
+    zoomPosition === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataZoom, { panEnabled: zoomPan, value: zoomValue, dataShadow: series[0]?.data.map(lineValue), showDetail: true, onChange: setZoomValue }) : null
   ] }) : content;
 });
 function ChartPin({ point, color, label }) {
   const scale = Math.max(1, (label.length * 3.2 + 2) / 13);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { transform: `translate(${point[0]} ${point[1]})`, className: "sia-chart__pin", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M 0 0 C -4 -8 -13 -14 -13 -23 A 13 13 0 1 1 13 -23 C 13 -14 4 -8 0 0 Z", fill: color, transform: `scale(${scale})` }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { y: -23 * scale + 4, textAnchor: "middle", fill: "#fff", fontSize: 12, children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { transform: `translate(${point[0]} ${point[1]})`, className: "sia-chart__pin", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M 0 0 C -4 -8 -13 -14 -13 -23 A 13 13 0 1 1 13 -23 C 13 -14 4 -8 0 0 Z", fill: color, transform: `scale(${scale})` }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { y: -23 * scale + 4, textAnchor: "middle", fill: "#fff", fontSize: 12, children: label })
   ] });
 }
 function barDatum(datum) {
   return typeof datum === "number" ? { value: datum } : datum;
 }
-var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer: externalValueTransfer, calculableMode = "resize", onTransferError, categories, series: sourceSeries, appearance = "sia", animationProgress, animationDurationUpdate = 500, valueDomain, axisLabelFormatter, grid, valueAxisPosition = "bottom", showValueAxis = true, showCategoryAxis = true, showCategorySplitLine = false, tooltipTrigger = "item", tooltipFormatter, stacked = false, orientation = "vertical", minBarSize = 1, calculable = false, onDataChange, showLegend = true, legendOrder, legendLayout, barCategoryGap = 0.2, valuePadding = 0, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, palette, toolbox, ...props }, ref) {
-  const [editableSeries, setEditableSeries] = (0, import_react34.useState)(sourceSeries);
-  const [dragBar, setDragBar] = (0, import_react34.useState)(null);
-  const [hoveredBar, setHoveredBar] = (0, import_react34.useState)();
-  const barPaintId = (0, import_react34.useId)().replaceAll(":", "");
+var BarChart = (0, import_react35.forwardRef)(function BarChart2({ valueTransfer: externalValueTransfer, calculableMode = "resize", onTransferError, categories, series: sourceSeries, appearance = "sia", animationProgress, animationDurationUpdate = 500, valueDomain, axisLabelFormatter, grid, valueAxisPosition = "bottom", showValueAxis = true, showCategoryAxis = true, showCategorySplitLine = false, tooltipTrigger = "item", tooltipFormatter, stacked = false, orientation = "vertical", minBarSize = 1, calculable = false, onDataChange, showLegend = true, legendOrder, legendLayout, barCategoryGap = 0.2, valuePadding = 0, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, palette, toolbox, ...props }, ref) {
+  const [editableSeries, setEditableSeries] = (0, import_react35.useState)(sourceSeries);
+  const [dragBar, setDragBar] = (0, import_react35.useState)(null);
+  const [hoveredBar, setHoveredBar] = (0, import_react35.useState)();
+  const barPaintId = (0, import_react35.useId)().replaceAll(":", "");
   const localTransfer = useBarValueTransfer(editableSeries, sourceSeries, categories, calculable && calculableMode === "transfer" && !externalValueTransfer, (next) => {
     setEditableSeries(next);
     onDataChange?.(next);
   }, onTransferError);
   const transfer = externalValueTransfer ?? localTransfer;
-  (0, import_react34.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
+  (0, import_react35.useEffect)(() => setEditableSeries(sourceSeries), [sourceSeries]);
   const series = externalValueTransfer ? sourceSeries : editableSeries;
   const legacy = appearance === "macarons";
   const PLOT2 = legacy ? { x: grid?.left ?? 80, y: grid?.top ?? 60, width: (props.viewBoxSize?.[0] ?? 720) - (grid?.left ?? 80) - (grid?.right ?? 80), height: (props.viewBoxSize?.[1] ?? 360) - (grid?.top ?? 60) - (grid?.bottom ?? 70) } : { x: 62, y: 48, width: 628, height: 250 };
@@ -4877,7 +4901,7 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
   const [barMagic, resolvedToolbox] = useBarMagicState(toolbox);
   const chartToolbox = typeof resolvedToolbox === "object" ? {
     ...resolvedToolbox,
-    dataView: resolvedToolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { allowNull: true, readOnly: resolvedToolbox.dataViewReadOnly, series: series.map((item) => ({ name: item.name, data: item.data.map((datum) => {
+    dataView: resolvedToolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { allowNull: true, readOnly: resolvedToolbox.dataViewReadOnly, series: series.map((item) => ({ name: item.name, data: item.data.map((datum) => {
       const d = barDatum(datum);
       return d.hidden || !Number.isFinite(d.value) ? null : d.value;
     }) })), onApply: (values) => {
@@ -4895,7 +4919,7 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
       resolvedToolbox.onRestore?.();
     }
   } : resolvedToolbox;
-  if (barMagic.shape === "line") return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  if (barMagic.shape === "line") return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     LineChart,
     {
       ...props,
@@ -4942,40 +4966,40 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
   const invisible = (color) => color === "transparent" || color?.replaceAll(" ", "") === "rgba(0,0,0,0)";
   const axisTooltip = (index) => {
     const rows = activeSeries.filter((item) => !invisible(item.color) && !barDatum(item.data[index] ?? 0).hidden).map((item) => ({ name: item.name, value: barDatum(item.data[index] ?? 0).value, color: barDatum(item.data[index] ?? 0).color ?? item.color ?? getColor(series.indexOf(item), void 0, palette) }));
-    return tooltipFormatter?.(categories[index], rows) ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: categories[index] }),
-      rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+    return tooltipFormatter?.(categories[index], rows) ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: categories[index] }),
+      rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
         row.name,
         "\uFF1A",
         valueFormatter?.(row.value) ?? row.value.toLocaleString("en-US")
       ] }, i))
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, toolbox: chartToolbox, empty: !categories.length || !series.length, ariaLabel: props.ariaLabel ?? "\u67F1\u72B6\u56FE", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, toolbox: chartToolbox, empty: !categories.length || !series.length, ariaLabel: props.ariaLabel ?? "\u67F1\u72B6\u56FE", children: [
     showLegend ? Array.from({ length: Math.max(1, legendLayout?.rows ?? 1) }, (_, row) => {
       const items = series.map((item, index) => ({ name: item.name, fillGradient: item.fillGradient, color: getColor(index, item.color, palette), borderColor: item.borderColor, disabled: !legend.isSelected(item.name) })).filter((_2, index) => series[index].showInLegend !== false).filter((item, index, all) => all.findIndex((other) => other.name === item.name) === index).sort((a, b) => legendOrder ? legendOrder.indexOf(a.name) - legendOrder.indexOf(b.name) : 0);
       const rowSize = Math.ceil(items.length / Math.max(1, legendLayout?.rows ?? 1));
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { x: legendLayout?.x ?? (props.viewBoxSize?.[0] ?? 720) / 2, y: (legendLayout?.y ?? (legacy ? 14 : 20)) + row * 20, itemGap: legendLayout?.itemGap ?? (legacy ? 10 : 18), items: items.slice(row * rowSize, (row + 1) * rowSize), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }, row);
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { x: legendLayout?.x ?? (props.viewBoxSize?.[0] ?? 720) / 2, y: (legendLayout?.y ?? (legacy ? 14 : 20)) + row * 20, itemGap: legendLayout?.itemGap ?? (legacy ? 10 : 18), items: items.slice(row * rowSize, (row + 1) * rowSize), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }, row);
     }) : null,
-    legacy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-      showValueAxis ? ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { children: orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        index < ticks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: PLOT2.x, y: valueAt(ticks[index + 1]), width: PLOT2.width, height: Math.abs(valueAt(tick) - valueAt(ticks[index + 1])), fill: index % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: valueAt(tick), y2: valueAt(tick), stroke: "#eee" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT2.x - 8, y: valueAt(tick) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: axisLabelFormatter?.(tick) ?? tick.toLocaleString("en-US") })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        index < ticks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: valueAt(tick), y: PLOT2.y, width: Math.abs(valueAt(ticks[index + 1]) - valueAt(tick)), height: PLOT2.height, fill: index % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: valueAt(tick), x2: valueAt(tick), y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#eee" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: valueAt(tick), y: valueAxisPosition === "top" ? PLOT2.y - 12 : PLOT_BOTTOM2 + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: axisLabelFormatter?.(tick) ?? tick.toLocaleString("en-US") })
+    legacy ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+      showValueAxis ? ticks.map((tick, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { children: orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        index < ticks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: PLOT2.x, y: valueAt(ticks[index + 1]), width: PLOT2.width, height: Math.abs(valueAt(tick) - valueAt(ticks[index + 1])), fill: index % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: valueAt(tick), y2: valueAt(tick), stroke: "#eee" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT2.x - 8, y: valueAt(tick) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: axisLabelFormatter?.(tick) ?? tick.toLocaleString("en-US") })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        index < ticks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: valueAt(tick), y: PLOT2.y, width: Math.abs(valueAt(ticks[index + 1]) - valueAt(tick)), height: PLOT2.height, fill: index % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: valueAt(tick), x2: valueAt(tick), y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#eee" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: valueAt(tick), y: valueAxisPosition === "top" ? PLOT2.y - 12 : PLOT_BOTTOM2 + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: axisLabelFormatter?.(tick) ?? tick.toLocaleString("en-US") })
       ] }) }, tick)) : null,
-      showCategorySplitLine && orientation === "vertical" ? categories.map((_, index) => index % labelStep ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x + index * band, x2: PLOT2.x + index * band, y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#eee" }, index)) : null,
-      showCategoryAxis ? categories.map((name, index) => index % labelStep ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: orientation === "vertical" ? categoryAt(index) : PLOT2.x - 8, y: orientation === "vertical" ? PLOT_BOTTOM2 + 19 : categoryAt(index) + 4, textAnchor: orientation === "vertical" ? "middle" : "end", className: "sia-chart__axis-label", children: name }, index)) : null,
-      showValueAxis ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: orientation === "vertical" ? PLOT2.x : PLOT2.x + PLOT2.width, y1: orientation === "vertical" || valueAxisPosition === "top" ? PLOT2.y : PLOT_BOTTOM2, y2: orientation === "horizontal" && valueAxisPosition === "top" ? PLOT2.y : PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 }) : null,
-      showCategoryAxis ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: orientation === "vertical" ? PLOT2.x : valueAt(0), x2: orientation === "vertical" ? PLOT2.x + PLOT2.width : valueAt(0), y1: orientation === "vertical" ? valueAt(0) : PLOT2.y, y2: orientation === "vertical" ? valueAt(0) : PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 }) : null
-    ] }) : orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CartesianAxes, { categories, domain, band: true }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { orientation: "bottom", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.width, labels: ticks.map(formatChartNumber), gridLength: PLOT2.height }),
-      categories.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT2.x - 10, y: PLOT2.y + (index + 0.5) * band + 4, textAnchor: "end", className: "sia-chart__axis-label", children: name }, `${name}-${index}`))
+      showCategorySplitLine && orientation === "vertical" ? categories.map((_, index) => index % labelStep ? null : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x + index * band, x2: PLOT2.x + index * band, y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: "#eee" }, index)) : null,
+      showCategoryAxis ? categories.map((name, index) => index % labelStep ? null : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: orientation === "vertical" ? categoryAt(index) : PLOT2.x - 8, y: orientation === "vertical" ? PLOT_BOTTOM2 + 19 : categoryAt(index) + 4, textAnchor: orientation === "vertical" ? "middle" : "end", className: "sia-chart__axis-label", children: name }, index)) : null,
+      showValueAxis ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: orientation === "vertical" ? PLOT2.x : PLOT2.x + PLOT2.width, y1: orientation === "vertical" || valueAxisPosition === "top" ? PLOT2.y : PLOT_BOTTOM2, y2: orientation === "horizontal" && valueAxisPosition === "top" ? PLOT2.y : PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 }) : null,
+      showCategoryAxis ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: orientation === "vertical" ? PLOT2.x : valueAt(0), x2: orientation === "vertical" ? PLOT2.x + PLOT2.width : valueAt(0), y1: orientation === "vertical" ? valueAt(0) : PLOT2.y, y2: orientation === "vertical" ? valueAt(0) : PLOT_BOTTOM2, stroke: "#008acd", strokeWidth: 2 }) : null
+    ] }) : orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CartesianAxes, { categories, domain, band: true }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { orientation: "bottom", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.width, labels: ticks.map(formatChartNumber), gridLength: PLOT2.height }),
+      categories.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT2.x - 10, y: PLOT2.y + (index + 0.5) * band + 4, textAnchor: "end", className: "sia-chart__axis-label", children: name }, `${name}-${index}`))
     ] }),
-    tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { label: `${name}\u6570\u636E`, tooltip: axisTooltip(index), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: orientation === "vertical" ? categoryAt(index) - band / 2 : PLOT2.x, y: orientation === "vertical" ? PLOT2.y : categoryAt(index) - band / 2, width: orientation === "vertical" ? band : PLOT2.width, height: orientation === "vertical" ? PLOT2.height : band, fill: "transparent" }) }, `axis-${index}`)) : null,
+    tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { label: `${name}\u6570\u636E`, tooltip: axisTooltip(index), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: orientation === "vertical" ? categoryAt(index) - band / 2 : PLOT2.x, y: orientation === "vertical" ? PLOT2.y : categoryAt(index) - band / 2, width: orientation === "vertical" ? band : PLOT2.width, height: orientation === "vertical" ? PLOT2.height : band, fill: "transparent" }) }, `axis-${index}`)) : null,
     activeSeries.map((item, seriesIndex) => {
       const originalSeriesIndex = series.indexOf(item);
       const seriesColor = getColor(originalSeriesIndex, item.color, palette);
@@ -4987,14 +5011,14 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
       const groupCenter = (index) => categoryAt(index) - band / 2 + (band - occupied) / 2 + groupWidths.slice(0, groupIndex).reduce((sum, width) => sum + width, 0) + groupIndex * gap + groupWidths[groupIndex] / 2;
       const minimumIndex = seriesValues.indexOf(Math.min(...seriesValues));
       const maximumIndex = seriesValues.indexOf(Math.max(...seriesValues));
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-        statistics && item.statisticLines ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartBarStatistics, { values: statistics, kinds: item.statisticLines, project: valueAt, plot: PLOT2, horizontal: orientation === "horizontal", color: seriesColor, gradient: item.fillGradient, seriesName: item.name }) : null,
-        item.markAverage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { className: "sia-chart__mark-line", style: legacy ? { color: seriesColor } : void 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: orientation === "vertical" ? PLOT2.x : averagePosition, y1: orientation === "vertical" ? averagePosition : PLOT2.y, x2: orientation === "vertical" ? PLOT2.x + PLOT2.width : averagePosition, y2: orientation === "vertical" ? averagePosition : PLOT_BOTTOM2, stroke: seriesColor }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: orientation === "vertical" ? PLOT2.x + PLOT2.width + (legacy ? 8 : -4) : averagePosition + 6, y: orientation === "vertical" ? averagePosition + (legacy ? 4 : -6) : PLOT2.y + 12, textAnchor: orientation === "vertical" && !legacy ? "end" : "start", children: legacy ? Number(average.toFixed(2)) : `\u5747\u503C ${formatChartNumber(average)}` })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+        statistics && item.statisticLines ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartBarStatistics, { values: statistics, kinds: item.statisticLines, project: valueAt, plot: PLOT2, horizontal: orientation === "horizontal", color: seriesColor, gradient: item.fillGradient, seriesName: item.name }) : null,
+        item.markAverage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { className: "sia-chart__mark-line", style: legacy ? { color: seriesColor } : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: orientation === "vertical" ? PLOT2.x : averagePosition, y1: orientation === "vertical" ? averagePosition : PLOT2.y, x2: orientation === "vertical" ? PLOT2.x + PLOT2.width : averagePosition, y2: orientation === "vertical" ? averagePosition : PLOT_BOTTOM2, stroke: seriesColor }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: orientation === "vertical" ? PLOT2.x + PLOT2.width + (legacy ? 8 : -4) : averagePosition + 6, y: orientation === "vertical" ? averagePosition + (legacy ? 4 : -6) : PLOT2.y + 12, textAnchor: orientation === "vertical" && !legacy ? "end" : "start", children: legacy ? Number(average.toFixed(2)) : `\u5747\u503C ${formatChartNumber(average)}` })
         ] }) : null,
-        item.markRange ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { className: "sia-chart__range-line", x1: orientation === "vertical" ? groupCenter(minimumIndex) : valueAt(seriesValues[minimumIndex]), y1: orientation === "vertical" ? valueAt(seriesValues[minimumIndex]) : groupCenter(minimumIndex), x2: orientation === "vertical" ? groupCenter(maximumIndex) : valueAt(seriesValues[maximumIndex]), y2: orientation === "vertical" ? valueAt(seriesValues[maximumIndex]) : groupCenter(maximumIndex), stroke: seriesColor, strokeDasharray: "7 7" }) : null,
-        item.markPoints?.map((mark, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPin, { point: orientation === "vertical" ? [groupCenter(mark.index), valueAt(mark.value)] : [valueAt(mark.value), groupCenter(mark.index)], color: seriesColor, label: mark.label ?? String(mark.value) }, index)),
+        item.markRange ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { className: "sia-chart__range-line", x1: orientation === "vertical" ? groupCenter(minimumIndex) : valueAt(seriesValues[minimumIndex]), y1: orientation === "vertical" ? valueAt(seriesValues[minimumIndex]) : groupCenter(minimumIndex), x2: orientation === "vertical" ? groupCenter(maximumIndex) : valueAt(seriesValues[maximumIndex]), y2: orientation === "vertical" ? valueAt(seriesValues[maximumIndex]) : groupCenter(maximumIndex), stroke: seriesColor, strokeDasharray: "7 7" }) : null,
+        item.markPoints?.map((mark, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPin, { point: orientation === "vertical" ? [groupCenter(mark.index), valueAt(mark.value)] : [valueAt(mark.value), groupCenter(mark.index)], color: seriesColor, label: mark.label ?? String(mark.value) }, index)),
         categories.map((name, index) => {
           const datum = barDatum(item.data[index] ?? 0);
           const value = datum.value;
@@ -5004,12 +5028,12 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
             const slotGroup = layout.rows[seriesIndex]?.find(Boolean)?.group ?? 0;
             const stackTop = Math.max(0, ...layout.rows.map((row) => row[index]).filter((point) => point?.group === slotGroup).map((point) => point.end));
             const slot = groupCenter(index), zero = valueAt(stackTop), slotWidth = Math.max(8, groupWidths[slotGroup] ?? 10);
-            return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { ...transfer.props(originalSeriesIndex, index), label: `${item.name}\uFF0C${name}\uFF0C\u7A7A\u69FD`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { ...transfer.props(originalSeriesIndex, index), label: `${item.name}\uFF0C${name}\uFF0C\u7A7A\u69FD`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
               item.name,
               " ",
               name,
               "\uFF1A\u7A7A\u69FD"
-            ] }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: orientation === "vertical" ? slot - slotWidth / 2 : zero - 7, y: orientation === "vertical" ? zero - 14 : slot - slotWidth / 2, width: orientation === "vertical" ? slotWidth : 14, height: orientation === "vertical" ? 14 : slotWidth, fill: "transparent", stroke: seriesColor, strokeDasharray: "3 2" }) }, `${name}-${index}`);
+            ] }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: orientation === "vertical" ? slot - slotWidth / 2 : zero - 7, y: orientation === "vertical" ? zero - 14 : slot - slotWidth / 2, width: orientation === "vertical" ? slotWidth : 14, height: orientation === "vertical" ? 14 : slotWidth, fill: "transparent", stroke: seriesColor, strokeDasharray: "3 2" }) }, `${name}-${index}`);
           }
           const previous = placement.start;
           const groupIndex2 = placement.group;
@@ -5028,7 +5052,7 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
           const color = (emphasized ? datum.emphasisColor ?? item.emphasisColor : void 0) ?? datum.color ?? seriesColor;
           const resolvedBorderColor = (emphasized ? datum.emphasisBorderColor ?? item.emphasisBorderColor : void 0) ?? datum.borderColor ?? item.borderColor;
           const extreme = item.markMin && value === Math.min(...seriesValues) || item.markMax && value === Math.max(...seriesValues);
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { points: [[0, start], [0, end]], enabled: props.animation !== false && !dragBar, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: (motion) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: [[0, start], [0, end]], enabled: props.animation !== false && !dragBar, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: (motion) => {
             const animatedStart = motion[0][1];
             const animatedEnd = motion[1][1];
             const animatedX = orientation === "vertical" ? x : Math.min(animatedStart, animatedEnd);
@@ -5044,13 +5068,13 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
             const borderWidth = Math.min((emphasized ? datum.emphasisBorderWidth ?? item.emphasisBorderWidth : void 0) ?? datum.borderWidth ?? item.borderWidth ?? 0, animatedWidth, animatedHeight);
             const labelY = labelPosition === "top" ? animatedY - 6 : labelPosition === "bottom" ? animatedY + animatedHeight + 14 : labelPosition === "insideTop" ? animatedY + 14 : animatedY + animatedHeight / 2 + 4;
             const label = (emphasized ? item.emphasisLabelFormatter?.(value, name, index) : void 0) ?? item.labelFormatter?.(value, name, index) ?? datum.label ?? (legacy ? value.toLocaleString("en-US") : formatChartNumber(value));
-            return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
               ChartMark,
               {
                 className: calculable ? "sia-chart__calculable" : void 0,
                 label: `${item.name}\uFF0C${name}\uFF0C${formatChartNumber(value)}`,
                 style: invisible(color) ? { pointerEvents: "none" } : void 0,
-                tooltip: tooltipTrigger === "axis" ? axisTooltip(index) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }),
+                tooltip: tooltipTrigger === "axis" ? axisTooltip(index) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }),
                 tooltipPoint: [x + width / 2, y],
                 onPointerDown: (event) => {
                   if (!calculable) return;
@@ -5091,10 +5115,10 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
                 onBlur: () => setHoveredBar(void 0),
                 ...transferProps,
                 children: [
-                  gradient ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: gradient.start[0], y1: gradient.start[1], x2: gradient.end[0], y2: gradient.end[1], children: gradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: animatedX + borderWidth / 2, y: animatedY + borderWidth / 2, width: Math.max(0, animatedWidth - borderWidth), height: Math.max(0, animatedHeight - borderWidth), rx: item.radius ?? (legacy ? 5 : 4), fill: gradient ? `url(#${gradientId})` : color, stroke: resolvedBorderColor, strokeWidth: borderWidth, opacity: datum.opacity ?? item.opacity, style: { animation: "none", transition: "none" }, className: "sia-chart__bar" }),
-                  showLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: labelX, y: labelY, textAnchor: labelPosition === "left" || labelPosition === "insideRight" ? "end" : labelPosition === "right" || labelPosition === "insideLeft" ? "start" : "middle", style: { fill: item.labelColor ?? (inside ? "#fff" : legacy ? gradient ? `url(#${gradientId})` : color : void 0), ...item.labelStyle, ...datum.labelStyle, ...emphasized ? { ...item.emphasisLabelStyle, ...datum.emphasisLabelStyle } : void 0 }, className: "sia-chart__point-label", children: typeof label === "string" && label.includes("\n") ? label.split("\n").map((line, i, lines) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: labelX, dy: i === 0 ? -(lines.length - 1) * 14 : 14, children: line || " " }, i)) : label }) : null,
-                  extreme ? legacy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPin, { point: orientation === "vertical" ? [x + width / 2, y] : [x + width, y + height / 2], color, label: String(value) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: orientation === "vertical" ? x + width / 2 : x + width, cy: orientation === "vertical" ? y : y + height / 2, r: 5, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 }) : null
+                  gradient ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("linearGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", x1: gradient.start[0], y1: gradient.start[1], x2: gradient.end[0], y2: gradient.end[1], children: gradient.stops.map((stop, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, i)) }) }) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: animatedX + borderWidth / 2, y: animatedY + borderWidth / 2, width: Math.max(0, animatedWidth - borderWidth), height: Math.max(0, animatedHeight - borderWidth), rx: item.radius ?? (legacy ? 5 : 4), fill: gradient ? `url(#${gradientId})` : color, stroke: resolvedBorderColor, strokeWidth: borderWidth, opacity: datum.opacity ?? item.opacity, style: { animation: "none", transition: "none" }, className: "sia-chart__bar" }),
+                  showLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: labelX, y: labelY, textAnchor: labelPosition === "left" || labelPosition === "insideRight" ? "end" : labelPosition === "right" || labelPosition === "insideLeft" ? "start" : "middle", style: { fill: item.labelColor ?? (inside ? "#fff" : legacy ? gradient ? `url(#${gradientId})` : color : void 0), ...item.labelStyle, ...datum.labelStyle, ...emphasized ? { ...item.emphasisLabelStyle, ...datum.emphasisLabelStyle } : void 0 }, className: "sia-chart__point-label", children: typeof label === "string" && label.includes("\n") ? label.split("\n").map((line, i, lines) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { x: labelX, dy: i === 0 ? -(lines.length - 1) * 14 : 14, children: line || " " }, i)) : label }) : null,
+                  extreme ? legacy ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPin, { point: orientation === "vertical" ? [x + width / 2, y] : [x + width, y + height / 2], color, label: String(value) }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: orientation === "vertical" ? x + width / 2 : x + width, cy: orientation === "vertical" ? y : y + height / 2, r: 5, fill: color, stroke: "var(--sia-color-surface)", strokeWidth: 2 }) : null
                 ]
               },
               `${name}-${index}`
@@ -5103,29 +5127,29 @@ var BarChart = (0, import_react34.forwardRef)(function BarChart2({ valueTransfer
         })
       ] }, `${item.name}-${seriesIndex}`);
     }),
-    calculable && calculableMode === "transfer" ? transfer.islands.map((island, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { ...transfer.props(-1, index), label: `\u5B64\u5C9B ${island.name} ${island.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    calculable && calculableMode === "transfer" ? transfer.islands.map((island, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { ...transfer.props(-1, index), label: `\u5B64\u5C9B ${island.name} ${island.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
       island.seriesName,
       " ",
       island.name,
       "\uFF1A",
       island.value
     ] }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: island.x, cy: island.y, r: 20, fill: "#fff", stroke: "#2ec7c9", strokeWidth: 2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: island.x, y: island.y + 4, textAnchor: "middle", fontSize: 11, children: island.value })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: island.x, cy: island.y, r: 20, fill: "#fff", stroke: "#2ec7c9", strokeWidth: 2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: island.x, y: island.y + 4, textAnchor: "middle", fontSize: 11, children: island.value })
     ] }, `bar-island-${index}`)) : null
   ] });
 });
-var ScatterChart = (0, import_react34.forwardRef)(function ScatterChart2({ symbolAnimation = false, animationProgress, animationDurationUpdate = 500, statisticPoints = [], statisticLines = [], annotations = [], data: initialData, toolbox, showXAxis = true, showXSplitLine = true, showYSplitLine = true, tooltipFormatter, plotBounds, xDomain: fixedXDomain, yDomain: fixedYDomain, showPointLabels = false, yAxisPosition = "left", xCategories, xFormatter, crosshair = false, markColor, xSplitNumber = 5, ySplitNumber = 5, symbolSize, markAppearance = "label", markByCategory = false, xUnit = "", yUnit = "", minSymbolRadius = 5, xLabel, yLabel, xAxisType = "value", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, dataZoom = false, zoom, defaultZoom, onZoomChange, visualMap, markAverage, markExtremes = false, largeThreshold = 1200, onDataClick, palette, ...props }, ref) {
-  const [data, setData] = (0, import_react34.useState)(initialData);
-  const [emphasizedPoint, setEmphasizedPoint] = (0, import_react34.useState)(null);
-  const [emphasizedAnnotation, setEmphasizedAnnotation] = (0, import_react34.useState)();
-  (0, import_react34.useEffect)(() => setData(initialData), [initialData]);
+var ScatterChart = (0, import_react35.forwardRef)(function ScatterChart2({ symbolAnimation = false, animationProgress, animationDurationUpdate = 500, statisticPoints = [], statisticLines = [], annotations = [], data: initialData, toolbox, showXAxis = true, showXSplitLine = true, showYSplitLine = true, tooltipFormatter, plotBounds, xDomain: fixedXDomain, yDomain: fixedYDomain, showPointLabels = false, yAxisPosition = "left", xCategories, xFormatter, crosshair = false, markColor, xSplitNumber = 5, ySplitNumber = 5, symbolSize, markAppearance = "label", markByCategory = false, xUnit = "", yUnit = "", minSymbolRadius = 5, xLabel, yLabel, xAxisType = "value", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, dataZoom = false, zoom, defaultZoom, onZoomChange, visualMap, markAverage, markExtremes = false, largeThreshold = 1200, onDataClick, palette, ...props }, ref) {
+  const [data, setData] = (0, import_react35.useState)(initialData);
+  const [emphasizedPoint, setEmphasizedPoint] = (0, import_react35.useState)(null);
+  const [emphasizedAnnotation, setEmphasizedAnnotation] = (0, import_react35.useState)();
+  (0, import_react35.useEffect)(() => setData(initialData), [initialData]);
   const plot = plotBounds ?? PLOT, bottom = plot.y + plot.height;
   const [zoomValue, setZoomValue] = useZoom(zoom, defaultZoom, onZoomChange);
   const allCategories = [...new Set(data.map((item) => item.category).filter((value) => Boolean(value)))];
   const legend = useLegendSelection(allCategories, legendSelected, onLegendSelectionChange);
   const activeData = data.filter((item) => !item.category || legend.isSelected(item.category));
-  const sorted = (0, import_react34.useMemo)(() => [...activeData].sort((left, right) => left.x - right.x), [activeData]);
+  const sorted = (0, import_react35.useMemo)(() => [...activeData].sort((left, right) => left.x - right.x), [activeData]);
   const startIndex = dataZoom ? Math.floor(Math.min(...zoomValue) / 100 * Math.max(0, sorted.length - 1)) : 0;
   const endIndex = dataZoom ? Math.max(startIndex + 1, Math.ceil(Math.max(...zoomValue) / 100 * sorted.length)) : sorted.length;
   const categoryWindow = xCategories ? scatterCategoryWindow(xCategories, dataZoom ? zoomValue : [0, 100]) : void 0;
@@ -5140,10 +5164,10 @@ var ScatterChart = (0, import_react34.forwardRef)(function ScatterChart2({ symbo
   const visualMinimum = visualMap?.min ?? (visualValues.length ? Math.min(...visualValues) : 0);
   const visualMaximum = visualMap?.max ?? (visualValues.length ? Math.max(...visualValues) : 1);
   const visualColors = visualMap?.colors ?? ["#e6f4ff", "#1677ff"];
-  const [selectedPieces, setSelectedPieces] = (0, import_react34.useState)([]);
-  const [visualRange, setVisualRange] = (0, import_react34.useState)();
+  const [selectedPieces, setSelectedPieces] = (0, import_react35.useState)([]);
+  const [visualRange, setVisualRange] = (0, import_react35.useState)();
   const piecesKey = JSON.stringify(visualMap?.pieces ?? []);
-  (0, import_react34.useEffect)(() => setSelectedPieces([]), [piecesKey]);
+  (0, import_react35.useEffect)(() => setSelectedPieces([]), [piecesKey]);
   const statistics = scatterStatistics(visibleData, markByCategory);
   const plotted = visibleData.map((item, index) => {
     const x = linearScale(categoryWindow ? categoryWindow.indexOf(item.x) : item.x, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]);
@@ -5157,7 +5181,7 @@ var ScatterChart = (0, import_react34.forwardRef)(function ScatterChart2({ symbo
   }).filter((point) => (!visualMap?.calculable || !visualRange || point.visualValue >= visualRange[0] && point.visualValue <= visualRange[1]) && (!visualMap?.selectable || point.pieceIndex < 0 || selectedPieces[point.pieceIndex] !== false));
   const dimensions = data.some((d) => d.value !== void 0) ? 3 : 2;
   const coordinates = (d) => dimensions === 3 ? [d.x, d.y, d.value ?? 0] : [d.x, d.y];
-  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: allCategories.length ? allCategories.map((name) => ({ name, data: data.filter((d) => d.category === name).flatMap(coordinates) })) : [{ name: "\u6563\u70B9\u6570\u636E\uFF08x,y \u4EA4\u66FF\uFF09", data: data.flatMap(coordinates) }], onApply: (values) => {
+  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: allCategories.length ? allCategories.map((name) => ({ name, data: data.filter((d) => d.category === name).flatMap(coordinates) })) : [{ name: "\u6563\u70B9\u6570\u636E\uFF08x,y \u4EA4\u66FF\uFF09", data: data.flatMap(coordinates) }], onApply: (values) => {
     const cursors = values.map(() => 0);
     setData(data.map((d) => {
       const group = allCategories.length ? Math.max(0, allCategories.indexOf(d.category ?? "")) : 0, index = cursors[group];
@@ -5172,24 +5196,24 @@ var ScatterChart = (0, import_react34.forwardRef)(function ScatterChart2({ symbo
     setZoomValue(defaultZoom ? [...defaultZoom] : [0, 100]);
     toolbox.onRestore?.();
   } } : toolbox;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, ref, palette, empty: !visibleData.length, ariaLabel: props.ariaLabel ?? "\u6563\u70B9\u56FE", children: [
-    crosshair ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartCrosshair, { bounds: plot, xDomain: [xDomain[0], xDomain[1]], yDomain: [yDomain[0], yDomain[1]], formatX: (value) => {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, ref, palette, empty: !visibleData.length, ariaLabel: props.ariaLabel ?? "\u6563\u70B9\u56FE", children: [
+    crosshair ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartCrosshair, { bounds: plot, xDomain: [xDomain[0], xDomain[1]], yDomain: [yDomain[0], yDomain[1]], formatX: (value) => {
       const axisValue = categoryWindow ? categoryWindow[Math.max(0, Math.min(categoryWindow.length - 1, Math.round(value)))] ?? 0 : value;
       return xFormatter ? xFormatter(axisValue) : xAxisType === "time" ? new Date(axisValue).toLocaleString() : `${Number(axisValue.toFixed(2))}${xUnit}`;
     }, formatY: (value) => `${Number(value.toFixed(2))}${yUnit}` }) : null,
-    showLegend && allCategories.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { items: allCategories.map((name, index) => ({ name, color: getColor(index, void 0, palette), disabled: !legend.isSelected(name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
-    showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { positions: timeWindow ? xTicks.map((value) => (value - timeWindow[0]) / Math.max(1, timeWindow[1] - timeWindow[0])) : void 0, boundaryGap: !!categoryWindow, tickInterval: categoryWindow ? Math.max(1, Math.ceil(categoryWindow.length / 7)) : 1, orientation: "bottom", x: plot.x, y: bottom, length: plot.width, labels: xTicks.map((value) => xFormatter ? xFormatter(value) : xAxisType === "time" ? new Date(value).toLocaleDateString() : `${formatChartNumber(value)}${xUnit}`), gridLength: showXSplitLine ? plot.height : void 0 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { boundaryGap: false, orientation: yAxisPosition, x: yAxisPosition === "right" ? plot.x + plot.width : plot.x, y: bottom, length: plot.height, labels: yTicks.map((value) => `${formatChartNumber(value)}${yUnit}`), gridLength: showYSplitLine ? plot.width : void 0 }),
-    xLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: plot.x + plot.width, y: bottom + 38, textAnchor: "end", className: "sia-chart__axis-name", children: xLabel }) : null,
-    yLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: plot.x, y: plot.y - 12, textAnchor: "start", className: "sia-chart__axis-name", children: yLabel }) : null,
-    visualMap ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartVisualMap, { calculable: visualMap.calculable, orientation: visualMap.orientation, range: visualRange ?? [visualMinimum, visualMaximum], onRangeChange: setVisualRange, min: visualMinimum, max: visualMaximum, colors: visualColors, pieces: visualMap.pieces, selectedPieces, onPieceToggle: visualMap.selectable ? (index) => setSelectedPieces((current) => {
+    showLegend && allCategories.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { items: allCategories.map((name, index) => ({ name, color: getColor(index, void 0, palette), disabled: !legend.isSelected(name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
+    showXAxis ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { positions: timeWindow ? xTicks.map((value) => (value - timeWindow[0]) / Math.max(1, timeWindow[1] - timeWindow[0])) : void 0, boundaryGap: !!categoryWindow, tickInterval: categoryWindow ? Math.max(1, Math.ceil(categoryWindow.length / 7)) : 1, orientation: "bottom", x: plot.x, y: bottom, length: plot.width, labels: xTicks.map((value) => xFormatter ? xFormatter(value) : xAxisType === "time" ? new Date(value).toLocaleDateString() : `${formatChartNumber(value)}${xUnit}`), gridLength: showXSplitLine ? plot.height : void 0 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { boundaryGap: false, orientation: yAxisPosition, x: yAxisPosition === "right" ? plot.x + plot.width : plot.x, y: bottom, length: plot.height, labels: yTicks.map((value) => `${formatChartNumber(value)}${yUnit}`), gridLength: showYSplitLine ? plot.width : void 0 }),
+    xLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: plot.x + plot.width, y: bottom + 38, textAnchor: "end", className: "sia-chart__axis-name", children: xLabel }) : null,
+    yLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: plot.x, y: plot.y - 12, textAnchor: "start", className: "sia-chart__axis-name", children: yLabel }) : null,
+    visualMap ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartVisualMap, { calculable: visualMap.calculable, orientation: visualMap.orientation, range: visualRange ?? [visualMinimum, visualMaximum], onRangeChange: setVisualRange, min: visualMinimum, max: visualMaximum, colors: visualColors, pieces: visualMap.pieces, selectedPieces, onPieceToggle: visualMap.selectable ? (index) => setSelectedPieces((current) => {
       const next = [...current];
       next[index] = current[index] === false;
       return next;
     }) : void 0, x: visualMap.x ?? plot.x + plot.width - 116, y: visualMap.y ?? 322, width: visualMap.width ?? 116, label: visualMap.label }) : null,
-    markAverage === "x" || markAverage === "both" ? statistics.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { className: "sia-chart__mark-line", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { style: { stroke: markColor ?? (markByCategory ? getColor(Math.max(0, allCategories.indexOf(stat.category)), void 0, palette) : void 0) }, x1: linearScale(stat.averageX, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]), y1: plot.y, x2: linearScale(stat.averageX, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]), y2: bottom }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x: linearScale(stat.averageX, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]) + 5, y: plot.y + 12, children: [
+    markAverage === "x" || markAverage === "both" ? statistics.map((stat) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { className: "sia-chart__mark-line", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { style: { stroke: markColor ?? (markByCategory ? getColor(Math.max(0, allCategories.indexOf(stat.category)), void 0, palette) : void 0) }, x1: linearScale(stat.averageX, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]), y1: plot.y, x2: linearScale(stat.averageX, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]), y2: bottom }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x: linearScale(stat.averageX, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]) + 5, y: plot.y + 12, children: [
         markByCategory ? stat.category + " " : "",
         "\u5747\u503C ",
         stat.averageX.toFixed(2)
@@ -5199,26 +5223,26 @@ var ScatterChart = (0, import_react34.forwardRef)(function ScatterChart2({ symbo
       const y = linearScale(stat.averageY, [yDomain[0], yDomain[1]], [bottom, plot.y]);
       const color = markColor ?? (markByCategory ? getColor(Math.max(0, allCategories.indexOf(stat.category)), void 0, palette) : void 0);
       const pin = markAppearance === "pin", end = plot.x + plot.width;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { className: "sia-chart__mark-line", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { style: { stroke: color }, x1: plot.x, y1: y, x2: end, y2: y }),
-        pin ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: plot.x, cy: y, r: 2, fill: color }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: `M ${end - 7} ${y - 4} L ${end} ${y} L ${end - 7} ${y + 4} Z`, fill: color })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { className: "sia-chart__mark-line", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { style: { stroke: color }, x1: plot.x, y1: y, x2: end, y2: y }),
+        pin ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: plot.x, cy: y, r: 2, fill: color }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: `M ${end - 7} ${y - 4} L ${end} ${y} L ${end - 7} ${y + 4} Z`, fill: color })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: pin ? end + 8 : end - 4, y: pin ? y + 4 : y - 6, textAnchor: pin ? "start" : "end", style: pin ? { fill: color } : void 0, children: pin ? Number(stat.averageY.toFixed(2)) : `${markByCategory ? stat.category + " " : ""}\u5747\u503C ${stat.averageY.toFixed(2)}` })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: pin ? end + 8 : end - 4, y: pin ? y + 4 : y - 6, textAnchor: pin ? "start" : "end", style: pin ? { fill: color } : void 0, children: pin ? Number(stat.averageY.toFixed(2)) : `${markByCategory ? stat.category + " " : ""}\u5747\u503C ${stat.averageY.toFixed(2)}` })
       ] }, stat.category);
     }) : null,
-    plotted.length >= largeThreshold ? buildScatterBatches(plotted.map(({ x, y, item, color }) => ({ x, y, color, radius: Math.max(1, (item.size ?? 6) / 2) }))).map((batch) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: batch.path, "data-point-count": batch.count, fill: batch.color, opacity: 0.66, className: "sia-chart__large-scatter" }, batch.color)) : plotted.map(({ item, index, x, y, color: baseColor }) => {
+    plotted.length >= largeThreshold ? buildScatterBatches(plotted.map(({ x, y, item, color }) => ({ x, y, color, radius: Math.max(1, (item.size ?? 6) / 2) }))).map((batch) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: batch.path, "data-point-count": batch.count, fill: batch.color, opacity: 0.66, className: "sia-chart__large-scatter" }, batch.color)) : plotted.map(({ item, index, x, y, color: baseColor }) => {
       const emphasized = emphasizedPoint === index;
       const color = emphasized ? item.emphasisColor ?? baseColor : baseColor;
       const borderWidth = emphasized ? item.emphasisBorderWidth ?? item.borderWidth : item.borderWidth;
       const name = item.name ?? `\u6570\u636E\u70B9 ${index + 1}`;
       const stats = statistics.find((s) => s.category === (markByCategory ? item.category ?? "" : ""));
       const extreme = markExtremes && stats && (item.y === stats.maxY || item.y === stats.minY);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartScatterMotion, { x, y, radius: item.size ?? 9, enabled: symbolAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${name}\uFF0C${item.x}\uFF0C${item.y}`, onPointerEnter: () => setEmphasizedPoint(index), onPointerLeave: () => setEmphasizedPoint(null), onFocus: () => setEmphasizedPoint(index), onBlur: () => setEmphasizedPoint(null), tooltip: tooltipFormatter ? tooltipFormatter(item) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: name }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: item.category }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("b", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartScatterMotion, { x, y, radius: item.size ?? 9, enabled: symbolAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${name}\uFF0C${item.x}\uFF0C${item.y}`, onPointerEnter: () => setEmphasizedPoint(index), onPointerLeave: () => setEmphasizedPoint(null), onFocus: () => setEmphasizedPoint(index), onBlur: () => setEmphasizedPoint(null), tooltip: tooltipFormatter ? tooltipFormatter(item) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: item.category }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("b", { children: [
           xAxisType === "time" ? new Date(item.x).toLocaleString() : xFormatter ? xFormatter(item.x) : item.x,
           xUnit,
           ", ",
@@ -5227,28 +5251,28 @@ var ScatterChart = (0, import_react34.forwardRef)(function ScatterChart2({ symbo
           item.value !== void 0 ? `, ${item.value}` : ""
         ] })
       ] }), tooltipPoint: [x, y], onPointerUp: (event) => onDataClick?.({ name, value: [item.x, item.y], seriesName: item.category, data: item, nativeEvent: event }), children: [
-        item.symbol === "image" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("image", { "data-scatter-symbol": "image", href: item.symbolImage, x: x - (item.size ?? 9), y: y - (item.size ?? 9), width: (item.size ?? 9) * 2, height: (item.size ?? 9) * 2 }) : item.symbol === "emptyCircle" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { "data-scatter-symbol": "emptyCircle", cx: x, cy: y, r: item.size ?? 9, fill: item.symbolFill ?? "#fff", stroke: color, strokeWidth: borderWidth ?? 2 }) : item.symbol === "emptyTriangle" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { "data-scatter-symbol": "emptyTriangle", d: `M ${x} ${y - (item.size ?? 9)} L ${x + (item.size ?? 9)} ${y + (item.size ?? 9)} L ${x - (item.size ?? 9)} ${y + (item.size ?? 9)} Z`, fill: item.symbolFill ?? "#fff", stroke: color, strokeWidth: borderWidth ?? 2, transform: `rotate(${item.symbolRotate ?? 0} ${x} ${y})` }) : item.symbol === "square" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: x - Math.max(5, item.size ?? 9), y: y - Math.max(5, item.size ?? 9), width: Math.max(10, (item.size ?? 9) * 2), height: Math.max(10, (item.size ?? 9) * 2), fill: color, className: "sia-chart__bubble" }) : item.symbol === "diamond" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: x - Math.max(4, (item.size ?? 9) * 0.7), y: y - Math.max(4, (item.size ?? 9) * 0.7), width: Math.max(8, (item.size ?? 9) * 1.4), height: Math.max(8, (item.size ?? 9) * 1.4), transform: `rotate(45 ${x} ${y})`, fill: color, className: "sia-chart__bubble" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: x, cy: y, r: Math.max(minSymbolRadius, item.size ?? 9), fill: color, className: "sia-chart__bubble" }),
-        (emphasized ? item.showEmphasisLabel ?? item.showLabel ?? showPointLabels : item.showLabel ?? showPointLabels) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y: y - Math.max(minSymbolRadius, item.size ?? 9) - 7, textAnchor: "middle", className: "sia-chart__point-label", style: { fill: color, ...item.labelStyle }, children: item.labelFormatter?.(item) ?? item.label ?? name }) : null,
-        extreme && markAppearance === "label" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y: y - Math.max(5, item.size ?? 9) - 7, textAnchor: "middle", className: "sia-chart__point-label", children: formatChartNumber(item.y) }) : null
+        item.symbol === "image" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("image", { "data-scatter-symbol": "image", href: item.symbolImage, x: x - (item.size ?? 9), y: y - (item.size ?? 9), width: (item.size ?? 9) * 2, height: (item.size ?? 9) * 2 }) : item.symbol === "emptyCircle" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { "data-scatter-symbol": "emptyCircle", cx: x, cy: y, r: item.size ?? 9, fill: item.symbolFill ?? "#fff", stroke: color, strokeWidth: borderWidth ?? 2 }) : item.symbol === "emptyTriangle" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { "data-scatter-symbol": "emptyTriangle", d: `M ${x} ${y - (item.size ?? 9)} L ${x + (item.size ?? 9)} ${y + (item.size ?? 9)} L ${x - (item.size ?? 9)} ${y + (item.size ?? 9)} Z`, fill: item.symbolFill ?? "#fff", stroke: color, strokeWidth: borderWidth ?? 2, transform: `rotate(${item.symbolRotate ?? 0} ${x} ${y})` }) : item.symbol === "square" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: x - Math.max(5, item.size ?? 9), y: y - Math.max(5, item.size ?? 9), width: Math.max(10, (item.size ?? 9) * 2), height: Math.max(10, (item.size ?? 9) * 2), fill: color, className: "sia-chart__bubble" }) : item.symbol === "diamond" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: x - Math.max(4, (item.size ?? 9) * 0.7), y: y - Math.max(4, (item.size ?? 9) * 0.7), width: Math.max(8, (item.size ?? 9) * 1.4), height: Math.max(8, (item.size ?? 9) * 1.4), transform: `rotate(45 ${x} ${y})`, fill: color, className: "sia-chart__bubble" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: x, cy: y, r: Math.max(minSymbolRadius, item.size ?? 9), fill: color, className: "sia-chart__bubble" }),
+        (emphasized ? item.showEmphasisLabel ?? item.showLabel ?? showPointLabels : item.showLabel ?? showPointLabels) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y: y - Math.max(minSymbolRadius, item.size ?? 9) - 7, textAnchor: "middle", className: "sia-chart__point-label", style: { fill: color, ...item.labelStyle }, children: item.labelFormatter?.(item) ?? item.label ?? name }) : null,
+        extreme && markAppearance === "label" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y: y - Math.max(5, item.size ?? 9) - 7, textAnchor: "middle", className: "sia-chart__point-label", children: formatChartNumber(item.y) }) : null
       ] }, `${name}-${index}`) }, `${name}-${index}`);
     }),
     markExtremes && markAppearance === "pin" ? statistics.flatMap((stat) => [stat.maxY, stat.minY].map((value, kind) => {
       const point = plotted.find((p) => p.item.y === value && (!markByCategory || (p.item.category ?? "") === stat.category));
       if (!point) return null;
       const { x, y, color } = point, label = String(value), radius = Math.max(15, label.length * 4);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${stat.category} ${kind ? "\u6700\u5C0F\u503C" : "\u6700\u5927\u503C"} ${label}${yUnit}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("strong", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${stat.category} ${kind ? "\u6700\u5C0F\u503C" : "\u6700\u5927\u503C"} ${label}${yUnit}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("strong", { children: [
           stat.category,
           " ",
           kind ? "\u6700\u5C0F\u503C" : "\u6700\u5927\u503C"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("b", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("b", { children: [
           label,
           yUnit
         ] })
       ] }), tooltipPoint: [x, y], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { "data-scatter-extreme": kind ? "min" : "max", d: `M ${x} ${y} C ${x - radius * 0.3} ${y - radius * 0.6} ${x - radius} ${y - radius} ${x - radius} ${y - radius * 1.6} A ${radius} ${radius} 0 1 1 ${x + radius} ${y - radius * 1.6} C ${x + radius} ${y - radius} ${x + radius * 0.3} ${y - radius * 0.6} ${x} ${y} Z`, fill: color }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y: y - radius * 1.6, textAnchor: "middle", dominantBaseline: "central", style: { fill: "#fff", fontSize: 12, pointerEvents: "none" }, children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { "data-scatter-extreme": kind ? "min" : "max", d: `M ${x} ${y} C ${x - radius * 0.3} ${y - radius * 0.6} ${x - radius} ${y - radius} ${x - radius} ${y - radius * 1.6} A ${radius} ${radius} 0 1 1 ${x + radius} ${y - radius * 1.6} C ${x + radius} ${y - radius} ${x + radius * 0.3} ${y - radius * 0.6} ${x} ${y} Z`, fill: color }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y: y - radius * 1.6, textAnchor: "middle", dominantBaseline: "central", style: { fill: "#fff", fontSize: 12, pointerEvents: "none" }, children: label })
       ] }, `${stat.category}-${kind}`);
     })) : null,
     statisticLines.map((mark) => {
@@ -5257,16 +5281,16 @@ var ScatterChart = (0, import_react34.forwardRef)(function ScatterChart2({ symbo
       const value = selected.reduce((sum, item) => sum + item[mark.dimension], 0) / selected.length;
       const vertical = mark.dimension === "x", position = vertical ? linearScale(value, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]) : linearScale(value, [yDomain[0], yDomain[1]], [bottom, plot.y]);
       const x1 = vertical ? position : plot.x, y1 = vertical ? bottom : position, x2 = vertical ? position : plot.x + plot.width, y2 = vertical ? plot.y : position, color = mark.color ?? "#2ec7c9", key = `statistic-${mark.name}`, width = emphasizedAnnotation === key ? 3.5 : 1.5;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { points: [[x1, y1], [x2, y2]], origin: [x1, y1], enabled: symbolAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: (frame) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: [[x1, y1], [x2, y2]], origin: [x1, y1], enabled: symbolAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: (frame) => {
         const [[x12, y12], [x22, y22]] = frame;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { "data-scatter-statistic": mark.dimension, label: `${mark.name}\uFF0C${value.toFixed(2)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: mark.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: value.toFixed(2) })
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { "data-scatter-statistic": mark.dimension, label: `${mark.name}\uFF0C${value.toFixed(2)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: mark.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: value.toFixed(2) })
         ] }), tooltipPoint: [x22, y22], onPointerEnter: () => setEmphasizedAnnotation(key), onPointerLeave: () => setEmphasizedAnnotation(void 0), onFocus: () => setEmphasizedAnnotation(key), onBlur: () => setEmphasizedAnnotation(void 0), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: x12, y1: y12, x2: x22, y2: y22, stroke: color, strokeWidth: width, strokeDasharray: "5 5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: x12, cy: y12, r: 2, fill: color }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: vertical ? `M ${x22 - 4} ${y22 + 8} L ${x22} ${y22} L ${x22 + 4} ${y22 + 8} Z` : `M ${x22 - 8} ${y22 - 4} L ${x22} ${y22} L ${x22 - 8} ${y22 + 4} Z`, fill: color }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: vertical ? x22 : x22 + 5, y: vertical ? y22 - 5 : y22 + 4, textAnchor: vertical ? "middle" : "start", style: { fill: color, fontSize: 12 }, children: value.toFixed(2) })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: x12, y1: y12, x2: x22, y2: y22, stroke: color, strokeWidth: width, strokeDasharray: "5 5" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: x12, cy: y12, r: 2, fill: color }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: vertical ? `M ${x22 - 4} ${y22 + 8} L ${x22} ${y22} L ${x22 + 4} ${y22 + 8} Z` : `M ${x22 - 8} ${y22 - 4} L ${x22} ${y22} L ${x22 - 8} ${y22 + 4} Z`, fill: color }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: vertical ? x22 : x22 + 5, y: vertical ? y22 - 5 : y22 + 4, textAnchor: vertical ? "middle" : "start", style: { fill: color, fontSize: 12 }, children: value.toFixed(2) })
         ] }, key);
       } }, key);
     }),
@@ -5276,33 +5300,33 @@ var ScatterChart = (0, import_react34.forwardRef)(function ScatterChart2({ symbo
       const point = selected.reduce((best, item) => (mark.kind === "max" ? item[mark.dimension] > best[mark.dimension] : item[mark.dimension] < best[mark.dimension]) ? item : best);
       const x = linearScale(categoryWindow ? categoryWindow.indexOf(point.x) : point.x, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]), y = linearScale(point.y, [yDomain[0], yDomain[1]], [bottom, plot.y]);
       const size = mark.size ?? 34, symbol = mark.symbol ?? "pin", color = mark.color ?? "#2ec7c9", key = `extreme-${mark.name}`, value = point[mark.dimension];
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartScatterMotion, { x, y, radius: size / 2, enabled: symbolAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { "data-scatter-statistic-point": mark.name, label: `${mark.name}\uFF0C${value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: mark.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: value })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartScatterMotion, { x, y, radius: size / 2, enabled: symbolAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { "data-scatter-statistic-point": mark.name, label: `${mark.name}\uFF0C${value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: mark.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: value })
       ] }), tooltipPoint: [x, y], onPointerEnter: () => setEmphasizedAnnotation(key), onPointerLeave: () => setEmphasizedAnnotation(void 0), onFocus: () => setEmphasizedAnnotation(key), onBlur: () => setEmphasizedAnnotation(void 0), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: chartMarkerPath(symbol, x, y, size), fill: color, stroke: mark.borderColor ?? color, strokeWidth: emphasizedAnnotation === key ? 4 : 2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y: symbol === "pin" ? y - size * 0.75 + 4 : y + 4, textAnchor: "middle", style: { fill: "#fff", fontSize: 12, pointerEvents: "none" }, children: value })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: chartMarkerPath(symbol, x, y, size), fill: color, stroke: mark.borderColor ?? color, strokeWidth: emphasizedAnnotation === key ? 4 : 2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y: symbol === "pin" ? y - size * 0.75 + 4 : y + 4, textAnchor: "middle", style: { fill: "#fff", fontSize: 12, pointerEvents: "none" }, children: value })
       ] }, key) }, key);
     }),
     annotations.filter((mark) => !mark.category || legend.isSelected(mark.category)).map((mark) => {
       const x = linearScale(categoryWindow ? categoryWindow.indexOf(mark.x) : mark.x, [xDomain[0], xDomain[1]], [plot.x, plot.x + plot.width]);
       const y = linearScale(mark.y, [yDomain[0], yDomain[1]], [bottom, plot.y]), radius = mark.radius ?? 20, color = mark.color ?? "#2ec7c9";
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartScatterMotion, { x, y, radius, enabled: symbolAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${mark.name}\uFF0C${mark.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: mark.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: mark.value.toLocaleString("en-US") })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartScatterMotion, { x, y, radius, enabled: symbolAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${mark.name}\uFF0C${mark.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: mark.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: mark.value.toLocaleString("en-US") })
       ] }), tooltipPoint: [x, y], onPointerEnter: () => setEmphasizedAnnotation(mark.name), onPointerLeave: () => setEmphasizedAnnotation(void 0), onFocus: () => setEmphasizedAnnotation(mark.name), onBlur: () => setEmphasizedAnnotation(void 0), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { "data-scatter-annotation": mark.name, cx: x, cy: y, r: radius, fill: "none", stroke: color, strokeWidth: emphasizedAnnotation === mark.name ? 4 : 2, pointerEvents: "stroke" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y: y - radius - 5, textAnchor: "middle", style: { fill: color, fontSize: 12, fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif" }, children: mark.value.toLocaleString("en-US") })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { "data-scatter-annotation": mark.name, cx: x, cy: y, r: radius, fill: "none", stroke: color, strokeWidth: emphasizedAnnotation === mark.name ? 4 : 2, pointerEvents: "stroke" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y: y - radius - 5, textAnchor: "middle", style: { fill: color, fontSize: 12, fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif" }, children: mark.value.toLocaleString("en-US") })
       ] }, `annotation-${mark.name}`) }, `annotation-${mark.name}`);
     })
   ] });
-  return dataZoom ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-chart-with-zoom", children: [
+  return dataZoom ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "sia-chart-with-zoom", children: [
     content,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue })
   ] }) : content;
 });
-var CandlestickChart = (0, import_react34.forwardRef)(function CandlestickChart2({ showAxes = true, data: initialData, valueDomain, axisLabelFormatter, activeIndex, onActiveIndexChange, seriesVisible: controlledVisible, onSeriesVisibilityChange, showLegend = true, showCategoryLabels = true, plotBounds, markPoints, seriesName, risingBorderColor, fallingBorderColor, borderWidth = 2, risingEmphasisColor, fallingEmphasisColor, maxBarWidth = 34, appearance = "sia", risingColor = "#f5222d", fallingColor = "#52c41a", hollowRising = false, dataZoom = false, zoom, defaultZoom, onZoomChange, markExtremes = false, onDataClick, toolbox, ...props }, ref) {
-  const [data, setData] = (0, import_react34.useState)(initialData), [internalActive, setInternalActive] = (0, import_react34.useState)(null), [internalVisible, setInternalVisible] = (0, import_react34.useState)(true);
+var CandlestickChart = (0, import_react35.forwardRef)(function CandlestickChart2({ showAxes = true, data: initialData, valueDomain, axisLabelFormatter, activeIndex, onActiveIndexChange, seriesVisible: controlledVisible, onSeriesVisibilityChange, showLegend = true, showCategoryLabels = true, plotBounds, markPoints, seriesName, risingBorderColor, fallingBorderColor, borderWidth = 2, risingEmphasisColor, fallingEmphasisColor, maxBarWidth = 34, appearance = "sia", risingColor = "#f5222d", fallingColor = "#52c41a", hollowRising = false, dataZoom = false, zoom, defaultZoom, onZoomChange, markExtremes = false, onDataClick, toolbox, ...props }, ref) {
+  const [data, setData] = (0, import_react35.useState)(initialData), [internalActive, setInternalActive] = (0, import_react35.useState)(null), [internalVisible, setInternalVisible] = (0, import_react35.useState)(true);
   const active = activeIndex === void 0 ? internalActive : activeIndex;
   const seriesVisible = controlledVisible ?? internalVisible;
   const setActive = (index) => {
@@ -5313,7 +5337,7 @@ var CandlestickChart = (0, import_react34.forwardRef)(function CandlestickChart2
     if (controlledVisible === void 0) setInternalVisible(visible);
     onSeriesVisibilityChange?.(visible);
   };
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     setData(initialData);
   }, [initialData]);
   const legacy = appearance === "macarons";
@@ -5327,20 +5351,20 @@ var CandlestickChart = (0, import_react34.forwardRef)(function CandlestickChart2
   const band = plot.width / Math.max(1, visibleData.length);
   const highest = Math.max(...visibleData.map((item) => item.high));
   const lowest = Math.min(...visibleData.map((item) => item.low));
-  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: data.map((d) => ({ name: d.name, data: [d.open, d.close, d.low, d.high] })), onApply: (values) => setData(data.map((d, i) => ({ ...d, open: values[i][0], close: values[i][1], low: values[i][2], high: values[i][3] }))) }), onRestore: () => {
+  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: data.map((d) => ({ name: d.name, data: [d.open, d.close, d.low, d.high] })), onApply: (values) => setData(data.map((d, i) => ({ ...d, open: values[i][0], close: values[i][1], low: values[i][2], high: values[i][3] }))) }), onRestore: () => {
     setData(initialData);
     setZoomValue(defaultZoom ? [...defaultZoom] : [0, 100]);
     setActive(null);
     setSeriesVisible(true);
     toolbox.onRestore?.();
   } } : toolbox;
-  const zoomControl = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue, dataShadow: data.map((d) => d.close), showDetail: !legacy });
-  const content = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, empty: !visibleData.length, ariaLabel: props.ariaLabel ?? "K \u7EBF\u56FE", children: [
-    showLegend && seriesName ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { x: (props.viewBoxSize?.[0] ?? 720) / 2, items: [{ name: seriesName, color: risingColor }], selected: { [seriesName]: seriesVisible }, onItemClick: () => setSeriesVisible(!seriesVisible) }) : null,
-    showAxes ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { boundaryGap: false, orientation: "left", x: plot.x, y: bottom, length: plot.height, labels: chartTicks(domain).map((v) => axisLabelFormatter ? axisLabelFormatter(v) : legacy ? v.toLocaleString("en-US") : formatChartNumber(v)), gridLength: plot.width }) : null,
-    showAxes ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: plot.x, y1: bottom, x2: plot.x + plot.width, y2: bottom, className: "sia-chart__axis-line" }) : null,
-    showCategoryLabels ? visibleData.map((d, i) => i % Math.max(1, Math.ceil(visibleData.length / 6)) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: plot.x + (i + 0.5) * band, y: bottom + 20, textAnchor: "middle", className: "sia-chart__axis-label", children: d.name }, d.name) : null) : null,
-    seriesVisible && active != null && active >= startIndex && active < endIndex ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { "data-candlestick-active-index": active, x: plot.x + (active - startIndex) * band, y: plot.y, width: band, height: plot.height, fill: "currentColor", opacity: 0.06, pointerEvents: "none" }) : null,
+  const zoomControl = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataZoom, { value: zoomValue, onChange: setZoomValue, dataShadow: data.map((d) => d.close), showDetail: !legacy });
+  const content = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, empty: !visibleData.length, ariaLabel: props.ariaLabel ?? "K \u7EBF\u56FE", children: [
+    showLegend && seriesName ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { x: (props.viewBoxSize?.[0] ?? 720) / 2, items: [{ name: seriesName, color: risingColor }], selected: { [seriesName]: seriesVisible }, onItemClick: () => setSeriesVisible(!seriesVisible) }) : null,
+    showAxes ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { boundaryGap: false, orientation: "left", x: plot.x, y: bottom, length: plot.height, labels: chartTicks(domain).map((v) => axisLabelFormatter ? axisLabelFormatter(v) : legacy ? v.toLocaleString("en-US") : formatChartNumber(v)), gridLength: plot.width }) : null,
+    showAxes ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: plot.x, y1: bottom, x2: plot.x + plot.width, y2: bottom, className: "sia-chart__axis-line" }) : null,
+    showCategoryLabels ? visibleData.map((d, i) => i % Math.max(1, Math.ceil(visibleData.length / 6)) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: plot.x + (i + 0.5) * band, y: bottom + 20, textAnchor: "middle", className: "sia-chart__axis-label", children: d.name }, d.name) : null) : null,
+    seriesVisible && active != null && active >= startIndex && active < endIndex ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { "data-candlestick-active-index": active, x: plot.x + (active - startIndex) * band, y: plot.y, width: band, height: plot.height, fill: "currentColor", opacity: 0.06, pointerEvents: "none" }) : null,
     seriesVisible ? visibleData.map((item, index) => {
       const x = plot.x + (index + 0.5) * band;
       const openY = linearScale(item.open, [domain[0], domain[1]], [bottom, plot.y]);
@@ -5352,32 +5376,32 @@ var CandlestickChart = (0, import_react34.forwardRef)(function CandlestickChart2
       const color = active === index + startIndex ? item.emphasisColor ?? (rising ? risingEmphasisColor : fallingEmphasisColor) ?? normalColor : normalColor;
       const stroke = item.borderColor ?? (rising ? risingBorderColor : fallingBorderColor) ?? normalColor;
       const candleWidth = Math.min(maxBarWidth, band * 0.6);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { onPointerMove: () => setActive(index + startIndex), onPointerLeave: () => setActive(null), onFocus: () => setActive(index + startIndex), onBlur: () => setActive(null), label: `${item.name}\uFF0C\u5F00\u76D8 ${item.open}\uFF0C\u6536\u76D8 ${item.close}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("strong", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { onPointerMove: () => setActive(index + startIndex), onPointerLeave: () => setActive(null), onFocus: () => setActive(index + startIndex), onBlur: () => setActive(null), label: `${item.name}\uFF0C\u5F00\u76D8 ${item.open}\uFF0C\u6536\u76D8 ${item.close}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("strong", { children: [
           seriesName,
           " ",
           item.name
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
           "\u5F00\u76D8 ",
           item.open,
           "\u3000\u6700\u9AD8 ",
           item.high
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
           "\u6536\u76D8 ",
           item.close,
           "\u3000\u6700\u4F4E ",
           item.low
         ] })
       ] }), tooltipPoint: [x, Math.min(openY, closeY)], onPointerUp: (event) => onDataClick?.({ name: item.name, value: [item.open, item.close, item.low, item.high], data: item, nativeEvent: event }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: x, y1: highY, x2: x, y2: lowY, stroke, strokeWidth: item.borderWidth ?? borderWidth }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: x - candleWidth / 2, y: Math.min(openY, closeY), width: candleWidth, height: Math.max(1, Math.abs(closeY - openY)), fill: rising && hollowRising ? "var(--sia-color-surface)" : color, stroke, strokeWidth: item.borderWidth ?? borderWidth, className: "sia-chart__candlestick" }),
-        markExtremes && item.high === highest ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x, y: highY - 8, textAnchor: "middle", className: "sia-chart__point-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: x, y1: highY, x2: x, y2: lowY, stroke, strokeWidth: item.borderWidth ?? borderWidth }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: x - candleWidth / 2, y: Math.min(openY, closeY), width: candleWidth, height: Math.max(1, Math.abs(closeY - openY)), fill: rising && hollowRising ? "var(--sia-color-surface)" : color, stroke, strokeWidth: item.borderWidth ?? borderWidth, className: "sia-chart__candlestick" }),
+        markExtremes && item.high === highest ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x, y: highY - 8, textAnchor: "middle", className: "sia-chart__point-label", children: [
           "\u6700\u9AD8 ",
           formatChartNumber(item.high)
         ] }) : null,
-        markExtremes && item.low === lowest ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x, y: lowY + 16, textAnchor: "middle", className: "sia-chart__point-label", children: [
+        markExtremes && item.low === lowest ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x, y: lowY + 16, textAnchor: "middle", className: "sia-chart__point-label", children: [
           "\u6700\u4F4E ",
           formatChartNumber(item.low)
         ] }) : null
@@ -5391,40 +5415,40 @@ var CandlestickChart = (0, import_react34.forwardRef)(function CandlestickChart2
         const a = -Math.PI / 2 + j * Math.PI / 5, r = j % 2 === 0 ? 12 : 5;
         return `${x + Math.cos(a) * r},${y + Math.sin(a) * r}`;
       }).join(" ");
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${point.name}\uFF0C${point.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: point.name, value: point.value }), tooltipPoint: [x, y], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { points: star, fill: color }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y: y - 18, textAnchor: "middle", fill: color, fontSize: 12, children: point.value.toLocaleString("en-US") })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${point.name}\uFF0C${point.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: point.name, value: point.value }), tooltipPoint: [x, y], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { points: star, fill: color }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y: y - 18, textAnchor: "middle", fill: color, fontSize: 12, children: point.value.toLocaleString("en-US") })
       ] }, i);
     }) : null,
-    legacy && dataZoom ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("foreignObject", { className: "sia-chart__inline-zoom", x: plot.x, y: bottom + 30, width: plot.width, height: 30, children: zoomControl }) : null
+    legacy && dataZoom ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("foreignObject", { className: "sia-chart__inline-zoom", x: plot.x, y: bottom + 30, width: plot.width, height: 30, children: zoomControl }) : null
   ] });
-  return dataZoom && !legacy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-chart-with-zoom", children: [
+  return dataZoom && !legacy ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "sia-chart-with-zoom", children: [
     content,
     zoomControl
   ] }) : content;
 });
 var EMPTY_PIE_DATA = [];
-var PieChart = (0, import_react34.forwardRef)(function PieChart2({ pulseRing, calculable = false, markPoints = [], data = EMPTY_PIE_DATA, series, innerRadius = 62, outerRadius = 124, rose = false, center = [360, 173], startAngle = -90, clockwise = true, padAngle = 0, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, showLabels = true, showLabelLines = true, centerLabel, selectedMode = false, selected, defaultSelected, selectedOffset = 9, onSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, animationDurationUpdate = 500, legendLayout, showGuideRings = false, onDataChange, transferId, onValueTransfer, onTransferError, onValueDragOut, outsideLabelLayout, ...props }, ref) {
-  const pieGradientId = (0, import_react34.useId)().replace(/:/g, "");
-  const [pieIslands, setPieIslands] = (0, import_react34.useState)([]);
-  const sourceRings = (0, import_react34.useMemo)(() => series?.length ? series : [{ data, innerRadius, outerRadius, rose, showLabels }], [series, data, innerRadius, outerRadius, rose, showLabels]);
-  const [editableRings, setEditableRings] = (0, import_react34.useState)(sourceRings);
-  const valueDrag = (0, import_react34.useRef)(null);
-  const [valueOffset, setValueOffset] = (0, import_react34.useState)();
-  (0, import_react34.useEffect)(() => setEditableRings(sourceRings), [sourceRings]);
+var PieChart = (0, import_react35.forwardRef)(function PieChart2({ pulseRing, calculable = false, markPoints = [], data = EMPTY_PIE_DATA, series, innerRadius = 62, outerRadius = 124, rose = false, center = [360, 173], startAngle = -90, clockwise = true, padAngle = 0, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, showLabels = true, showLabelLines = true, centerLabel, selectedMode = false, selected, defaultSelected, selectedOffset = 9, onSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, animationDurationUpdate = 500, legendLayout, showGuideRings = false, onDataChange, transferId, onValueTransfer, onTransferError, onValueDragOut, outsideLabelLayout, ...props }, ref) {
+  const pieGradientId = (0, import_react35.useId)().replace(/:/g, "");
+  const [pieIslands, setPieIslands] = (0, import_react35.useState)([]);
+  const sourceRings = (0, import_react35.useMemo)(() => series?.length ? series : [{ data, innerRadius, outerRadius, rose, showLabels }], [series, data, innerRadius, outerRadius, rose, showLabels]);
+  const [editableRings, setEditableRings] = (0, import_react35.useState)(sourceRings);
+  const valueDrag = (0, import_react35.useRef)(null);
+  const [valueOffset, setValueOffset] = (0, import_react35.useState)();
+  (0, import_react35.useEffect)(() => setEditableRings(sourceRings), [sourceRings]);
   const allData = editableRings.flatMap((ring) => ring.data).filter((item) => !item.missing);
   const names = [...new Set(allData.map((item) => item.name))];
   const legend = useLegendSelection(names, legendSelected, onLegendSelectionChange);
   const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u997C\u56FE");
-  const [hovered, setHovered] = (0, import_react34.useState)();
-  const [internalSelected, setInternalSelected] = (0, import_react34.useState)(() => [...defaultSelected ?? allData.filter((item) => item.selected).map((item) => item.name)]);
+  const [hovered, setHovered] = (0, import_react35.useState)();
+  const [internalSelected, setInternalSelected] = (0, import_react35.useState)(() => [...defaultSelected ?? allData.filter((item) => item.selected).map((item) => item.name)]);
   const selectedNames = selected ?? internalSelected;
   const legacy = appearance === "macarons";
   const colorNames = [...new Set(allData.filter((item) => item.showInLegend !== false).map((item) => item.name))];
   const colorFor = (item) => getColor(Math.max(0, colorNames.indexOf(item.name)), item.color, palette);
   const chartToolbox = typeof resolvedToolbox === "object" ? {
     ...resolvedToolbox,
-    dataView: resolvedToolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { readOnly: resolvedToolbox.dataViewReadOnly, series: editableRings.map((ring, i) => ({ name: ring.name ?? `\u7CFB\u5217 ${i + 1}`, data: ring.data.map((item) => item.missing ? null : item.value) })), onApply: (values) => {
+    dataView: resolvedToolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { readOnly: resolvedToolbox.dataViewReadOnly, series: editableRings.map((ring, i) => ({ name: ring.name ?? `\u7CFB\u5217 ${i + 1}`, data: ring.data.map((item) => item.missing ? null : item.value) })), onApply: (values) => {
       const next = editableRings.map((ring, i) => ({ ...ring, data: ring.data.map((item, j) => ({ ...item, missing: values[i][j] === null, value: Math.max(0, values[i][j] ?? 0) })) }));
       setEditableRings(next);
       onDataChange?.(next);
@@ -5445,9 +5469,9 @@ var PieChart = (0, import_react34.forwardRef)(function PieChart2({ pulseRing, ca
     onSelectionChange?.(next);
   }
   const legendData = [...new Map(allData.filter((item) => item.showInLegend !== false).map((item) => [item.name, item])).values()];
-  if (/funnel|漏斗/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FunnelChart, { ...props, ref, series: editableRings.map((ring) => ({ name: ring.name, data: ring.data })), showLegend, legendInteractive, legendSelected: legend.selected, onLegendSelectionChange: legend.replace, onDataClick, palette, toolbox: chartToolbox });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, toolbox: chartToolbox, empty: !allData.length || allData.every((item) => item.value <= 0), ariaLabel: props.ariaLabel ?? "\u997C\u56FE", children: [
-    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { rowGap: legacy ? 18 : void 0, maxWidth: legacy ? (props.viewBoxSize?.[0] ?? 720) - 20 : void 0, symbol: legacy ? "sector" : "rect", x: legendLayout?.x ?? 360, y: legendLayout?.y ?? 330, align: legendLayout?.align, orientation: legendLayout?.orientation, itemGap: legendLayout?.itemGap, items: legendData.map((item) => ({ name: item.name, color: colorFor(item), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
+  if (/funnel|漏斗/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FunnelChart, { ...props, ref, series: editableRings.map((ring) => ({ name: ring.name, data: ring.data })), showLegend, legendInteractive, legendSelected: legend.selected, onLegendSelectionChange: legend.replace, onDataClick, palette, toolbox: chartToolbox });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, toolbox: chartToolbox, empty: !allData.length || allData.every((item) => item.value <= 0), ariaLabel: props.ariaLabel ?? "\u997C\u56FE", children: [
+    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { rowGap: legacy ? 18 : void 0, maxWidth: legacy ? (props.viewBoxSize?.[0] ?? 720) - 20 : void 0, symbol: legacy ? "sector" : "rect", x: legendLayout?.x ?? 360, y: legendLayout?.y ?? 330, align: legendLayout?.align, orientation: legendLayout?.orientation, itemGap: legendLayout?.itemGap, items: legendData.map((item) => ({ name: item.name, color: colorFor(item), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
     editableRings.flatMap((ring, ringIndex) => {
       const visible = ring.data.filter((item) => !item.missing && legend.isSelected(item.name));
       const ringCenter = ring.center ?? center;
@@ -5483,7 +5507,7 @@ var PieChart = (0, import_react34.forwardRef)(function PieChart2({ pulseRing, ca
         const interactive = item.interactive !== false;
         const transferable = interactive && (calculable || !!transferId && (!!onValueTransfer || !!onValueDragOut));
         const moving = valueOffset?.key === key;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           ChartMark,
           {
             label: `${ring.name ?? "\u997C\u56FE"}\uFF0C${item.name}\uFF0C${item.value}`,
@@ -5504,9 +5528,9 @@ var PieChart = (0, import_react34.forwardRef)(function PieChart2({ pulseRing, ca
               valueDrag.current = null;
               setValueOffset(void 0);
             },
-            tooltip: interactive ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: ring.name }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+            tooltip: interactive ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: ring.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
                 item.name,
                 "\uFF1A",
                 item.value,
@@ -5584,27 +5608,27 @@ var PieChart = (0, import_react34.forwardRef)(function PieChart2({ pulseRing, ca
               }
             },
             children: [
-              gradient ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("radialGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", cx: gradient.center[0], cy: gradient.center[1], r: gradient.outerRadius, children: gradient.stops.map((stop, index2) => {
+              gradient ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("radialGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", cx: gradient.center[0], cy: gradient.center[1], r: gradient.outerRadius, children: gradient.stops.map((stop, index2) => {
                 const inner = Math.max(0, Math.min(1, (gradient.innerRadius ?? 0) / gradient.outerRadius));
-                return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { offset: inner + (1 - inner) * stop.offset, stopColor: stop.color }, index2);
+                return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: inner + (1 - inner) * stop.offset, stopColor: stop.color }, index2);
               }) }) }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { points: [[0, arc.start], [0, arc.end]], enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: (frame) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: svgArcPath(cx, cy, arc.radius, frame[0][1], frame[1][1], arc.inner, direction), fill: gradient ? `url(#${gradientId})` : color, stroke: legacy ? "#fff" : void 0, strokeWidth: legacy ? 1 : void 0, className: "sia-chart__sector", style: { animation: "none", transform: legacy ? "none" : void 0 } }) }),
-              allowLabel && !inside && (labelLine.show ?? showLabelLines) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: `M ${cx + Math.cos(arc.middle) * arc.radius} ${cy + Math.sin(arc.middle) * arc.radius} L ${lx} ${ly} L ${labelX + (right ? -4 : 4)} ${ly}`, fill: "none", stroke: color, className: "sia-chart__pie-label-line", style: labelLine.style }) : null,
-              allowLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: labelX, y: ly + 4, textAnchor: inside ? "middle" : right ? "start" : "end", className: "sia-chart__pie-label", style: labelStyle, children: labelText.split("\n").map((line, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: labelX, dy: lineIndex ? "1.2em" : 0, children: line }, lineIndex)) }) : null,
-              isHovered && ring.emphasisLabel === "center" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: ringCenter[0], y: ringCenter[1] + 10, textAnchor: "middle", fontSize: 30, fontWeight: "bold", fill: color, style: { ...ring.emphasisLabelStyle, ...item.emphasisLabelStyle }, pointerEvents: "none", children: labelText }) : null
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: [[0, arc.start], [0, arc.end]], enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: animationProgress, children: (frame) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: svgArcPath(cx, cy, arc.radius, frame[0][1], frame[1][1], arc.inner, direction), fill: gradient ? `url(#${gradientId})` : color, stroke: legacy ? "#fff" : void 0, strokeWidth: legacy ? 1 : void 0, className: "sia-chart__sector", style: { animation: "none", transform: legacy ? "none" : void 0 } }) }),
+              allowLabel && !inside && (labelLine.show ?? showLabelLines) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: `M ${cx + Math.cos(arc.middle) * arc.radius} ${cy + Math.sin(arc.middle) * arc.radius} L ${lx} ${ly} L ${labelX + (right ? -4 : 4)} ${ly}`, fill: "none", stroke: color, className: "sia-chart__pie-label-line", style: labelLine.style }) : null,
+              allowLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: labelX, y: ly + 4, textAnchor: inside ? "middle" : right ? "start" : "end", className: "sia-chart__pie-label", style: labelStyle, children: labelText.split("\n").map((line, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { x: labelX, dy: lineIndex ? "1.2em" : 0, children: line }, lineIndex)) }) : null,
+              isHovered && ring.emphasisLabel === "center" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: ringCenter[0], y: ringCenter[1] + 10, textAnchor: "middle", fontSize: 30, fontWeight: "bold", fill: color, style: { ...ring.emphasisLabelStyle, ...item.emphasisLabelStyle }, pointerEvents: "none", children: labelText }) : null
             ]
           },
           key
         );
       });
-      return [calculable ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { "data-pie-target": "case", "data-value-series": ringIndex, "data-value-index": -1, d: svgArcPath(ringCenter[0], ringCenter[1], ringOuter + 10, -Math.PI / 2, Math.PI * 1.5, ringInner <= 10 ? 0 : ringInner - 10, true), fill: "transparent", stroke: "#ccc", strokeWidth: 1, pointerEvents: "all" }, `case-${ringIndex}`) : null, showGuideRings ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { fill: "none", stroke: "#ccc", strokeWidth: 1, pointerEvents: "none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: ringCenter[0], cy: ringCenter[1], r: ringOuter + 10 }),
-        ringInner > 10 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: ringCenter[0], cy: ringCenter[1], r: ringInner - 10 }) : null
-      ] }, `guide-${ringIndex}`) : null, ...marks, ring.centerLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("foreignObject", { x: ringCenter[0] - 60, y: ringCenter[1] - 30, width: 120, height: 60, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "sia-chart__center-label", children: ring.centerLabel }) }, `center-${ringIndex}`) : null];
+      return [calculable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { "data-pie-target": "case", "data-value-series": ringIndex, "data-value-index": -1, d: svgArcPath(ringCenter[0], ringCenter[1], ringOuter + 10, -Math.PI / 2, Math.PI * 1.5, ringInner <= 10 ? 0 : ringInner - 10, true), fill: "transparent", stroke: "#ccc", strokeWidth: 1, pointerEvents: "all" }, `case-${ringIndex}`) : null, showGuideRings ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { fill: "none", stroke: "#ccc", strokeWidth: 1, pointerEvents: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: ringCenter[0], cy: ringCenter[1], r: ringOuter + 10 }),
+        ringInner > 10 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: ringCenter[0], cy: ringCenter[1], r: ringInner - 10 }) : null
+      ] }, `guide-${ringIndex}`) : null, ...marks, ring.centerLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("foreignObject", { x: ringCenter[0] - 60, y: ringCenter[1] - 30, width: 120, height: 60, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "sia-chart__center-label", children: ring.centerLabel }) }, `center-${ringIndex}`) : null];
     }),
-    centerLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("foreignObject", { x: center[0] - 100, y: center[1] - 45, width: 200, height: 90, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "sia-chart__center-label", children: centerLabel }) }) : null,
-    pulseRing ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPulseRing, { ...pulseRing, enabled: props.animation !== false && pulseRing.enabled !== false }) : null,
-    calculable ? pieIslands.map((island, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartValueIsland, { ...island, resolveTarget: (element, x, y) => {
+    centerLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("foreignObject", { x: center[0] - 100, y: center[1] - 45, width: 200, height: 90, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "sia-chart__center-label", children: centerLabel }) }) : null,
+    pulseRing ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPulseRing, { ...pulseRing, enabled: props.animation !== false && pulseRing.enabled !== false }) : null,
+    calculable ? pieIslands.map((island, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartValueIsland, { ...island, resolveTarget: (element, x, y) => {
       const hit = document.elementsFromPoint(x, y).map((node) => node.closest("[data-pie-target]")).find((node) => node && node.ownerSVGElement === element.ownerSVGElement);
       return hit ? { chart: "pie", series: Number(hit.getAttribute("data-value-series")), index: Number(hit.getAttribute("data-value-index")) } : null;
     }, onDrop: (target, point) => {
@@ -5625,27 +5649,27 @@ var PieChart = (0, import_react34.forwardRef)(function PieChart2({ pulseRing, ca
     markPoints.map((mark, index) => {
       const coordinate = (value, length) => typeof value === "number" ? value : parseFloat(value) * length / 100;
       const x = coordinate(mark.x, props.viewBoxSize?.[0] ?? 720), y = coordinate(mark.y, props.viewBoxSize?.[1] ?? 360), radius = mark.radius ?? 10, color = mark.color ?? "#dc69aa", key = `mark-${index}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartScatterMotion, { x, y, radius, enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { "data-pie-mark": mark.name, label: `${mark.name}\uFF0C${mark.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: mark.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: mark.value.toLocaleString("en-US") })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartScatterMotion, { x, y, radius, enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { "data-pie-mark": mark.name, label: `${mark.name}\uFF0C${mark.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: mark.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: mark.value.toLocaleString("en-US") })
       ] }), tooltipPoint: [x, y], onPointerMove: () => setHovered(key), onPointerLeave: () => setHovered(void 0), onFocus: () => setHovered(key), onBlur: () => setHovered(void 0), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { points: chartStarPoints(x, y, radius * 2, 5).map((point) => point.join(",")).join(" "), fill: color, stroke: color, strokeWidth: hovered === key ? 4 : 2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y, dominantBaseline: "central", textAnchor: "middle", style: { fill: "#fff", fontSize: 12, fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif", pointerEvents: "none" }, children: mark.value.toLocaleString("en-US") })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { points: chartStarPoints(x, y, radius * 2, 5).map((point) => point.join(",")).join(" "), fill: color, stroke: color, strokeWidth: hovered === key ? 4 : 2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y, dominantBaseline: "central", textAnchor: "middle", style: { fill: "#fff", fontSize: 12, fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1, Arial, Verdana, sans-serif", pointerEvents: "none" }, children: mark.value.toLocaleString("en-US") })
       ] }) }, key);
     })
   ] });
 });
 var EMPTY_RADAR_INDICATORS = [];
 var EMPTY_RADAR_SERIES = [];
-var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicators = EMPTY_RADAR_INDICATORS, series = EMPTY_RADAR_SERIES, radars, calculable = false, onTransferError, markers, levels = 5, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, legendOrder, legendLayout, onDataChange, ...props }, ref) {
+var RadarChart = (0, import_react35.forwardRef)(function RadarChart2({ indicators = EMPTY_RADAR_INDICATORS, series = EMPTY_RADAR_SERIES, radars, calculable = false, onTransferError, markers, levels = 5, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, legendOrder, legendLayout, onDataChange, ...props }, ref) {
   const legacy = appearance === "macarons";
-  const initialPanels = (0, import_react34.useMemo)(() => radars?.length ? radars : [{ indicators, series, levels }], [radars, indicators, series, levels]);
-  const [sourcePanels, setSourcePanels] = (0, import_react34.useState)(initialPanels);
-  const [hoveredRadar, setHoveredRadar] = (0, import_react34.useState)(null);
-  const radarPaintId = `sia-radar-${(0, import_react34.useId)().replaceAll(":", "")}`;
-  const radarDrag = (0, import_react34.useRef)(null);
-  const [radarOffset, setRadarOffset] = (0, import_react34.useState)(null);
-  (0, import_react34.useEffect)(() => {
+  const initialPanels = (0, import_react35.useMemo)(() => radars?.length ? radars : [{ indicators, series, levels }], [radars, indicators, series, levels]);
+  const [sourcePanels, setSourcePanels] = (0, import_react35.useState)(initialPanels);
+  const [hoveredRadar, setHoveredRadar] = (0, import_react35.useState)(null);
+  const radarPaintId = `sia-radar-${(0, import_react35.useId)().replaceAll(":", "")}`;
+  const radarDrag = (0, import_react35.useRef)(null);
+  const [radarOffset, setRadarOffset] = (0, import_react35.useState)(null);
+  (0, import_react35.useEffect)(() => {
     setSourcePanels(initialPanels);
     radarDrag.current = null;
     setRadarOffset(null);
@@ -5654,7 +5678,7 @@ var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicator
   const legend = useLegendSelection(allSeries.map((item) => item.name), legendSelected, onLegendSelectionChange);
   const legendSeries = [...new Map(allSeries.map((item) => [item.name, item])).values()];
   if (legendOrder) legendSeries.sort((a, b) => legendOrder.indexOf(a.name) - legendOrder.indexOf(b.name));
-  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { series: allSeries, onApply: (values) => {
+  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { series: allSeries, onApply: (values) => {
     let cursor = 0;
     const next = sourcePanels.map((panel) => ({ ...panel, series: panel.series.map((item) => ({ ...item, data: values[cursor++] })) }));
     setSourcePanels(next);
@@ -5677,15 +5701,15 @@ var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicator
     });
     return { ...panel, indicators: resolvedIndicators, series: visible };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, toolbox: chartToolbox, ref, palette, empty: !sourcePanels.some((panel) => panel.indicators.length && panel.series.length), ariaLabel: props.ariaLabel ?? "\u96F7\u8FBE\u56FE", children: [
-    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { x: legendLayout?.x ?? 360, y: legendLayout?.y ?? 20, orientation: legendLayout?.orientation, align: legendLayout?.align, symbol: legacy ? "line" : "rect", itemGap: legacy ? 10 : 18, items: legendSeries.map((item, index) => ({ name: item.name, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, toolbox: chartToolbox, ref, palette, empty: !sourcePanels.some((panel) => panel.indicators.length && panel.series.length), ariaLabel: props.ariaLabel ?? "\u96F7\u8FBE\u56FE", children: [
+    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { x: legendLayout?.x ?? 360, y: legendLayout?.y ?? 20, orientation: legendLayout?.orientation, align: legendLayout?.align, symbol: legacy ? "line" : "rect", itemGap: legacy ? 10 : 18, items: legendSeries.map((item, index) => ({ name: item.name, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
     markers?.map((marker, index) => {
       const size = marker.size ?? 32, x = marker.x, y = marker.y - size * 0.25, a = size * 0.5, b = size;
       const path = `M ${x} ${y} C ${x + a / 2} ${y - 2 * b / 3} ${x + 2 * a} ${y + b / 3} ${x} ${y + b} C ${x - 2 * a} ${y + b / 3} ${x - a / 2} ${y - 2 * b / 3} ${x} ${y} Z`;
       const color = marker.color ?? "#d87a80";
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${marker.name}\uFF0C${marker.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: marker.name, value: marker.value }), tooltipPoint: [marker.x, marker.y], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { className: "sia-chart__radar-marker", d: path, fill: marker.hollow ? "#fff" : color, stroke: color, strokeWidth: 2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: marker.x, y: marker.y + 4, textAnchor: "middle", style: { fill: marker.hollow ? color : "#fff", fontSize: 12 }, children: marker.value })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${marker.name}\uFF0C${marker.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: marker.name, value: marker.value }), tooltipPoint: [marker.x, marker.y], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { className: "sia-chart__radar-marker", d: path, fill: marker.hollow ? "#fff" : color, stroke: color, strokeWidth: 2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: marker.x, y: marker.y + 4, textAnchor: "middle", style: { fill: marker.hollow ? color : "#fff", fontSize: 12 }, children: marker.value })
       ] }, index);
     }),
     panels.map((panel, panelIndex) => {
@@ -5697,8 +5721,8 @@ var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicator
         const angle = start + (legacy ? -1 : 1) * index / Math.max(1, panel.indicators.length) * Math.PI * 2;
         return [panelCenter[0] + Math.cos(angle) * panelRadius * ratio, panelCenter[1] + Math.sin(angle) * panelRadius * ratio];
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-        calculable ? panel.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { "data-radar-drop-panel": panelIndex, cx: panelCenter[0], cy: panelCenter[1], r: panelRadius, fill: "transparent" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { "data-radar-drop-panel": panelIndex, points: panel.indicators.map((_, index) => pointAt(index, 1).join(",")).join(" "), fill: "transparent" }) : null,
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+        calculable ? panel.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { "data-radar-drop-panel": panelIndex, cx: panelCenter[0], cy: panelCenter[1], r: panelRadius, fill: "transparent" }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { "data-radar-drop-panel": panelIndex, points: panel.indicators.map((_, index) => pointAt(index, 1).join(",")).join(" "), fill: "transparent" }) : null,
         panel.splitAreaColors?.length ? Array.from({ length: panelLevels }, (_, level) => {
           const boundary = (ratio) => {
             const r = panelRadius * ratio;
@@ -5706,22 +5730,22 @@ var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicator
             if (panel.shape === "circle") return `M ${panelCenter[0] - r} ${panelCenter[1]} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0 Z`;
             return panel.indicators.map((_2, index) => `${index ? "L" : "M"} ${pointAt(index, ratio).join(" ")}`).join(" ") + " Z";
           };
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { className: "sia-chart__radar-band", d: `${boundary((level + 1) / panelLevels)} ${boundary(level / panelLevels)}`, fillRule: "evenodd", fill: panel.splitAreaColors[level % panel.splitAreaColors.length] }, level);
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { className: "sia-chart__radar-band", d: `${boundary((level + 1) / panelLevels)} ${boundary(level / panelLevels)}`, fillRule: "evenodd", fill: panel.splitAreaColors[level % panel.splitAreaColors.length] }, level);
         }) : null,
         Array.from({ length: panelLevels }, (_, index) => {
           const level = legacy ? panelLevels - 1 - index : index;
           const style = { fill: panel.splitAreaColors?.length ? "none" : legacy ? level % 2 ? "rgba(200,200,200,.25)" : "rgba(250,250,250,.5)" : void 0, stroke: panel.splitLineColor ?? (legacy ? "#ddd" : void 0), strokeWidth: panel.splitLineWidth };
-          return panel.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: panelCenter[0], cy: panelCenter[1], r: panelRadius * (level + 1) / panelLevels, style, className: "sia-chart__radar-grid" }, level) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { points: panel.indicators.map((_2, index2) => pointAt(index2, (level + 1) / panelLevels).join(",")).join(" "), style, className: "sia-chart__radar-grid" }, level);
+          return panel.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: panelCenter[0], cy: panelCenter[1], r: panelRadius * (level + 1) / panelLevels, style, className: "sia-chart__radar-grid" }, level) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { points: panel.indicators.map((_2, index2) => pointAt(index2, (level + 1) / panelLevels).join(",")).join(" "), style, className: "sia-chart__radar-grid" }, level);
         }),
         panel.indicators.map((indicator, index) => {
           const edge = pointAt(index, 1);
           const label = pointAt(index, legacy ? 1 + 15 / panelRadius : 1.18);
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: panelCenter[0], y1: panelCenter[1], x2: edge[0], y2: edge[1], style: { stroke: panel.axisColor, strokeWidth: panel.axisWidth }, className: "sia-chart__grid-line" }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: label[0], y: label[1] + 4, textAnchor: Math.abs(label[0] - panelCenter[0]) < 4 ? "middle" : label[0] > panelCenter[0] ? "start" : "end", style: { fill: panel.indicatorColor }, className: "sia-chart__radar-label", children: panel.indicatorFormatter?.(indicator.name) ?? indicator.name }),
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: panelCenter[0], y1: panelCenter[1], x2: edge[0], y2: edge[1], style: { stroke: panel.axisColor, strokeWidth: panel.axisWidth }, className: "sia-chart__grid-line" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: label[0], y: label[1] + 4, textAnchor: Math.abs(label[0] - panelCenter[0]) < 4 ? "middle" : label[0] > panelCenter[0] ? "start" : "end", style: { fill: panel.indicatorColor }, className: "sia-chart__radar-label", children: panel.indicatorFormatter?.(indicator.name) ?? indicator.name }),
             panel.showAxisLabels ? Array.from({ length: panelLevels + 1 }, (_, tick) => {
               const point = pointAt(index, tick / panelLevels), min = indicator.min ?? 0, value = min + (indicator.max - min) * tick / panelLevels;
-              return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: point[0] + 5, y: point[1] + 4, className: "sia-chart__radar-axis-label", style: { fill: panel.axisLabelColor ?? "#ccc", fontSize: 12 }, children: Number(value.toPrecision(12)) }, tick);
+              return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: point[0] + 5, y: point[1] + 4, className: "sia-chart__radar-axis-label", style: { fill: panel.axisLabelColor ?? "#ccc", fontSize: 12 }, children: Number(value.toPrecision(12)) }, tick);
             }) : null
           ] }, `${indicator.name}-${index}`);
         }),
@@ -5734,7 +5758,7 @@ var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicator
           const hoverKey = `${panelIndex}-${item.name}-${seriesIndex}`, emphasis = hoveredRadar === hoverKey ? item.emphasisAreaColor : void 0;
           const gradient = item.areaGradient, gradientId = `${radarPaintId}-${panelIndex}-${seriesIndex}`;
           const originalIndex = sourcePanels[panelIndex].series.indexOf(item), dragging = radarOffset?.panel === panelIndex && radarOffset.series === originalIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { "data-radar-panel": panelIndex, "data-radar-series": originalIndex, transform: dragging ? `translate(${radarOffset.x} ${radarOffset.y})` : void 0, style: { cursor: calculable ? "move" : void 0, pointerEvents: dragging ? "none" : void 0 }, onPointerDown: (event) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { "data-radar-panel": panelIndex, "data-radar-series": originalIndex, transform: dragging ? `translate(${radarOffset.x} ${radarOffset.y})` : void 0, style: { cursor: calculable ? "move" : void 0, pointerEvents: dragging ? "none" : void 0 }, onPointerDown: (event) => {
             if (!calculable || event.button !== 0) return;
             event.stopPropagation();
             event.currentTarget.setPointerCapture(event.pointerId);
@@ -5752,9 +5776,9 @@ var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicator
           }, onPointerCancel: () => {
             radarDrag.current = null;
             setRadarOffset(null);
-          }, onPointerEnter: () => setHoveredRadar(hoverKey), onPointerLeave: () => setHoveredRadar(null), onFocus: () => setHoveredRadar(hoverKey), onBlur: () => setHoveredRadar(null), label: `${item.name}\uFF0C${item.data.join("\uFF0C")}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: item.name }),
-            panel.indicators.map((indicator, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+          }, onPointerEnter: () => setHoveredRadar(hoverKey), onPointerLeave: () => setHoveredRadar(null), onFocus: () => setHoveredRadar(hoverKey), onBlur: () => setHoveredRadar(null), label: `${item.name}\uFF0C${item.data.join("\uFF0C")}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: item.name }),
+            panel.indicators.map((indicator, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
               indicator.name,
               "\uFF1A",
               item.data[index] ?? 0
@@ -5780,17 +5804,17 @@ var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicator
             } catch (error) {
               onTransferError?.(error instanceof Error ? error.message : "\u96F7\u8FBE\u6570\u636E\u62D6\u653E\u5931\u8D25");
             }
-          }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { origin: legacy ? [panelCenter[0], panelCenter[1]] : void 0, points: [[panelCenter[0], panelCenter[1]], ...points], enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (frame) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-            gradient ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("radialGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", cx: gradient.center[0], cy: gradient.center[1], r: gradient.radius, fx: gradient.focus?.[0] ?? gradient.center[0], fy: gradient.focus?.[1] ?? gradient.center[1], children: gradient.stops.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, index)) }) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { points: frame.slice(1).map((point) => point.join(",")).join(" "), fill: emphasis ?? (gradient ? `url(#${gradientId})` : color), fillOpacity: emphasis ? 1 : item.areaOpacity ?? (gradient ? 1 : 0.18), stroke: color, strokeDasharray: item.lineStyle === "dashed" ? "7 5" : item.lineStyle === "dotted" ? "2 4" : void 0, style: { strokeWidth: hoveredRadar === hoverKey ? item.emphasisLineWidth ?? item.lineWidth : item.lineWidth }, className: "sia-chart__radar-series" }),
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { origin: legacy ? [panelCenter[0], panelCenter[1]] : void 0, points: [[panelCenter[0], panelCenter[1]], ...points], enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (frame) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+            gradient ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("radialGradient", { id: gradientId, gradientUnits: "userSpaceOnUse", cx: gradient.center[0], cy: gradient.center[1], r: gradient.radius, fx: gradient.focus?.[0] ?? gradient.center[0], fy: gradient.focus?.[1] ?? gradient.center[1], children: gradient.stops.map((stop, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("stop", { offset: stop.offset, stopColor: stop.color }, index)) }) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { points: frame.slice(1).map((point) => point.join(",")).join(" "), fill: emphasis ?? (gradient ? `url(#${gradientId})` : color), fillOpacity: emphasis ? 1 : item.areaOpacity ?? (gradient ? 1 : 0.18), stroke: color, strokeDasharray: item.lineStyle === "dashed" ? "7 5" : item.lineStyle === "dotted" ? "2 4" : void 0, style: { strokeWidth: hoveredRadar === hoverKey ? item.emphasisLineWidth ?? item.lineWidth : item.lineWidth }, className: "sia-chart__radar-series" }),
             frame.slice(1).map((point, index) => {
               const value = item.data[index] ?? 0, pointColor = item.pointColor?.(value, index) ?? color, radius = item.pointRadius ?? (legacy ? 3 : 3.5);
-              return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-                item.showPoints !== false ? item.pointSymbol === "star" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { className: "sia-chart__radar-point", "data-symbol": "star", points: Array.from({ length: 10 }, (_, vertex) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+                item.showPoints !== false ? item.pointSymbol === "star" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { className: "sia-chart__radar-point", "data-symbol": "star", points: Array.from({ length: 10 }, (_, vertex) => {
                   const angle = -Math.PI / 2 + vertex * Math.PI / 5, r = vertex % 2 ? radius * 0.5 : radius;
                   return `${point[0] + Math.cos(angle) * r},${point[1] + Math.sin(angle) * r}`;
-                }).join(" "), fill: pointColor }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: "sia-chart__radar-point", cx: point[0], cy: point[1], r: radius, fill: legacy ? "#fff" : pointColor, stroke: legacy ? pointColor : void 0, strokeWidth: legacy ? 2 : void 0 }) : null,
-                item.showValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { className: "sia-chart__radar-value", x: point[0], y: point[1] - radius - 5, textAnchor: "middle", style: { fill: pointColor, fontSize: 12 }, children: item.valueLabelFormatter?.(value, index) ?? String(value) }) : null
+                }).join(" "), fill: pointColor }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { className: "sia-chart__radar-point", cx: point[0], cy: point[1], r: radius, fill: legacy ? "#fff" : pointColor, stroke: legacy ? pointColor : void 0, strokeWidth: legacy ? 2 : void 0 }) : null,
+                item.showValueLabels ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { className: "sia-chart__radar-value", x: point[0], y: point[1] - radius - 5, textAnchor: "middle", style: { fill: pointColor, fontSize: 12 }, children: item.valueLabelFormatter?.(value, index) ?? String(value) }) : null
               ] }, index);
             })
           ] }) }) }, `${item.name}-${seriesIndex}`);
@@ -5799,9 +5823,9 @@ var RadarChart = (0, import_react34.forwardRef)(function RadarChart2({ indicator
     })
   ] });
 });
-var ChordChart = (0, import_react34.forwardRef)(function ChordChart2({ nodes, links, nodeGeometry, matrixAppearance, matrix, matrixSeries, showNodeLabels = false, rotateNodeLabels = false, matrixLinkLabel, matrixGeometry, legacySubSort = false, showScale = false, sortSub = "none", padAngle = 0.035, ribbon = true, clockwise = true, sort = "none", onNodeClick, onLinkClick, palette, toolbox, ...props }, ref) {
+var ChordChart = (0, import_react35.forwardRef)(function ChordChart2({ nodes, links, nodeGeometry, matrixAppearance, matrix, matrixSeries, showNodeLabels = false, rotateNodeLabels = false, matrixLinkLabel, matrixGeometry, legacySubSort = false, showScale = false, sortSub = "none", padAngle = 0.035, ribbon = true, clockwise = true, sort = "none", onNodeClick, onLinkClick, palette, toolbox, ...props }, ref) {
   const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u548C\u5F26");
-  if (/force|力导向|关系/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  if (/force|力导向|关系/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     GraphChart,
     {
       ...props,
@@ -5818,8 +5842,8 @@ var ChordChart = (0, import_react34.forwardRef)(function ChordChart2({ nodes, li
       }
     }
   );
-  if (matrix || matrixSeries) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SiaChart, { ...props, ref, palette, toolbox: resolvedToolbox, empty: !nodes.length || matrixSeries?.length === 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MatrixChordPlot, { appearance: matrixAppearance, linkLabel: matrixLinkLabel, rotateNodeLabels, series: matrixSeries, showNodeLabels, geometry: matrixGeometry, legacySubSort, showScale, names: nodes.map((n) => n.name), matrix: matrix ?? [], sort, sortSub, padAngle, clockwise, palette }) });
-  if (!ribbon && nodeGeometry) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SiaChart, { ...props, ref, palette, toolbox: resolvedToolbox, empty: !nodes.length, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NodeChordPlot, { nodes, links, geometry: nodeGeometry, palette, sort, clockwise, padAngle, rotateLabels: rotateNodeLabels }) });
+  if (matrix || matrixSeries) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SiaChart, { ...props, ref, palette, toolbox: resolvedToolbox, empty: !nodes.length || matrixSeries?.length === 0, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MatrixChordPlot, { appearance: matrixAppearance, linkLabel: matrixLinkLabel, rotateNodeLabels, series: matrixSeries, showNodeLabels, geometry: matrixGeometry, legacySubSort, showScale, names: nodes.map((n) => n.name), matrix: matrix ?? [], sort, sortSub, padAngle, clockwise, palette }) });
+  if (!ribbon && nodeGeometry) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SiaChart, { ...props, ref, palette, toolbox: resolvedToolbox, empty: !nodes.length, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NodeChordPlot, { nodes, links, geometry: nodeGeometry, palette, sort, clockwise, padAngle, rotateLabels: rotateNodeLabels }) });
   const center = [360, 182];
   const outerRadius = 128;
   const innerRadius = 108;
@@ -5839,7 +5863,7 @@ var ChordChart = (0, import_react34.forwardRef)(function ChordChart2({ nodes, li
   const arcById = new Map(arcs.map((arc) => [arc.node.id, arc]));
   const maxLink = Math.max(1, ...links.map((link) => link.value));
   const point = (arc, radius) => [center[0] + Math.cos(arc.middle) * radius, center[1] + Math.sin(arc.middle) * radius];
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, ref, palette, toolbox: resolvedToolbox, empty: !nodes.length, ariaLabel: props.ariaLabel ?? "\u548C\u5F26\u56FE", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, ref, palette, toolbox: resolvedToolbox, empty: !nodes.length, ariaLabel: props.ariaLabel ?? "\u548C\u5F26\u56FE", children: [
     links.map((link, index) => {
       const source = arcById.get(link.source);
       const target = arcById.get(link.target);
@@ -5853,30 +5877,30 @@ var ChordChart = (0, import_react34.forwardRef)(function ChordChart2({ nodes, li
       const sourceTangent = [-Math.sin(source.middle) * halfWidth, Math.cos(source.middle) * halfWidth];
       const targetTangent = [-Math.sin(target.middle) * halfWidth, Math.cos(target.middle) * halfWidth];
       const band = `M ${from[0] + sourceTangent[0]} ${from[1] + sourceTangent[1]} Q ${center[0]} ${center[1]} ${to[0] + targetTangent[0]} ${to[1] + targetTangent[1]} L ${to[0] - targetTangent[0]} ${to[1] - targetTangent[1]} Q ${center[0]} ${center[1]} ${from[0] - sourceTangent[0]} ${from[1] - sourceTangent[1]} Z`;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { label: `${sourceName} \u5230 ${targetName}\uFF0C${link.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("strong", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { label: `${sourceName} \u5230 ${targetName}\uFF0C${link.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("strong", { children: [
           sourceName,
           " \u2192 ",
           targetName
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("b", { children: formatChartNumber(link.value) })
-      ] }), tooltipPoint: [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2], onPointerUp: (event) => onLinkClick?.({ name: `${sourceName} \u2192 ${targetName}`, value: link.value, data: link, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: ribbon ? band : `M ${from[0]} ${from[1]} Q ${center[0]} ${center[1]} ${to[0]} ${to[1]}`, fill: ribbon ? color : "none", stroke: color, strokeWidth: ribbon ? 1 : 2 + link.value / maxLink * 5, className: "sia-chart__chord-link" }) }, `${link.source}-${link.target}-${index}`);
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("b", { children: formatChartNumber(link.value) })
+      ] }), tooltipPoint: [(from[0] + to[0]) / 2, (from[1] + to[1]) / 2], onPointerUp: (event) => onLinkClick?.({ name: `${sourceName} \u2192 ${targetName}`, value: link.value, data: link, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: ribbon ? band : `M ${from[0]} ${from[1]} Q ${center[0]} ${center[1]} ${to[0]} ${to[1]}`, fill: ribbon ? color : "none", stroke: color, strokeWidth: ribbon ? 1 : 2 + link.value / maxLink * 5, className: "sia-chart__chord-link" }) }, `${link.source}-${link.target}-${index}`);
     }),
     arcs.map((arc, index) => {
       const color = getColor(index, arc.node.color, palette);
       const label = point(arc, outerRadius + 17);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${arc.node.name}\uFF0C${formatChartNumber(arc.value)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: arc.node.name, value: arc.value }), tooltipPoint: point(arc, outerRadius), onPointerUp: (event) => onNodeClick?.({ name: arc.node.name, value: arc.value, data: arc.node, nativeEvent: event }), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: svgArcPath(center[0], center[1], outerRadius, arc.start, arc.end, innerRadius, clockwise), fill: color, className: "sia-chart__sector" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: label[0], y: label[1] + 4, textAnchor: label[0] > center[0] ? "start" : "end", className: "sia-chart__chord-label", children: arc.node.name })
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${arc.node.name}\uFF0C${formatChartNumber(arc.value)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: arc.node.name, value: arc.value }), tooltipPoint: point(arc, outerRadius), onPointerUp: (event) => onNodeClick?.({ name: arc.node.name, value: arc.value, data: arc.node, nativeEvent: event }), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: svgArcPath(center[0], center[1], outerRadius, arc.start, arc.end, innerRadius, clockwise), fill: color, className: "sia-chart__sector" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: label[0], y: label[1] + 4, textAnchor: label[0] > center[0] ? "start" : "end", className: "sia-chart__chord-label", children: arc.node.name })
       ] }, arc.node.id);
     })
   ] });
 });
-var GraphChart = (0, import_react34.forwardRef)(function GraphChart2({ nodes, links, roam = false, chordOptions, forceOptions, progressiveForce = false, layout = "circular", showLabels = true, draggable = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onNodeClick, palette, toolbox, ...props }, ref) {
+var GraphChart = (0, import_react35.forwardRef)(function GraphChart2({ nodes, links, roam = false, chordOptions, forceOptions, progressiveForce = false, layout = "circular", showLabels = true, draggable = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onNodeClick, palette, toolbox, ...props }, ref) {
   const categories = [...new Set(nodes.map((node) => node.category).filter((value) => Boolean(value)))];
   const legend = useLegendSelection(categories, legendSelected, onLegendSelectionChange);
   const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, layout === "force" ? "\u529B\u5BFC\u5411" : "\u5173\u7CFB");
-  const [roamReset, setRoamReset] = (0, import_react34.useState)(0);
+  const [roamReset, setRoamReset] = (0, import_react35.useState)(0);
   const chartToolbox = typeof resolvedToolbox === "object" ? {
     ...resolvedToolbox,
     onRestore: () => {
@@ -5885,23 +5909,23 @@ var GraphChart = (0, import_react34.forwardRef)(function GraphChart2({ nodes, li
       resolvedToolbox.onRestore?.();
     }
   } : resolvedToolbox;
-  const activeNodes = (0, import_react34.useMemo)(() => nodes.filter((node) => !node.category || legend.selected[node.category] !== false), [legend.selected, nodes]);
-  const activeLinks = (0, import_react34.useMemo)(() => {
+  const activeNodes = (0, import_react35.useMemo)(() => nodes.filter((node) => !node.category || legend.selected[node.category] !== false), [legend.selected, nodes]);
+  const activeLinks = (0, import_react35.useMemo)(() => {
     const activeIds = new Set(activeNodes.map((node) => node.id));
     return links.filter((link) => activeIds.has(link.source) && activeIds.has(link.target));
   }, [activeNodes, links]);
   const progressive = progressiveForce && layout === "force" && props.animation !== false && !/chord|和弦/i.test(magicType);
-  const calculatedPositions = (0, import_react34.useMemo)(() => graphLayout(activeNodes, activeLinks, layout === "force" && !progressive, forceOptions), [activeLinks, activeNodes, layout, forceOptions, progressive]);
-  const [positions, setPositions] = (0, import_react34.useState)(calculatedPositions);
-  const [dragging, setDragging] = (0, import_react34.useState)(null);
-  const heldNode = (0, import_react34.useRef)(null);
-  const [forceRestart, setForceRestart] = (0, import_react34.useState)(0);
-  (0, import_react34.useEffect)(() => {
+  const calculatedPositions = (0, import_react35.useMemo)(() => graphLayout(activeNodes, activeLinks, layout === "force" && !progressive, forceOptions), [activeLinks, activeNodes, layout, forceOptions, progressive]);
+  const [positions, setPositions] = (0, import_react35.useState)(calculatedPositions);
+  const [dragging, setDragging] = (0, import_react35.useState)(null);
+  const heldNode = (0, import_react35.useRef)(null);
+  const [forceRestart, setForceRestart] = (0, import_react35.useState)(0);
+  (0, import_react35.useEffect)(() => {
     setPositions(calculatedPositions);
     setDragging(null);
     heldNode.current = null;
   }, [calculatedPositions, roamReset]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!progressive || activeNodes.length > (forceOptions?.maxNodes ?? 80)) return;
     let frame = 0, remaining = Math.max(0, forceOptions?.iterations ?? 140), previous, carry = 0;
     const tick = (time) => {
@@ -5922,7 +5946,7 @@ var GraphChart = (0, import_react34.forwardRef)(function GraphChart2({ nodes, li
     if (remaining > 0) frame = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(frame);
   }, [progressive, activeNodes, activeLinks, forceOptions, calculatedPositions, roamReset, forceRestart]);
-  if (/chord|和弦/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  if (/chord|和弦/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     ChordChart,
     {
       ...props,
@@ -5940,10 +5964,10 @@ var GraphChart = (0, import_react34.forwardRef)(function GraphChart2({ nodes, li
   );
   const indexById = new Map(activeNodes.map((node, index) => [node.id, index]));
   const maxValue = Math.max(1, ...activeNodes.map((node) => node.value ?? 1));
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, ref, palette, toolbox: chartToolbox, empty: !nodes.length, ariaLabel: props.ariaLabel ?? "\u5173\u7CFB\u56FE", children: [
-    categories.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { items: categories.map((name, index) => ({ name, color: getColor(index, void 0, palette), disabled: !legend.isSelected(name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartRoamGroup, { enabled: Boolean(roam), zoomEnabled: roam !== "move", ariaLabel: roam === "move" ? "\u5173\u7CFB\u56FE\u6F2B\u6E38\u753B\u5E03\uFF1A\u65B9\u5411\u952E\u5E73\u79FB\uFF0CHome \u8FD8\u539F" : "\u5173\u7CFB\u56FE\u6F2B\u6E38\u753B\u5E03\uFF1A\u65B9\u5411\u952E\u5E73\u79FB\uFF0C\u52A0\u51CF\u952E\u7F29\u653E\uFF0CHome \u8FD8\u539F", width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, resetSignal: roamReset, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { className: "sia-chart__graph-links", children: activeLinks.map((link, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, ref, palette, toolbox: chartToolbox, empty: !nodes.length, ariaLabel: props.ariaLabel ?? "\u5173\u7CFB\u56FE", children: [
+    categories.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { items: categories.map((name, index) => ({ name, color: getColor(index, void 0, palette), disabled: !legend.isSelected(name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartRoamGroup, { enabled: Boolean(roam), zoomEnabled: roam !== "move", ariaLabel: roam === "move" ? "\u5173\u7CFB\u56FE\u6F2B\u6E38\u753B\u5E03\uFF1A\u65B9\u5411\u952E\u5E73\u79FB\uFF0CHome \u8FD8\u539F" : "\u5173\u7CFB\u56FE\u6F2B\u6E38\u753B\u5E03\uFF1A\u65B9\u5411\u952E\u5E73\u79FB\uFF0C\u52A0\u51CF\u952E\u7F29\u653E\uFF0CHome \u8FD8\u539F", width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, resetSignal: roamReset, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { className: "sia-chart__graph-links", children: activeLinks.map((link, index) => {
         const sourceIndex = indexById.get(link.source);
         const targetIndex = indexById.get(link.target);
         if (sourceIndex == null || targetIndex == null) return null;
@@ -5954,9 +5978,9 @@ var GraphChart = (0, import_react34.forwardRef)(function GraphChart2({ nodes, li
         const targetRadius = targetNode.imageSource ? (targetNode.imageSize?.[0] ?? 60) / 2 : targetNode.radius ?? 11 + Math.sqrt(Math.max(0, targetNode.value ?? 1) / maxValue) * 18;
         const reciprocal = link.arrow && activeLinks.some((other) => other.source === link.target && other.target === link.source);
         const geometry = graphLinkGeometry(source, target, { curvature: link.curvature, offset: link.offset ?? (reciprocal ? 4 : 0), arrow: link.arrow, arrowSize: link.arrowSize, targetRadius });
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: link.label ?? `${activeNodes[sourceIndex].name} \u2192 ${activeNodes[targetIndex].name}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: link.label ?? `${activeNodes[sourceIndex].name} \u2192 ${activeNodes[targetIndex].name}` }), tooltipPoint: [...geometry.center], children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { className: "sia-chart__graph-link", d: geometry.path, fill: "none", stroke: link.color ?? "var(--sia-chart-axis)", strokeWidth: link.width ?? Math.max(1, Math.sqrt(link.value ?? 1)), strokeDasharray: link.dashed ? "6 4" : void 0 }),
-          geometry.arrow ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { className: "sia-chart__graph-arrow", points: geometry.arrow, fill: link.color ?? "var(--sia-chart-axis)" }) : null
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: link.label ?? `${activeNodes[sourceIndex].name} \u2192 ${activeNodes[targetIndex].name}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: link.label ?? `${activeNodes[sourceIndex].name} \u2192 ${activeNodes[targetIndex].name}` }), tooltipPoint: [...geometry.center], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { className: "sia-chart__graph-link", d: geometry.path, fill: "none", stroke: link.color ?? "var(--sia-chart-axis)", strokeWidth: link.width ?? Math.max(1, Math.sqrt(link.value ?? 1)), strokeDasharray: link.dashed ? "6 4" : void 0 }),
+          geometry.arrow ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { className: "sia-chart__graph-arrow", points: geometry.arrow, fill: link.color ?? "var(--sia-chart-axis)" }) : null
         ] }, `${link.source}-${link.target}-${index}`);
       }) }),
       activeNodes.map((node, index) => {
@@ -5967,11 +5991,11 @@ var GraphChart = (0, import_react34.forwardRef)(function GraphChart2({ nodes, li
         const halfWidth = node.imageSource ? (node.imageSize?.[0] ?? 60) / 2 : radius, halfHeight = node.imageSource ? (node.imageSize?.[1] ?? 60) / 2 : radius;
         const labelX = position.x + (node.labelPosition === "right" ? halfWidth + 5 : node.labelPosition === "left" ? -halfWidth - 5 : 0);
         const labelY = position.y + 4 + (node.labelPosition === "top" ? -halfHeight - 10 : node.labelPosition === "bottom" ? halfHeight + 10 : 0);
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
           ChartMark,
           {
             label: `${node.name}\uFF0C${node.value ?? 0}`,
-            tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: node.name, series: node.category, value: node.value ?? 0 }),
+            tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: node.name, series: node.category, value: node.value ?? 0 }),
             tooltipPoint: [position.x, position.y],
             onPointerDown: (event) => {
               if (!(node.draggable ?? draggable) || node.fixed) return;
@@ -6006,11 +6030,11 @@ var GraphChart = (0, import_react34.forwardRef)(function GraphChart2({ nodes, li
               setForceRestart((value) => value + 1);
             },
             children: [
-              node.imageSource ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("image", { className: "sia-chart__graph-node", href: node.imageSource, x: position.x - halfWidth, y: position.y - halfHeight, width: halfWidth * 2, height: halfHeight * 2, preserveAspectRatio: "none" }) : node.symbol === "star" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { "data-symbol": "star", points: Array.from({ length: 10 }, (_, i) => {
+              node.imageSource ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("image", { className: "sia-chart__graph-node", href: node.imageSource, x: position.x - halfWidth, y: position.y - halfHeight, width: halfWidth * 2, height: halfHeight * 2, preserveAspectRatio: "none" }) : node.symbol === "star" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { "data-symbol": "star", points: Array.from({ length: 10 }, (_, i) => {
                 const angle = -Math.PI / 2 + i * Math.PI / 5, r = i % 2 ? radius * 0.5 : radius;
                 return `${position.x + Math.cos(angle) * r},${position.y + Math.sin(angle) * r}`;
-              }).join(" "), fill: color, className: "sia-chart__graph-node", style: { stroke: node.borderColor, strokeWidth: node.borderWidth } }) : node.symbol === "square" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: position.x - radius, y: position.y - radius, width: radius * 2, height: radius * 2, rx: 4, fill: color, className: "sia-chart__graph-node", style: { stroke: node.borderColor, strokeWidth: node.borderWidth } }) : node.symbol === "diamond" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: position.x - radius * 0.72, y: position.y - radius * 0.72, width: radius * 1.44, height: radius * 1.44, rx: 3, transform: `rotate(45 ${position.x} ${position.y})`, fill: color, className: "sia-chart__graph-node", style: { stroke: node.borderColor, strokeWidth: node.borderWidth } }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: position.x, cy: position.y, r: radius, fill: color, className: "sia-chart__graph-node", style: { stroke: node.borderColor, strokeWidth: node.borderWidth } }),
-              showLabels ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: labelX, y: labelY, textAnchor: node.labelPosition === "left" ? "end" : node.labelPosition === "right" ? "start" : "middle", className: "sia-chart__graph-label", style: node.labelColor ? { fill: node.labelColor, fontWeight: 400, textShadow: "none" } : void 0, children: (node.label ?? node.name).split("\n").map((line, i, lines) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: labelX, dy: i === 0 ? -(lines.length - 1) * 7 : 14, children: line }, i)) }) : null
+              }).join(" "), fill: color, className: "sia-chart__graph-node", style: { stroke: node.borderColor, strokeWidth: node.borderWidth } }) : node.symbol === "square" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: position.x - radius, y: position.y - radius, width: radius * 2, height: radius * 2, rx: 4, fill: color, className: "sia-chart__graph-node", style: { stroke: node.borderColor, strokeWidth: node.borderWidth } }) : node.symbol === "diamond" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: position.x - radius * 0.72, y: position.y - radius * 0.72, width: radius * 1.44, height: radius * 1.44, rx: 3, transform: `rotate(45 ${position.x} ${position.y})`, fill: color, className: "sia-chart__graph-node", style: { stroke: node.borderColor, strokeWidth: node.borderWidth } }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: position.x, cy: position.y, r: radius, fill: color, className: "sia-chart__graph-node", style: { stroke: node.borderColor, strokeWidth: node.borderWidth } }),
+              showLabels ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: labelX, y: labelY, textAnchor: node.labelPosition === "left" ? "end" : node.labelPosition === "right" ? "start" : "middle", className: "sia-chart__graph-label", style: node.labelColor ? { fill: node.labelColor, fontWeight: 400, textShadow: "none" } : void 0, children: (node.label ?? node.name).split("\n").map((line, i, lines) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { x: labelX, dy: i === 0 ? -(lines.length - 1) * 7 : 14, children: line }, i)) }) : null
             ]
           },
           node.id
@@ -6019,8 +6043,8 @@ var GraphChart = (0, import_react34.forwardRef)(function GraphChart2({ nodes, li
     ] })
   ] });
 });
-var ForceGraphChart = (0, import_react34.forwardRef)(function ForceGraphChart2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GraphChart, { ...props, layout: "force", ref });
+var ForceGraphChart = (0, import_react35.forwardRef)(function ForceGraphChart2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GraphChart, { ...props, layout: "force", ref });
 });
 var ForceChart = ForceGraphChart;
 var chartMaps = /* @__PURE__ */ new Map();
@@ -6048,12 +6072,12 @@ function colorBetween(start, end, ratio) {
   const to = read(end);
   return `rgb(${from.map((value, index) => Math.round(value + ((to[index] ?? value) - value) * Math.max(0, Math.min(1, ratio)))).join(" ")})`;
 }
-var MapChart = (0, import_react34.forwardRef)(function MapChart2({ overlayProjection, bundledLines, largeMarkPoints, markLineEffectRenderer = "svg", insetStyle, insetLabelStyle, regionHoverable = true, markPointTooltipFormatter, emphasisValueRange, onRegionHover, coordinateTransform, specialAreas, labelCoordinates, labelOffsets, nameMap, wheelZoomFactors, clampVisualValues = false, showMap = true, visualMapLayout, labelStyle, emphasisLabelStyle, regionStyle, emphasisRegionStyle, outOfRangeColor, scaleLimit, roamController = false, map, geoJson, data, colors = ["#e6f4ff", "#1677ff"], nameProperty = "name", showLabels = true, showEmphasisLabels = false, tooltipFormatter, roam = false, selectedMode = false, selected, defaultSelected, onSelectionChange, calculableVisualMap = false, visualRange, defaultVisualRange, onVisualRangeChange, markPoints = [], markLines = [], onRegionClick, toolbox, plotBounds: sourcePlotBounds, longitudeRatio, geographicInsets = [], valueDomain, showVisualMap = true, seriesName, ...props }, ref) {
-  const [internalSelected, setInternalSelected] = (0, import_react34.useState)(() => [...defaultSelected ?? data.filter((item) => item.selected).map((item) => item.name)]);
+var MapChart = (0, import_react35.forwardRef)(function MapChart2({ overlayProjection, bundledLines, largeMarkPoints, markLineEffectRenderer = "svg", insetStyle, insetLabelStyle, regionHoverable = true, markPointTooltipFormatter, emphasisValueRange, onRegionHover, coordinateTransform, specialAreas, labelCoordinates, labelOffsets, nameMap, wheelZoomFactors, clampVisualValues = false, showMap = true, visualMapLayout, labelStyle, emphasisLabelStyle, regionStyle, emphasisRegionStyle, outOfRangeColor, scaleLimit, roamController = false, map, geoJson, data, colors = ["#e6f4ff", "#1677ff"], nameProperty = "name", showLabels = true, showEmphasisLabels = false, tooltipFormatter, roam = false, selectedMode = false, selected, defaultSelected, onSelectionChange, calculableVisualMap = false, visualRange, defaultVisualRange, onVisualRangeChange, markPoints = [], markLines = [], onRegionClick, toolbox, plotBounds: sourcePlotBounds, longitudeRatio, geographicInsets = [], valueDomain, showVisualMap = true, seriesName, ...props }, ref) {
+  const [internalSelected, setInternalSelected] = (0, import_react35.useState)(() => [...defaultSelected ?? data.filter((item) => item.selected).map((item) => item.name)]);
   const selectedNames = selected ?? internalSelected;
-  const [hoveredRegion, setHoveredRegion] = (0, import_react34.useState)();
-  const [hoveredMarkPoint, setHoveredMarkPoint] = (0, import_react34.useState)();
-  const [internalHoveredValueRange, setHoveredValueRange] = (0, import_react34.useState)();
+  const [hoveredRegion, setHoveredRegion] = (0, import_react35.useState)();
+  const [hoveredMarkPoint, setHoveredMarkPoint] = (0, import_react35.useState)();
+  const [internalHoveredValueRange, setHoveredValueRange] = (0, import_react35.useState)();
   const hoveredValueRange = emphasisValueRange ?? internalHoveredValueRange;
   const roamControl = useMapRoam(roam, scaleLimit, wheelZoomFactors);
   const { view } = roamControl;
@@ -6068,8 +6092,8 @@ var MapChart = (0, import_react34.forwardRef)(function MapChart2({ overlayProjec
   const values = data.map((item) => item.value);
   const minimum = valueDomain?.[0] ?? (values.length ? Math.min(...values) : 0);
   const maximum = valueDomain?.[1] ?? (values.length ? Math.max(...values) : 1);
-  const [internalVisualRange, setInternalVisualRange] = (0, import_react34.useState)(() => [...defaultVisualRange ?? [minimum, maximum]]);
-  (0, import_react34.useEffect)(() => {
+  const [internalVisualRange, setInternalVisualRange] = (0, import_react35.useState)(() => [...defaultVisualRange ?? [minimum, maximum]]);
+  (0, import_react35.useEffect)(() => {
     if (!visualRange && !defaultVisualRange) setInternalVisualRange([minimum, maximum]);
   }, [defaultVisualRange, maximum, minimum, visualRange]);
   const currentVisualRange = visualRange ?? internalVisualRange;
@@ -6095,10 +6119,10 @@ var MapChart = (0, import_react34.forwardRef)(function MapChart2({ overlayProjec
       linearScale(point[1], [bounds.minY, bounds.maxY], [plotBounds ? plotBounds.y + plotBounds.height : 306, plotBounds?.y ?? 44])
     ];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, ref, toolbox: chartToolbox, empty: !collection?.features.length && !overlayProjection, ariaLabel: props.ariaLabel ?? "\u5730\u56FE", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { ref: roamControl.host, ...roamControl.handlers, "data-map-viewport": true, tabIndex: roam ? 0 : void 0, role: roam ? "group" : void 0, "aria-label": roam ? "\u5730\u56FE\u6F2B\u6E38\uFF1A\u62D6\u52A8\u5E73\u79FB\u3001\u6EDA\u8F6E\u7F29\u653E\u3001Home \u8FD8\u539F" : void 0, style: { touchAction: roam ? "none" : void 0 }, children: [
-      roam ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: 0, y: 0, width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, fill: "transparent", className: "sia-chart__map-roam-surface" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { "data-map-transform": true, style: { display: showMap ? void 0 : "none" }, transform: `translate(${view.x} ${view.y}) scale(${view.scale})`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, ref, toolbox: chartToolbox, empty: !collection?.features.length && !overlayProjection, ariaLabel: props.ariaLabel ?? "\u5730\u56FE", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { ref: roamControl.host, ...roamControl.handlers, "data-map-viewport": true, tabIndex: roam ? 0 : void 0, role: roam ? "group" : void 0, "aria-label": roam ? "\u5730\u56FE\u6F2B\u6E38\uFF1A\u62D6\u52A8\u5E73\u79FB\u3001\u6EDA\u8F6E\u7F29\u653E\u3001Home \u8FD8\u539F" : void 0, style: { touchAction: roam ? "none" : void 0 }, children: [
+      roam ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: 0, y: 0, width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, fill: "transparent", className: "sia-chart__map-roam-surface" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { "data-map-transform": true, style: { display: showMap ? void 0 : "none" }, transform: `translate(${view.x} ${view.y}) scale(${view.scale})`, children: [
         collection?.features.map((feature, featureIndex) => {
           const originalName = String(feature.properties[nameProperty] ?? feature.properties.name ?? `\u533A\u57DF ${featureIndex + 1}`);
           const name = nameMap?.[originalName] ?? originalName;
@@ -6141,9 +6165,9 @@ var MapChart = (0, import_react34.forwardRef)(function MapChart2({ overlayProjec
               onSelectionChange?.(next);
             }
           };
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { style: regionHoverable ? void 0 : { pointerEvents: "none" }, tabIndex: regionHoverable ? void 0 : -1, "data-map-region": name, "data-map-original-name": originalName, "aria-selected": selectedMode ? isSelected : void 0, label: `${name}\uFF0C${datum ? formatChartNumber(value) : "\u65E0\u6570\u636E"}`, tooltip: tooltipFormatter ? tooltipFormatter(name, datum) : datum ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name, series: seriesName, value }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: name }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { style: regionHoverable ? void 0 : { pointerEvents: "none" }, tabIndex: regionHoverable ? void 0 : -1, "data-map-region": name, "data-map-original-name": originalName, "aria-selected": selectedMode ? isSelected : void 0, label: `${name}\uFF0C${datum ? formatChartNumber(value) : "\u65E0\u6570\u636E"}`, tooltip: tooltipFormatter ? tooltipFormatter(name, datum) : datum ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name, series: seriesName, value }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
               seriesName,
               "\uFF1A\u65E0\u6570\u636E"
             ] })
@@ -6168,20 +6192,20 @@ var MapChart = (0, import_react34.forwardRef)(function MapChart2({ overlayProjec
             toggleRegion();
             onRegionClick?.({ name, value, data: datum ?? feature, nativeEvent: event });
           }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: path, fill: color, style: appearance.regionStyle, opacity: outOfRangeColor || value >= currentVisualRange[0] && value <= currentVisualRange[1] ? 1 : 0.16, className: `sia-chart__map-region${isSelected ? " sia-chart__map-region--selected" : ""}`, fillRule: "evenodd" }),
-            appearance.showLabel ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: center[0], y: center[1] + 4, textAnchor: "middle", style: appearance.labelStyle, className: "sia-chart__map-label", children: name }) : null,
-            datum?.legendSymbols?.map((symbol, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { "data-map-legend-symbol": symbol.name, cx: center[0] + 3 + 7 * index, cy: center[1] - 10, r: 3, fill: symbol.color, pointerEvents: "none" }, symbol.name))
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: path, fill: color, style: appearance.regionStyle, opacity: outOfRangeColor || value >= currentVisualRange[0] && value <= currentVisualRange[1] ? 1 : 0.16, className: `sia-chart__map-region${isSelected ? " sia-chart__map-region--selected" : ""}`, fillRule: "evenodd" }),
+            appearance.showLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: center[0], y: center[1] + 4, textAnchor: "middle", style: appearance.labelStyle, className: "sia-chart__map-label", children: name }) : null,
+            datum?.legendSymbols?.map((symbol, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { "data-map-legend-symbol": symbol.name, cx: center[0] + 3 + 7 * index, cy: center[1] - 10, r: 3, fill: symbol.color, pointerEvents: "none" }, symbol.name))
           ] }, `${name}-${featureIndex}`);
         }),
         geographicInsets.map((inset) => {
           const anchor = project(inset.coordinate), unit = project([inset.coordinate[0] + 1, inset.coordinate[1]]);
           const scale = (unit[0] - anchor[0]) / inset.unitsPerLongitude;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { "data-map-inset": inset.name, role: "img", "aria-label": inset.name, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: inset.polygons.map((polygon) => polygon.map((point, index) => `${index ? "L" : "M"} ${anchor[0] + point[0] * scale} ${anchor[1] + point[1] * scale}`).join(" ") + " Z").join(" "), fill: "#ccc", style: insetStyle }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: anchor[0] + inset.label[0] * scale, y: anchor[1] + inset.label[1] * scale, textAnchor: "middle", fontSize: 10, style: insetLabelStyle, children: inset.name })
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { "data-map-inset": inset.name, role: "img", "aria-label": inset.name, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: inset.polygons.map((polygon) => polygon.map((point, index) => `${index ? "L" : "M"} ${anchor[0] + point[0] * scale} ${anchor[1] + point[1] * scale}`).join(" ") + " Z").join(" "), fill: "#ccc", style: insetStyle }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: anchor[0] + inset.label[0] * scale, y: anchor[1] + inset.label[1] * scale, textAnchor: "middle", fontSize: 10, style: insetLabelStyle, children: inset.name })
           ] }, inset.name);
         }),
-        bundledLines ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartBundledMapCanvas, { ...bundledLines, edges: bundledLines.edges.map((edge) => ({ source: project(edge.source), target: project(edge.target) })), points: bundledLines.points?.map(project), width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360 }) : null,
+        bundledLines ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartBundledMapCanvas, { ...bundledLines, edges: bundledLines.edges.map((edge) => ({ source: project(edge.source), target: project(edge.target) })), points: bundledLines.points?.map(project), width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360 }) : null,
         markLines.map((line, index) => {
           if (line.visualMap && ((line.value ?? minimum) < currentVisualRange[0] || (line.value ?? minimum) > currentVisualRange[1])) return null;
           const source = project(line.source);
@@ -6192,24 +6216,24 @@ var MapChart = (0, import_react34.forwardRef)(function MapChart2({ overlayProjec
           const path = `M ${source[0]} ${source[1]} Q ${middleX} ${middleY} ${target[0]} ${target[1]}`;
           const color = line.color ?? (line.visualMap ? chartColorRamp(colors, ((line.value ?? minimum) - minimum) / Math.max(1, maximum - minimum)) : chartColor(index, props.palette ?? DEFAULT_CHART_PALETTE));
           const angle = Math.atan2(target[1] - middleY, target[0] - middleX) * 180 / Math.PI;
-          const content = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMapLineReveal, { source, control: [middleX, middleY], target, enabled: Boolean(line.reveal), ...line.reveal, children: (visibleControl, visibleTarget) => {
+          const content = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMapLineReveal, { source, control: [middleX, middleY], target, enabled: Boolean(line.reveal), ...line.reveal, children: (visibleControl, visibleTarget) => {
             const visiblePath = `M ${source[0]} ${source[1]} Q ${visibleControl[0]} ${visibleControl[1]} ${visibleTarget[0]} ${visibleTarget[1]}`, visibleAngle = Math.atan2(visibleTarget[1] - visibleControl[1], visibleTarget[0] - visibleControl[0]) * 180 / Math.PI;
-            return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: visiblePath, style: { ...line.lineStyle, filter: line.shadowBlur ? `drop-shadow(0 0 ${line.shadowBlur}px ${color})` : line.lineStyle?.filter }, fill: "none", stroke: color, strokeWidth: line.width ?? 1.5, strokeDasharray: line.dashed ? "5 5" : void 0 }),
-              line.endpointSizes ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                line.endpointSymbols?.[0] !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { style: line.endpointStyle, "data-map-line-start": true, cx: source[0], cy: source[1], r: line.endpointSizes[0], fill: color }) : null,
-                line.endpointSymbols?.[1] === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { style: line.endpointStyle, "data-map-line-end": true, cx: visibleTarget[0], cy: visibleTarget[1], r: line.endpointSizes[1], fill: color }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { style: line.endpointStyle, "data-map-line-end": true, transform: `translate(${visibleTarget[0]} ${visibleTarget[1]}) rotate(${visibleAngle})`, d: `M0 0 L${-line.endpointSizes[1] * 2} ${-line.endpointSizes[1]} L${-line.endpointSizes[1] * 2} ${line.endpointSizes[1]} Z`, fill: color })
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: visiblePath, style: { ...line.lineStyle, filter: line.shadowBlur ? `drop-shadow(0 0 ${line.shadowBlur}px ${color})` : line.lineStyle?.filter }, fill: "none", stroke: color, strokeWidth: line.width ?? 1.5, strokeDasharray: line.dashed ? "5 5" : void 0 }),
+              line.endpointSizes ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                line.endpointSymbols?.[0] !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { style: line.endpointStyle, "data-map-line-start": true, cx: source[0], cy: source[1], r: line.endpointSizes[0], fill: color }) : null,
+                line.endpointSymbols?.[1] === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { style: line.endpointStyle, "data-map-line-end": true, cx: visibleTarget[0], cy: visibleTarget[1], r: line.endpointSizes[1], fill: color }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { style: line.endpointStyle, "data-map-line-end": true, transform: `translate(${visibleTarget[0]} ${visibleTarget[1]}) rotate(${visibleAngle})`, d: `M0 0 L${-line.endpointSizes[1] * 2} ${-line.endpointSizes[1]} L${-line.endpointSizes[1] * 2} ${line.endpointSizes[1]} Z`, fill: color })
               ] }) : null,
-              line.movingEffect ? markLineEffectRenderer === "canvas" ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMapLineEffect, { source, control: [middleX, middleY], target, ...line.movingEffect }) : line.effect ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { r: 4, fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("animateMotion", { dur: "2s", repeatCount: "indefinite", path }) }) : null
+              line.movingEffect ? markLineEffectRenderer === "canvas" ? null : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMapLineEffect, { source, control: [middleX, middleY], target, ...line.movingEffect }) : line.effect ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { r: 4, fill: color, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("animateMotion", { dur: "2s", repeatCount: "indefinite", path }) }) : null
             ] });
           } });
-          return line.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { "data-map-line": line.name, "data-map-line-series": line.seriesName, className: "sia-chart__map-mark-line", label: line.name ?? "\u5730\u56FE\u6807\u7EBF", tooltip: line.tooltip, tooltipPoint: [middleX, middleY], children: content }, `${line.name ?? index}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { className: `sia-chart__map-mark-line${line.effect ? " sia-chart__map-effect" : ""}`, children: content }, `${line.name ?? index}-${index}`);
+          return line.tooltip ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { "data-map-line": line.name, "data-map-line-series": line.seriesName, className: "sia-chart__map-mark-line", label: line.name ?? "\u5730\u56FE\u6807\u7EBF", tooltip: line.tooltip, tooltipPoint: [middleX, middleY], children: content }, `${line.name ?? index}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { className: `sia-chart__map-mark-line${line.effect ? " sia-chart__map-effect" : ""}`, children: content }, `${line.name ?? index}-${index}`);
         }),
-        markLineEffectRenderer === "canvas" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMapEffectCanvas, { width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, effects: markLines.filter((line) => line.movingEffect && (!line.visualMap || (line.value ?? minimum) >= currentVisualRange[0] && (line.value ?? minimum) <= currentVisualRange[1])).map((line) => {
+        markLineEffectRenderer === "canvas" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMapEffectCanvas, { width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, effects: markLines.filter((line) => line.movingEffect && (!line.visualMap || (line.value ?? minimum) >= currentVisualRange[0] && (line.value ?? minimum) <= currentVisualRange[1])).map((line) => {
           const source = project(line.source), target = project(line.target), control = line.curveMode ? mapLineControl(source, target, line.curveness ?? 0.2) : [(source[0] + target[0]) / 2, (source[1] + target[1]) / 2 - (line.curveness ?? 0.2) * Math.hypot(target[0] - source[0], target[1] - source[1])];
           return { source, target, control, ...line.movingEffect };
         }) }) : null,
-        largeMarkPoints ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLargeMapPointCanvas, { width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, groups: largeMarkPoints.map((group) => ({ ...group, points: group.points.map(project) })) }) : null,
+        largeMarkPoints ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLargeMapPointCanvas, { width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, groups: largeMarkPoints.map((group) => ({ ...group, points: group.points.map(project) })) }) : null,
         markPoints.map((point, index) => {
           const position = point.coordinateSpace === "svg" ? point.coordinate : project(point.coordinate);
           const markValue = point.value ?? minimum;
@@ -6217,38 +6241,38 @@ var MapChart = (0, import_react34.forwardRef)(function MapChart2({ overlayProjec
           const color = point.color ?? (point.visualMap ? chartColorRamp(colors, (markValue - minimum) / Math.max(1, maximum - minimum)) : chartColor(index, props.palette ?? DEFAULT_CHART_PALETTE));
           const size = point.size ?? 7, emphasized = hoveredMarkPoint === index;
           const style = { ...point.style, ...emphasized ? point.emphasisStyle : void 0 };
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { "data-map-point": point.name, "data-map-point-series": point.seriesName, label: `${point.name}\uFF0C${point.value ?? ""}`, tooltip: markPointTooltipFormatter ? markPointTooltipFormatter(point) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("strong", { children: [
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { "data-map-point": point.name, "data-map-point-series": point.seriesName, label: `${point.name}\uFF0C${point.value ?? ""}`, tooltip: markPointTooltipFormatter ? markPointTooltipFormatter(point) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("strong", { children: [
               point.seriesName,
-              point.seriesName ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("br", {}) : null,
+              point.seriesName ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("br", {}) : null,
               point.name
             ] }),
-            point.value != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("b", { children: formatChartNumber(point.value) }) : null
-          ] }), tooltipPoint: position, onPointerMove: () => setHoveredMarkPoint(index), onPointerLeave: () => setHoveredMarkPoint(void 0), onFocus: () => setHoveredMarkPoint(index), onBlur: () => setHoveredMarkPoint(void 0), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMapPointEntrance, { enabled: point.entrance ?? false, x: position[0], y: position[1], children: [
-            point.imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("image", { "data-map-point-image": true, href: point.imageSrc, x: position[0] - size, y: position[1] - size, width: size * 2, height: size * 2, preserveAspectRatio: "none", style }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-              point.effect ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("circle", { cx: position[0], cy: position[1], r: size, fill: "none", stroke: color, className: "sia-chart__map-ripple", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("animate", { attributeName: "r", values: `${size};${size * 2.8}`, dur: "1.5s", repeatCount: "indefinite" }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("animate", { attributeName: "opacity", values: ".9;0", dur: "1.5s", repeatCount: "indefinite" })
+            point.value != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("b", { children: formatChartNumber(point.value) }) : null
+          ] }), tooltipPoint: position, onPointerMove: () => setHoveredMarkPoint(index), onPointerLeave: () => setHoveredMarkPoint(void 0), onFocus: () => setHoveredMarkPoint(index), onBlur: () => setHoveredMarkPoint(void 0), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMapPointEntrance, { enabled: point.entrance ?? false, x: position[0], y: position[1], children: [
+            point.imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("image", { "data-map-point-image": true, href: point.imageSrc, x: position[0] - size, y: position[1] - size, width: size * 2, height: size * 2, preserveAspectRatio: "none", style }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+              point.effect ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("circle", { cx: position[0], cy: position[1], r: size, fill: "none", stroke: color, className: "sia-chart__map-ripple", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("animate", { attributeName: "r", values: `${size};${size * 2.8}`, dur: "1.5s", repeatCount: "indefinite" }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("animate", { attributeName: "opacity", values: ".9;0", dur: "1.5s", repeatCount: "indefinite" })
               ] }) : null,
-              point.scaleEffect ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("circle", { className: "sia-chart__map-point", "data-map-scale-effect": point.scaleEffect.duration, cx: position[0], cy: position[1], r: size * (point.scaleEffect.scaleSize ?? 2) * 0.1, fill: "none", style: { stroke: color, strokeWidth: 0.1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("animate", { attributeName: "r", values: `${size * (point.scaleEffect.scaleSize ?? 2) * 0.1};${size * (point.scaleEffect.scaleSize ?? 2)}`, dur: `${point.scaleEffect.duration}ms`, repeatCount: "indefinite", calcMode: "linear" }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("animate", { attributeName: "stroke-width", values: ".1;1", dur: `${point.scaleEffect.duration}ms`, repeatCount: "indefinite", calcMode: "linear" })
-              ] }) : point.symbol === "pin" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { className: "sia-chart__map-point", transform: `translate(${position[0]} ${position[1]})`, d: point.pinShape === "arc" ? `M${-Math.cos(Math.PI / 5) * size} ${(Math.sin(Math.PI / 5) - 1.5) * size} A${size} ${size} 0 1 1 ${Math.cos(Math.PI / 5) * size} ${(Math.sin(Math.PI / 5) - 1.5) * size} L0 0 Z` : `M0 0 C${-size / 2} ${-size} ${-size} ${-size} ${-size} ${-size * 1.5} A${size} ${size} 0 1 1 ${size} ${-size * 1.5} C${size} ${-size} ${size / 2} ${-size} 0 0 Z`, fill: color, style }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: position[0], cy: position[1], r: size, fill: point.symbol === "emptyCircle" ? "none" : color, stroke: point.symbol === "emptyCircle" ? color : void 0, style, className: "sia-chart__map-point" })
+              point.scaleEffect ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("circle", { className: "sia-chart__map-point", "data-map-scale-effect": point.scaleEffect.duration, cx: position[0], cy: position[1], r: size * (point.scaleEffect.scaleSize ?? 2) * 0.1, fill: "none", style: { stroke: color, strokeWidth: 0.1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("animate", { attributeName: "r", values: `${size * (point.scaleEffect.scaleSize ?? 2) * 0.1};${size * (point.scaleEffect.scaleSize ?? 2)}`, dur: `${point.scaleEffect.duration}ms`, repeatCount: "indefinite", calcMode: "linear" }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("animate", { attributeName: "stroke-width", values: ".1;1", dur: `${point.scaleEffect.duration}ms`, repeatCount: "indefinite", calcMode: "linear" })
+              ] }) : point.symbol === "pin" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { className: "sia-chart__map-point", transform: `translate(${position[0]} ${position[1]})`, d: point.pinShape === "arc" ? `M${-Math.cos(Math.PI / 5) * size} ${(Math.sin(Math.PI / 5) - 1.5) * size} A${size} ${size} 0 1 1 ${Math.cos(Math.PI / 5) * size} ${(Math.sin(Math.PI / 5) - 1.5) * size} L0 0 Z` : `M0 0 C${-size / 2} ${-size} ${-size} ${-size} ${-size} ${-size * 1.5} A${size} ${size} 0 1 1 ${size} ${-size * 1.5} C${size} ${-size} ${size / 2} ${-size} 0 0 Z`, fill: color, style }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: position[0], cy: position[1], r: size, fill: point.symbol === "emptyCircle" ? "none" : color, stroke: point.symbol === "emptyCircle" ? color : void 0, style, className: "sia-chart__map-point" })
             ] }),
-            point.label != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { "data-map-point-value": true, x: position[0], y: position[1] - (point.symbol === "pin" ? size * 1.5 : 0), textAnchor: "middle", dominantBaseline: "central", style: { fill: "#fff", fontSize: 12, pointerEvents: "none", ...point.labelStyle }, children: point.label }) : null,
-            point.showEmphasisLabel && emphasized ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { "data-map-point-label": true, x: position[0], y: position[1] - size - 6, textAnchor: "middle", style: { fill: color, fontSize: 12 }, children: point.name }) : null
+            point.label != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { "data-map-point-value": true, x: position[0], y: position[1] - (point.symbol === "pin" ? size * 1.5 : 0), textAnchor: "middle", dominantBaseline: "central", style: { fill: "#fff", fontSize: 12, pointerEvents: "none", ...point.labelStyle }, children: point.label }) : null,
+            point.showEmphasisLabel && emphasized ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { "data-map-point-label": true, x: position[0], y: position[1] - size - 6, textAnchor: "middle", style: { fill: color, fontSize: 12 }, children: point.name }) : null
           ] }) }, `${point.name}-${index}`);
         })
       ] })
     ] }),
-    showVisualMap ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartVisualMap, { min: minimum, max: maximum, colors, x: 18, y: 260, width: 104, label: "\u6570\u503C", ...visualMapLayout, onHoverRange: setHoveredValueRange, indicatorValue: data.find((item) => item.name === hoveredRegion)?.value, calculable: calculableVisualMap, range: currentVisualRange, onRangeChange: updateVisualRange }) : null,
-    roamController ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartRoamController, { x: (props.viewBoxSize?.[0] ?? 720) - 90, y: 5, onPan: roamControl.pan, onZoom: (factor) => roamControl.zoom(factor, [(props.viewBoxSize?.[0] ?? 720) / 2, (props.viewBoxSize?.[1] ?? 360) / 2]) }) : null
+    showVisualMap ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartVisualMap, { min: minimum, max: maximum, colors, x: 18, y: 260, width: 104, label: "\u6570\u503C", ...visualMapLayout, onHoverRange: setHoveredValueRange, indicatorValue: data.find((item) => item.name === hoveredRegion)?.value, calculable: calculableVisualMap, range: currentVisualRange, onRangeChange: updateVisualRange }) : null,
+    roamController ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartRoamController, { x: (props.viewBoxSize?.[0] ?? 720) - 90, y: 5, onPan: roamControl.pan, onZoom: (factor) => roamControl.zoom(factor, [(props.viewBoxSize?.[0] ?? 720) / 2, (props.viewBoxSize?.[1] ?? 360) / 2]) }) : null
   ] });
 });
-var GaugeChart = (0, import_react34.forwardRef)(function GaugeChart2({ tooltipFormatter, data, min = 0, max = 100, startAngle = 210, endAngle = -30, segments, splitNumber = 10, showAxisLabels = true, showProgress = true, detailOffset = 84, valueFormatter, onDataClick, palette, appearance = "sia", animationProgress, ...props }, ref) {
+var GaugeChart = (0, import_react35.forwardRef)(function GaugeChart2({ tooltipFormatter, data, min = 0, max = 100, startAngle = 210, endAngle = -30, segments, splitNumber = 10, showAxisLabels = true, showProgress = true, detailOffset = 84, valueFormatter, onDataClick, palette, appearance = "sia", animationProgress, ...props }, ref) {
   const count = Math.max(1, data.length);
   const legacy = appearance === "macarons";
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, empty: !data.length, ariaLabel: props.ariaLabel ?? "\u4EEA\u8868\u76D8", children: [...data].sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0)).map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, empty: !data.length, ariaLabel: props.ariaLabel ?? "\u4EEA\u8868\u76D8", children: [...data].sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0)).map((item, index) => {
     const centerX = item.center?.[0] ?? (count === 1 ? 360 : 150 + index * 420 / Math.max(1, count - 1));
     const centerY = item.center?.[1] ?? 194;
     const radius = item.radius ?? (count === 1 ? 122 : Math.min(96, 270 / count));
@@ -6272,68 +6296,68 @@ var GaugeChart = (0, import_react34.forwardRef)(function GaugeChart2({ tooltipFo
       const major = Math.max(1, item.splitNumber ?? splitNumber), minor = Math.max(1, item.tickCount ?? 5);
       const at = (angle, r) => [centerX + Math.cos(angle) * r, centerY + Math.sin(angle) * r];
       const titlePosition = item.nameOffset ?? [0, -radius * 0.4], detailPosition = item.detailPosition ?? [0, radius * 0.4];
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { label: `${item.name}\uFF0C${item.value}`, tooltip: tooltipFormatter?.(item) ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: item.name, value: item.value }), tooltipPoint: [centerX, centerY], onPointerUp: (event) => onDataClick?.({ name: item.name, value: item.value, data: item, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { style: item.glow ? { filter: "drop-shadow(0 0 4px #fff)" } : void 0, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { label: `${item.name}\uFF0C${item.value}`, tooltip: tooltipFormatter?.(item) ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: item.name, value: item.value }), tooltipPoint: [centerX, centerY], onPointerUp: (event) => onDataClick?.({ name: item.name, value: item.value, data: item, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { style: item.glow ? { filter: "drop-shadow(0 0 4px #fff)" } : void 0, children: [
         normalizedSegments.map((segment, i) => {
           const d = svgArcPath(centerX, centerY, radius, start + sweep * previous, start + sweep * segment.until, Math.max(0, radius - axisWidth));
           previous = segment.until;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d, fill: segment.color }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d, fill: segment.color }, i);
         }),
         item.showTicks !== false ? Array.from({ length: major * minor + 1 }, (_, tick) => {
           const t = tick / (major * minor), angle = start + sweep * t, a = at(angle, radius), b = at(angle, radius - (item.tickLength ?? 8));
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: a[0], y1: a[1], x2: b[0], y2: b[1], stroke: resolveColor(item.tickColor, t, "#eee"), strokeWidth: 1 }, tick);
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: a[0], y1: a[1], x2: b[0], y2: b[1], stroke: resolveColor(item.tickColor, t, "#eee"), strokeWidth: 1 }, tick);
         }) : null,
         Array.from({ length: major + 1 }, (_, tick) => {
           const t = tick / major, angle = start + sweep * t, a = at(angle, radius), b = at(angle, radius - (item.splitLength ?? 30)), p = at(angle, radius - (item.splitLength ?? 30) - 5), value = Number((itemMin + (itemMax - itemMin) * t).toFixed(6));
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: a[0], y1: a[1], x2: b[0], y2: b[1], stroke: resolveColor(item.splitColor, t, "#eee"), strokeWidth: item.splitWidth ?? 2 }),
-            showAxisLabels ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: p[0], y: p[1] + 4, textAnchor: Math.cos(angle) < -0.34 ? "start" : Math.cos(angle) > 0.34 ? "end" : "middle", fill: resolveColor(item.labelColor, t, "#333"), fontSize: item.labelFontSize ?? 12, fontWeight: item.labelFontWeight, children: item.labelFormatter?.(value) ?? formatChartNumber(value) }) : null
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: a[0], y1: a[1], x2: b[0], y2: b[1], stroke: resolveColor(item.splitColor, t, "#eee"), strokeWidth: item.splitWidth ?? 2 }),
+            showAxisLabels ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: p[0], y: p[1] + 4, textAnchor: Math.cos(angle) < -0.34 ? "start" : Math.cos(angle) > 0.34 ? "end" : "middle", fill: resolveColor(item.labelColor, t, "#333"), fontSize: item.labelFontSize ?? 12, fontWeight: item.labelFontWeight, children: item.labelFormatter?.(value) ?? formatChartNumber(value) }) : null
           ] }, tick);
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { points: [[0, start], [0, valueAngle]], enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (points) => {
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: [[0, start], [0, valueAngle]], enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (points) => {
           const angle = points[1]?.[1] ?? valueAngle, pointerPoints = gaugePointerPoints([centerX, centerY], angle, radius * pointerLength, item.pointerWidth ?? 8);
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { points: pointerPoints.map((point) => point.join(",")).join(" "), fill: resolveColor(item.pointerColor, ratio, colorAt(ratio)) });
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { points: pointerPoints.map((point) => point.join(",")).join(" "), fill: resolveColor(item.pointerColor, ratio, colorAt(ratio)) });
         } }),
-        item.showName !== false ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: centerX + titlePosition[0], y: centerY + titlePosition[1], textAnchor: "middle", dominantBaseline: "middle", fontSize: item.nameFontSize ?? 15, fontWeight: item.nameFontWeight, fontStyle: item.nameFontStyle, fill: item.nameColor ?? "#333", children: item.name }) : null,
-        item.showDetail !== false ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: centerX + detailPosition[0] - (item.detailBox?.width ?? 100) / 2, y: centerY + detailPosition[1], width: item.detailBox?.width ?? 100, height: item.detailBox?.height ?? 40, fill: item.detailBox?.background ?? "transparent", stroke: item.detailBox?.borderColor ?? "transparent", strokeWidth: item.detailBox?.borderWidth ?? 0 }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: centerX + detailPosition[0], y: centerY + detailPosition[1] + (item.detailBox?.height ?? 40) / 2, dominantBaseline: "central", textAnchor: "middle", fontSize: item.detailFontSize ?? 30, fontWeight: item.detailFontWeight, fill: resolveColor(item.detailColor, ratio, colorAt(ratio)), children: valueFormatter ? valueFormatter(item.value) : `${formatChartNumber(item.value)}${item.unit ?? ""}` })
+        item.showName !== false ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: centerX + titlePosition[0], y: centerY + titlePosition[1], textAnchor: "middle", dominantBaseline: "middle", fontSize: item.nameFontSize ?? 15, fontWeight: item.nameFontWeight, fontStyle: item.nameFontStyle, fill: item.nameColor ?? "#333", children: item.name }) : null,
+        item.showDetail !== false ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: centerX + detailPosition[0] - (item.detailBox?.width ?? 100) / 2, y: centerY + detailPosition[1], width: item.detailBox?.width ?? 100, height: item.detailBox?.height ?? 40, fill: item.detailBox?.background ?? "transparent", stroke: item.detailBox?.borderColor ?? "transparent", strokeWidth: item.detailBox?.borderWidth ?? 0 }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: centerX + detailPosition[0], y: centerY + detailPosition[1] + (item.detailBox?.height ?? 40) / 2, dominantBaseline: "central", textAnchor: "middle", fontSize: item.detailFontSize ?? 30, fontWeight: item.detailFontWeight, fill: resolveColor(item.detailColor, ratio, colorAt(ratio)), children: valueFormatter ? valueFormatter(item.value) : `${formatChartNumber(item.value)}${item.unit ?? ""}` })
         ] }) : null
       ] }) }, `${item.name}-${index}`);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${item.name}\uFF0C${formatChartNumber(item.value)}`, tooltip: tooltipFormatter?.(item) ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: item.name, value: item.value, formatter: valueFormatter }), tooltipPoint: [centerX, centerY], onPointerUp: (event) => onDataClick?.({ name: item.name, value: item.value, data: item, nativeEvent: event }), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${item.name}\uFF0C${formatChartNumber(item.value)}`, tooltip: tooltipFormatter?.(item) ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: item.name, value: item.value, formatter: valueFormatter }), tooltipPoint: [centerX, centerY], onPointerUp: (event) => onDataClick?.({ name: item.name, value: item.value, data: item, nativeEvent: event }), children: [
       normalizedSegments.map((segment, segmentIndex) => {
         const path = svgArcPath(centerX, centerY, radius, start + sweep * previous, start + sweep * Math.max(previous, Math.min(1, segment.until)), radius - 15);
         previous = Math.max(previous, Math.min(1, segment.until));
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: path, fill: segment.color }, segmentIndex);
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: path, fill: segment.color }, segmentIndex);
       }),
-      showProgress ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: svgArcPath(centerX, centerY, radius, start, valueAngle, radius - 15), fill: color, className: "sia-chart__gauge-progress" }) : null,
+      showProgress ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: svgArcPath(centerX, centerY, radius, start, valueAngle, radius - 15), fill: color, className: "sia-chart__gauge-progress" }) : null,
       Array.from({ length: splitNumber + 1 }, (_, tick) => {
         const tickAngle = start + sweep * tick / Math.max(1, splitNumber);
         const inner = [centerX + Math.cos(tickAngle) * (radius - 25), centerY + Math.sin(tickAngle) * (radius - 25)];
         const outer = [centerX + Math.cos(tickAngle) * (radius - 17), centerY + Math.sin(tickAngle) * (radius - 17)];
         const label = [centerX + Math.cos(tickAngle) * (radius - 39), centerY + Math.sin(tickAngle) * (radius - 39)];
         const tickValue = itemMin + (itemMax - itemMin) * tick / Math.max(1, splitNumber);
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: inner[0], y1: inner[1], x2: outer[0], y2: outer[1], className: "sia-chart__gauge-tick" }),
-          showAxisLabels ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: label[0], y: label[1] + 3, textAnchor: "middle", className: "sia-chart__gauge-axis-label", children: formatChartNumber(tickValue) }) : null
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: inner[0], y1: inner[1], x2: outer[0], y2: outer[1], className: "sia-chart__gauge-tick" }),
+          showAxisLabels ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: label[0], y: label[1] + 3, textAnchor: "middle", className: "sia-chart__gauge-axis-label", children: formatChartNumber(tickValue) }) : null
         ] }, tick);
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("line", { x1: centerX, y1: centerY, x2: pointer[0], y2: pointer[1], stroke: color, strokeWidth: item.pointerWidth ?? 5, strokeLinecap: "round", className: "sia-chart__gauge-pointer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("animate", { attributeName: "x2", from: pointerStart[0], to: pointer[0], dur: "700ms", fill: "freeze" }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("animate", { attributeName: "y2", from: pointerStart[1], to: pointer[1], dur: "700ms", fill: "freeze" })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("line", { x1: centerX, y1: centerY, x2: pointer[0], y2: pointer[1], stroke: color, strokeWidth: item.pointerWidth ?? 5, strokeLinecap: "round", className: "sia-chart__gauge-pointer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("animate", { attributeName: "x2", from: pointerStart[0], to: pointer[0], dur: "700ms", fill: "freeze" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("animate", { attributeName: "y2", from: pointerStart[1], to: pointer[1], dur: "700ms", fill: "freeze" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: centerX, cy: centerY, r: 8, fill: color }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: centerX, y: centerY + 54, textAnchor: "middle", className: "sia-chart__gauge-name", children: item.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: centerX, y: centerY + detailOffset, textAnchor: "middle", className: "sia-chart__gauge-value", children: valueFormatter ? valueFormatter(item.value) : `${formatChartNumber(item.value)}${item.unit ?? ""}` })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: centerX, cy: centerY, r: 8, fill: color }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: centerX, y: centerY + 54, textAnchor: "middle", className: "sia-chart__gauge-name", children: item.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: centerX, y: centerY + detailOffset, textAnchor: "middle", className: "sia-chart__gauge-value", children: valueFormatter ? valueFormatter(item.value) : `${formatChartNumber(item.value)}${item.unit ?? ""}` })
     ] }, `${item.name}-${index}`);
   }) });
 });
-var FunnelChart = (0, import_react34.forwardRef)(function FunnelChart2({ data = EMPTY_PIE_DATA, series, sort = "descending", gap = 4, align = "center", orientation = "vertical", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, legendOrder, legendLayout, onDataChange, ...props }, ref) {
+var FunnelChart = (0, import_react35.forwardRef)(function FunnelChart2({ data = EMPTY_PIE_DATA, series, sort = "descending", gap = 4, align = "center", orientation = "vertical", showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, toolbox, appearance = "sia", animationProgress, legendOrder, legendLayout, onDataChange, ...props }, ref) {
   const legacy = appearance === "macarons";
-  const [activeFunnel, setActiveFunnel] = (0, import_react34.useState)(null);
-  const initialFunnels = (0, import_react34.useMemo)(() => series?.length ? series : [{ data, sort, gap, align, orientation }], [series, data, sort, gap, align, orientation]);
-  const [sourceFunnels, setSourceFunnels] = (0, import_react34.useState)(initialFunnels);
-  (0, import_react34.useEffect)(() => setSourceFunnels(initialFunnels), [initialFunnels]);
+  const [activeFunnel, setActiveFunnel] = (0, import_react35.useState)(null);
+  const initialFunnels = (0, import_react35.useMemo)(() => series?.length ? series : [{ data, sort, gap, align, orientation }], [series, data, sort, gap, align, orientation]);
+  const [sourceFunnels, setSourceFunnels] = (0, import_react35.useState)(initialFunnels);
+  (0, import_react35.useEffect)(() => setSourceFunnels(initialFunnels), [initialFunnels]);
   const allData = sourceFunnels.flatMap((funnel) => funnel.data);
   const legendData = [...new Map(allData.map((item) => [item.name, item])).values()];
   const legend = useLegendSelection(legendData.map((item) => item.name), legendSelected, onLegendSelectionChange);
@@ -6341,7 +6365,7 @@ var FunnelChart = (0, import_react34.forwardRef)(function FunnelChart2({ data =
   const [magicType, resolvedToolbox] = useToolboxMagicType(toolbox, "\u6F0F\u6597");
   const chartToolbox = typeof resolvedToolbox === "object" ? {
     ...resolvedToolbox,
-    dataView: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { series: sourceFunnels.map((item, index) => ({ name: item.name ?? String(index + 1), data: item.data.map((d) => d.value) })), onApply: (values) => {
+    dataView: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { series: sourceFunnels.map((item, index) => ({ name: item.name ?? String(index + 1), data: item.data.map((d) => d.value) })), onApply: (values) => {
       const next = sourceFunnels.map((item, index) => ({ ...item, data: item.data.map((d, i) => ({ ...d, value: values[index][i] })) }));
       setSourceFunnels(next);
       onDataChange?.(next);
@@ -6353,7 +6377,7 @@ var FunnelChart = (0, import_react34.forwardRef)(function FunnelChart2({ data =
     }
   } : resolvedToolbox;
   const funnels = sourceFunnels.map((funnel) => ({ ...funnel, data: funnel.data.filter((item) => legend.isSelected(item.name)) }));
-  if (/pie|饼/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  if (/pie|饼/i.test(magicType)) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     PieChart,
     {
       ...props,
@@ -6370,8 +6394,8 @@ var FunnelChart = (0, import_react34.forwardRef)(function FunnelChart2({ data =
       toolbox: chartToolbox
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, toolbox: chartToolbox, empty: !sourceFunnels.some((item) => item.data.length), ariaLabel: props.ariaLabel ?? "\u6F0F\u6597\u56FE", children: [
-    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { x: legendLayout?.x ?? 360, y: legendLayout?.y ?? 20, orientation: legendLayout?.orientation, align: legendLayout?.orientation === "vertical" ? "start" : void 0, itemGap: legacy ? 10 : 18, items: legendData.map((item, index) => ({ name: item.name, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, toolbox: chartToolbox, empty: !sourceFunnels.some((item) => item.data.length), ariaLabel: props.ariaLabel ?? "\u6F0F\u6597\u56FE", children: [
+    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { x: legendLayout?.x ?? 360, y: legendLayout?.y ?? 20, orientation: legendLayout?.orientation, align: legendLayout?.orientation === "vertical" ? "start" : void 0, itemGap: legacy ? 10 : 18, items: legendData.map((item, index) => ({ name: item.name, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
     funnels.flatMap((funnel, funnelIndex) => {
       if (legacy) {
         const shapes = layoutFunnelValues(funnel.data.map((d) => d.value), { left: funnel.left ?? 80, top: funnel.top ?? 60, width: funnel.width ?? 503, height: funnel.height ?? 259, gap: funnel.gap ?? 0, min: funnel.min, max: funnel.max, minSize: funnel.minSize, maxSize: funnel.maxSize, sort: funnel.sort, align: funnel.align });
@@ -6382,10 +6406,10 @@ var FunnelChart = (0, import_react34.forwardRef)(function FunnelChart2({ data =
           const emphasized = activeFunnel === markKey;
           const position = (emphasized ? funnel.emphasisLabelPosition : void 0) ?? funnel.labelPosition ?? "right";
           const labelX = position === "inside" ? shape.center[0] : position === "left" ? (shape.points[0][0] + shape.points[3][0]) / 2 - 20 : (shape.points[1][0] + shape.points[2][0]) / 2 + 20;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { onPointerMove: () => setActiveFunnel(markKey), onPointerLeave: () => setActiveFunnel(null), onFocus: () => setActiveFunnel(markKey), onBlur: () => setActiveFunnel(null), label: `${funnel.name ?? ""}\uFF0C${item.name}\uFF0C${item.value}`, tooltip: funnel.tooltipFormatter?.(item) ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: item.name, series: funnel.name, value: item.value }), tooltipPoint: shape.center, onPointerUp: (event) => onDataClick?.({ name: item.name, value: item.value, seriesName: funnel.name, data: item, nativeEvent: event }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { points: shape.points, enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (points) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { points: points.map((p) => p.join(",")).join(" "), fill: color, stroke: funnel.borderColor ?? "#fff", strokeWidth: funnel.borderWidth ?? 1 }) }),
-            position !== "inside" && funnel.showLabelLines !== false ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: position === "left" ? (shape.points[0][0] + shape.points[3][0]) / 2 : (shape.points[1][0] + shape.points[2][0]) / 2, y1: shape.center[1], x2: labelX, y2: shape.center[1], stroke: color }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: labelX, y: shape.center[1] + 4, textAnchor: position === "inside" ? "middle" : position === "left" ? "end" : "start", fontSize: 12, fill: position === "inside" ? "#fff" : color, children: (emphasized ? funnel.emphasisLabelFormatter?.(item) : void 0) ?? funnel.labelFormatter?.(item) ?? item.name })
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { onPointerMove: () => setActiveFunnel(markKey), onPointerLeave: () => setActiveFunnel(null), onFocus: () => setActiveFunnel(markKey), onBlur: () => setActiveFunnel(null), label: `${funnel.name ?? ""}\uFF0C${item.name}\uFF0C${item.value}`, tooltip: funnel.tooltipFormatter?.(item) ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: item.name, series: funnel.name, value: item.value }), tooltipPoint: shape.center, onPointerUp: (event) => onDataClick?.({ name: item.name, value: item.value, seriesName: funnel.name, data: item, nativeEvent: event }), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: shape.points, enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (points) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { points: points.map((p) => p.join(",")).join(" "), fill: color, stroke: funnel.borderColor ?? "#fff", strokeWidth: funnel.borderWidth ?? 1 }) }),
+            position !== "inside" && funnel.showLabelLines !== false ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: position === "left" ? (shape.points[0][0] + shape.points[3][0]) / 2 : (shape.points[1][0] + shape.points[2][0]) / 2, y1: shape.center[1], x2: labelX, y2: shape.center[1], stroke: color }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: labelX, y: shape.center[1] + 4, textAnchor: position === "inside" ? "middle" : position === "left" ? "end" : "start", fontSize: 12, fill: position === "inside" ? "#fff" : color, children: (emphasized ? funnel.emphasisLabelFormatter?.(item) : void 0) ?? funnel.labelFormatter?.(item) ?? item.name })
           ] }, markKey);
         });
       }
@@ -6412,9 +6436,9 @@ var FunnelChart = (0, import_react34.forwardRef)(function FunnelChart2({ data =
         const color = getColor(index + funnelIndex, item.color, palette);
         const labelX = funnelOrientation === "vertical" ? funnelLeft + currentOffset + currentSize / 2 : funnelLeft + cursor + sectionSize / 2;
         const labelY = funnelOrientation === "vertical" ? funnelTop + cursor + sectionSize / 2 : funnelTop + currentOffset + currentSize / 2;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${item.name}\uFF0C${formatChartNumber(item.value)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: item.name, series: funnel.name, value: item.value }), tooltipPoint: [labelX, labelY], onPointerUp: (event) => onDataClick?.({ name: item.name, value: item.value, seriesName: funnel.name, data: item, nativeEvent: event }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polygon", { points, fill: color, className: "sia-chart__funnel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x: labelX, y: labelY + 5, textAnchor: "middle", className: "sia-chart__funnel-label", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${item.name}\uFF0C${formatChartNumber(item.value)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: item.name, series: funnel.name, value: item.value }), tooltipPoint: [labelX, labelY], onPointerUp: (event) => onDataClick?.({ name: item.name, value: item.value, seriesName: funnel.name, data: item, nativeEvent: event }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("polygon", { points, fill: color, className: "sia-chart__funnel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x: labelX, y: labelY + 5, textAnchor: "middle", className: "sia-chart__funnel-label", children: [
             item.name,
             "\u3000",
             formatChartNumber(item.value)
@@ -6424,7 +6448,7 @@ var FunnelChart = (0, import_react34.forwardRef)(function FunnelChart2({ data =
     })
   ] });
 });
-var HeatmapChart = (0, import_react34.forwardRef)(function HeatmapChart2({ raster, xLabels = [], yLabels = [], data = [], points = [], colors = ["#e6f4ff", "#1677ff"], showValues = false, pointRadius = 30, blur = 16, minAlpha = 0.12, maxAlpha = 0.82, valueFormatter, onDataClick, ...props }, ref) {
+var HeatmapChart = (0, import_react35.forwardRef)(function HeatmapChart2({ raster, xLabels = [], yLabels = [], data = [], points = [], colors = ["#e6f4ff", "#1677ff"], showValues = false, pointRadius = 30, blur = 16, minAlpha = 0.12, maxAlpha = 0.82, valueFormatter, onDataClick, ...props }, ref) {
   const pointMode = points.length > 0;
   const values = pointMode ? points.map((point) => point.value) : data.flatMap((row) => [...row]);
   const minimum = values.length ? Math.min(...values) : 0;
@@ -6433,43 +6457,43 @@ var HeatmapChart = (0, import_react34.forwardRef)(function HeatmapChart2({ raste
   const cellHeight = PLOT.height / Math.max(1, yLabels.length);
   const pointXDomain = niceChartDomain(points.map((point) => point.x), false);
   const pointYDomain = niceChartDomain(points.map((point) => point.y), false);
-  const filterId = `sia-heat-${(0, import_react34.useId)().replaceAll(":", "")}`;
-  if (raster) return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, ref, empty: !points.length, ariaLabel: props.ariaLabel ?? "\u50CF\u7D20\u70ED\u529B\u56FE", children: [
-    raster.backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("image", { href: raster.backgroundImage, x: 0, y: 0, width: raster.width, height: raster.height, preserveAspectRatio: "none", pointerEvents: "none" }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HeatmapRaster, { width: raster.width, height: raster.height, points, options: raster })
+  const filterId = `sia-heat-${(0, import_react35.useId)().replaceAll(":", "")}`;
+  if (raster) return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, ref, empty: !points.length, ariaLabel: props.ariaLabel ?? "\u50CF\u7D20\u70ED\u529B\u56FE", children: [
+    raster.backgroundImage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("image", { href: raster.backgroundImage, x: 0, y: 0, width: raster.width, height: raster.height, preserveAspectRatio: "none", pointerEvents: "none" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HeatmapRaster, { width: raster.width, height: raster.height, points, options: raster })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, ref, empty: pointMode ? !points.length : !xLabels.length || !yLabels.length, ariaLabel: props.ariaLabel ?? "\u70ED\u529B\u56FE", children: [
-    pointMode ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("filter", { id: filterId, x: "-100%", y: "-100%", width: "300%", height: "300%", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("feGaussianBlur", { stdDeviation: blur }) }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartVisualMap, { min: minimum, max: maximum, colors, x: PLOT.x + PLOT.width - 120, y: 325, width: 120 }),
-    pointMode ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: PLOT.x, y: PLOT.y, width: PLOT.width, height: PLOT.height, rx: 4, fill: "var(--sia-chart-track)" }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { filter: `url(#${filterId})`, className: "sia-chart__heat-density", children: points.map((point, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, ref, empty: pointMode ? !points.length : !xLabels.length || !yLabels.length, ariaLabel: props.ariaLabel ?? "\u70ED\u529B\u56FE", children: [
+    pointMode ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("filter", { id: filterId, x: "-100%", y: "-100%", width: "300%", height: "300%", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("feGaussianBlur", { stdDeviation: blur }) }) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartVisualMap, { min: minimum, max: maximum, colors, x: PLOT.x + PLOT.width - 120, y: 325, width: 120 }),
+    pointMode ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: PLOT.x, y: PLOT.y, width: PLOT.width, height: PLOT.height, rx: 4, fill: "var(--sia-chart-track)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { filter: `url(#${filterId})`, className: "sia-chart__heat-density", children: points.map((point, index) => {
         const ratio = (point.value - minimum) / Math.max(1, maximum - minimum);
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: linearScale(point.x, [pointXDomain[0], pointXDomain[1]], [PLOT.x, PLOT.x + PLOT.width]), cy: linearScale(point.y, [pointYDomain[0], pointYDomain[1]], [PLOT_BOTTOM, PLOT.y]), r: pointRadius, fill: colorBetween(colors[0], colors[1], ratio), opacity: minAlpha + (maxAlpha - minAlpha) * ratio }, index);
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: linearScale(point.x, [pointXDomain[0], pointXDomain[1]], [PLOT.x, PLOT.x + PLOT.width]), cy: linearScale(point.y, [pointYDomain[0], pointYDomain[1]], [PLOT_BOTTOM, PLOT.y]), r: pointRadius, fill: colorBetween(colors[0], colors[1], ratio), opacity: minAlpha + (maxAlpha - minAlpha) * ratio }, index);
       }) }),
       points.map((point, index) => {
         const x = linearScale(point.x, [pointXDomain[0], pointXDomain[1]], [PLOT.x, PLOT.x + PLOT.width]);
         const y = linearScale(point.y, [pointYDomain[0], pointYDomain[1]], [PLOT_BOTTOM, PLOT.y]);
         const name = point.name ?? `\u70ED\u70B9 ${index + 1}`;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { label: `${name}\uFF0C${point.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name, value: point.value, formatter: valueFormatter }), tooltipPoint: [x, y], onPointerUp: (event) => onDataClick?.({ name, value: point.value, data: point, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: x, cy: y, r: Math.max(8, pointRadius * 0.55), fill: "transparent" }) }, `hit-${index}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { label: `${name}\uFF0C${point.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name, value: point.value, formatter: valueFormatter }), tooltipPoint: [x, y], onPointerUp: (event) => onDataClick?.({ name, value: point.value, data: point, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: x, cy: y, r: Math.max(8, pointRadius * 0.55), fill: "transparent" }) }, `hit-${index}`);
       })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      xLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT.x + (index + 0.5) * cellWidth, y: PLOT_BOTTOM + 20, textAnchor: "middle", className: "sia-chart__axis-label", children: label }, `${label}-${index}`)),
-      yLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT.x - 10, y: PLOT.y + (index + 0.5) * cellHeight + 4, textAnchor: "end", className: "sia-chart__axis-label", children: label }, `${label}-${index}`)),
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      xLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT.x + (index + 0.5) * cellWidth, y: PLOT_BOTTOM + 20, textAnchor: "middle", className: "sia-chart__axis-label", children: label }, `${label}-${index}`)),
+      yLabels.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT.x - 10, y: PLOT.y + (index + 0.5) * cellHeight + 4, textAnchor: "end", className: "sia-chart__axis-label", children: label }, `${label}-${index}`)),
       yLabels.flatMap((yLabel, yIndex) => xLabels.map((xLabel, xIndex) => {
         const value = data[yIndex]?.[xIndex] ?? 0;
         const ratio = (value - minimum) / Math.max(1, maximum - minimum);
         const x = PLOT.x + xIndex * cellWidth;
         const y = PLOT.y + yIndex * cellHeight;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { label: `${yLabel}\uFF0C${xLabel}\uFF0C${formatChartNumber(value)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: `${yLabel} / ${xLabel}`, value, formatter: valueFormatter }), tooltipPoint: [x + cellWidth / 2, y + cellHeight / 2], onPointerUp: (event) => onDataClick?.({ name: `${yLabel} / ${xLabel}`, value, data: value, nativeEvent: event }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: x + 1, y: y + 1, width: Math.max(0, cellWidth - 2), height: Math.max(0, cellHeight - 2), rx: 3, fill: colorBetween(colors[0], colors[1], ratio), className: "sia-chart__heat-cell" }),
-          showValues ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: x + cellWidth / 2, y: y + cellHeight / 2 + 4, textAnchor: "middle", className: "sia-chart__heat-label", children: formatChartNumber(value) }) : null
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { label: `${yLabel}\uFF0C${xLabel}\uFF0C${formatChartNumber(value)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: `${yLabel} / ${xLabel}`, value, formatter: valueFormatter }), tooltipPoint: [x + cellWidth / 2, y + cellHeight / 2], onPointerUp: (event) => onDataClick?.({ name: `${yLabel} / ${xLabel}`, value, data: value, nativeEvent: event }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: x + 1, y: y + 1, width: Math.max(0, cellWidth - 2), height: Math.max(0, cellHeight - 2), rx: 3, fill: colorBetween(colors[0], colors[1], ratio), className: "sia-chart__heat-cell" }),
+          showValues ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: x + cellWidth / 2, y: y + cellHeight / 2 + 4, textAnchor: "middle", className: "sia-chart__heat-label", children: formatChartNumber(value) }) : null
         ] }, `${xLabel}-${yLabel}`);
       }))
     ] })
   ] });
 });
-var ThemeRiverChart = (0, import_react34.forwardRef)(function ThemeRiverChart2({ categories, series, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
+var ThemeRiverChart = (0, import_react35.forwardRef)(function ThemeRiverChart2({ categories, series, legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
   const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
   const activeSeries = series.filter((item) => legend.isSelected(item.name));
   const totals = categories.map((_, index) => activeSeries.reduce((sum, item) => sum + Math.max(0, item.data[index] ?? 0), 0));
@@ -6477,10 +6501,10 @@ var ThemeRiverChart = (0, import_react34.forwardRef)(function ThemeRiverChart2({
   const xAt = (index) => PLOT.x + index / Math.max(1, categories.length - 1) * PLOT.width;
   const scale = PLOT.height * 0.78 / maximum;
   const bottoms = totals.map((total) => 184 + total * scale / 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, ref, palette, empty: !categories.length || !series.length, ariaLabel: props.ariaLabel ?? "\u4E3B\u9898\u6CB3\u6D41\u56FE", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { items: series.map((item, index) => ({ name: item.name, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0, y: 330 }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT.x, y1: PLOT_BOTTOM, x2: PLOT.x + PLOT.width, y2: PLOT_BOTTOM, className: "sia-chart__axis-line" }),
-    categories.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: xAt(index), y: PLOT_BOTTOM + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: name }, `${name}-${index}`)),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, ref, palette, empty: !categories.length || !series.length, ariaLabel: props.ariaLabel ?? "\u4E3B\u9898\u6CB3\u6D41\u56FE", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { items: series.map((item, index) => ({ name: item.name, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0, y: 330 }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT.x, y1: PLOT_BOTTOM, x2: PLOT.x + PLOT.width, y2: PLOT_BOTTOM, className: "sia-chart__axis-line" }),
+    categories.map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: xAt(index), y: PLOT_BOTTOM + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: name }, `${name}-${index}`)),
     activeSeries.map((item) => {
       const seriesIndex = series.indexOf(item);
       const lower = categories.map((_, index) => [xAt(index), bottoms[index]]);
@@ -6491,12 +6515,12 @@ var ThemeRiverChart = (0, import_react34.forwardRef)(function ThemeRiverChart2({
       });
       const path = `${smoothSvgPath(upper)} ${smoothSvgPath([...lower].reverse()).replace(/^M/, "L")} Z`;
       const color = getColor(seriesIndex, item.color, palette);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: path, fill: color, className: "sia-chart__river" }),
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: path, fill: color, className: "sia-chart__river" }),
         upper.map((point, index) => {
           const value = item.data[index] ?? 0;
           const name = categories[index] ?? `${index + 1}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { label: `${item.name}\uFF0C${name}\uFF0C${value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name, series: item.name, value }), tooltipPoint: [point[0], (point[1] + lower[index][1]) / 2], onPointerUp: (event) => onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: point[0], cy: (point[1] + lower[index][1]) / 2, r: 8, fill: "transparent" }) }, `${name}-${index}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { label: `${item.name}\uFF0C${name}\uFF0C${value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name, series: item.name, value }), tooltipPoint: [point[0], (point[1] + lower[index][1]) / 2], onPointerUp: (event) => onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: point[0], cy: (point[1] + lower[index][1]) / 2, r: 8, fill: "transparent" }) }, `${name}-${index}`);
         })
       ] }, `${item.name}-${seriesIndex}`);
     })
@@ -6507,8 +6531,8 @@ function eventTime(value) {
   if (typeof value === "number") return value;
   return Date.parse(/^\d{4}-\d{2}-\d{2}$/.test(value) ? value.replace(/-/g, "/") : value);
 }
-var EventRiverChart = (0, import_react34.forwardRef)(function EventRiverChart2({ series, showLabels = true, draggable = true, appearance = "sia", plot = PLOT, animationProgress, boundaryGap = [0.05, 0.1], legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
-  const [restoreVersion, setRestoreVersion] = (0, import_react34.useState)(0);
+var EventRiverChart = (0, import_react35.forwardRef)(function EventRiverChart2({ series, showLabels = true, draggable = true, appearance = "sia", plot = PLOT, animationProgress, boundaryGap = [0.05, 0.1], legendInteractive = true, legendSelected, onLegendSelectionChange, onDataClick, palette, ...props }, ref) {
+  const [restoreVersion, setRestoreVersion] = (0, import_react35.useState)(0);
   const area = plot;
   palette = palette ?? (appearance === "macarons" ? ["#2ec7c9", "#b6a2de"] : void 0);
   const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
@@ -6521,13 +6545,13 @@ var EventRiverChart = (0, import_react34.forwardRef)(function EventRiverChart2({
   const selectedSeries = series.map((item, seriesIndex) => ({ item, seriesIndex })).filter(({ item }) => legend.isSelected(item.name));
   const packed = layoutEventRiver(selectedSeries.map(({ item }) => ({ weight: item.weight, data: item.data.map((event) => ({ weight: event.weight, evolution: [...event.evolution].filter((point) => Number.isFinite(eventTime(point.time))).sort((a, b) => eventTime(a.time) - eventTime(b.time)).map((point) => ({ x: linearScale(eventTime(point.time), timeDomain, [area.x, area.x + area.width]), value: point.value })) })) })), Math.max(1, Math.round(area.width / 40)), area);
   const timeTicks = calendarReferenceTicks(timeDomain);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${appearance === "macarons" ? " sia-chart--macarons sia-chart--event-river-reference" : ""}`, toolbox: props.toolbox ? { ...props.toolbox === true ? {} : props.toolbox, onRestore: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, className: `${props.className ?? ""}${appearance === "macarons" ? " sia-chart--macarons sia-chart--event-river-reference" : ""}`, toolbox: props.toolbox ? { ...props.toolbox === true ? {} : props.toolbox, onRestore: () => {
     setRestoreVersion((value) => value + 1);
     legend.replace(Object.fromEntries(series.map((item) => [item.name, legendSelected?.[item.name] !== false])));
     if (typeof props.toolbox === "object") props.toolbox.onRestore?.();
   } } : false, ref, palette, empty: !events.length || !times.length, ariaLabel: props.ariaLabel ?? "\u4E8B\u4EF6\u6CB3\u6D41\u56FE", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { items: series.map((item, index) => ({ name: item.name, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { orientation: "bottom", x: area.x, y: area.y + area.height, length: area.width, positions: timeTicks.map((tick) => (tick.value - timeDomain[0]) / (timeDomain[1] - timeDomain[0] || 1)), labels: timeTicks.map((tick) => tick.label), gridLength: area.height }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { items: series.map((item, index) => ({ name: item.name, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { orientation: "bottom", x: area.x, y: area.y + area.height, length: area.width, positions: timeTicks.map((tick) => (tick.value - timeDomain[0]) / (timeDomain[1] - timeDomain[0] || 1)), labels: timeTicks.map((tick) => tick.label), gridLength: area.height }),
     packed.map((geometry) => {
       const { item: eventSeries, seriesIndex } = selectedSeries[geometry.seriesIndex];
       const eventIndex = geometry.eventIndex, event = eventSeries.data[eventIndex];
@@ -6540,22 +6564,22 @@ var EventRiverChart = (0, import_react34.forwardRef)(function EventRiverChart2({
       const evolution = [...event.evolution].sort((left, right) => eventTime(left.time) - eventTime(right.time));
       const upper = geometry.points.map((point) => [point.x, centerY - point.thickness / 2]);
       const path = eventRiverOutline(geometry.points, centerY, geometry.tailX);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EventRiverBubble, { "data-event-id": event.id, "data-event-series": eventSeries.name, draggable, resetKey: `${restoreVersion}:${path}`, label: `${eventSeries.name}\uFF0C${event.name}\uFF0C${event.weight ?? ""}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: event.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: eventSeries.name }),
-        evolution.map((point, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EventRiverBubble, { "data-event-id": event.id, "data-event-series": eventSeries.name, draggable, resetKey: `${restoreVersion}:${path}`, label: `${eventSeries.name}\uFF0C${event.name}\uFF0C${event.weight ?? ""}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: event.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: eventSeries.name }),
+        evolution.map((point, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
           new Date(eventTime(point.time)).toLocaleDateString(),
           "\uFF1A",
           point.value,
           point.detail
         ] }, index))
-      ] }), tooltipPoint: [upper[0]?.[0] ?? PLOT.x, centerY], onPointerUp: (nativeEvent) => onDataClick?.({ name: event.name, value: event.weight ?? Math.max(...evolution.map((point) => point.value)), seriesName: eventSeries.name, data: event, nativeEvent }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EventRiverMotion, { geometry, enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (frame) => {
+      ] }), tooltipPoint: [upper[0]?.[0] ?? PLOT.x, centerY], onPointerUp: (nativeEvent) => onDataClick?.({ name: event.name, value: event.weight ?? Math.max(...evolution.map((point) => point.value)), seriesName: eventSeries.name, data: event, nativeEvent }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EventRiverMotion, { geometry, enabled: props.animation !== false, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (frame) => {
         const start = frame.points[0]?.x ?? area.x, half = Math.max(0, ...frame.points.map((point) => point.thickness)) / 2;
         const x = appearance === "macarons" ? Math.round(start) + (frame.tailX - start) / 2 : (start + frame.tailX) / 2;
         const y = appearance === "macarons" ? Math.round(frame.y - half) + half : frame.y;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { "data-event-scale": frame.scale, transform: `translate(${x} ${y}) scale(${frame.scale}) translate(${-x} ${-y})`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { style: { "--sia-event-emphasis": emphasisColor }, d: eventRiverOutline(frame.points, frame.y, frame.tailX, appearance === "macarons"), fill: color, "data-event-center": frame.y, "data-event-importance": geometry.importance, "data-event-tail": frame.tailX, className: "sia-chart__event-river" }),
-          showLabels && evolution.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: appearance === "macarons" ? x : (frame.points[0]?.x ?? area.x) + 6, textAnchor: appearance === "macarons" ? "middle" : void 0, y: frame.y + 4, className: "sia-chart__event-label", children: event.name }) : null
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { "data-event-scale": frame.scale, transform: `translate(${x} ${y}) scale(${frame.scale}) translate(${-x} ${-y})`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { style: { "--sia-event-emphasis": emphasisColor }, d: eventRiverOutline(frame.points, frame.y, frame.tailX, appearance === "macarons"), fill: color, "data-event-center": frame.y, "data-event-importance": geometry.importance, "data-event-tail": frame.tailX, className: "sia-chart__event-river" }),
+          showLabels && evolution.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: appearance === "macarons" ? x : (frame.points[0]?.x ?? area.x) + 6, textAnchor: appearance === "macarons" ? "middle" : void 0, y: frame.y + 4, className: "sia-chart__event-label", children: event.name }) : null
         ] });
       } }, restoreVersion) }, event.id ? `${eventSeries.name}-${event.id}` : `${eventSeries.name}-${event.name}-${eventIndex}`);
     })
@@ -6581,9 +6605,9 @@ function vennDistance(radiusA, radiusB, overlap) {
   }
   return (low + high) / 2;
 }
-var VennChart = (0, import_react34.forwardRef)(function VennChart2({ sets: initialSets, intersection: initialIntersection, appearance = "sia", emphasisColor, emphasisBorderColor, emphasisBorderWidth, onDataClick, palette, toolbox, ...props }, ref) {
-  const [sets, setSets] = (0, import_react34.useState)(initialSets), [intersection, setIntersection] = (0, import_react34.useState)(initialIntersection), [active, setActive] = (0, import_react34.useState)();
-  (0, import_react34.useEffect)(() => {
+var VennChart = (0, import_react35.forwardRef)(function VennChart2({ sets: initialSets, intersection: initialIntersection, appearance = "sia", emphasisColor, emphasisBorderColor, emphasisBorderWidth, onDataClick, palette, toolbox, ...props }, ref) {
+  const [sets, setSets] = (0, import_react35.useState)(initialSets), [intersection, setIntersection] = (0, import_react35.useState)(initialIntersection), [active, setActive] = (0, import_react35.useState)();
+  (0, import_react35.useEffect)(() => {
     setSets(initialSets);
     setIntersection(initialIntersection);
   }, [initialSets, initialIntersection]);
@@ -6602,7 +6626,7 @@ var VennChart = (0, import_react34.forwardRef)(function VennChart2({ sets: initi
   const centerB = [centerA[0] + distance3, centerA[1]];
   const colorA = getColor(0, sets[0].color, palette);
   const colorB = getColor(1, sets[1].color, palette);
-  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { series: [{ name: sets[0].name, data: [first] }, { name: sets[1].name, data: [second] }, { name: intersection.name ?? "\u516C\u5171", data: [overlap] }], onApply: (values) => {
+  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { series: [{ name: sets[0].name, data: [first] }, { name: sets[1].name, data: [second] }, { name: intersection.name ?? "\u516C\u5171", data: [overlap] }], onApply: (values) => {
     setSets([{ ...sets[0], value: values[0][0] }, { ...sets[1], value: values[1][0] }]);
     setIntersection({ ...intersection, value: values[2][0] });
   } }), onRestore: () => {
@@ -6613,21 +6637,21 @@ var VennChart = (0, import_react34.forwardRef)(function VennChart2({ sets: initi
   } } : toolbox;
   const markStyle = (index, color) => ({ fill: active === index ? emphasisColor ?? color : color, stroke: active === index ? emphasisBorderColor : void 0, strokeWidth: active === index ? emphasisBorderWidth : void 0, opacity: legacy ? 1 : void 0 });
   const lens = vennLensPath(centerA[0], centerA[1], radiusA, radiusB, distance3);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, empty: first <= 0 && second <= 0, ariaLabel: props.ariaLabel ?? "\u97E6\u6069\u56FE", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { onPointerMove: () => setActive(0), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(0), onBlur: () => setActive(void 0), label: `${sets[0].name}\uFF0C${first}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: sets[0].name, value: first }), tooltipPoint: centerA, onPointerUp: (event) => onDataClick?.({ name: sets[0].name, value: first, data: sets[0], nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: centerA[0], cy: centerA[1], r: radiusA, fill: colorA, style: markStyle(0, colorA), className: "sia-chart__venn-circle" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { onPointerMove: () => setActive(1), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(1), onBlur: () => setActive(void 0), label: `${sets[1].name}\uFF0C${second}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: sets[1].name, value: second }), tooltipPoint: centerB, onPointerUp: (event) => onDataClick?.({ name: sets[1].name, value: second, data: sets[1], nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: centerB[0], cy: centerB[1], r: radiusB, fill: colorB, style: markStyle(1, colorB), className: "sia-chart__venn-circle" }) }),
-    !legacy ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, className: `${props.className ?? ""}${legacy ? " sia-chart--macarons" : ""}`, ref, palette, empty: first <= 0 && second <= 0, ariaLabel: props.ariaLabel ?? "\u97E6\u6069\u56FE", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { onPointerMove: () => setActive(0), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(0), onBlur: () => setActive(void 0), label: `${sets[0].name}\uFF0C${first}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: sets[0].name, value: first }), tooltipPoint: centerA, onPointerUp: (event) => onDataClick?.({ name: sets[0].name, value: first, data: sets[0], nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: centerA[0], cy: centerA[1], r: radiusA, fill: colorA, style: markStyle(0, colorA), className: "sia-chart__venn-circle" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { onPointerMove: () => setActive(1), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(1), onBlur: () => setActive(void 0), label: `${sets[1].name}\uFF0C${second}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: sets[1].name, value: second }), tooltipPoint: centerB, onPointerUp: (event) => onDataClick?.({ name: sets[1].name, value: second, data: sets[1], nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: centerB[0], cy: centerB[1], r: radiusB, fill: colorB, style: markStyle(1, colorB), className: "sia-chart__venn-circle" }) }),
+    !legacy ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
       "    ",
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x: centerA[0] - Math.min(radiusA * 0.34, distance3 * 0.24), y: 178, textAnchor: "middle", className: "sia-chart__venn-label", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: centerA[0] - Math.min(radiusA * 0.34, distance3 * 0.24), children: sets[0].name }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: centerA[0] - Math.min(radiusA * 0.34, distance3 * 0.24), dy: 22, children: first })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x: centerA[0] - Math.min(radiusA * 0.34, distance3 * 0.24), y: 178, textAnchor: "middle", className: "sia-chart__venn-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { x: centerA[0] - Math.min(radiusA * 0.34, distance3 * 0.24), children: sets[0].name }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { x: centerA[0] - Math.min(radiusA * 0.34, distance3 * 0.24), dy: 22, children: first })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x: centerB[0] + Math.min(radiusB * 0.34, distance3 * 0.24), y: 178, textAnchor: "middle", className: "sia-chart__venn-label", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: centerB[0] + Math.min(radiusB * 0.34, distance3 * 0.24), children: sets[1].name }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: centerB[0] + Math.min(radiusB * 0.34, distance3 * 0.24), dy: 22, children: second })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x: centerB[0] + Math.min(radiusB * 0.34, distance3 * 0.24), y: 178, textAnchor: "middle", className: "sia-chart__venn-label", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { x: centerB[0] + Math.min(radiusB * 0.34, distance3 * 0.24), children: sets[1].name }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { x: centerB[0] + Math.min(radiusB * 0.34, distance3 * 0.24), dy: 22, children: second })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: [centerA, centerB].map((center, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: center[0], y: center[1] - (i === 0 ? radiusA : radiusB) - 16, textAnchor: "middle", style: { fill: i === 0 ? colorA : colorB, fontFamily: "Arial, Verdana, sans-serif", fontSize: 16, fontStyle: "italic", fontWeight: "bolder" }, children: sets[i].name }, i)) }),
-    overlap > 0 && lens && (!legacy || overlap < Math.min(first, second)) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { onPointerMove: () => setActive(2), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(2), onBlur: () => setActive(void 0), label: `${intersection.name ?? "\u4EA4\u96C6"}\uFF0C${overlap}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: intersection.name ?? "\u4EA4\u96C6", value: overlap }), tooltipPoint: [(centerA[0] + radiusA + centerB[0] - radiusB) / 2, centerA[1]], onPointerUp: (event) => onDataClick?.({ name: intersection.name ?? "\u4EA4\u96C6", value: overlap, data: intersection, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: lens, className: "sia-chart__venn-overlap", style: markStyle(2, intersection.color ?? getColor(2, void 0, palette)) }) }) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: [centerA, centerB].map((center, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: center[0], y: center[1] - (i === 0 ? radiusA : radiusB) - 16, textAnchor: "middle", style: { fill: i === 0 ? colorA : colorB, fontFamily: "Arial, Verdana, sans-serif", fontSize: 16, fontStyle: "italic", fontWeight: "bolder" }, children: sets[i].name }, i)) }),
+    overlap > 0 && lens && (!legacy || overlap < Math.min(first, second)) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { onPointerMove: () => setActive(2), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(2), onBlur: () => setActive(void 0), label: `${intersection.name ?? "\u4EA4\u96C6"}\uFF0C${overlap}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: intersection.name ?? "\u4EA4\u96C6", value: overlap }), tooltipPoint: [(centerA[0] + radiusA + centerB[0] - radiusB) / 2, centerA[1]], onPointerUp: (event) => onDataClick?.({ name: intersection.name ?? "\u4EA4\u96C6", value: overlap, data: intersection, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: lens, className: "sia-chart__venn-overlap", style: markStyle(2, intersection.color ?? getColor(2, void 0, palette)) }) }) : null
   ] });
 });
 function treemapValue(node) {
@@ -6646,18 +6670,18 @@ function layoutTreemap(nodes, x, y, width, height, gap, maxDepth, depth = 0, see
   });
   return result;
 }
-var TreemapChart = (0, import_react34.forwardRef)(function TreemapChart2({ data, gap = 4, maxDepth = 2, drilldown = false, showBreadcrumb = true, bounds, itemStyle, emphasis, cornerRadius = 5, showChildBoundaries = false, breadcrumbPosition = "top", breadcrumbRootName = "\u5168\u90E8", valueFormatter, onDataClick, palette, toolbox, ...props }, ref) {
-  const [path, setPath] = (0, import_react34.useState)([]);
-  const [sourceData, setSourceData] = (0, import_react34.useState)(data);
-  const [active, setActive] = (0, import_react34.useState)();
-  (0, import_react34.useEffect)(() => {
+var TreemapChart = (0, import_react35.forwardRef)(function TreemapChart2({ data, gap = 4, maxDepth = 2, drilldown = false, showBreadcrumb = true, bounds, itemStyle, emphasis, cornerRadius = 5, showChildBoundaries = false, breadcrumbPosition = "top", breadcrumbRootName = "\u5168\u90E8", valueFormatter, onDataClick, palette, toolbox, ...props }, ref) {
+  const [path, setPath] = (0, import_react35.useState)([]);
+  const [sourceData, setSourceData] = (0, import_react35.useState)(data);
+  const [active, setActive] = (0, import_react35.useState)();
+  (0, import_react35.useEffect)(() => {
     setSourceData(data);
     setPath([]);
   }, [data]);
   const currentData = path.reduce((nodes, name) => nodes.find((node) => node.name === name)?.children ?? nodes, sourceData);
   const top = drilldown && showBreadcrumb ? 52 : 28;
-  const rectangles = (0, import_react34.useMemo)(() => layoutTreemap(currentData, bounds?.x ?? 24, bounds?.y ?? top, bounds?.width ?? 672, bounds?.height ?? 336 - top, gap, maxDepth), [currentData, gap, maxDepth, top, bounds]);
-  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: currentData.map((node) => ({ name: node.name, data: [treemapValue(node)] })), onApply: (values) => {
+  const rectangles = (0, import_react35.useMemo)(() => layoutTreemap(currentData, bounds?.x ?? 24, bounds?.y ?? top, bounds?.width ?? 672, bounds?.height ?? 336 - top, gap, maxDepth), [currentData, gap, maxDepth, top, bounds]);
+  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: currentData.map((node) => ({ name: node.name, data: [treemapValue(node)] })), onApply: (values) => {
     const update = (nodes, depth) => nodes.map((node, i) => depth === path.length ? { ...node, value: values[i][0] } : node.name === path[depth] ? { ...node, children: update(node.children ?? [], depth + 1) } : node);
     setSourceData(update(sourceData, 0));
   } }), onRestore: () => {
@@ -6666,15 +6690,15 @@ var TreemapChart = (0, import_react34.forwardRef)(function TreemapChart2({ data,
     setActive(void 0);
     toolbox.onRestore?.();
   } } : toolbox;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, ref, palette, empty: !rectangles.length, ariaLabel: props.ariaLabel ?? "\u77E9\u5F62\u6811\u56FE", children: [
-    drilldown && showBreadcrumb ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { className: "sia-chart__treemap-breadcrumb", children: [breadcrumbRootName, ...path].map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { transform: `translate(${(bounds?.x ?? 24) + index * 96} ${breadcrumbPosition === "bottom" ? (bounds?.y ?? 28) + (bounds?.height ?? 308) + 4 : 28})`, role: "button", tabIndex: 0, onPointerUp: () => setPath(path.slice(0, index)), onKeyDown: (event) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, ref, palette, empty: !rectangles.length, ariaLabel: props.ariaLabel ?? "\u77E9\u5F62\u6811\u56FE", children: [
+    drilldown && showBreadcrumb ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { className: "sia-chart__treemap-breadcrumb", children: [breadcrumbRootName, ...path].map((name, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { transform: `translate(${(bounds?.x ?? 24) + index * 96} ${breadcrumbPosition === "bottom" ? (bounds?.y ?? 28) + (bounds?.height ?? 308) + 4 : 28})`, role: "button", tabIndex: 0, onPointerUp: () => setPath(path.slice(0, index)), onKeyDown: (event) => {
       if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         setPath(path.slice(0, index));
       }
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { width: 86, height: 24, rx: 5, style: breadcrumbPosition === "bottom" ? { fill: "transparent", stroke: "none" } : void 0 }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x: breadcrumbPosition === "bottom" ? 0 : 43, y: 16, textAnchor: breadcrumbPosition === "bottom" ? "start" : "middle", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { width: 86, height: 24, rx: 5, style: breadcrumbPosition === "bottom" ? { fill: "transparent", stroke: "none" } : void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x: breadcrumbPosition === "bottom" ? 0 : 43, y: 16, textAnchor: breadcrumbPosition === "bottom" ? "start" : "middle", children: [
         name,
         index < path.length ? " >" : ""
       ] })
@@ -6691,20 +6715,20 @@ var TreemapChart = (0, import_react34.forwardRef)(function TreemapChart2({ data,
           setActive(void 0);
         }
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { onPointerMove: () => setActive(index), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(index), onBlur: () => setActive(void 0), onKeyDown: (event) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { onPointerMove: () => setActive(index), onPointerLeave: () => setActive(void 0), onFocus: () => setActive(index), onBlur: () => setActive(void 0), onKeyDown: (event) => {
         if (event.key === "Enter" || event.key === " ") {
           event.preventDefault();
           enter();
         }
-      }, label: `${rectangle.node.name}\uFF0C${formatChartNumber(rectangle.value)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: rectangle.node.name, value: rectangle.value, formatter: valueFormatter }), tooltipPoint: [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2], onPointerUp: (event) => {
+      }, label: `${rectangle.node.name}\uFF0C${formatChartNumber(rectangle.value)}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: rectangle.node.name, value: rectangle.value, formatter: valueFormatter }), tooltipPoint: [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2], onPointerUp: (event) => {
         enter();
         onDataClick?.({ name: rectangle.node.name, value: rectangle.value, data: rectangle.node, nativeEvent: event });
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: rectangle.x, y: rectangle.y, width: rectangle.width, height: rectangle.height, rx: cornerRadius, fill: color, style: { stroke: style.borderColor, strokeWidth: style.borderWidth }, className: `sia-chart__treemap-node sia-chart__treemap-node--depth-${rectangle.depth}` }),
-        showChildBoundaries && rectangle.node.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { pointerEvents: "none", children: layoutTreemap(rectangle.node.children, rectangle.x, rectangle.y, rectangle.width, rectangle.height, 0, 0).map((child) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: child.x, y: child.y, width: child.width, height: child.height, fill: "none", stroke: style.borderColor ?? "#ccc", strokeWidth: 1 }, child.node.name)) }) : null,
-        showLabel && style.label?.show !== false ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("text", { x: rectangle.x + (style.label?.x ?? 9), y: rectangle.y + (style.label?.y ?? 18), className: "sia-chart__treemap-label", style: { fill: style.label?.color, fontSize: style.label?.fontSize, fontFamily: style.label?.fontFamily, fontWeight: style.label?.fontWeight, fontStyle: style.label?.fontStyle }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { children: (style.label?.formatter ?? "{b}").replaceAll("{b}", rectangle.node.name).replaceAll("{c}", String(rectangle.value)) }),
-          !itemStyle?.label?.formatter && rectangle.height > 44 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tspan", { x: rectangle.x + 9, dy: 17, children: valueFormatter ? valueFormatter(rectangle.value) : formatChartNumber(rectangle.value) }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: rectangle.x, y: rectangle.y, width: rectangle.width, height: rectangle.height, rx: cornerRadius, fill: color, style: { stroke: style.borderColor, strokeWidth: style.borderWidth }, className: `sia-chart__treemap-node sia-chart__treemap-node--depth-${rectangle.depth}` }),
+        showChildBoundaries && rectangle.node.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { pointerEvents: "none", children: layoutTreemap(rectangle.node.children, rectangle.x, rectangle.y, rectangle.width, rectangle.height, 0, 0).map((child) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: child.x, y: child.y, width: child.width, height: child.height, fill: "none", stroke: style.borderColor ?? "#ccc", strokeWidth: 1 }, child.node.name)) }) : null,
+        showLabel && style.label?.show !== false ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { x: rectangle.x + (style.label?.x ?? 9), y: rectangle.y + (style.label?.y ?? 18), className: "sia-chart__treemap-label", style: { fill: style.label?.color, fontSize: style.label?.fontSize, fontFamily: style.label?.fontFamily, fontWeight: style.label?.fontWeight, fontStyle: style.label?.fontStyle }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { children: (style.label?.formatter ?? "{b}").replaceAll("{b}", rectangle.node.name).replaceAll("{c}", String(rectangle.value)) }),
+          !itemStyle?.label?.formatter && rectangle.height > 44 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tspan", { x: rectangle.x + 9, dy: 17, children: valueFormatter ? valueFormatter(rectangle.value) : formatChartNumber(rectangle.value) }) : null
         ] }) : null
       ] }, `${path.join("/")}/${rectangle.node.name}-${index}`);
     })
@@ -6724,15 +6748,15 @@ function flattenTree(root, collapsed) {
   visit(root, 0);
   return { nodes, leafCount: Math.max(1, leafOrder), maxDepth: Math.max(0, ...nodes.map((item) => item.depth)) };
 }
-var TreeChart = (0, import_react34.forwardRef)(function TreeChart2({ data, itemStyle, emphasis, orientation = "horizontal", radial = false, nodeSize = 8, rootPosition, nodePadding, layerPadding, showLabels = true, emphasisShowLabels = true, nodeColor, edgeColor, edgeWidth, edgeShadow, roam = false, hoverable = true, labelFontSize, labelColor, linkStyle = "curve", collapsible = false, onToggle, onDataClick, palette, toolbox, ...props }, ref) {
-  const [sourceData, setSourceData] = (0, import_react34.useState)(data);
-  const [roamReset, setRoamReset] = (0, import_react34.useState)(0);
-  const [active, setActive] = (0, import_react34.useState)();
-  (0, import_react34.useEffect)(() => {
+var TreeChart = (0, import_react35.forwardRef)(function TreeChart2({ data, itemStyle, emphasis, orientation = "horizontal", radial = false, nodeSize = 8, rootPosition, nodePadding, layerPadding, showLabels = true, emphasisShowLabels = true, nodeColor, edgeColor, edgeWidth, edgeShadow, roam = false, hoverable = true, labelFontSize, labelColor, linkStyle = "curve", collapsible = false, onToggle, onDataClick, palette, toolbox, ...props }, ref) {
+  const [sourceData, setSourceData] = (0, import_react35.useState)(data);
+  const [roamReset, setRoamReset] = (0, import_react35.useState)(0);
+  const [active, setActive] = (0, import_react35.useState)();
+  (0, import_react35.useEffect)(() => {
     setSourceData(data);
     setActive(void 0);
   }, [data]);
-  const [collapsed, setCollapsed] = (0, import_react34.useState)(() => {
+  const [collapsed, setCollapsed] = (0, import_react35.useState)(() => {
     const result = /* @__PURE__ */ new Set();
     const visit = (node) => {
       if (node.collapsed) result.add(node.name);
@@ -6741,8 +6765,8 @@ var TreeChart = (0, import_react34.forwardRef)(function TreeChart2({ data, itemS
     visit(data);
     return result;
   });
-  const layout = (0, import_react34.useMemo)(() => flattenTree(sourceData, collapsed), [collapsed, sourceData]);
-  const fixedLayout = (0, import_react34.useMemo)(() => {
+  const layout = (0, import_react35.useMemo)(() => flattenTree(sourceData, collapsed), [collapsed, sourceData]);
+  const fixedLayout = (0, import_react35.useMemo)(() => {
     const visible = (node) => ({ ...node, children: collapsed.has(node.name) ? [] : node.children?.map(visible) });
     return rootPosition ? layoutTreeNodes(visible(sourceData), { nodeSize, nodePadding, layerPadding, rootPosition, orientation }) : void 0;
   }, [sourceData, collapsed, rootPosition, nodeSize, nodePadding, layerPadding, orientation]);
@@ -6756,7 +6780,7 @@ var TreeChart = (0, import_react34.forwardRef)(function TreeChart2({ data, itemS
     const main = 76 + item.depth / Math.max(1, layout.maxDepth) * 560;
     return orientation === "horizontal" ? [main, cross] : [cross + 155, main - 30];
   }).map((point, index) => fixedLayout ? [fixedLayout[index].x, fixedLayout[index].y] : point);
-  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: flattenTree(sourceData, /* @__PURE__ */ new Set()).nodes.map((item) => ({ name: item.node.name, data: [item.node.value ?? 0] })), onApply: (values) => {
+  const chartToolbox = typeof toolbox === "object" ? { ...toolbox, dataView: toolbox.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { readOnly: toolbox.dataViewReadOnly, series: flattenTree(sourceData, /* @__PURE__ */ new Set()).nodes.map((item) => ({ name: item.node.name, data: [item.node.value ?? 0] })), onApply: (values) => {
     let cursor = 0;
     const update = (node) => {
       const value = values[cursor++][0];
@@ -6770,14 +6794,14 @@ var TreeChart = (0, import_react34.forwardRef)(function TreeChart2({ data, itemS
     setRoamReset((n) => n + 1);
     toolbox.onRestore?.();
   } } : toolbox;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SiaChart, { ...props, toolbox: chartToolbox, ref, palette, empty: !layout.nodes.length, ariaLabel: props.ariaLabel ?? "\u6811\u56FE", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartRoamGroup, { enabled: roam, width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, resetSignal: roamReset, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { className: "sia-chart__tree-links", style: edgeShadow ? { filter: `drop-shadow(${edgeShadow.offsetX}px ${edgeShadow.offsetY}px ${edgeShadow.blur}px ${edgeShadow.color})` } : void 0, children: layout.nodes.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SiaChart, { ...props, toolbox: chartToolbox, ref, palette, empty: !layout.nodes.length, ariaLabel: props.ariaLabel ?? "\u6811\u56FE", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartRoamGroup, { enabled: roam, width: props.viewBoxSize?.[0] ?? 720, height: props.viewBoxSize?.[1] ?? 360, resetSignal: roamReset, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { className: "sia-chart__tree-links", style: edgeShadow ? { filter: `drop-shadow(${edgeShadow.offsetX}px ${edgeShadow.offsetY}px ${edgeShadow.blur}px ${edgeShadow.color})` } : void 0, children: layout.nodes.map((item, index) => {
       if (item.parent == null) return null;
       const source = positions[item.parent];
       const target = positions[index];
       const bend = fixedLayout ? 0.618 : 0.5;
       const path = radial || linkStyle === "straight" ? `M ${source[0]} ${source[1]} L ${target[0]} ${target[1]}` : linkStyle === "broken" && orientation === "horizontal" ? `M ${source[0]} ${source[1]} H ${(source[0] + target[0]) / 2} V ${target[1]} H ${target[0]}` : linkStyle === "broken" ? `M ${source[0]} ${source[1]} V ${(source[1] + target[1]) / 2} H ${target[0]} V ${target[1]}` : orientation === "horizontal" ? `M ${source[0]} ${source[1]} C ${source[0] + (target[0] - source[0]) * bend} ${source[1]}, ${source[0] + (target[0] - source[0]) * (1 - bend)} ${target[1]}, ${target[0]} ${target[1]}` : `M ${source[0]} ${source[1]} C ${source[0]} ${source[1] + (target[1] - source[1]) * bend}, ${target[0]} ${source[1] + (target[1] - source[1]) * (1 - bend)}, ${target[0]} ${target[1]}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: path, style: { stroke: edgeColor, strokeWidth: edgeWidth } }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: path, style: { stroke: edgeColor, strokeWidth: edgeWidth } }, index);
     }) }),
     layout.nodes.map((item, index) => {
       const position = positions[index];
@@ -6788,11 +6812,11 @@ var TreeChart = (0, import_react34.forwardRef)(function TreeChart2({ data, itemS
       const labelPosition = resolved.label?.position ?? (orientation === "vertical" && !radial ? "bottom" : "right");
       const labelX = position[0] + (labelPosition === "right" ? radius + 5 : labelPosition === "left" ? -radius - 5 : 0);
       const labelY = position[1] + (labelPosition === "bottom" ? glyphHeight / 2 + 14 : labelPosition === "top" ? -glyphHeight / 2 - 5 : (resolved.label?.fontSize ?? labelFontSize ?? 12) / 3);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { onPointerMove: () => {
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { onPointerMove: () => {
         if (hoverable) setActive(index);
       }, onPointerLeave: () => setActive(void 0), onFocus: () => {
         if (hoverable) setActive(index);
-      }, onBlur: () => setActive(void 0), label: `${item.node.name}${item.node.value == null ? "" : `\uFF0C${item.node.value}`}`, tooltip: hoverable ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: item.node.name, value: item.node.value ?? 0 }) : void 0, tooltipPoint: position, onPointerUp: (event) => {
+      }, onBlur: () => setActive(void 0), label: `${item.node.name}${item.node.value == null ? "" : `\uFF0C${item.node.value}`}`, tooltip: hoverable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: item.node.name, value: item.node.value ?? 0 }) : void 0, tooltipPoint: position, onPointerUp: (event) => {
         if (collapsible && item.node.children?.length) {
           const nextCollapsed = !collapsed.has(item.node.name);
           setCollapsed((current) => {
@@ -6805,54 +6829,54 @@ var TreeChart = (0, import_react34.forwardRef)(function TreeChart2({ data, itemS
         }
         onDataClick?.({ name: item.node.name, value: item.node.value ?? 0, data: item.node, nativeEvent: event });
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TreeNodeGlyph, { symbol: item.node.symbol, x: position[0], y: position[1], width: radius * 2, height: glyphHeight, color, itemStyle: resolved }),
-        collapsible && item.node.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: position[0], y: position[1] + 4, textAnchor: "middle", className: "sia-chart__tree-toggle", children: collapsed.has(item.node.name) ? "+" : "\u2212" }) : null,
-        resolved.label?.show ?? (active === index ? emphasisShowLabels : showLabels) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: labelX, y: labelY, textAnchor: labelPosition === "left" ? "end" : labelPosition === "right" ? "start" : "middle", style: { fontSize: resolved.label?.fontSize ?? labelFontSize, fill: resolved.label?.color ?? labelColor, fontWeight: resolved.label?.fontWeight }, className: "sia-chart__tree-label", children: (resolved.label?.formatter ?? "{b}").replaceAll("{b}", item.node.name).replaceAll("{c}", String(item.node.value ?? "")) }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TreeNodeGlyph, { symbol: item.node.symbol, x: position[0], y: position[1], width: radius * 2, height: glyphHeight, color, itemStyle: resolved }),
+        collapsible && item.node.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: position[0], y: position[1] + 4, textAnchor: "middle", className: "sia-chart__tree-toggle", children: collapsed.has(item.node.name) ? "+" : "\u2212" }) : null,
+        resolved.label?.show ?? (active === index ? emphasisShowLabels : showLabels) ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: labelX, y: labelY, textAnchor: labelPosition === "left" ? "end" : labelPosition === "right" ? "start" : "middle", style: { fontSize: resolved.label?.fontSize ?? labelFontSize, fill: resolved.label?.color ?? labelColor, fontWeight: resolved.label?.fontWeight }, className: "sia-chart__tree-label", children: (resolved.label?.formatter ?? "{b}").replaceAll("{b}", item.node.name).replaceAll("{c}", String(item.node.value ?? "")) }) : null
       ] }, `${item.node.name}-${index}`);
     })
   ] }) });
 });
-var WordCloudChart = (0, import_react34.forwardRef)(function WordCloudChart2({ data, bounds, areaSizing = false, autoFit = false, onLayout, minFontSize = 14, maxFontSize = 52, rotations = [0, 0, -28, 28, 0], spiralStep = 9, shape = "ellipse", padding = 4, fontFamily, fontWeight = 650, onDataClick, palette, ...props }, ref) {
-  const placements = (0, import_react34.useMemo)(() => {
+var WordCloudChart = (0, import_react35.forwardRef)(function WordCloudChart2({ data, bounds, areaSizing = false, autoFit = false, onLayout, minFontSize = 14, maxFontSize = 52, rotations = [0, 0, -28, 28, 0], spiralStep = 9, shape = "ellipse", padding = 4, fontFamily, fontWeight = 650, onDataClick, palette, ...props }, ref) {
+  const placements = (0, import_react35.useMemo)(() => {
     const context = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
     return layoutCloudWords(data, { bounds: bounds ?? { x: 18, y: 18, width: 684, height: 324 }, minFontSize, maxFontSize, rotations, spiralStep, shape, padding, autoFit, areaSizing, measure: context ? (word, size) => {
       context.font = `${word.fontWeight ?? fontWeight} ${size}px ${word.fontFamily ?? fontFamily ?? "Arial"}`;
       return context.measureText(word.name).width;
     } : void 0 });
   }, [data, bounds, autoFit, areaSizing, maxFontSize, minFontSize, padding, rotations, shape, spiralStep, fontFamily, fontWeight]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const present = new Set(placements.map((p) => p.index));
     onLayout?.({ placed: placements.length, unplaced: data.filter((_, i) => !present.has(i)).map((item) => item.name) });
   }, [placements, data, onLayout]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SiaChart, { ...props, ref, palette, empty: !placements.length, ariaLabel: props.ariaLabel ?? "\u5B57\u7B26\u4E91", children: placements.map((placement) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SiaChart, { ...props, ref, palette, empty: !placements.length, ariaLabel: props.ariaLabel ?? "\u5B57\u7B26\u4E91", children: placements.map((placement) => {
     const color = getColor(placement.index, placement.item.color, palette);
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { label: `${placement.item.name}\uFF0C${placement.item.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name: placement.item.name, value: placement.item.value }), tooltipPoint: [placement.x, placement.y], transform: `rotate(${placement.rotation} ${placement.x} ${placement.y})`, onPointerUp: (event) => onDataClick?.({ name: placement.item.name, value: placement.item.value, data: placement.item, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: placement.x, y: placement.y + placement.fontSize * 0.34, textAnchor: "middle", fill: color, style: { fontSize: placement.fontSize, fontFamily: placement.item.fontFamily ?? fontFamily, fontWeight: placement.item.fontWeight ?? fontWeight }, className: "sia-chart__word", children: placement.item.name }) }, `${placement.item.name}-${placement.index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { label: `${placement.item.name}\uFF0C${placement.item.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name: placement.item.name, value: placement.item.value }), tooltipPoint: [placement.x, placement.y], transform: `rotate(${placement.rotation} ${placement.x} ${placement.y})`, onPointerUp: (event) => onDataClick?.({ name: placement.item.name, value: placement.item.value, data: placement.item, nativeEvent: event }), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: placement.x, y: placement.y + placement.fontSize * 0.34, textAnchor: "middle", fill: color, style: { fontSize: placement.fontSize, fontFamily: placement.item.fontFamily ?? fontFamily, fontWeight: placement.item.fontWeight ?? fontWeight }, className: "sia-chart__word", children: placement.item.name }) }, `${placement.item.name}-${placement.index}`);
   }) });
 });
-var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPointer, categoryAxisLabels, axisLayering = "inline", barSpacing, renderAxes, coordinateAnimation = false, animationProgress, animationDurationUpdate = 500, boundaryGap = true, categories, activeIndex, onActiveIndexChange, showCategoryLabels = true, categoryLabelInterval = 0, clipPlot = false, series: sourceSeries, valueAxes, stacked: sourceStacked = false, plotBounds, tooltipTrigger = "item", calculable = false, onTransferError, onDataChange, transferId, onValueTransfer, toolbox, legendNames, axisTooltipFormatter, legendLayout, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, palette, ...props }, ref) {
-  const plotClipId = `sia-mixed-plot-${(0, import_react34.useId)().replaceAll(":", "")}`;
-  const [editableSeries, setEditableSeries] = (0, import_react34.useState)(sourceSeries);
-  const [geometry, setGeometry] = (0, import_react34.useState)();
-  const [pointerIndex, setPointerIndex] = (0, import_react34.useState)(null);
-  const [pointerAxisIndex, setPointerAxisIndex] = (0, import_react34.useState)(0);
-  const [motionRevision, setMotionRevision] = (0, import_react34.useState)(0);
-  const [stackMode, setStackMode] = (0, import_react34.useState)();
-  const lastPublished = (0, import_react34.useRef)(null);
+var MixedChart = (0, import_react35.forwardRef)(function MixedChart2({ axisPointer, categoryAxisLabels, axisLayering = "inline", barSpacing, renderAxes, coordinateAnimation = false, animationProgress, animationDurationUpdate = 500, boundaryGap = true, categories, activeIndex, onActiveIndexChange, showCategoryLabels = true, categoryLabelInterval = 0, clipPlot = false, series: sourceSeries, valueAxes, stacked: sourceStacked = false, plotBounds, tooltipTrigger = "item", calculable = false, onTransferError, onDataChange, transferId, onValueTransfer, toolbox, legendNames, axisTooltipFormatter, legendLayout, showLegend = true, legendInteractive = true, legendSelected, onLegendSelectionChange, valueFormatter, onDataClick, palette, ...props }, ref) {
+  const plotClipId = `sia-mixed-plot-${(0, import_react35.useId)().replaceAll(":", "")}`;
+  const [editableSeries, setEditableSeries] = (0, import_react35.useState)(sourceSeries);
+  const [geometry, setGeometry] = (0, import_react35.useState)();
+  const [pointerIndex, setPointerIndex] = (0, import_react35.useState)(null);
+  const [pointerAxisIndex, setPointerAxisIndex] = (0, import_react35.useState)(0);
+  const [motionRevision, setMotionRevision] = (0, import_react35.useState)(0);
+  const [stackMode, setStackMode] = (0, import_react35.useState)();
+  const lastPublished = (0, import_react35.useRef)(null);
   const publishData = (next) => {
     lastPublished.current = next;
     onDataChange?.(next);
   };
-  const [islands, setIslands] = (0, import_react34.useState)([]);
-  const drag = (0, import_react34.useRef)(null);
-  const [dragOffset, setDragOffset] = (0, import_react34.useState)();
-  (0, import_react34.useEffect)(() => {
+  const [islands, setIslands] = (0, import_react35.useState)([]);
+  const drag = (0, import_react35.useRef)(null);
+  const [dragOffset, setDragOffset] = (0, import_react35.useState)();
+  (0, import_react35.useEffect)(() => {
     if (sourceSeries === lastPublished.current) return;
     setEditableSeries(sourceSeries);
     setIslands([]);
     drag.current = null;
     setDragOffset(void 0);
   }, [sourceSeries]);
-  const series = (0, import_react34.useMemo)(() => editableSeries.map((item) => geometry ? { ...item, type: geometry } : item), [editableSeries, geometry]);
+  const series = (0, import_react35.useMemo)(() => editableSeries.map((item) => geometry ? { ...item, type: geometry } : item), [editableSeries, geometry]);
   const stacked = stackMode ?? sourceStacked;
   const PLOT2 = plotBounds ?? { x: 62, y: 48, width: 628, height: 250 }, PLOT_BOTTOM2 = PLOT2.y + PLOT2.height;
   const legend = useLegendSelection(series.map((item) => item.name), legendSelected, onLegendSelectionChange);
@@ -6879,7 +6903,7 @@ var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPoint
       legend.replace(Object.fromEntries(sourceSeries.map((item) => [item.name, legendSelected?.[item.name] ?? true])));
       options.onRestore?.();
     },
-    dataView: options.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartDataEditor, { allowNull: true, readOnly: options.dataViewReadOnly, series: editableSeries, onApply: (values) => {
+    dataView: options.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartDataEditor, { allowNull: true, readOnly: options.dataViewReadOnly, series: editableSeries, onApply: (values) => {
       const next = editableSeries.map((item, index) => ({ ...item, data: values[index] }));
       setEditableSeries(next);
       publishData(next);
@@ -6894,9 +6918,9 @@ var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPoint
   const categoryName = (index, axisIndex = 0) => categoryAxisLabels?.[axisIndex]?.[index] ?? categories[index] ?? `${index + 1}`;
   const axisTooltip = (index, axisIndex = 0) => {
     const rows = activeSeries.filter((item) => (item.categoryAxisIndex ?? 0) === axisIndex);
-    return axisTooltipFormatter ? axisTooltipFormatter(index, rows, axisIndex) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: categoryName(index, axisIndex).trim() }),
-      rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
+    return axisTooltipFormatter ? axisTooltipFormatter(index, rows, axisIndex) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: categoryName(index, axisIndex).trim() }),
+      rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
         item.name,
         "\uFF1A",
         item.data[index] == null ? "-" : valueFormatter ? valueFormatter(item.data[index]) : item.data[index]
@@ -7002,24 +7026,24 @@ var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPoint
       }
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, ref, palette, empty: !categories.length || !series.length, ariaLabel: props.ariaLabel ?? "\u6DF7\u642D\u56FE", children: [
-    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartLegend, { ...legendLayout, symbol: legendLayout?.symbol === "auto" ? "rect" : legendLayout?.symbol, items: series.map((item, index) => ({ name: item.name, symbol: legendLayout?.symbol === "auto" ? item.type === "line" ? "line" : "rect" : void 0, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })).filter((item) => !legendNames || legendNames.includes(item.name)), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
-    renderAxes ? renderAxes({ layer: axisLayering === "overlay" ? "base" : "all", plot: PLOT2, categoryPositions: categories.map((_, index) => (categoryAt(index) - PLOT2.x) / PLOT2.width), valueDomains: axisDomains ?? [domain] }) : valueAxes?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { orientation: "bottom", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.width, showLabels: showCategoryLabels, tickInterval: labelStep, labels: categories.map((name, index) => index % labelStep === 0 ? name : ""), positions: categories.map((_, index) => (categoryAt(index) - PLOT2.x) / PLOT2.width), boundaryGap: categoryGap }),
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, toolbox: chartToolbox, ref, palette, empty: !categories.length || !series.length, ariaLabel: props.ariaLabel ?? "\u6DF7\u642D\u56FE", children: [
+    showLegend ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { ...legendLayout, symbol: legendLayout?.symbol === "auto" ? "rect" : legendLayout?.symbol, items: series.map((item, index) => ({ name: item.name, symbol: legendLayout?.symbol === "auto" ? item.type === "line" ? "line" : "rect" : void 0, color: getColor(index, item.color, palette), disabled: !legend.isSelected(item.name) })).filter((item) => !legendNames || legendNames.includes(item.name)), selected: legend.selected, onItemClick: legendInteractive ? legend.toggle : void 0 }) : null,
+    renderAxes ? renderAxes({ layer: axisLayering === "overlay" ? "base" : "all", plot: PLOT2, categoryPositions: categories.map((_, index) => (categoryAt(index) - PLOT2.x) / PLOT2.width), valueDomains: axisDomains ?? [domain] }) : valueAxes?.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { orientation: "bottom", x: PLOT2.x, y: PLOT_BOTTOM2, length: PLOT2.width, showLabels: showCategoryLabels, tickInterval: labelStep, labels: categories.map((name, index) => index % labelStep === 0 ? name : ""), positions: categories.map((_, index) => (categoryAt(index) - PLOT2.x) / PLOT2.width), boundaryGap: categoryGap }),
       valueAxes.map((axis, index) => {
         const position = axis.position ?? (index === 0 ? "left" : "right");
         const x = position === "left" ? PLOT2.x : PLOT2.x + PLOT2.width;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { "data-value-axis": index, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartAxis, { boundaryGap: false, orientation: position, x, y: PLOT_BOTTOM2, length: PLOT2.height, labels: chartTicks(axisDomains[index]).map(axis.formatter ?? formatChartNumber), gridLength: index === 0 ? PLOT2.width : void 0, axisColor: axis.axisColor, gridColor: axis.gridColor, showTicks: axis.showTicks }),
-          axis.name ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x, y: PLOT2.y - 12, textAnchor: position === "left" ? "start" : "end", className: "sia-chart__axis-name", style: axis.nameStyle, children: axis.name }) : null
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { "data-value-axis": index, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartAxis, { boundaryGap: false, orientation: position, x, y: PLOT_BOTTOM2, length: PLOT2.height, labels: chartTicks(axisDomains[index]).map(axis.formatter ?? formatChartNumber), gridLength: index === 0 ? PLOT2.width : void 0, axisColor: axis.axisColor, gridColor: axis.gridColor, showTicks: axis.showTicks }),
+          axis.name ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x, y: PLOT2.y - 12, textAnchor: position === "left" ? "start" : "end", className: "sia-chart__axis-name", style: axis.nameStyle, children: axis.name }) : null
         ] }, index);
       })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CartesianAxes, { categories, domain, band: categoryGap }),
-    activeIndex != null && activeIndex >= 0 && activeIndex < categories.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { "data-mixed-active-index": activeIndex, x: Math.max(PLOT2.x, categoryAt(activeIndex) - band / 2), y: PLOT2.y, width: Math.min(PLOT2.x + PLOT2.width, categoryAt(activeIndex) + band / 2) - Math.max(PLOT2.x, categoryAt(activeIndex) - band / 2), height: PLOT2.height, fill: "currentColor", opacity: 0.06, pointerEvents: "none" }) : null,
-    tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0, import_react35.createElement)(ChartMark, { ...activeProps(index), key: `axis-${index}`, "data-mixed-axis-tooltip": index, label: `${name.trim()} \u5404\u6307\u6807`, tooltip: axisTooltip(index), tooltipPoint: [categoryAt(index), PLOT2.y + PLOT2.height / 2] }, /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: Math.max(PLOT2.x, categoryAt(index) - band / 2), y: PLOT2.y, width: Math.min(PLOT2.x + PLOT2.width, categoryAt(index) + band / 2) - Math.max(PLOT2.x, categoryAt(index) - band / 2), height: PLOT2.height, fill: "transparent" }))) : null,
-    calculable ? activeSeries.flatMap((item) => item.data.map((value, index) => value === null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartMark, { ...dragProps(series.indexOf(item), index), label: `${item.name}\uFF0C${categories[index]}\uFF0C\u7A7A\u69FD`, tooltip: "\u62D6\u5165\u6570\u636E\u4EE5\u586B\u5145", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: PLOT2.x + index * band + band * activeSeries.indexOf(item) / Math.max(1, activeSeries.length), y: PLOT_BOTTOM2 - 14, width: Math.max(4, band / Math.max(1, activeSeries.length) - 2), height: 14, fill: "transparent", stroke: getColor(series.indexOf(item), item.color, palette), strokeDasharray: "3 2" }) }, `empty-${item.name}-${index}`) : null)) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("clipPath", { id: plotClipId, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { x: PLOT2.x, y: PLOT2.y, width: PLOT2.width, height: PLOT2.height }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("g", { "data-mixed-plot": "", clipPath: clipPlot ? `url(#${plotClipId})` : void 0, children: renderSeries.map((item) => {
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CartesianAxes, { categories, domain, band: categoryGap }),
+    activeIndex != null && activeIndex >= 0 && activeIndex < categories.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { "data-mixed-active-index": activeIndex, x: Math.max(PLOT2.x, categoryAt(activeIndex) - band / 2), y: PLOT2.y, width: Math.min(PLOT2.x + PLOT2.width, categoryAt(activeIndex) + band / 2) - Math.max(PLOT2.x, categoryAt(activeIndex) - band / 2), height: PLOT2.height, fill: "currentColor", opacity: 0.06, pointerEvents: "none" }) : null,
+    tooltipTrigger === "axis" ? categories.map((name, index) => /* @__PURE__ */ (0, import_react36.createElement)(ChartMark, { ...activeProps(index), key: `axis-${index}`, "data-mixed-axis-tooltip": index, label: `${name.trim()} \u5404\u6307\u6807`, tooltip: axisTooltip(index), tooltipPoint: [categoryAt(index), PLOT2.y + PLOT2.height / 2] }, /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: Math.max(PLOT2.x, categoryAt(index) - band / 2), y: PLOT2.y, width: Math.min(PLOT2.x + PLOT2.width, categoryAt(index) + band / 2) - Math.max(PLOT2.x, categoryAt(index) - band / 2), height: PLOT2.height, fill: "transparent" }))) : null,
+    calculable ? activeSeries.flatMap((item) => item.data.map((value, index) => value === null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { ...dragProps(series.indexOf(item), index), label: `${item.name}\uFF0C${categories[index]}\uFF0C\u7A7A\u69FD`, tooltip: "\u62D6\u5165\u6570\u636E\u4EE5\u586B\u5145", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: PLOT2.x + index * band + band * activeSeries.indexOf(item) / Math.max(1, activeSeries.length), y: PLOT_BOTTOM2 - 14, width: Math.max(4, band / Math.max(1, activeSeries.length) - 2), height: 14, fill: "transparent", stroke: getColor(series.indexOf(item), item.color, palette), strokeDasharray: "3 2" }) }, `empty-${item.name}-${index}`) : null)) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("clipPath", { id: plotClipId, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: PLOT2.x, y: PLOT2.y, width: PLOT2.width, height: PLOT2.height }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("g", { "data-mixed-plot": "", clipPath: clipPlot ? `url(#${plotClipId})` : void 0, children: renderSeries.map((item) => {
       const seriesIndex = series.indexOf(item);
       const color = getColor(seriesIndex, item.color, palette);
       const valueDomain = axisDomains?.[item.valueAxisIndex ?? 0] ?? domain;
@@ -7027,10 +7051,10 @@ var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPoint
       const finiteValues = item.data.filter((value) => value !== null && Number.isFinite(value));
       const average = finiteValues.reduce((sum, value) => sum + value, 0) / Math.max(1, finiteValues.length);
       const averageY = linearScale(average, [valueDomain[0], valueDomain[1]], [PLOT_BOTTOM2, PLOT2.y]);
-      const averageMark = item.markAverage && finiteValues.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { className: "sia-chart__mark-line", "data-mixed-average": item.name, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: averageY, y2: averageY, style: { stroke: item.markColor ?? color } }),
-        item.markSymbol !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: `M ${PLOT2.x + 8} ${averageY - 4} L ${PLOT2.x} ${averageY} L ${PLOT2.x + 8} ${averageY + 4} Z`, fill: item.markColor ?? color }) : null,
-        !clipPlot && item.showMarkLabel !== false ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: PLOT2.x - 8, y: averageY + 4, textAnchor: "end", style: { fill: item.markColor ?? color }, children: item.markFormatter ? item.markFormatter(average) : Number(average.toFixed(2)) }) : null
+      const averageMark = item.markAverage && finiteValues.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { className: "sia-chart__mark-line", "data-mixed-average": item.name, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: PLOT2.x, x2: PLOT2.x + PLOT2.width, y1: averageY, y2: averageY, style: { stroke: item.markColor ?? color } }),
+        item.markSymbol !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: `M ${PLOT2.x + 8} ${averageY - 4} L ${PLOT2.x} ${averageY} L ${PLOT2.x + 8} ${averageY + 4} Z`, fill: item.markColor ?? color }) : null,
+        !clipPlot && item.showMarkLabel !== false ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: PLOT2.x - 8, y: averageY + 4, textAnchor: "end", style: { fill: item.markColor ?? color }, children: item.markFormatter ? item.markFormatter(average) : Number(average.toFixed(2)) }) : null
       ] }) : null;
       if (item.type === "bar") {
         const axisBars = barSeries.filter((candidate) => (candidate.categoryAxisIndex ?? 0) === (item.categoryAxisIndex ?? 0));
@@ -7042,7 +7066,7 @@ var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPoint
         const customSlot = barSpacing ? mixedBarSlots(band, barGroups.map((group2) => barSeries.find((candidate) => layout.rows[activeSeries.indexOf(candidate)]?.find(Boolean)?.group === group2 && candidate.barWidth !== void 0)?.barWidth), barSpacing)[barIndex] : void 0;
         const rawWidth = customSlot?.width ?? Math.min(slotWidth, Math.max(0, requestedWidth ?? slotWidth));
         const width = barSpacing?.pixelAlign ? Math.ceil(rawWidth) : rawWidth;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
           averageMark,
           categories.map((_, index) => {
             const name = categoryName(index, item.categoryAxisIndex);
@@ -7055,9 +7079,9 @@ var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPoint
             const zero = linearScale(placement.start, [valueDomain[0], valueDomain[1]], [PLOT_BOTTOM2, PLOT2.y]);
             const rectY = barSpacing?.pixelAlign ? Math.floor(Math.min(y, zero)) : Math.min(y, zero);
             const rectHeight = barSpacing?.pixelAlign ? Math.ceil(Math.abs(zero - y)) : Math.abs(zero - y);
-            return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { points: [[x, value >= 0 ? rectY + rectHeight : rectY], [x, rectY], [x + width, rectY + rectHeight]], enabled: coordinateAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: coordinateAnimation ? animationProgress : void 0, children: (frame) => /* @__PURE__ */ (0, import_react35.createElement)(ChartMark, { ...dragProps(seriesIndex, index), key: `${name}-${index}`, label: `${item.name}\uFF0C${name}\uFF0C${value}`, tooltip: (item.tooltipTrigger ?? tooltipTrigger) === "axis" ? axisTooltip(index, item.categoryAxisIndex) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: [props.tooltipProps?.placement === "axis" ? Math.round(categoryAt(index)) : x + width / 2, y], onPointerUp: (event) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: [[x, value >= 0 ? rectY + rectHeight : rectY], [x, rectY], [x + width, rectY + rectHeight]], enabled: coordinateAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: coordinateAnimation ? animationProgress : void 0, children: (frame) => /* @__PURE__ */ (0, import_react36.createElement)(ChartMark, { ...dragProps(seriesIndex, index), key: `${name}-${index}`, label: `${item.name}\uFF0C${name}\uFF0C${value}`, tooltip: (item.tooltipTrigger ?? tooltipTrigger) === "axis" ? axisTooltip(index, item.categoryAxisIndex) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: [props.tooltipProps?.placement === "axis" ? Math.round(categoryAt(index)) : x + width / 2, y], onPointerUp: (event) => {
               if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
-            } }, /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("rect", { style: { animation: coordinateAnimation ? "none" : void 0 }, x: frame[1][0], y: Math.min(frame[1][1], frame[2][1]), width: Math.max(0, frame[2][0] - frame[1][0]), height: Math.abs(frame[2][1] - frame[1][1]), rx: item.barRadius ?? 4, fill: item.pointColors?.[index] ?? color, className: "sia-chart__bar" })) }, `${item.name}-${index}-${motionRevision}`);
+            } }, /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { style: { animation: coordinateAnimation ? "none" : void 0 }, x: frame[1][0], y: Math.min(frame[1][1], frame[2][1]), width: Math.max(0, frame[2][0] - frame[1][0]), height: Math.abs(frame[2][1] - frame[1][1]), rx: item.barRadius ?? 4, fill: item.pointColors?.[index] ?? color, className: "sia-chart__bar" })) }, `${item.name}-${index}-${motionRevision}`);
           })
         ] }, `${item.name}-${seriesIndex}`);
       }
@@ -7069,35 +7093,35 @@ var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPoint
         if (index === 0 || !placements[index - 1]) segments.push([]);
         segments.at(-1).push(index);
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChartPointMotion, { points: [...points, ...baseline], enabled: coordinateAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: coordinateAnimation ? animationProgress : void 0, children: (frame) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: [...points, ...baseline], enabled: coordinateAnimation && props.animation !== false, duration: props.animationDuration ?? 2e3, updateDuration: animationDurationUpdate, progress: coordinateAnimation ? animationProgress : void 0, children: (frame) => {
         const points2 = frame.slice(0, categories.length), baseline2 = frame.slice(categories.length);
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
           averageMark,
-          segments.map((segment) => item.sampling === "pixel" ? chartPixelSample(segment, PLOT2.width) : segment).map((segment, segmentIndex) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("g", { children: [
-            item.area ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: `${linePath(segment.map((index) => points2[index]), item.curve)} ${[...segment].reverse().map((index) => {
+          segments.map((segment) => item.sampling === "pixel" ? chartPixelSample(segment, PLOT2.width) : segment).map((segment, segmentIndex) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { children: [
+            item.area ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: `${linePath(segment.map((index) => points2[index]), item.curve)} ${[...segment].reverse().map((index) => {
               const point = baseline2[categories.length - 1 - index];
               return `L ${point[0]} ${point[1]}`;
             }).join(" ")} Z`, fill: color, style: item.areaOpacity === void 0 ? void 0 : { opacity: item.areaOpacity }, className: "sia-chart__area" }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: linePath(segment.map((index) => points2[index]), item.curve), fill: "none", stroke: color, pathLength: item.lineStyle && item.lineStyle !== "solid" ? void 0 : 1, strokeDasharray: item.lineStyle === "dashed" ? "7 5" : item.lineStyle === "dotted" ? "2 4" : void 0, style: { strokeWidth: item.lineWidth, animation: coordinateAnimation ? "none" : void 0 }, className: `sia-chart__line${coordinateAnimation || item.lineStyle && item.lineStyle !== "solid" ? "" : " sia-chart__line--draw"}` })
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: linePath(segment.map((index) => points2[index]), item.curve), fill: "none", stroke: color, pathLength: item.lineStyle && item.lineStyle !== "solid" ? void 0 : 1, strokeDasharray: item.lineStyle === "dashed" ? "7 5" : item.lineStyle === "dotted" ? "2 4" : void 0, style: { strokeWidth: item.lineWidth, animation: coordinateAnimation ? "none" : void 0 }, className: `sia-chart__line${coordinateAnimation || item.lineStyle && item.lineStyle !== "solid" ? "" : " sia-chart__line--draw"}` })
           ] }, segmentIndex)),
           item.showPoints === false ? null : points2.map((point, index) => {
             if (!placements[index]) return null;
             const name = categoryName(index, item.categoryAxisIndex);
             const value = item.data[index] ?? 0;
-            return /* @__PURE__ */ (0, import_react35.createElement)(ChartMark, { ...dragProps(seriesIndex, index), key: `${name}-${index}`, label: `${item.name}\uFF0C${name}\uFF0C${value}`, tooltip: (item.tooltipTrigger ?? tooltipTrigger) === "axis" ? axisTooltip(index, item.categoryAxisIndex) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: props.tooltipProps?.placement === "axis" ? [Math.round(point[0]), point[1]] : point, onPointerUp: (event) => {
+            return /* @__PURE__ */ (0, import_react36.createElement)(ChartMark, { ...dragProps(seriesIndex, index), key: `${name}-${index}`, label: `${item.name}\uFF0C${name}\uFF0C${value}`, tooltip: (item.tooltipTrigger ?? tooltipTrigger) === "axis" ? axisTooltip(index, item.categoryAxisIndex) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipValue, { name, series: item.name, value, formatter: valueFormatter }), tooltipPoint: props.tooltipProps?.placement === "axis" ? [Math.round(point[0]), point[1]] : point, onPointerUp: (event) => {
               if (!finishDrag(event)) onDataClick?.({ name, value, seriesName: item.name, data: value, nativeEvent: event });
-            } }, /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: item.hollowSymbol ? "sia-chart__mixed-hollow-symbol" : void 0, cx: point[0], cy: point[1], r: Math.max(0, item.symbolSize ?? 9) / 2, fill: item.hollowSymbol ? "#fff" : color, stroke: item.hollowSymbol ? color : "var(--sia-color-surface)", strokeWidth: 2 }));
+            } }, /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { className: item.hollowSymbol ? "sia-chart__mixed-hollow-symbol" : void 0, cx: point[0], cy: point[1], r: Math.max(0, item.symbolSize ?? 9) / 2, fill: item.hollowSymbol ? "#fff" : color, stroke: item.hollowSymbol ? color : "var(--sia-color-surface)", strokeWidth: 2 }));
           })
         ] });
       } }, `${item.name}-${seriesIndex}-${motionRevision}`);
     }) }),
     axisLayering === "overlay" ? renderAxes?.({ layer: "line", plot: PLOT2, categoryPositions: categories.map((_, index) => (categoryAt(index) - PLOT2.x) / PLOT2.width), valueDomains: axisDomains ?? [domain] }) : null,
-    axisPointer && shownPointer != null && shownPointer >= 0 && shownPointer < categories.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { "data-mixed-axis-pointer": shownPointer, x1: pointerX, x2: pointerX, y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: pointerStyle.color ?? "var(--sia-color-primary)", strokeWidth: pointerWidth, strokeDasharray: pointerStyle.lineStyle === "dashed" ? "5 4" : pointerStyle.lineStyle === "dotted" ? "2 2" : void 0, pointerEvents: "none" }) : null,
+    axisPointer && shownPointer != null && shownPointer >= 0 && shownPointer < categories.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { "data-mixed-axis-pointer": shownPointer, x1: pointerX, x2: pointerX, y1: PLOT2.y, y2: PLOT_BOTTOM2, stroke: pointerStyle.color ?? "var(--sia-color-primary)", strokeWidth: pointerWidth, strokeDasharray: pointerStyle.lineStyle === "dashed" ? "5 4" : pointerStyle.lineStyle === "dotted" ? "2 2" : void 0, pointerEvents: "none" }) : null,
     axisPointer && pointerStyle.linkedEmphasis && shownPointer != null && shownPointer >= 0 && shownPointer < categories.length ? activeSeries.filter((item) => item.type === "line" && item.showPoints !== false && (item.categoryAxisIndex ?? 0) === pointerAxisIndex).map((item) => {
       const placement = layout.rows[activeSeries.indexOf(item)]?.[shownPointer];
       if (!placement) return null;
       const range = axisDomains?.[item.valueAxisIndex ?? 0] ?? domain, color = getColor(series.indexOf(item), item.color, palette);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { "data-mixed-axis-emphasis": item.name, cx: categoryAt(shownPointer), cy: linearScale(placement.end, [range[0], range[1]], [PLOT_BOTTOM2, PLOT2.y]), r: Math.max(0, item.symbolSize ?? 9) / 2, fill: item.hollowSymbol ? "#fff" : color, stroke: item.hollowSymbol ? color : "var(--sia-color-surface)", strokeWidth: 4, pointerEvents: "none" }, item.name);
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { "data-mixed-axis-emphasis": item.name, cx: categoryAt(shownPointer), cy: linearScale(placement.end, [range[0], range[1]], [PLOT_BOTTOM2, PLOT2.y]), r: Math.max(0, item.symbolSize ?? 9) / 2, fill: item.hollowSymbol ? "#fff" : color, stroke: item.hollowSymbol ? color : "var(--sia-color-surface)", strokeWidth: 4, pointerEvents: "none" }, item.name);
     }) : null,
     clipPlot ? activeSeries.map((item) => {
       if (!item.markAverage || item.showMarkLabel === false) return null;
@@ -7107,27 +7131,27 @@ var MixedChart = (0, import_react34.forwardRef)(function MixedChart2({ axisPoint
       const range = axisDomains?.[item.valueAxisIndex ?? 0] ?? domain;
       if (average < range[0] || average > range[1]) return null;
       const y = linearScale(average, [range[0], range[1]], [PLOT_BOTTOM2, PLOT2.y]);
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { "data-mixed-average-label": item.name, x: PLOT2.x - 8, y: y + 4, textAnchor: "end", fontSize: 12, fill: item.markColor ?? getColor(series.indexOf(item), item.color, palette), children: item.markFormatter ? item.markFormatter(average) : Number(average.toFixed(2)) }, item.name);
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { "data-mixed-average-label": item.name, x: PLOT2.x - 8, y: y + 4, textAnchor: "end", fontSize: 12, fill: item.markColor ?? getColor(series.indexOf(item), item.color, palette), children: item.markFormatter ? item.markFormatter(average) : Number(average.toFixed(2)) }, item.name);
     }) : null,
-    calculable ? islands.map((island, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ChartMark, { ...dragProps(-1, index), label: `\u5B64\u5C9B ${island.name} ${island.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    calculable ? islands.map((island, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(ChartMark, { ...dragProps(-1, index), label: `\u5B64\u5C9B ${island.name} ${island.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
       island.seriesName,
       " / ",
       island.name,
       "\uFF1A",
       island.value
     ] }), onPointerUp: finishDrag, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { cx: island.x, cy: island.y, r: 20, fill: "#fff", stroke: "#2ec7c9", strokeWidth: 2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("text", { x: island.x, y: island.y + 4, textAnchor: "middle", style: { fontSize: 11 }, children: island.value })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: island.x, cy: island.y, r: 20, fill: "#fff", stroke: "#2ec7c9", strokeWidth: 2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("text", { x: island.x, y: island.y + 4, textAnchor: "middle", style: { fontSize: 11 }, children: island.value })
     ] }, `island-${index}`)) : null
   ] });
 });
 var KLineChart = CandlestickChart;
 
 // src/components/LineShareChart.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var LineShareChart = (0, import_react36.forwardRef)(function LineShareChart2({ data, lineColor = "#2ec7c9", shareColor = "#b6a2de", ...props }, ref) {
-  const [selected, setSelected] = (0, import_react36.useState)(null);
-  const [maskHovered, setMaskHovered] = (0, import_react36.useState)(false);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var LineShareChart = (0, import_react37.forwardRef)(function LineShareChart2({ data, lineColor = "#2ec7c9", shareColor = "#b6a2de", ...props }, ref) {
+  const [selected, setSelected] = (0, import_react37.useState)(null);
+  const [maskHovered, setMaskHovered] = (0, import_react37.useState)(false);
   const width = props.viewBoxSize?.[0] ?? 900, height = props.viewBoxSize?.[1] ?? 450;
   const total = data.reduce((sum, item2) => sum + item2.value, 0), gap = data.length ? Math.round(Math.max(...data.map((item2) => item2.value)) - Math.min(...data.map((item2) => item2.value))) : 0;
   const maximum = data.reduce((best, item2, i) => item2.value >= data[best].value ? i : best, 0);
@@ -7138,53 +7162,53 @@ var LineShareChart = (0, import_react36.forwardRef)(function LineShareChart2({ d
   const path = linePath(points, "smooth"), center = [width / 2, height / 2];
   const ratio = item && total ? item.value / total : 0, angle = ratio * Math.PI * 2;
   const percent = Number((ratio * 100).toFixed(2));
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(SiaChart, { ...props, ref, width, height, viewBoxSize: [width, height], animation: false, empty: !data.length, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartLegend, { x: 10, y: 20, align: "start", orientation: "vertical", items: [{ name: "\u9500\u91CF", color: lineColor }, { name: "\u5360\u6BD4", color: shareColor }] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { x: left, y: top, width: right - left, height: bottom - top, fill: "#ccc" }),
-    points.length ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: `${path} L ${right} ${bottom} L ${left} ${bottom} Z`, fill: lineColor, fillOpacity: 0.5 }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: path, fill: "none", stroke: lineColor, strokeWidth: 2 })
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SiaChart, { ...props, ref, width, height, viewBoxSize: [width, height], animation: false, empty: !data.length, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartLegend, { x: 10, y: 20, align: "start", orientation: "vertical", items: [{ name: "\u9500\u91CF", color: lineColor }, { name: "\u5360\u6BD4", color: shareColor }] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { x: left, y: top, width: right - left, height: bottom - top, fill: "#ccc" }),
+    points.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: `${path} L ${right} ${bottom} L ${left} ${bottom} Z`, fill: lineColor, fillOpacity: 0.5 }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: path, fill: "none", stroke: lineColor, strokeWidth: 2 })
     ] }) : null,
     data.map((datum, i) => {
       const point = points[i + 1];
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { label: `\u9500\u91CF\uFF0C${datum.name}\uFF0C${display[i]}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("strong", { children: "\u9500\u91CF" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartMark, { label: `\u9500\u91CF\uFF0C${datum.name}\uFF0C${display[i]}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("strong", { children: "\u9500\u91CF" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
           datum.name,
           " : ",
           display[i]
         ] })
-      ] }), tooltipPoint: point, onPointerMove: () => setSelected(i), onFocus: () => setSelected(i), children: i === active ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { "data-share-active": datum.name, d: `M ${point[0]} ${point[1] - 10} l 10 10 -10 10 -10 -10 Z`, fill: "#fff", stroke: lineColor, strokeWidth: 2 }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: point[0], cy: point[1], r: 6, fill: "#fff", stroke: lineColor, strokeWidth: 2 }) }, datum.name);
+      ] }), tooltipPoint: point, onPointerMove: () => setSelected(i), onFocus: () => setSelected(i), children: i === active ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { "data-share-active": datum.name, d: `M ${point[0]} ${point[1] - 10} l 10 10 -10 10 -10 -10 Z`, fill: "#fff", stroke: lineColor, strokeWidth: 2 }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: point[0], cy: point[1], r: 6, fill: "#fff", stroke: lineColor, strokeWidth: 2 }) }, datum.name);
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { "data-share-mask": "", d: svgArcPath(center[0], center[1], 180, 0, Math.PI * 2, 100), fill: maskHovered ? "rgba(0,0,0,0)" : "#fff", pointerEvents: "all", onPointerEnter: () => setMaskHovered(true), onPointerLeave: () => setMaskHovered(false) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: svgArcPath(center[0], center[1], 125, 0, Math.PI * 2, 110), fill: "#fff", pointerEvents: "none" }),
-    item ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartMark, { label: `\u5360\u6BD4\uFF0C${item.name}\uFF0C${item.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { "data-share-mask": "", d: svgArcPath(center[0], center[1], 180, 0, Math.PI * 2, 100), fill: maskHovered ? "rgba(0,0,0,0)" : "#fff", pointerEvents: "all", onPointerEnter: () => setMaskHovered(true), onPointerLeave: () => setMaskHovered(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: svgArcPath(center[0], center[1], 125, 0, Math.PI * 2, 110), fill: "#fff", pointerEvents: "none" }),
+    item ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartMark, { label: `\u5360\u6BD4\uFF0C${item.name}\uFF0C${item.value}`, tooltip: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
           "\u603B\u91CF : ",
           total
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
           item.name,
           " : ",
           item.value
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
           "\u5360\u6BD4 : ",
           percent,
           "%"
         ] })
-      ] }), tooltipPoint: [center[0], center[1] + 120], children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChartPointMotion, { points: [[0, angle]], enabled: props.animation !== false, animateInitial: false, duration: 0, updateDuration: 500, children: (frame) => {
+      ] }), tooltipPoint: [center[0], center[1] + 120], children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartPointMotion, { points: [[0, angle]], enabled: props.animation !== false, animateInitial: false, duration: 0, updateDuration: 500, children: (frame) => {
         const shownAngle = frame[0]?.[1] ?? angle;
-        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { "data-share-ring": "", "data-share-angle": shownAngle, d: svgArcPath(center[0], center[1], 125, Math.PI / 2 - shownAngle / 2, Math.PI / 2 + shownAngle / 2, 110), fill: shareColor });
+        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { "data-share-ring": "", "data-share-angle": shownAngle, d: svgArcPath(center[0], center[1], 125, Math.PI / 2 - shownAngle / 2, Math.PI / 2 + shownAngle / 2, 110), fill: shareColor });
       } }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("text", { "data-share-label": "", x: center[0], y: center[1] + 145, textAnchor: "middle", fontSize: 15, fill: "#1e90ff", pointerEvents: "none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tspan", { x: center[0], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("text", { "data-share-label": "", x: center[0], y: center[1] + 145, textAnchor: "middle", fontSize: 15, fill: "#1e90ff", pointerEvents: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tspan", { x: center[0], children: [
           item.name,
           " : ",
           item.value
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tspan", { x: center[0], dy: 26, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tspan", { x: center[0], dy: 26, children: [
           "( ",
           percent,
           "% )"
@@ -7205,16 +7229,16 @@ function paddedValueExtent(values, padding = 0.05) {
 }
 
 // src/components/XYChart.tsx
-var import_react37 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var XYChart = (0, import_react37.forwardRef)(function XYChart2({ series: source, xDomain, yDomain, animationProgress, calculable = false, onDataChange, xAxisType = "value", xFormatter, tooltipFormatter, dataZoom = false, defaultZoom = [0, 100], onZoomChange, toolbox, ...props }, ref) {
-  const [series, setSeries] = (0, import_react37.useState)(source);
-  const [hidden, setHidden] = (0, import_react37.useState)([]);
-  const [crosshair, setCrosshair] = (0, import_react37.useState)();
-  const [drag, setDrag] = (0, import_react37.useState)();
-  const [geometry, setGeometry] = (0, import_react37.useState)();
-  const [zoom, setZoom] = (0, import_react37.useState)(defaultZoom);
-  (0, import_react37.useEffect)(() => setSeries(source), [source]);
+var import_react38 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var XYChart = (0, import_react38.forwardRef)(function XYChart2({ series: source, xDomain, yDomain, animationProgress, calculable = false, onDataChange, xAxisType = "value", xFormatter, tooltipFormatter, dataZoom = false, defaultZoom = [0, 100], onZoomChange, toolbox, ...props }, ref) {
+  const [series, setSeries] = (0, import_react38.useState)(source);
+  const [hidden, setHidden] = (0, import_react38.useState)([]);
+  const [crosshair, setCrosshair] = (0, import_react38.useState)();
+  const [drag, setDrag] = (0, import_react38.useState)();
+  const [geometry, setGeometry] = (0, import_react38.useState)();
+  const [zoom, setZoom] = (0, import_react38.useState)(defaultZoom);
+  (0, import_react38.useEffect)(() => setSeries(source), [source]);
   const window2 = dataZoom || xAxisType === "time" ? scatterValueWindow(series.flatMap((item) => item.data.map((point) => point[0])), dataZoom ? zoom : [0, 100]) : void 0;
   const active = series.filter((item) => !hidden.includes(item.name)).map((item) => ({ ...item, data: window2 ? item.data.filter((point) => point[0] >= window2[0] && point[0] <= window2[1]) : item.data }));
   const width = props.viewBoxSize?.[0] ?? 663, height = props.viewBoxSize?.[1] ?? 379;
@@ -7234,7 +7258,7 @@ var XYChart = (0, import_react37.forwardRef)(function XYChart2({ series: source,
     const point = new DOMPoint(event.clientX, event.clientY).matrixTransform(matrix.inverse());
     return [Math.max(plot.left, Math.min(plot.right, point.x)), Math.max(plot.top, Math.min(plot.bottom, point.y))];
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(SiaChart, { ...props, ref, width: props.width ?? width, height: props.height ?? height, viewBoxSize: [width, height], className: `sia-chart--macarons ${props.className ?? ""}`, toolbox: options ? {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SiaChart, { ...props, ref, width: props.width ?? width, height: props.height ?? height, viewBoxSize: [width, height], className: `sia-chart--macarons ${props.className ?? ""}`, toolbox: options ? {
     ...options,
     activeMagicType: geometry ?? source[0]?.geometry ?? "line",
     onMagicTypeChange: (type) => {
@@ -7250,7 +7274,7 @@ var XYChart = (0, import_react37.forwardRef)(function XYChart2({ series: source,
       onZoomChange?.(defaultZoom);
       options.onRestore?.();
     },
-    dataView: options.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartDataEditor, { readOnly: options.dataViewReadOnly, series: series.map((item) => ({ name: `${item.name}\uFF08${item.data.some((point) => point.length === 3) ? "x,y,value" : "x,y"}\uFF09`, data: item.data.flatMap((point) => point.filter((value) => value !== void 0)) })), onApply: (values) => update(series.map((item, index) => {
+    dataView: options.dataView ?? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChartDataEditor, { readOnly: options.dataViewReadOnly, series: series.map((item) => ({ name: `${item.name}\uFF08${item.data.some((point) => point.length === 3) ? "x,y,value" : "x,y"}\uFF09`, data: item.data.flatMap((point) => point.filter((value) => value !== void 0)) })), onApply: (values) => update(series.map((item, index) => {
       let offset = 0;
       return { ...item, data: item.data.map((point) => {
         const next = values[index].slice(offset, offset + point.length);
@@ -7259,37 +7283,37 @@ var XYChart = (0, import_react37.forwardRef)(function XYChart2({ series: source,
       }) };
     })) })
   } : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartLegend, { symbol: (geometry ?? source[0]?.geometry ?? "line") === "line" ? "line" : "rect", x: width / 2, y: 14, itemGap: 10, items: series.map((item, index) => ({ name: item.name, color: item.color ?? ["#2ec7c9", "#b6a2de"][index % 2], disabled: hidden.includes(item.name) })), onItemClick: (name) => setHidden((current) => current.includes(name) ? current.filter((item) => item !== name) : [...current, name]) }),
-    chartTicks(yd).map((value, index, ticks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("g", { children: [
-      index < ticks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { x: plot.left, y: sy(ticks[index + 1]), width: plot.right - plot.left, height: sy(value) - sy(ticks[index + 1]), fill: index % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: plot.left, x2: plot.right, y1: sy(value), y2: sy(value), stroke: "#eee" }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("text", { x: plot.left - 8, y: sy(value) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: value })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChartLegend, { symbol: (geometry ?? source[0]?.geometry ?? "line") === "line" ? "line" : "rect", x: width / 2, y: 14, itemGap: 10, items: series.map((item, index) => ({ name: item.name, color: item.color ?? ["#2ec7c9", "#b6a2de"][index % 2], disabled: hidden.includes(item.name) })), onItemClick: (name) => setHidden((current) => current.includes(name) ? current.filter((item) => item !== name) : [...current, name]) }),
+    chartTicks(yd).map((value, index, ticks) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { children: [
+      index < ticks.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("rect", { x: plot.left, y: sy(ticks[index + 1]), width: plot.right - plot.left, height: sy(value) - sy(ticks[index + 1]), fill: index % 2 ? "rgba(200,200,200,.1)" : "rgba(250,250,250,.1)" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: plot.left, x2: plot.right, y1: sy(value), y2: sy(value), stroke: "#eee" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("text", { x: plot.left - 8, y: sy(value) + 4, textAnchor: "end", className: "sia-chart__axis-label", children: value })
     ] }, value)),
-    (xAxisType === "time" ? chartTimeTicks([xd[0], xd[1]], 10) : chartTicks(xd)).map((value, index, ticks) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: sx(value), x2: sx(value), y1: plot.top, y2: plot.bottom, stroke: "#eee" }),
-      xAxisType !== "time" || index === 0 || index === ticks.length - 1 || index % 2 === 0 && index < ticks.length - 2 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("text", { x: sx(value), y: plot.bottom + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: xFormatter ? xFormatter(value) : xAxisType === "time" ? new Date(value).toLocaleDateString() : value }) : null
+    (xAxisType === "time" ? chartTimeTicks([xd[0], xd[1]], 10) : chartTicks(xd)).map((value, index, ticks) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: sx(value), x2: sx(value), y1: plot.top, y2: plot.bottom, stroke: "#eee" }),
+      xAxisType !== "time" || index === 0 || index === ticks.length - 1 || index % 2 === 0 && index < ticks.length - 2 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("text", { x: sx(value), y: plot.bottom + 19, textAnchor: "middle", className: "sia-chart__axis-label", children: xFormatter ? xFormatter(value) : xAxisType === "time" ? new Date(value).toLocaleDateString() : value }) : null
     ] }, value)),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: plot.left, x2: plot.left, y1: plot.top, y2: plot.bottom, stroke: "#dc143c", strokeWidth: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: plot.left, x2: plot.right, y1: plot.bottom, y2: plot.bottom, stroke: "#008acd", strokeWidth: 2 }),
-    crosshair ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("g", { pointerEvents: "none", stroke: "#999", strokeDasharray: "5 5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: crosshair[0], x2: crosshair[0], y1: plot.top, y2: plot.bottom }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: plot.left, x2: plot.right, y1: crosshair[1], y2: crosshair[1] })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: plot.left, x2: plot.left, y1: plot.top, y2: plot.bottom, stroke: "#dc143c", strokeWidth: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: plot.left, x2: plot.right, y1: plot.bottom, y2: plot.bottom, stroke: "#008acd", strokeWidth: 2 }),
+    crosshair ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { pointerEvents: "none", stroke: "#999", strokeDasharray: "5 5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: crosshair[0], x2: crosshair[0], y1: plot.top, y2: plot.bottom }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: plot.left, x2: plot.right, y1: crosshair[1], y2: crosshair[1] })
     ] }) : null,
     active.map((item) => {
       const seriesIndex = series.findIndex((candidate) => candidate.name === item.name), color = item.color ?? ["#2ec7c9", "#b6a2de"][seriesIndex % 2];
       const shape = geometry ?? item.geometry ?? "line";
       const points = item.data.map((point) => [sx(point[0]), sy(point[1])]);
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("g", { children: [
-        shape === "line" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartPointMotion, { points, enabled: props.animation !== false && !drag, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (frame) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: linePath(frame, item.curve ?? "smooth"), fill: "none", stroke: color, strokeWidth: 2 }) }) : null,
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { children: [
+        shape === "line" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChartPointMotion, { points, enabled: props.animation !== false && !drag, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (frame) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: linePath(frame, item.curve ?? "smooth"), fill: "none", stroke: color, strokeWidth: 2 }) }) : null,
         points.map((point, index) => {
           const datum = item.data[index];
           const dataIndex = series[seriesIndex].data.indexOf(datum);
           const horizontal = shape === "bar" && item.barOrientation === "horizontal";
           const origin = shape === "line" ? [point[0], points[0][1]] : horizontal ? [sx(0), point[1]] : [point[0], sy(0)];
-          return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartPointMotion, { points: [origin, point], horizontal, enabled: props.animation !== false && !drag, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (frame) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChartPointMotion, { points: [origin, point], horizontal, enabled: props.animation !== false && !drag, duration: props.animationDuration ?? 2e3, progress: animationProgress, children: (frame) => {
             const end = frame[1];
             const size = item.barSize ?? 10;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartMark, { label: `${item.name}\uFF0C[${datum.join("\uFF0C")}]`, tooltip: tooltipFormatter ? tooltipFormatter(datum, item) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChartMark, { label: `${item.name}\uFF0C[${datum.join("\uFF0C")}]`, tooltip: tooltipFormatter ? tooltipFormatter(datum, item) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
               item.name,
               "\uFF1A[ ",
               datum.join(", "),
@@ -7311,7 +7335,7 @@ var XYChart = (0, import_react37.forwardRef)(function XYChart2({ series: source,
             }, onPointerUp: (event) => {
               if (drag) event.currentTarget.releasePointerCapture(event.pointerId);
               setDrag(void 0);
-            }, onPointerCancel: () => setDrag(void 0), children: shape === "line" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: end[0], cy: end[1], r: Math.max(0, typeof item.symbolRadius === "function" ? item.symbolRadius(datum) : item.symbolRadius ?? 3), fill: "#fff", stroke: color, strokeWidth: 2 }) : horizontal ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { x: Math.min(origin[0], end[0]), y: end[1] - size / 2, width: Math.abs(end[0] - origin[0]), height: size, fill: color, rx: 5 }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { x: end[0] - size / 2, y: Math.min(origin[1], end[1]), width: size, height: Math.abs(end[1] - origin[1]), fill: color, rx: 5 }) });
+            }, onPointerCancel: () => setDrag(void 0), children: shape === "line" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: end[0], cy: end[1], r: Math.max(0, typeof item.symbolRadius === "function" ? item.symbolRadius(datum) : item.symbolRadius ?? 3), fill: "#fff", stroke: color, strokeWidth: 2 }) : horizontal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("rect", { x: Math.min(origin[0], end[0]), y: end[1] - size / 2, width: Math.abs(end[0] - origin[0]), height: size, fill: color, rx: 5 }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("rect", { x: end[0] - size / 2, y: Math.min(origin[1], end[1]), width: size, height: Math.abs(end[1] - origin[1]), fill: color, rx: 5 }) });
           } }, index);
         }),
         item.statistics && item.data.length > 0 ? [0, 1].flatMap((axis) => {
@@ -7321,21 +7345,21 @@ var XYChart = (0, import_react37.forwardRef)(function XYChart2({ series: source,
           return stats.map((value, stat) => {
             const coordinate = axis === 0 ? sx(value) : sy(value);
             const point = item.data[values.indexOf(value)];
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("g", { style: { color: color2 }, className: "sia-chart__mark-line", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: axis === 0 ? coordinate : plot.left, x2: axis === 0 ? coordinate : plot.right, y1: axis === 0 ? plot.top : coordinate, y2: axis === 0 ? plot.bottom : coordinate, stroke: color2 }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: axis === 0 ? coordinate : plot.left, cy: axis === 0 ? plot.bottom : coordinate, r: 2, fill: color2 }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: axis === 0 ? `M ${coordinate - 5} ${plot.top + 7} L ${coordinate} ${plot.top - 3} L ${coordinate + 5} ${plot.top + 7} L ${coordinate} ${plot.top + 4} Z` : `M ${plot.right - 5} ${coordinate - 5} L ${plot.right + 5} ${coordinate} L ${plot.right - 5} ${coordinate + 5} L ${plot.right - 2} ${coordinate} Z`, fill: color2 }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("text", { x: axis === 0 ? coordinate : plot.right + 5, y: axis === 0 ? plot.top - 8 : coordinate + 4, textAnchor: axis === 0 ? "middle" : "start", children: Number(value.toFixed(2)) }),
-              point && stat !== 1 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: sx(point[0]), cy: sy(point[1]), r: 10, fill: "none", stroke: color2, strokeWidth: 2 }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("text", { x: sx(point[0]) + (axis === 0 ? stat === 0 ? -15 : 15 : 0), y: sy(point[1]) + (axis === 0 ? 4 : stat === 0 ? 22 : -17), textAnchor: axis === 0 ? stat === 0 ? "end" : "start" : "middle", children: value })
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("g", { style: { color: color2 }, className: "sia-chart__mark-line", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("line", { x1: axis === 0 ? coordinate : plot.left, x2: axis === 0 ? coordinate : plot.right, y1: axis === 0 ? plot.top : coordinate, y2: axis === 0 ? plot.bottom : coordinate, stroke: color2 }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: axis === 0 ? coordinate : plot.left, cy: axis === 0 ? plot.bottom : coordinate, r: 2, fill: color2 }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: axis === 0 ? `M ${coordinate - 5} ${plot.top + 7} L ${coordinate} ${plot.top - 3} L ${coordinate + 5} ${plot.top + 7} L ${coordinate} ${plot.top + 4} Z` : `M ${plot.right - 5} ${coordinate - 5} L ${plot.right + 5} ${coordinate} L ${plot.right - 5} ${coordinate + 5} L ${plot.right - 2} ${coordinate} Z`, fill: color2 }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("text", { x: axis === 0 ? coordinate : plot.right + 5, y: axis === 0 ? plot.top - 8 : coordinate + 4, textAnchor: axis === 0 ? "middle" : "start", children: Number(value.toFixed(2)) }),
+              point && stat !== 1 ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: sx(point[0]), cy: sy(point[1]), r: 10, fill: "none", stroke: color2, strokeWidth: 2 }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("text", { x: sx(point[0]) + (axis === 0 ? stat === 0 ? -15 : 15 : 0), y: sy(point[1]) + (axis === 0 ? 4 : stat === 0 ? 22 : -17), textAnchor: axis === 0 ? stat === 0 ? "end" : "start" : "middle", children: value })
               ] }) : null
             ] }, `${axis}-${stat}`);
           });
         }) : null
       ] }, item.name);
     }),
-    dataZoom ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("foreignObject", { className: "sia-chart__inline-zoom", x: plot.left, y: plot.bottom + 35, width: plot.right - plot.left, height: 30, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChartDataZoom, { value: zoom, dataShadow: series[0]?.data.map((point) => point[1]), onChange: (value) => {
+    dataZoom ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("foreignObject", { className: "sia-chart__inline-zoom", x: plot.left, y: plot.bottom + 35, width: plot.right - plot.left, height: 30, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChartDataZoom, { value: zoom, dataShadow: series[0]?.data.map((point) => point[1]), onChange: (value) => {
       setZoom(value);
       onZoomChange?.(value);
     } }) }) : null
@@ -7343,7 +7367,7 @@ var XYChart = (0, import_react37.forwardRef)(function XYChart2({ series: source,
 });
 
 // src/components/ChartMapOverlay.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 
 // src/components/mapOverlayHost.ts
 function observeMapOverlayHost(host, onChange) {
@@ -7380,13 +7404,13 @@ function observeMapOverlayHost(host, onChange) {
 }
 
 // src/components/ChartMapOverlay.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function ChartMapOverlay({ createHost, children, className, style, ariaLabel = "\u5730\u56FE\u53E0\u52A0\u56FE\u8868", onError }) {
-  const container = (0, import_react38.useRef)(null);
-  const errorHandler = (0, import_react38.useRef)(onError);
+  const container = (0, import_react39.useRef)(null);
+  const errorHandler = (0, import_react39.useRef)(onError);
   errorHandler.current = onError;
-  const [snapshot, setSnapshot] = (0, import_react38.useState)();
-  (0, import_react38.useEffect)(() => {
+  const [snapshot, setSnapshot] = (0, import_react39.useState)();
+  (0, import_react39.useEffect)(() => {
     setSnapshot(void 0);
     if (!container.current) return;
     try {
@@ -7395,9 +7419,9 @@ function ChartMapOverlay({ createHost, children, className, style, ariaLabel = "
       errorHandler.current?.(error);
     }
   }, [createHost]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className, "aria-label": ariaLabel, style: { position: "relative", width: "100%", height: 500, ...style }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: container, "data-map-overlay-host": true, style: { position: "absolute", inset: 0 } }),
-    snapshot ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { "data-map-overlay-content": true, style: { position: "absolute", left: 0, top: 0, width: snapshot.width, height: snapshot.height, pointerEvents: "none" }, children: children(snapshot) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className, "aria-label": ariaLabel, style: { position: "relative", width: "100%", height: 500, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref: container, "data-map-overlay-host": true, style: { position: "absolute", inset: 0 } }),
+    snapshot ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { "data-map-overlay-content": true, style: { position: "absolute", left: 0, top: 0, width: snapshot.width, height: snapshot.height, pointerEvents: "none" }, children: children(snapshot) }) : null
   ] });
 }