@pactor-app/chart 0.0.0-stage → 1.46.0

package/dist/index.js

@@ -0,0 +1,1410 @@
+// src/index.ts
+import { Registry } from "@pactor-app/core";
+
+// src/components/MetricCard/index.tsx
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/MetricCard/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function MetricCard({
+  title,
+  value,
+  prefix,
+  suffix,
+  trend,
+  trendLabel,
+  className,
+  style
+}) {
+  const showTrend = typeof trend === "number" && trend !== 0;
+  const rising = (trend ?? 0) > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "metric-card",
+      className: cn("rounded-lg border bg-card p-4 text-card-foreground shadow-sm", className),
+      style,
+      children: [
+        title ? /* @__PURE__ */ jsx("div", { "data-slot": "metric-card-title", className: "text-sm text-muted-foreground", children: title }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "metric-card-value",
+            className: "mt-1 text-2xl font-semibold tracking-tight tabular-nums",
+            children: [
+              prefix,
+              value,
+              suffix
+            ]
+          }
+        ),
+        showTrend ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "metric-card-trend",
+            "data-trend": rising ? "up" : "down",
+            className: cn(
+              "mt-1 inline-flex items-center gap-0.5 text-sm",
+              rising ? "text-success" : "text-destructive"
+            ),
+            children: [
+              rising ? /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-4" }) : /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-4" }),
+              Math.abs(trend ?? 0),
+              "%",
+              trendLabel ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-muted-foreground", children: trendLabel }) : null
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/EChartBase/index.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/components/echarts-modules.ts
+import * as echarts from "echarts/core";
+import {
+  BarChart,
+  FunnelChart,
+  GaugeChart,
+  HeatmapChart,
+  LineChart,
+  MapChart,
+  PieChart,
+  RadarChart,
+  SankeyChart,
+  ScatterChart,
+  TreeChart
+} from "echarts/charts";
+import {
+  DataZoomComponent,
+  GeoComponent,
+  GridComponent,
+  LegendComponent,
+  RadarComponent,
+  TitleComponent,
+  TooltipComponent,
+  VisualMapComponent
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  LineChart,
+  BarChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  FunnelChart,
+  GaugeChart,
+  HeatmapChart,
+  TreeChart,
+  SankeyChart,
+  MapChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  TitleComponent,
+  VisualMapComponent,
+  DataZoomComponent,
+  GeoComponent,
+  RadarComponent,
+  CanvasRenderer
+]);
+
+// src/components/EChartBase/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function EChartBase({
+  option,
+  height = 256,
+  onSelect,
+  className,
+  style,
+  slot
+}) {
+  const hostRef = useRef(null);
+  const chartRef = useRef(null);
+  const onSelectRef = useRef(onSelect);
+  onSelectRef.current = onSelect;
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    let chart = null;
+    try {
+      chart = echarts.init(host);
+    } catch {
+      setFailed(true);
+      return;
+    }
+    chartRef.current = chart;
+    chart.on("click", (params) => {
+      onSelectRef.current?.({
+        name: params.name,
+        value: params.value,
+        seriesName: params.seriesName,
+        dataIndex: params.dataIndex
+      });
+    });
+    const observer2 = new ResizeObserver(() => chart?.resize());
+    observer2.observe(host);
+    return () => {
+      observer2.disconnect();
+      chart?.dispose();
+      chartRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    try {
+      chartRef.current?.setOption(option, { notMerge: true });
+    } catch {
+    }
+  }, [option]);
+  if (failed) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-slot": "chart-fallback",
+        className: cn(
+          "flex h-32 w-full items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground",
+          className
+        ),
+        style,
+        children: "\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301\u56FE\u8868\u6E32\u67D3"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: hostRef,
+      "data-slot": slot,
+      className: cn("w-full", className),
+      style: { height: typeof height === "number" ? `${height}px` : height, ...style }
+    }
+  );
+}
+
+// src/components/lib/option-builders.ts
+function pickColor(theme, colors, index) {
+  if (colors && colors.length > 0) return colors[index % colors.length];
+  return theme.palette[index % theme.palette.length];
+}
+function toNumber(value) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+function axisLabel(theme) {
+  return { color: theme.muted };
+}
+function grid() {
+  return { left: 8, right: 16, top: 40, bottom: 4, containLabel: true };
+}
+function axisTooltip(theme) {
+  return {
+    trigger: "axis",
+    backgroundColor: theme.card,
+    borderColor: theme.border,
+    textStyle: { color: theme.foreground }
+  };
+}
+function itemTooltip(theme) {
+  return {
+    trigger: "item",
+    backgroundColor: theme.card,
+    borderColor: theme.border,
+    textStyle: { color: theme.foreground }
+  };
+}
+function titleOption(title) {
+  return title ? { text: title, left: 8, top: 4 } : void 0;
+}
+function legendOption(theme, show) {
+  return show ? { top: 4, textStyle: { color: theme.muted } } : void 0;
+}
+function categorySeries(input, theme, kind, area) {
+  const rows = input.data;
+  const keys = input.yKeys && input.yKeys.length > 0 ? input.yKeys : ["value"];
+  const series = keys.map((key, index) => ({
+    type: kind,
+    name: key,
+    data: rows.map((row) => toNumber(row[key])),
+    ...kind === "line" ? { smooth: input.smooth ?? false, symbolSize: 6 } : {},
+    ...area ? { areaStyle: { opacity: input.fillOpacity ?? 0.25 } } : {},
+    ...input.stacked ? { stack: "total" } : {},
+    ...kind === "line" ? { emphasis: { focus: "series" } } : {},
+    itemStyle: { color: pickColor(theme, input.colors, index) },
+    ...kind === "line" ? { lineStyle: { color: pickColor(theme, input.colors, index) } } : {},
+    ...area ? { lineStyle: { color: pickColor(theme, input.colors, index) } } : {}
+  }));
+  const legend = legendOption(theme, keys.length > 1);
+  return {
+    color: input.colors && input.colors.length > 0 ? input.colors : theme.palette,
+    title: titleOption(input.title),
+    grid: grid(),
+    tooltip: axisTooltip(theme),
+    ...legend ? { legend } : {},
+    xAxis: { type: "category", data: rows.map((row) => String(input.xKey ? row[input.xKey] : "")), axisLabel: axisLabel(theme), axisLine: { lineStyle: { color: theme.border } } },
+    yAxis: { type: "value", axisLabel: axisLabel(theme), splitLine: { lineStyle: { color: theme.border } } },
+    series
+  };
+}
+function buildLineOption(input, theme) {
+  return categorySeries(input, theme, "line", input.showArea ?? false);
+}
+function buildColumnOption(input, theme) {
+  return categorySeries(input, theme, "bar", false);
+}
+function buildBarOption(input, theme) {
+  const rows = input.data;
+  const keys = input.yKeys && input.yKeys.length > 0 ? input.yKeys : ["value"];
+  const series = keys.map((key, index) => ({
+    type: "bar",
+    name: key,
+    data: rows.map((row) => toNumber(row[key])),
+    ...input.stacked ? { stack: "total" } : {},
+    itemStyle: { color: pickColor(theme, input.colors, index) }
+  }));
+  const legend = legendOption(theme, keys.length > 1);
+  return {
+    color: input.colors && input.colors.length > 0 ? input.colors : theme.palette,
+    title: titleOption(input.title),
+    grid: grid(),
+    tooltip: axisTooltip(theme),
+    ...legend ? { legend } : {},
+    xAxis: { type: "value", axisLabel: axisLabel(theme), splitLine: { lineStyle: { color: theme.border } } },
+    yAxis: { type: "category", data: rows.map((row) => String(input.yKey ? row[input.yKey] : "")), axisLabel: axisLabel(theme), axisLine: { lineStyle: { color: theme.border } } },
+    series
+  };
+}
+function buildAreaOption(input, theme) {
+  const withArea = { ...input, showArea: true };
+  return categorySeries(withArea, theme, "line", true);
+}
+function pieOption(input, theme, radius, extra) {
+  const nameKey = input.nameKey ?? "name";
+  const valueKey = input.valueKey ?? "value";
+  return {
+    color: input.colors && input.colors.length > 0 ? input.colors : theme.palette,
+    title: titleOption(input.title),
+    tooltip: itemTooltip(theme),
+    legend: { bottom: 0, textStyle: { color: theme.muted } },
+    series: [
+      {
+        type: "pie",
+        radius,
+        center: ["50%", "52%"],
+        data: input.data.map((row) => ({ name: String(row[nameKey] ?? ""), value: toNumber(row[valueKey]) })),
+        label: { show: input.showLabel ?? false, color: theme.muted },
+        emphasis: { scaleSize: 6 }
+      }
+    ],
+    ...extra
+  };
+}
+function buildPieOption(input, theme) {
+  return pieOption(input, theme, [0, "72%"], {});
+}
+function buildDonutOption(input, theme) {
+  const inner = input.innerRadius ?? "48%";
+  const outer = input.outerRadius ?? "72%";
+  const extra = {};
+  if (input.centerValue !== void 0 || input.centerLabel !== void 0) {
+    extra.title = {
+      text: input.centerValue !== void 0 ? String(input.centerValue) : "",
+      subtext: input.centerLabel ?? "",
+      left: "center",
+      top: "40%",
+      textStyle: { color: theme.foreground, fontSize: 22 },
+      subtextStyle: { color: theme.muted }
+    };
+  }
+  return pieOption(input, theme, [inner, outer], extra);
+}
+function scatterSeries(input, theme, extra) {
+  const xKey = input.xKey ?? "x";
+  const yKey = input.yKey ?? "y";
+  const groups = /* @__PURE__ */ new Map();
+  if (input.seriesKey) {
+    for (const row of input.data) {
+      const g = String(row[input.seriesKey] ?? "");
+      if (!groups.has(g)) groups.set(g, []);
+      groups.get(g).push(row);
+    }
+  } else {
+    groups.set("", input.data);
+  }
+  const names = [...groups.keys()];
+  const series = names.map((name, index) => ({
+    type: "scatter",
+    name: name || void 0,
+    data: groups.get(name).map(
+      (row) => extra?.datum ? extra.datum(row) : [toNumber(row[xKey]), toNumber(row[yKey])]
+    ),
+    symbolSize: extra?.symbolSize ?? 10,
+    itemStyle: { color: pickColor(theme, input.colors, index) }
+  }));
+  const legend = legendOption(theme, input.seriesKey !== void 0 && names.length > 1);
+  return {
+    color: input.colors && input.colors.length > 0 ? input.colors : theme.palette,
+    title: titleOption(input.title),
+    grid: grid(),
+    tooltip: axisTooltip(theme),
+    ...legend ? { legend } : {},
+    xAxis: { type: "value", axisLabel: axisLabel(theme), splitLine: { lineStyle: { color: theme.border } } },
+    yAxis: { type: "value", axisLabel: axisLabel(theme), splitLine: { lineStyle: { color: theme.border } } },
+    series
+  };
+}
+function buildScatterOption(input, theme) {
+  return scatterSeries(input, theme);
+}
+function buildBubbleOption(input, theme) {
+  const sizeKey = input.sizeKey ?? "size";
+  const sizes = input.data.map((row) => toNumber(row[sizeKey]));
+  const min = Math.min(...sizes, 0);
+  const max = Math.max(...sizes, 1);
+  const span = max - min || 1;
+  return scatterSeries(input, theme, {
+    datum: (row) => [toNumber(row[input.xKey ?? "x"]), toNumber(row[input.yKey ?? "y"]), toNumber(row[sizeKey])],
+    symbolSize: (datum) => {
+      const [x, y, size] = datum;
+      void x;
+      void y;
+      return 12 + (toNumber(size) - min) / span * 36;
+    }
+  });
+}
+function buildRadarOption(input, theme) {
+  const indicatorKey = input.indicatorKey ?? "indicator";
+  const keys = input.yKeys && input.yKeys.length > 0 ? input.yKeys : ["value"];
+  return {
+    color: input.colors && input.colors.length > 0 ? input.colors : theme.palette,
+    title: titleOption(input.title),
+    tooltip: itemTooltip(theme),
+    ...keys.length > 1 ? { legend: legendOption(theme, true) } : {},
+    radar: {
+      indicator: input.data.map((row) => ({ name: String(row[indicatorKey] ?? ""), max: 100 })),
+      axisName: { color: theme.muted },
+      splitLine: { lineStyle: { color: theme.border } },
+      splitArea: { areaStyle: { color: [] } }
+    },
+    series: [
+      {
+        type: "radar",
+        data: keys.map((key) => ({
+          name: key,
+          value: input.data.map((row) => toNumber(row[key]))
+        }))
+      }
+    ]
+  };
+}
+function buildFunnelOption(input, theme) {
+  const nameKey = input.nameKey ?? "name";
+  const valueKey = input.valueKey ?? "value";
+  return {
+    color: input.colors && input.colors.length > 0 ? input.colors : theme.palette,
+    title: titleOption(input.title),
+    tooltip: itemTooltip(theme),
+    series: [
+      {
+        type: "funnel",
+        left: "12%",
+        width: "76%",
+        sort: input.sort ?? "descending",
+        gap: 2,
+        label: { show: true, position: "inside", color: theme.card },
+        data: input.data.map((row) => ({ name: String(row[nameKey] ?? ""), value: toNumber(row[valueKey]) }))
+      }
+    ]
+  };
+}
+function buildGaugeOption(input, theme) {
+  const min = input.min ?? 0;
+  const max = input.max ?? 100;
+  const span = max - min || 1;
+  const defaultThresholds = [{ value: max, color: theme.palette[0] }];
+  const stops = (input.thresholds && input.thresholds.length > 0 ? input.thresholds : defaultThresholds).slice().sort((a, b) => a.value - b.value).map((t, index, arr) => {
+    const upper = index < arr.length - 1 ? t.value : max;
+    return [(upper - min) / span, t.color ?? theme.palette[0]];
+  });
+  return {
+    title: titleOption(input.title),
+    series: [
+      {
+        type: "gauge",
+        min,
+        max,
+        startAngle: 210,
+        endAngle: -30,
+        progress: { show: true, width: 10 },
+        axisLine: { lineStyle: { width: 10, color: stops } },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        pointer: { show: false },
+        anchor: { show: false },
+        title: { show: false },
+        detail: {
+          valueAnimation: true,
+          offsetCenter: [0, 0],
+          fontSize: 26,
+          color: theme.foreground,
+          formatter: (value) => `${value}${input.unit ?? ""}`
+        },
+        data: [{ value: toNumber(input.value) }]
+      }
+    ]
+  };
+}
+function valueRange(values) {
+  if (values.length === 0) return { min: 0, max: 1 };
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  return max === min ? { min, max: min + 1 } : { min, max };
+}
+function buildHeatmapOption(input, theme) {
+  const xKey = input.xKey ?? "x";
+  const yKey = input.yKey ?? "y";
+  const valueKey = input.valueKey ?? "value";
+  const xs = [...new Set(input.data.map((row) => String(row[xKey])))];
+  const ys = [...new Set(input.data.map((row) => String(row[yKey])))];
+  const range = valueRange(input.data.map((row) => toNumber(row[valueKey])));
+  return {
+    title: titleOption(input.title),
+    grid: grid(),
+    tooltip: itemTooltip(theme),
+    xAxis: { type: "category", data: xs, axisLabel: axisLabel(theme), splitArea: { show: true } },
+    yAxis: { type: "category", data: ys, axisLabel: axisLabel(theme), splitArea: { show: true } },
+    visualMap: {
+      min: range.min,
+      max: range.max,
+      calculable: true,
+      orient: "horizontal",
+      left: "center",
+      bottom: 0,
+      textStyle: { color: theme.muted },
+      inRange: { color: [theme.palette[2] ?? theme.palette[0], theme.palette[0]] }
+    },
+    series: [
+      {
+        type: "heatmap",
+        data: input.data.map((row) => [String(row[xKey]), String(row[yKey]), toNumber(row[valueKey])]),
+        label: { show: false }
+      }
+    ]
+  };
+}
+function buildTreeOption(input, theme) {
+  const horizontal = input.orient === "horizontal";
+  return {
+    title: titleOption(input.title),
+    tooltip: itemTooltip(theme),
+    series: [
+      {
+        type: "tree",
+        data: input.data,
+        layout: "orthogonal",
+        orient: horizontal ? "LR" : "TB",
+        edgeShape: input.edgeShape ?? "curve",
+        roam: false,
+        expandAndCollapse: true,
+        initialTreeDepth: input.initialTreeDepth ?? 2,
+        label: {
+          show: true,
+          position: horizontal ? "right" : "bottom",
+          color: theme.foreground,
+          fontSize: 12
+        },
+        itemStyle: { color: theme.palette[0], borderColor: theme.palette[0] },
+        lineStyle: { color: theme.border, width: 1.5, curveness: 0.5 },
+        leaves: {
+          itemStyle: { color: theme.palette[1], borderColor: theme.palette[1] }
+        },
+        emphasis: { focus: "relative" }
+      }
+    ]
+  };
+}
+function buildSankeyOption(input, theme) {
+  return {
+    color: theme.palette,
+    title: titleOption(input.title),
+    tooltip: itemTooltip(theme),
+    series: [
+      {
+        type: "sankey",
+        left: 24,
+        right: 64,
+        top: 40,
+        bottom: 24,
+        nodeWidth: 16,
+        nodeGap: 12,
+        draggable: false,
+        label: { color: theme.muted },
+        lineStyle: { color: "gradient", curveness: 0.5 },
+        emphasis: { focus: "adjacency" },
+        data: input.nodes,
+        links: input.links
+      }
+    ]
+  };
+}
+function buildMapOption(input, theme) {
+  const nameKey = input.nameKey ?? "name";
+  const valueKey = input.valueKey ?? "value";
+  const range = valueRange(input.data.map((row) => toNumber(row[valueKey])));
+  return {
+    title: titleOption(input.title),
+    tooltip: itemTooltip(theme),
+    visualMap: {
+      min: range.min,
+      max: range.max,
+      left: 8,
+      bottom: 8,
+      textStyle: { color: theme.muted },
+      inRange: { color: [theme.palette[2] ?? theme.palette[0], theme.palette[0]] }
+    },
+    series: [
+      {
+        type: "map",
+        map: input.mapName,
+        roam: false,
+        label: { show: false },
+        emphasis: { label: { show: true, color: theme.foreground } },
+        itemStyle: { borderColor: theme.card, borderWidth: 1 },
+        data: input.data.map((row) => ({ name: String(row[nameKey] ?? ""), value: toNumber(row[valueKey]) }))
+      }
+    ]
+  };
+}
+function buildComposedOption(input, theme) {
+  const rows = input.data;
+  const hasSecondAxis = input.series.some((s) => s.yAxisIndex === 1);
+  const series = input.series.map((s, index) => {
+    const color = pickColor(theme, input.colors, index);
+    return {
+      type: s.type === "area" ? "line" : s.type,
+      name: s.name ?? s.dataKey,
+      data: rows.map((row) => toNumber(row[s.dataKey])),
+      ...s.type === "line" ? { smooth: false, symbolSize: 6 } : {},
+      ...s.type === "area" ? { areaStyle: { opacity: 0.25 } } : {},
+      yAxisIndex: s.yAxisIndex ?? 0,
+      itemStyle: { color },
+      ...s.type !== "bar" ? { lineStyle: { color } } : {}
+    };
+  });
+  return {
+    color: input.colors && input.colors.length > 0 ? input.colors : theme.palette,
+    title: titleOption(input.title),
+    grid: grid(),
+    tooltip: axisTooltip(theme),
+    legend: legendOption(theme, true),
+    xAxis: { type: "category", data: rows.map((row) => String(input.xKey ? row[input.xKey] : "")), axisLabel: axisLabel(theme), axisLine: { lineStyle: { color: theme.border } } },
+    yAxis: hasSecondAxis ? [
+      { type: "value", axisLabel: axisLabel(theme), splitLine: { lineStyle: { color: theme.border } } },
+      { type: "value", axisLabel: axisLabel(theme), splitLine: { show: false } }
+    ] : { type: "value", axisLabel: axisLabel(theme), splitLine: { lineStyle: { color: theme.border } } },
+    series
+  };
+}
+
+// src/components/lib/use-chart-theme.ts
+import { useSyncExternalStore } from "react";
+
+// src/components/lib/color.ts
+var LPAREN = String.fromCharCode(40);
+var RPAREN = String.fromCharCode(41);
+var OKLCH_RE = new RegExp(
+  "^oklch" + String.fromCharCode(92) + LPAREN + "\\s*([\\d.]+%?)\\s+([-\\d.eE]+)\\s+([-\\d.eE]+)(?:\\s*\\/\\s*[\\d.]+%?)?\\s*" + String.fromCharCode(92) + RPAREN + "$",
+  "i"
+);
+var OKLAB_RE = new RegExp(
+  "^oklab" + String.fromCharCode(92) + LPAREN + "\\s*([\\d.]+%?)\\s+([-\\d.eE]+)\\s+([-\\d.eE]+)(?:\\s*\\/\\s*[\\d.]+%?)?\\s*" + String.fromCharCode(92) + RPAREN + "$",
+  "i"
+);
+function parseLightness(raw) {
+  const value = parseFloat(raw);
+  return raw.endsWith("%") ? value / 100 : value;
+}
+function oklabToLinearSrgbColor(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+function linearToSrgbChannel(c) {
+  const clamped = Math.min(1, Math.max(0, c));
+  const encoded = clamped <= 31308e-7 ? 12.92 * clamped : 1.055 * Math.pow(clamped, 1 / 2.4) - 0.055;
+  return Math.round(encoded * 255);
+}
+function formatSrgbString(r, g, b) {
+  return "rgb" + LPAREN + `${linearToSrgbChannel(r)}, ${linearToSrgbChannel(g)}, ${linearToSrgbChannel(b)}` + RPAREN;
+}
+function normalizeColor(value) {
+  const trimmed = value.trim();
+  const oklch = OKLCH_RE.exec(trimmed);
+  if (oklch) {
+    const L = parseLightness(oklch[1]);
+    const C = parseFloat(oklch[2]);
+    const h = parseFloat(oklch[3]) * Math.PI / 180;
+    const [r, g, b] = oklabToLinearSrgbColor(L, C * Math.cos(h), C * Math.sin(h));
+    return formatSrgbString(r, g, b);
+  }
+  const oklab = OKLAB_RE.exec(trimmed);
+  if (oklab) {
+    const L = parseLightness(oklab[1]);
+    const a = parseFloat(oklab[2]);
+    const b = parseFloat(oklab[3]);
+    const [r, g, bl] = oklabToLinearSrgbColor(L, a, b);
+    return formatSrgbString(r, g, bl);
+  }
+  return trimmed;
+}
+
+// src/components/lib/theme.ts
+var FALLBACK_THEME = {
+  palette: ["steelblue", "seagreen", "darkorange", "slateblue", "tomato"],
+  foreground: "black",
+  muted: "gray",
+  border: "gainsboro",
+  card: "white",
+  success: "seagreen",
+  warning: "darkorange",
+  destructive: "tomato",
+  info: "steelblue"
+};
+var cached = null;
+function getChartTheme() {
+  if (cached) return cached;
+  if (typeof document === "undefined") return FALLBACK_THEME;
+  try {
+    const style = getComputedStyle(document.documentElement);
+    const read = (name) => normalizeColor(style.getPropertyValue(name));
+    const readColor = (name, fallback) => read(name) || fallback;
+    const palette = [1, 2, 3, 4, 5].map(
+      (i, index) => readColor(`--chart-${i}`, FALLBACK_THEME.palette[index])
+    );
+    cached = {
+      palette,
+      foreground: readColor("--foreground", FALLBACK_THEME.foreground),
+      muted: readColor("--muted-foreground", FALLBACK_THEME.muted),
+      border: readColor("--border", FALLBACK_THEME.border),
+      card: readColor("--card", FALLBACK_THEME.card),
+      success: readColor("--success", FALLBACK_THEME.success),
+      warning: readColor("--warning", FALLBACK_THEME.warning),
+      destructive: readColor("--destructive", FALLBACK_THEME.destructive),
+      info: readColor("--info", FALLBACK_THEME.info)
+    };
+    return cached;
+  } catch {
+    return FALLBACK_THEME;
+  }
+}
+function resetChartTheme() {
+  cached = null;
+}
+var CHART_SKIN_CHANGE_EVENT = "pactor:skin-change";
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+var scheduled = false;
+function scheduleNotify() {
+  if (scheduled) return;
+  scheduled = true;
+  const enqueue = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
+  enqueue(() => {
+    scheduled = false;
+    resetChartTheme();
+    for (const listener of [...listeners]) {
+      listener();
+    }
+  });
+}
+function handleResourceLoad(event) {
+  const target = event.target;
+  if (target instanceof HTMLLinkElement || target instanceof HTMLStyleElement) {
+    scheduleNotify();
+  }
+}
+function subscribeChartTheme(listener) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
+  }
+  listeners.add(listener);
+  if (!observer) {
+    observer = new MutationObserver(scheduleNotify);
+    observer.observe(document.documentElement, { attributes: true });
+    observer.observe(document.head, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    document.addEventListener("load", handleResourceLoad, true);
+    window.addEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && observer) {
+      observer.disconnect();
+      observer = null;
+      document.removeEventListener("load", handleResourceLoad, true);
+      window.removeEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+    }
+  };
+}
+
+// src/components/lib/use-chart-theme.ts
+function useChartTheme() {
+  return useSyncExternalStore(subscribeChartTheme, getChartTheme, getChartTheme);
+}
+
+// src/components/LineChart/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function LineChart2({
+  data = [],
+  xKey,
+  yKeys,
+  smooth = false,
+  showArea = false,
+  stacked = false,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildLineOption(
+    { data, xKey, yKeys, smooth, showArea, stacked, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx3(
+    EChartBase,
+    {
+      slot: "line-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/ColumnChart/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ColumnChart({
+  data = [],
+  xKey,
+  yKeys,
+  stacked = false,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildColumnOption(
+    { data, xKey, yKeys, stacked, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx4(
+    EChartBase,
+    {
+      slot: "column-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/BarChart/index.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function BarChart2({
+  data = [],
+  yKey,
+  xKeys,
+  stacked = false,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildBarOption(
+    { data, yKey, yKeys: xKeys, stacked, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx5(
+    EChartBase,
+    {
+      slot: "bar-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/AreaChart/index.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function AreaChart({
+  data = [],
+  xKey,
+  yKeys,
+  stacked = false,
+  fillOpacity,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildAreaOption(
+    { data, xKey, yKeys, stacked, fillOpacity, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx6(
+    EChartBase,
+    {
+      slot: "area-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/PieChart/index.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function PieChart2({
+  data = [],
+  nameKey,
+  valueKey,
+  showLabel,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildPieOption(
+    { data, nameKey, valueKey, showLabel, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx7(
+    EChartBase,
+    {
+      slot: "pie-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/DonutChart/index.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function DonutChart({
+  data = [],
+  nameKey,
+  valueKey,
+  innerRadius,
+  outerRadius,
+  centerLabel,
+  centerValue,
+  showLabel,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildDonutOption(
+    {
+      data,
+      nameKey,
+      valueKey,
+      innerRadius,
+      outerRadius,
+      centerLabel,
+      centerValue,
+      showLabel,
+      colors,
+      title
+    },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx8(
+    EChartBase,
+    {
+      slot: "donut-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/ScatterChart/index.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function ScatterChart2({
+  data = [],
+  xKey,
+  yKey,
+  seriesKey,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildScatterOption(
+    { data, xKey, yKey, seriesKey, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx9(
+    EChartBase,
+    {
+      slot: "scatter-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/BubbleChart/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function BubbleChart({
+  data = [],
+  xKey,
+  yKey,
+  sizeKey,
+  seriesKey,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildBubbleOption(
+    { data, xKey, yKey, sizeKey, seriesKey, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx10(
+    EChartBase,
+    {
+      slot: "bubble-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/RadarChart/index.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function RadarChart2({
+  data = [],
+  indicatorKey,
+  yKeys,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildRadarOption(
+    { data, indicatorKey, yKeys, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx11(
+    EChartBase,
+    {
+      slot: "radar-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/FunnelChart/index.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function FunnelChart2({
+  data = [],
+  nameKey,
+  valueKey,
+  sort,
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildFunnelOption(
+    { data, nameKey, valueKey, sort, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx12(
+    EChartBase,
+    {
+      slot: "funnel-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/GaugeChart/index.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function GaugeChart2({
+  value = 0,
+  min,
+  max,
+  thresholds,
+  unit,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildGaugeOption(
+    { value, min, max, thresholds, unit, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx13(
+    EChartBase,
+    {
+      slot: "gauge-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/Heatmap/index.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Heatmap({
+  data = [],
+  xKey,
+  yKey,
+  valueKey,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildHeatmapOption(
+    { data, xKey, yKey, valueKey, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx14(
+    EChartBase,
+    {
+      slot: "heatmap",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/TreeChart/index.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function TreeChart2({
+  data = [],
+  title,
+  orient,
+  edgeShape,
+  initialTreeDepth,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildTreeOption(
+    { data, title, orient, edgeShape, initialTreeDepth },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx15(
+    EChartBase,
+    {
+      slot: "tree-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/SankeyChart/index.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function SankeyChart2({
+  nodes = [],
+  links = [],
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildSankeyOption({ nodes, links, title }, useChartTheme());
+  return /* @__PURE__ */ jsx16(
+    EChartBase,
+    {
+      slot: "sankey-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/MapChart/index.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { Empty } from "@pactor-app/ui/components";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var fetchedMaps = /* @__PURE__ */ new Set();
+function hasRegisteredMap(mapName) {
+  try {
+    return typeof echarts.getMap === "function" && echarts.getMap(mapName) != null;
+  } catch {
+    return false;
+  }
+}
+function MapChart2({
+  mapName = "map",
+  data = [],
+  nameKey,
+  valueKey,
+  geoJson,
+  geoJsonUrl,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const theme = useChartTheme();
+  const [loadState, setLoadState] = useState2(
+    () => geoJson || !geoJsonUrl || hasRegisteredMap(mapName) ? "idle" : "loading"
+  );
+  if (geoJson) {
+    try {
+      echarts.registerMap(mapName, geoJson);
+    } catch {
+    }
+  }
+  useEffect2(() => {
+    if (geoJson || !geoJsonUrl || hasRegisteredMap(mapName) || fetchedMaps.has(mapName)) {
+      setLoadState("idle");
+      return;
+    }
+    let cancelled = false;
+    setLoadState("loading");
+    fetch(geoJsonUrl).then((res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      return res.json();
+    }).then((json) => {
+      if (cancelled) return;
+      echarts.registerMap(mapName, json);
+      fetchedMaps.add(mapName);
+      setLoadState("ready");
+    }).catch(() => {
+      if (cancelled) return;
+      console.warn(`[MapChart] \u5730\u56FE\u6570\u636E\u52A0\u8F7D\u5931\u8D25\uFF1A${geoJsonUrl}`);
+      setLoadState("error");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [geoJson, geoJsonUrl, mapName]);
+  if (geoJsonUrl && !geoJson && loadState === "loading") {
+    return /* @__PURE__ */ jsx17(
+      "div",
+      {
+        "data-slot": "map-chart-loading",
+        className,
+        style: { height: typeof height === "number" ? `${height}px` : height ?? 256, ...style }
+      }
+    );
+  }
+  if (!geoJson && loadState === "error") {
+    return /* @__PURE__ */ jsx17(
+      Empty,
+      {
+        title: "\u5730\u56FE\u52A0\u8F7D\u5931\u8D25",
+        description: "\u8BF7\u68C0\u67E5 geoJsonUrl \u7F51\u7EDC\u53EF\u8FBE\u6027\uFF0C\u6216\u6539\u7528 geoJson / \u9884\u6CE8\u518C\u5730\u56FE",
+        className,
+        style
+      }
+    );
+  }
+  if (!geoJson && !hasRegisteredMap(mapName)) {
+    console.warn(`[MapChart] \u5730\u56FE "${mapName}" \u672A\u6CE8\u518C\uFF1A\u8BF7\u4F20\u5165 geoJson / geoJsonUrl\uFF0C\u6216\u5728\u5E94\u7528\u542F\u52A8\u65F6 echarts.registerMap`);
+    return /* @__PURE__ */ jsx17(
+      Empty,
+      {
+        title: "\u5730\u56FE\u672A\u6CE8\u518C",
+        description: "\u8BF7\u4F20\u5165 geoJson / geoJsonUrl\uFF0C\u6216\u5728\u5E94\u7528\u542F\u52A8\u65F6\u6CE8\u518C\u5730\u56FE\u6570\u636E",
+        className,
+        style
+      }
+    );
+  }
+  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, theme);
+  return /* @__PURE__ */ jsx17(
+    EChartBase,
+    {
+      slot: "map-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/components/ComposedChart/index.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function ComposedChart({
+  data = [],
+  xKey,
+  series = [],
+  colors,
+  title,
+  height,
+  onSelect,
+  className,
+  style
+}) {
+  const option = buildComposedOption(
+    { data, xKey, series, colors, title },
+    useChartTheme()
+  );
+  return /* @__PURE__ */ jsx18(
+    EChartBase,
+    {
+      slot: "composed-chart",
+      option,
+      height,
+      onSelect,
+      className,
+      style
+    }
+  );
+}
+
+// src/index.ts
+var chartComponents = {
+  MetricCard,
+  LineChart: LineChart2,
+  ColumnChart,
+  BarChart: BarChart2,
+  AreaChart,
+  PieChart: PieChart2,
+  DonutChart,
+  ScatterChart: ScatterChart2,
+  BubbleChart,
+  RadarChart: RadarChart2,
+  FunnelChart: FunnelChart2,
+  GaugeChart: GaugeChart2,
+  Heatmap,
+  TreeChart: TreeChart2,
+  SankeyChart: SankeyChart2,
+  MapChart: MapChart2,
+  ComposedChart
+};
+function registerChartComponents(registry) {
+  for (const [type, component] of Object.entries(chartComponents)) {
+    registry.register(type, component);
+  }
+}
+function createChartComponentRegistry() {
+  const registry = new Registry("ComponentRegistry");
+  registerChartComponents(registry);
+  return registry;
+}
+export {
+  AreaChart,
+  BarChart2 as BarChart,
+  BubbleChart,
+  ColumnChart,
+  ComposedChart,
+  DonutChart,
+  EChartBase,
+  FunnelChart2 as FunnelChart,
+  GaugeChart2 as GaugeChart,
+  Heatmap,
+  LineChart2 as LineChart,
+  MapChart2 as MapChart,
+  MetricCard,
+  PieChart2 as PieChart,
+  RadarChart2 as RadarChart,
+  SankeyChart2 as SankeyChart,
+  ScatterChart2 as ScatterChart,
+  TreeChart2 as TreeChart,
+  chartComponents,
+  createChartComponentRegistry,
+  registerChartComponents
+};