@ant-design/agentic-ui 2.0.0

package/dist/plugins/chart/FunnelChart/index.js

@@ -0,0 +1,588 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/plugins/chart/FunnelChart/index.tsx
+import { ConfigProvider } from "antd";
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Tooltip
+} from "chart.js";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Bar } from "react-chartjs-2";
+import ChartStatistic from "../ChartStatistic";
+import {
+  ChartContainer,
+  ChartFilter,
+  ChartToolBar,
+  downloadChart
+} from "../components";
+import {
+  useChartStatistic
+} from "../hooks/useChartStatistic";
+import { findDataPointByXValue, isXValueEqual, toNumber } from "../utils";
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+var defaultColors = "#1890ff";
+var FunnelChart = (_a) => {
+  var _b = _a, {
+    title,
+    data,
+    color,
+    width = 600,
+    height = 400,
+    className,
+    dataTime,
+    theme = "light",
+    showLegend = true,
+    legendPosition = "bottom",
+    legendAlign = "start",
+    showPercent = true,
+    toolbarExtra,
+    typeNames,
+    statistic
+  } = _b, props = __objRest(_b, [
+    "title",
+    "data",
+    "color",
+    "width",
+    "height",
+    "className",
+    "dataTime",
+    "theme",
+    "showLegend",
+    "legendPosition",
+    "legendAlign",
+    "showPercent",
+    "toolbarExtra",
+    "typeNames",
+    "statistic"
+  ]);
+  const safeData = Array.isArray(data) ? data : [];
+  const statisticComponentConfigs = useChartStatistic(statistic);
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 768
+  );
+  const isMobile = windowWidth <= 768;
+  const responsiveWidth = isMobile ? "100%" : width;
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context == null ? void 0 : context.getPrefixCls("funnel-chart-container");
+  const chartRef = useRef(null);
+  const [showTrapezoid, setShowTrapezoid] = useState(true);
+  const [pluginToggleKey, setPluginToggleKey] = useState(0);
+  const categories = useMemo(() => {
+    return [...new Set(safeData.map((d) => d.category))];
+  }, [safeData]);
+  const [selectedFilter, setSelectedFilter] = useState(
+    categories.find(Boolean) || ""
+  );
+  const [selectedFilterLabel, setSelectedFilterLabel] = useState(void 0);
+  const filterLabels = useMemo(() => {
+    const labels = safeData.filter((d) => !selectedFilter || d.category === selectedFilter).map((d) => d.filterLabel).filter((v) => v !== void 0);
+    return labels.length > 0 ? [...new Set(labels)] : void 0;
+  }, [safeData, selectedFilter]);
+  useEffect(() => {
+    const first = filterLabels && filterLabels.length > 0 ? filterLabels[0] : void 0;
+    if (!filterLabels || filterLabels.length === 0) {
+      if (selectedFilterLabel !== void 0)
+        setSelectedFilterLabel(void 0);
+      return;
+    }
+    if (!selectedFilterLabel || !filterLabels.includes(selectedFilterLabel)) {
+      setSelectedFilterLabel(first);
+    }
+  }, [filterLabels]);
+  const filteredData = useMemo(() => {
+    const base = selectedFilter ? safeData.filter((d) => d.category === selectedFilter) : safeData;
+    const withFilterLabel = !filterLabels || !selectedFilterLabel ? base : base.filter((d) => d.filterLabel === selectedFilterLabel);
+    return withFilterLabel.filter((d) => d.x !== null && d.x !== void 0);
+  }, [safeData, selectedFilter, filterLabels, selectedFilterLabel]);
+  const stages = useMemo(() => {
+    const unique = [
+      ...new Set(
+        filteredData.map((d) => d.x).filter((x) => x !== null && x !== void 0)
+      )
+    ];
+    const values = unique.map((x) => {
+      const dp = findDataPointByXValue(filteredData, x);
+      const n = toNumber(dp == null ? void 0 : dp.y, 0);
+      return { x, n };
+    });
+    values.sort((a, b) => b.n - a.n);
+    return values.map((v) => v.x);
+  }, [filteredData]);
+  const BAR_THICKNESS = 30;
+  const ROW_GAP = 24;
+  const PADDING_Y = isMobile ? 48 : 64;
+  const chartHeight = useMemo(() => {
+    const rows = Math.max(1, stages.length);
+    return rows * (BAR_THICKNESS + ROW_GAP) + PADDING_Y;
+  }, [stages.length, PADDING_Y]);
+  const finalHeight = useMemo(() => {
+    if (typeof height === "number") {
+      return height;
+    } else if (typeof height === "string" && height.includes("px")) {
+      return parseInt(height, 10) || chartHeight;
+    }
+    return chartHeight;
+  }, [height, chartHeight]);
+  const processedData = useMemo(() => {
+    const baseColor = color || defaultColors;
+    const labels = stages.map((x) => x.toString());
+    const values = stages.map((x) => {
+      const dp = findDataPointByXValue(filteredData, x);
+      const n = toNumber(dp == null ? void 0 : dp.y, 0);
+      return n;
+    });
+    const typeName = (typeNames == null ? void 0 : typeNames.name) || "转化";
+    const datasetData = values.map(
+      (v) => [-v / 2, v / 2]
+    );
+    const hexToRgb = (hex) => {
+      const s = hex.replace("#", "");
+      const bigint = parseInt(s, 16);
+      return {
+        r: bigint >> 16 & 255,
+        g: bigint >> 8 & 255,
+        b: bigint & 255
+      };
+    };
+    const rgbToHex = (r, g, b) => `#${[r, g, b].map(
+      (v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0")
+    ).join("")}`;
+    const lighten = (hex, t) => {
+      const { r, g, b } = hexToRgb(hex);
+      const lr = r + (255 - r) * t;
+      const lg = g + (255 - g) * t;
+      const lb = b + (255 - b) * t;
+      return rgbToHex(lr, lg, lb);
+    };
+    const count = Math.max(1, stages.length - 1);
+    const colorList = stages.map((_, i) => {
+      const t = i / count * 0.6;
+      return lighten(baseColor, t);
+    });
+    return {
+      labels,
+      datasets: [
+        {
+          label: typeName,
+          data: datasetData,
+          backgroundColor: colorList,
+          borderColor: colorList,
+          borderWidth: 0,
+          borderRadius: 0,
+          borderSkipped: false,
+          barThickness: BAR_THICKNESS,
+          categoryPercentage: 1,
+          barPercentage: 1
+        }
+      ]
+    };
+  }, [filteredData, stages]);
+  const ratioDisplay = useMemo(() => {
+    const formatRaw = (v) => {
+      if (v === null || v === void 0)
+        return void 0;
+      if (typeof v === "string") {
+        const s = v.trim();
+        if (!s)
+          return void 0;
+        return s.endsWith("%") ? s : `${s}%`;
+      }
+      if (typeof v === "number" && Number.isFinite(v)) {
+        return `${String(v)}%`;
+      }
+      return void 0;
+    };
+    const anyNonTopProvided = stages.some((_, i) => {
+      if (i === 0)
+        return false;
+      const prevStage = stages[i - 1];
+      const dp = (filteredData || []).find(
+        (d) => isXValueEqual(d.x, prevStage)
+      );
+      const v = dp == null ? void 0 : dp.ratio;
+      if (v === null || v === void 0)
+        return false;
+      if (typeof v === "string")
+        return v.trim() !== "";
+      return true;
+    });
+    return stages.map((_, i) => {
+      if (i === 0)
+        return anyNonTopProvided ? "100%" : void 0;
+      const prevStage = stages[i - 1];
+      const dp = (filteredData || []).find(
+        (d) => isXValueEqual(d.x, prevStage)
+      );
+      return formatRaw(dp == null ? void 0 : dp.ratio);
+    });
+  }, [filteredData, stages]);
+  const ratioProvided = useMemo(() => {
+    return stages.map((_, i) => {
+      if (i === 0)
+        return false;
+      const prevStage = stages[i - 1];
+      const dp = (filteredData || []).find(
+        (d) => isXValueEqual(d.x, prevStage)
+      );
+      const v = dp == null ? void 0 : dp.ratio;
+      if (v === null || v === void 0)
+        return false;
+      if (typeof v === "string")
+        return v.trim() !== "";
+      return true;
+    });
+  }, [filteredData, stages]);
+  const filterOptions = useMemo(
+    () => categories.map((c) => ({
+      label: c || "默认",
+      value: c || "默认"
+    })),
+    [categories]
+  );
+  const customOptions = useMemo(() => {
+    return filterLabels == null ? void 0 : filterLabels.map((l) => ({ key: l, label: l }));
+  }, [filterLabels]);
+  const isLight = theme === "light";
+  const axisTextColor = isLight ? "rgba(0, 25, 61, 0.3255)" : "rgba(255, 255, 255, 0.8)";
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    indexAxis: "y",
+    layout: {
+      padding: {
+        left: 8,
+        right: isMobile ? 72 : 96,
+        top: 8,
+        bottom: 8
+      }
+    },
+    parsing: {
+      // 允许使用 [start, end] 浮动条
+      xAxisKey: void 0,
+      yAxisKey: void 0
+    },
+    plugins: {
+      legend: {
+        display: showLegend,
+        position: legendPosition,
+        align: legendAlign,
+        labels: {
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12, weight: "normal" },
+          padding: isMobile ? 10 : 12,
+          usePointStyle: true,
+          pointStyle: "rectRounded",
+          generateLabels: (chart) => {
+            const base = (ChartJS.defaults.plugins.legend.labels.generateLabels(chart) || []).map((it) => __spreadProps(__spreadValues({}, it), {
+              pointStyle: "rectRounded"
+            }));
+            const anyNonTopProvided = stages.some((_, i) => {
+              if (i === 0)
+                return false;
+              const prevStage = stages[i - 1];
+              const dp = (filteredData || []).find(
+                (d) => isXValueEqual(d.x, prevStage)
+              );
+              const v = dp == null ? void 0 : dp.ratio;
+              if (v === null || v === void 0)
+                return false;
+              if (typeof v === "string")
+                return v.trim() !== "";
+              return true;
+            });
+            if (!anyNonTopProvided)
+              return base;
+            return [
+              ...base,
+              {
+                text: (typeNames == null ? void 0 : typeNames.rate) || "转化率",
+                fillStyle: "#F1F2F4",
+                strokeStyle: "#F1F2F4",
+                lineWidth: 0,
+                hidden: !showTrapezoid,
+                datasetIndex: chart.data.datasets.length,
+                pointStyle: "rectRounded"
+              }
+            ];
+          }
+        },
+        onClick: (e, legendItem, legend) => {
+          if (legendItem.text === ((typeNames == null ? void 0 : typeNames.rate) || "转化率")) {
+            setShowTrapezoid((v) => !v);
+            setPluginToggleKey((k) => k + 1);
+            return;
+          }
+          const defaultClick = ChartJS.defaults.plugins.legend.onClick;
+          if (typeof defaultClick === "function")
+            defaultClick.call(legend, e, legendItem, legend);
+        }
+      },
+      tooltip: {
+        backgroundColor: isLight ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.85)",
+        titleColor: isLight ? "#333" : "#fff",
+        bodyColor: isLight ? "#333" : "#fff",
+        borderColor: isLight ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.2)",
+        borderWidth: 1,
+        cornerRadius: isMobile ? 6 : 8,
+        padding: 8,
+        displayColors: false,
+        callbacks: {
+          title: (items) => {
+            const it = items == null ? void 0 : items[0];
+            return (it == null ? void 0 : it.label) ? String(it.label) : "";
+          },
+          label: (ctx) => {
+            var _a2, _b2, _c;
+            const raw = ctx.raw;
+            const width2 = Array.isArray(raw) ? Math.abs(((_a2 = raw[1]) != null ? _a2 : 0) - ((_b2 = raw[0]) != null ? _b2 : 0)) : typeof raw === "number" ? Math.abs(raw) : 0;
+            const idx = (_c = ctx.dataIndex) != null ? _c : 0;
+            const percentStr = ratioDisplay == null ? void 0 : ratioDisplay[idx];
+            if (showPercent === false || !percentStr) {
+              return `${width2}`;
+            }
+            return `${width2}（${percentStr}）`;
+          }
+        }
+      }
+    },
+    scales: {
+      y: {
+        grid: { display: false },
+        ticks: { display: false },
+        title: { display: false },
+        border: { display: false },
+        afterFit: (scale) => {
+          const rows = Math.max(1, stages.length);
+          const per = BAR_THICKNESS + ROW_GAP;
+          const total = rows * per;
+          scale.height = total;
+        }
+      },
+      x: {
+        beginAtZero: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          display: false
+        },
+        title: {
+          display: false
+        },
+        border: { display: false }
+      }
+    }
+  };
+  const handleDownload = () => downloadChart(chartRef.current, "funnel-chart");
+  const trapezoidPlugin = useMemo(() => {
+    return {
+      id: "funnelTrapezoidLabels",
+      afterDatasetsDraw: (chart) => {
+        var _a2, _b2, _c, _d, _e, _f, _g;
+        if (!showTrapezoid)
+          return;
+        const { ctx, data: cdata, scales } = chart;
+        const meta = chart.getDatasetMeta(0);
+        if (!meta)
+          return;
+        const xScale = scales == null ? void 0 : scales.x;
+        const ds = ((_b2 = (_a2 = cdata == null ? void 0 : cdata.datasets) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.data) || [];
+        const providedRatioText = ratioDisplay;
+        const providedFlags = ratioProvided;
+        const centerX = (xScale == null ? void 0 : xScale.getPixelForValue) ? xScale.getPixelForValue(0) : void 0;
+        for (let i = 0; i < meta.data.length - 1; i++) {
+          const elTop = meta.data[i];
+          const elBot = meta.data[i + 1];
+          const rawTop = ds == null ? void 0 : ds[i];
+          const rawBot = ds == null ? void 0 : ds[i + 1];
+          if (!Array.isArray(rawTop) || !Array.isArray(rawBot))
+            continue;
+          const [sTop, eTop] = [Number((_c = rawTop[0]) != null ? _c : 0), Number((_d = rawTop[1]) != null ? _d : 0)];
+          const [sBot, eBot] = [Number((_e = rawBot[0]) != null ? _e : 0), Number((_f = rawBot[1]) != null ? _f : 0)];
+          const topLx = (xScale == null ? void 0 : xScale.getPixelForValue) ? xScale.getPixelForValue(Math.min(sTop, eTop)) : elTop.x - Math.abs(eTop - sTop) / 2;
+          const topRx = (xScale == null ? void 0 : xScale.getPixelForValue) ? xScale.getPixelForValue(Math.max(sTop, eTop)) : elTop.x + Math.abs(eTop - sTop) / 2;
+          const botLx = (xScale == null ? void 0 : xScale.getPixelForValue) ? xScale.getPixelForValue(Math.min(sBot, eBot)) : elBot.x - Math.abs(eBot - sBot) / 2;
+          const botRx = (xScale == null ? void 0 : xScale.getPixelForValue) ? xScale.getPixelForValue(Math.max(sBot, eBot)) : elBot.x + Math.abs(eBot - sBot) / 2;
+          const dpr = typeof window !== "undefined" && (window.devicePixelRatio || 1) || 1;
+          const seam = (isMobile ? 0.25 : 0.35) / dpr;
+          const joinTop = elTop.y + elTop.height / 2;
+          const joinBot = elBot.y - elBot.height / 2;
+          const topY = joinTop + seam;
+          const botY = joinBot - seam;
+          if (!(providedFlags == null ? void 0 : providedFlags[i + 1])) {
+            continue;
+          }
+          const ratioText = (_g = providedRatioText == null ? void 0 : providedRatioText[i + 1]) != null ? _g : "0%";
+          const topL = Math.min(topLx, topRx);
+          const topR = Math.max(topLx, topRx);
+          const botL = Math.min(botLx, botRx);
+          const botR = Math.max(botLx, botRx);
+          ctx.save();
+          ctx.beginPath();
+          ctx.moveTo(topL, topY);
+          ctx.lineTo(topR, topY);
+          ctx.lineTo(botR, botY);
+          ctx.lineTo(botL, botY);
+          ctx.closePath();
+          ctx.fillStyle = "#F1F2F4";
+          ctx.fill();
+          const midY = (topY + botY) / 2;
+          const cx = centerX != null ? centerX : (Math.min(topL, botL) + Math.max(topR, botR)) / 2;
+          ctx.fillStyle = "#626F86";
+          ctx.font = `${isMobile ? 10 : 12}px sans-serif`;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "middle";
+          ctx.fillText(String(ratioText), cx, midY);
+          ctx.restore();
+        }
+      }
+    };
+  }, [
+    isMobile,
+    showTrapezoid,
+    JSON.stringify(filteredData.map((d) => d == null ? void 0 : d.ratio))
+  ]);
+  const rightLabelPlugin = useMemo(() => {
+    return {
+      id: "funnelRightLabels",
+      afterDatasetsDraw: (chart) => {
+        var _a2, _b2;
+        const { ctx, data: data2, scales } = chart;
+        const meta = chart.getDatasetMeta(0);
+        if (!meta)
+          return;
+        const xScale = scales == null ? void 0 : scales.x;
+        const labels = (data2 == null ? void 0 : data2.labels) || [];
+        ctx.save();
+        ctx.fillStyle = axisTextColor;
+        ctx.font = `${isMobile ? 10 : 12}px sans-serif`;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        const ds = ((_b2 = (_a2 = data2 == null ? void 0 : data2.datasets) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.data) || [];
+        const ends = meta.data.map((el, i) => {
+          var _a3;
+          const raw = ds == null ? void 0 : ds[i];
+          if (!raw || !Array.isArray(raw))
+            return el.x;
+          const end = Number((_a3 = raw[1]) != null ? _a3 : 0);
+          return (xScale == null ? void 0 : xScale.getPixelForValue) ? xScale.getPixelForValue(end) : el.x + Math.max(0, el.width / 2);
+        });
+        const maxEnd = Math.max(...ends);
+        const padding = 12;
+        meta.data.forEach((el, i) => {
+          var _a3, _b3, _c;
+          const raw = ds == null ? void 0 : ds[i];
+          if (!raw || !Array.isArray(raw))
+            return;
+          const y = el.y;
+          const label = (_a3 = labels == null ? void 0 : labels[i]) != null ? _a3 : "";
+          ctx.fillText(label, maxEnd + padding, y);
+          const start = Number((_b3 = raw[0]) != null ? _b3 : 0);
+          const end = Number((_c = raw[1]) != null ? _c : 0);
+          const mid = (start + end) / 2;
+          const value = Math.abs(end - start);
+          const cx = (xScale == null ? void 0 : xScale.getPixelForValue) ? xScale.getPixelForValue(mid) : el.x;
+          ctx.save();
+          ctx.fillStyle = "#fff";
+          ctx.textAlign = "center";
+          ctx.fillText(String(Math.round(value)), cx, y);
+          ctx.restore();
+        });
+        ctx.restore();
+      }
+    };
+  }, [isMobile, axisTextColor]);
+  return /* @__PURE__ */ React.createElement(
+    ChartContainer,
+    {
+      baseClassName,
+      className,
+      theme,
+      isMobile,
+      variant: props.variant,
+      style: {
+        width: responsiveWidth
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      ChartToolBar,
+      {
+        title,
+        theme,
+        onDownload: handleDownload,
+        dataTime,
+        extra: toolbarExtra
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      ChartFilter,
+      __spreadProps(__spreadValues({
+        filterOptions,
+        selectedFilter,
+        onFilterChange: setSelectedFilter
+      }, customOptions && {
+        customOptions,
+        selectedCustomSelection: selectedFilterLabel,
+        onSelectionChange: setSelectedFilterLabel
+      }), {
+        theme
+      })
+    ),
+    statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 16 } }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
+    /* @__PURE__ */ React.createElement("div", { className: "chart-wrapper", style: { height: finalHeight } }, /* @__PURE__ */ React.createElement(
+      Bar,
+      {
+        key: `funnel-${pluginToggleKey}`,
+        ref: chartRef,
+        data: processedData,
+        options,
+        plugins: [trapezoidPlugin, rightLabelPlugin]
+      }
+    ))
+  );
+};
+var FunnelChart_default = FunnelChart;
+export {
+  FunnelChart_default as default
+};

package/dist/plugins/chart/FunnelChart/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/plugins/chart/FunnelChart/style.js

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/plugins/chart/FunnelChart/style.ts
+import {
+  useEditorStyleRegister
+} from "../../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      ".chart-wrapper": {
+        width: "100%",
+        height: "calc(100% - 120px)",
+        minHeight: 300,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+      },
+      canvas: {
+        maxWidth: "100% !important",
+        maxHeight: "100% !important"
+      },
+      "@media (max-width: 768px)": {
+        ".chart-wrapper": {
+          height: "calc(100% - 100px)",
+          minHeight: 250
+        }
+      },
+      "@media (max-width: 375px)": {
+        padding: 8,
+        ".chart-wrapper": {
+          minHeight: 220
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("FunnelChart", (token) => {
+    const areaToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(areaToken)];
+  });
+}
+export {
+  useStyle
+};