@ant-design/agentic-ui 2.0.10 → 2.0.12

package/dist/Plugins/chart/ScatterChart/index.js

@@ -0,0 +1,670 @@
+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/ScatterChart/index.tsx
+import { ConfigProvider } from "antd";
+import {
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+} from "chart.js";
+import classNames from "classnames";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { Scatter } from "react-chartjs-2";
+import ChartStatistic from "../ChartStatistic";
+import {
+  ChartContainer,
+  ChartFilter,
+  ChartToolBar,
+  downloadChart
+} from "../components";
+import {
+  useChartStatistic
+} from "../hooks/useChartStatistic";
+import { useStyle } from "./style";
+ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend);
+var defaultColors = [
+  { backgroundColor: "#917EF7", borderColor: "#917EF7" },
+  // 第一个颜色：紫色
+  { backgroundColor: "#2AD8FC", borderColor: "#2AD8FC" },
+  // 第二个颜色：蓝色
+  { backgroundColor: "rgba(42, 216, 252, 0.6)", borderColor: "#2AD8FC" },
+  // 第三个颜色：青色
+  { backgroundColor: "rgba(244, 91, 181, 0.6)", borderColor: "#F45BB5" },
+  // 粉色
+  { backgroundColor: "rgba(0, 166, 255, 0.6)", borderColor: "#00A6FF" }
+  // 天蓝色
+];
+var ScatterChart = (_a) => {
+  var _b = _a, {
+    data,
+    width = 800,
+    height = 600,
+    className,
+    title,
+    toolbarExtra,
+    renderFilterInToolbar = false,
+    dataTime,
+    xUnit = "月",
+    yUnit,
+    xLabel,
+    yLabel,
+    hiddenX = false,
+    hiddenY = false,
+    borderColor,
+    backgroundColor,
+    statistic,
+    textMaxWidth = 80
+  } = _b, props = __objRest(_b, [
+    "data",
+    "width",
+    "height",
+    "className",
+    "title",
+    "toolbarExtra",
+    "renderFilterInToolbar",
+    "dataTime",
+    "xUnit",
+    "yUnit",
+    "xLabel",
+    "yLabel",
+    "hiddenX",
+    "hiddenY",
+    "borderColor",
+    "backgroundColor",
+    "statistic",
+    "textMaxWidth"
+  ]);
+  var _a2, _b2;
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("scatter-chart");
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const statisticComponentConfigs = useChartStatistic(statistic);
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 768
+  );
+  const isMobile = windowWidth <= 768;
+  const responsiveWidth = isMobile ? "100%" : width;
+  const responsiveHeight = isMobile ? Math.min(windowWidth * 0.8, 400) : height;
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      const tooltipEl = document.getElementById("custom-scatter-tooltip");
+      if (tooltipEl) {
+        document.body.removeChild(tooltipEl);
+      }
+    };
+  }, []);
+  const chartRef = useRef(null);
+  const safeData = !data || !Array.isArray(data) ? [] : data.filter(
+    (item) => item !== null && item !== void 0 && typeof item === "object" && "x" in item && "y" in item
+  );
+  const categories = Array.from(
+    new Set(
+      safeData.map((item) => item == null ? void 0 : item.category).filter((category) => Boolean(category))
+    )
+  );
+  const validFilterLabels = safeData.map((item) => item == null ? void 0 : item.filterLabel).filter(
+    (category) => category !== void 0 && category !== null && Boolean(category)
+  );
+  const filterLabels = validFilterLabels.length > 0 ? Array.from(new Set(validFilterLabels)) : void 0;
+  const [selectedFilter, setSelectedFilter] = useState(
+    () => categories.find((cat) => Boolean(cat)) || ""
+  );
+  const [selectedFilterLabel, setSelectedFilterLabel] = useState(
+    () => filterLabels && filterLabels.length > 0 ? filterLabels[0] : void 0
+  );
+  const filteredData = safeData.filter((item) => {
+    if (!item)
+      return false;
+    if (!selectedFilter)
+      return true;
+    const categoryMatch = (item == null ? void 0 : item.category) === selectedFilter;
+    if (!filterLabels || !selectedFilterLabel) {
+      return categoryMatch;
+    }
+    return categoryMatch && (item == null ? void 0 : item.filterLabel) === selectedFilterLabel;
+  });
+  const datasetTypes = Array.from(
+    new Set(
+      filteredData.map((item) => item == null ? void 0 : item.type).filter((type) => Boolean(type))
+    )
+  );
+  if (safeData.length === 0 || datasetTypes.length === 0) {
+    return wrapSSR(
+      /* @__PURE__ */ React.createElement(
+        ChartContainer,
+        {
+          baseClassName: classNames(`${prefixCls}-container`),
+          theme: "light",
+          className: classNames(hashId, className),
+          isMobile,
+          variant: props.variant,
+          style: {
+            width: responsiveWidth,
+            height: responsiveHeight
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          ChartToolBar,
+          {
+            title: title || "散点图",
+            onDownload: () => {
+            },
+            extra: toolbarExtra,
+            dataTime
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(`${prefixCls}-empty-wrapper`, hashId),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: responsiveHeight,
+              color: "#999",
+              fontSize: "14px"
+            }
+          },
+          "暂无有效数据"
+        )
+      )
+    );
+  }
+  const datasets = datasetTypes.map((type, index) => {
+    const typeData = filteredData.filter((item) => (item == null ? void 0 : item.type) === type);
+    const coordinates = typeData.map((item) => {
+      if (!item)
+        return { x: 0, y: 0 };
+      let x = 0, y = 0;
+      if (item.x !== null && item.x !== void 0) {
+        if (typeof item.x === "number") {
+          x = Number.isFinite(item.x) ? item.x : 0;
+        } else if (typeof item.x === "string") {
+          const trimmed = item.x.trim();
+          if (trimmed !== "" && trimmed !== "null" && trimmed !== "undefined") {
+            const parsed = Number(trimmed);
+            x = Number.isFinite(parsed) ? parsed : 0;
+          }
+        }
+      }
+      if (item.y !== null && item.y !== void 0) {
+        if (typeof item.y === "number") {
+          y = Number.isFinite(item.y) ? item.y : 0;
+        } else if (typeof item.y === "string") {
+          const trimmed = item.y.trim();
+          if (trimmed !== "" && trimmed !== "null" && trimmed !== "undefined") {
+            const parsed = Number(trimmed);
+            y = Number.isFinite(parsed) ? parsed : 0;
+          }
+        }
+      }
+      return { x, y };
+    });
+    const safeIndex = Math.max(0, index % defaultColors.length);
+    const safeDefaultColors = defaultColors[safeIndex] || defaultColors[0] || {
+      backgroundColor: "#917EF7",
+      borderColor: "#917EF7"
+    };
+    return {
+      label: type || "默认",
+      data: coordinates,
+      backgroundColor: backgroundColor || safeDefaultColors.backgroundColor,
+      borderColor: borderColor || safeDefaultColors.borderColor,
+      pointRadius: isMobile ? 4 : 6,
+      pointHoverRadius: isMobile ? 6 : 8
+    };
+  });
+  const currentConfig = {
+    theme: "light",
+    showLegend: true,
+    legendPosition: "bottom"
+  };
+  const filterEnum = categories.length > 0 ? categories.filter((category) => Boolean(category)).map((category) => ({
+    label: category,
+    value: category
+  })) : [];
+  const filteredDataByFilterLabel = filterLabels == null ? void 0 : filterLabels.map((item) => ({
+    key: item,
+    label: item
+  }));
+  const processedData = {
+    datasets: datasets.length > 0 ? datasets : [
+      {
+        label: "默认",
+        data: [{ x: 0, y: 0 }],
+        backgroundColor: ((_a2 = defaultColors[0]) == null ? void 0 : _a2.backgroundColor) || "#917EF7",
+        borderColor: ((_b2 = defaultColors[0]) == null ? void 0 : _b2.borderColor) || "#917EF7",
+        pointRadius: isMobile ? 4 : 6,
+        pointHoverRadius: isMobile ? 6 : 8
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: currentConfig.showLegend !== false,
+        position: isMobile ? "bottom" : currentConfig.legendPosition || "bottom",
+        align: "start",
+        labels: {
+          color: currentConfig.theme === "light" ? "#767E8B" : "#fff",
+          font: {
+            size: isMobile ? 10 : 12,
+            weight: "normal"
+          },
+          padding: isMobile ? 10 : 20,
+          usePointStyle: true,
+          pointStyle: "rectRounded",
+          generateLabels: (chart) => {
+            const original = ChartJS.defaults.plugins.legend.labels.generateLabels(chart);
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            if (!ctx)
+              return original;
+            const fontSize = isMobile ? 10 : 12;
+            ctx.font = `${fontSize}px 'PingFang SC', sans-serif`;
+            return original.map((label) => {
+              const originalText = label.text;
+              const textWidth = ctx.measureText(originalText).width;
+              if (textWidth <= textMaxWidth) {
+                return label;
+              }
+              const ellipsis = "...";
+              const ellipsisWidth = ctx.measureText(ellipsis).width;
+              const maxTextWidth = textMaxWidth - ellipsisWidth;
+              let truncatedText = originalText;
+              let truncatedWidth = textWidth;
+              while (truncatedWidth > maxTextWidth && truncatedText.length > 0) {
+                truncatedText = truncatedText.slice(0, -1);
+                truncatedWidth = ctx.measureText(truncatedText).width;
+              }
+              return __spreadProps(__spreadValues({}, label), {
+                text: truncatedText + ellipsis
+              });
+            });
+          }
+        }
+      },
+      tooltip: {
+        enabled: false,
+        // 禁用默认 tooltip
+        external: (context) => {
+          var _a3, _b3, _c, _d, _e, _f;
+          const { chart, tooltip } = context;
+          if (tooltip.opacity === 0) {
+            const tooltipEl2 = document.getElementById("custom-scatter-tooltip");
+            if (tooltipEl2) {
+              tooltipEl2.style.opacity = "0";
+            }
+            return;
+          }
+          let tooltipEl = document.getElementById("custom-scatter-tooltip");
+          if (!tooltipEl) {
+            tooltipEl = document.createElement("div");
+            tooltipEl.id = "custom-scatter-tooltip";
+            tooltipEl.style.position = "absolute";
+            tooltipEl.style.pointerEvents = "none";
+            tooltipEl.style.transition = "all 0.1s ease";
+            document.body.appendChild(tooltipEl);
+          }
+          if (!tooltip.dataPoints || tooltip.dataPoints.length === 0) {
+            return;
+          }
+          const dataPoint = tooltip.dataPoints[0];
+          if (!dataPoint) {
+            return;
+          }
+          let xValue = "", yValue = "";
+          try {
+            const rawX = (_a3 = dataPoint == null ? void 0 : dataPoint.parsed) == null ? void 0 : _a3.x;
+            const rawY = (_b3 = dataPoint == null ? void 0 : dataPoint.parsed) == null ? void 0 : _b3.y;
+            if (typeof rawX === "number" && Number.isFinite(rawX)) {
+              xValue = String(rawX);
+            } else {
+              xValue = String(rawX || 0);
+            }
+            if (typeof rawY === "number" && Number.isFinite(rawY)) {
+              yValue = String(rawY);
+            } else {
+              yValue = String(rawY || 0);
+            }
+          } catch (error) {
+            xValue = "0";
+            yValue = "0";
+          }
+          const dimensionTitle = xUnit ? `${xValue}${xUnit}` : xValue;
+          const label = ((_d = (_c = dataPoint == null ? void 0 : dataPoint.dataset) == null ? void 0 : _c.label) == null ? void 0 : _d.toString()) || "数据指标";
+          const coordinates = yUnit ? `${yValue}${yUnit}` : yValue;
+          const iconColor = ((_f = (_e = dataPoint == null ? void 0 : dataPoint.dataset) == null ? void 0 : _e.borderColor) == null ? void 0 : _f.toString()) || "#917EF7";
+          const isDark = currentConfig.theme !== "light";
+          const bgColor = isDark ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.95)";
+          const labelColor = isDark ? "#fff" : "#767E8B";
+          tooltipEl.innerHTML = `
+            <div style="
+              background-color: ${bgColor};
+              border: 1px solid ${isDark ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 16, 32, 0.0627)"};
+              border-radius: ${isMobile ? "6px" : "8px"};
+              padding: ${isMobile ? "8px 12px" : "12px 16px"};
+              font-family: 'PingFang SC', sans-serif;
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+              backdrop-filter: blur(10px);
+              display: flex;
+              flex-direction: column;
+              gap: 8px;
+              min-width: 120px;
+            ">
+              <div style="
+                font-family: 'PingFang SC', sans-serif;
+                font-size: 12px;
+                font-weight: normal;
+                line-height: 20px;
+                text-align: center;
+                letter-spacing: 0em;
+                font-variation-settings: 'opsz' auto;
+                color: #767E8B;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+              ">${dimensionTitle}</div>
+              <div style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 20px;
+              ">
+                <div style="
+                  display: flex;
+                  align-items: center;
+                  gap: 8px;
+                ">
+                  <div style="
+                    width: 12px;
+                    height: 12px;
+                    background-color: ${iconColor};
+                    border-radius: 2px;
+                    flex-shrink: 0;
+                  "></div>
+                  <span style="
+                    color: ${labelColor};
+                    font-size: ${isMobile ? "11px" : "12px"};
+                    font-weight: 500;
+                    font-family: 'PingFang SC', sans-serif;
+                    white-space: nowrap;
+                  ">${label}</span>
+                </div>
+                <span style="
+                  font-family: Rubik, sans-serif;
+                  font-size: 13px;
+                  font-weight: 500;
+                  line-height: 13px;
+                  text-align: center;
+                  letter-spacing: 0.04em;
+                  font-variation-settings: 'opsz' auto;
+                  font-feature-settings: 'kern' on;
+                  color: #343A45;
+                  white-space: nowrap;
+                ">${coordinates}</span>
+              </div>
+            </div>
+          `;
+          const position = chart.canvas.getBoundingClientRect();
+          tooltipEl.style.opacity = "1";
+          tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + "px";
+          tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + "px";
+          tooltipEl.style.zIndex = "1000";
+        }
+      }
+    },
+    scales: {
+      x: {
+        display: !hiddenX,
+        type: "linear",
+        position: "bottom",
+        title: {
+          display: true,
+          text: xLabel || "月份",
+          // 使用默认标签
+          color: currentConfig.theme === "light" ? "rgba(0, 25, 61, 0.3255)" : "#fff",
+          font: {
+            size: isMobile ? 10 : 12,
+            weight: 500
+          }
+        },
+        min: 1,
+        // 使用默认值
+        max: 12,
+        // 使用默认值
+        ticks: {
+          stepSize: 1,
+          // 使用默认值
+          color: currentConfig.theme === "light" ? "rgba(0, 25, 61, 0.3255)" : "#fff",
+          font: {
+            size: isMobile ? 8 : 10
+          },
+          callback: function(value) {
+            return xUnit ? `${value}${xUnit}` : `${value}`;
+          }
+        },
+        grid: {
+          color: "rgba(0, 16, 32, 0.0627)",
+          lineWidth: 1
+        }
+      },
+      y: {
+        display: !hiddenY,
+        type: "linear",
+        position: "right",
+        title: {
+          display: true,
+          text: yLabel || "数值",
+          // 使用默认标签
+          color: currentConfig.theme === "light" ? "rgba(0, 25, 61, 0.3255)" : "#fff",
+          font: {
+            family: "PingFang SC",
+            size: isMobile ? 10 : 12,
+            weight: "normal"
+          },
+          align: "center"
+        },
+        min: 0,
+        // 使用默认值
+        max: 100,
+        // 使用默认值
+        ticks: {
+          stepSize: 10,
+          // 使用默认值
+          color: currentConfig.theme === "light" ? "rgba(0, 25, 61, 0.3255)" : "#fff",
+          font: {
+            family: "PingFang SC",
+            size: isMobile ? 8 : 12,
+            weight: "normal"
+          },
+          callback: function(value) {
+            return yUnit ? `${value}${yUnit}` : `${value}`;
+          }
+        },
+        grid: {
+          color: "rgba(0, 16, 32, 0.0627)",
+          lineWidth: 1
+        }
+      }
+    },
+    elements: {
+      point: {
+        hoverRadius: isMobile ? 6 : 8
+      }
+    }
+  };
+  const handleDownload = () => {
+    try {
+      if (chartRef.current) {
+        downloadChart(chartRef.current, "scatter-chart");
+      }
+    } catch (error) {
+      console.warn("图表下载失败:", error);
+    }
+  };
+  try {
+    return wrapSSR(
+      /* @__PURE__ */ React.createElement(
+        ChartContainer,
+        {
+          baseClassName: classNames(`${prefixCls}-container`),
+          theme: currentConfig.theme,
+          className: classNames(hashId, className),
+          isMobile,
+          variant: props.variant,
+          style: {
+            width: responsiveWidth,
+            height: responsiveHeight
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          ChartToolBar,
+          {
+            title: title || "散点图",
+            onDownload: handleDownload,
+            extra: toolbarExtra,
+            dataTime,
+            filter: renderFilterInToolbar && filterEnum.length > 0 ? /* @__PURE__ */ React.createElement(
+              ChartFilter,
+              __spreadProps(__spreadValues({
+                filterOptions: filterEnum,
+                selectedFilter,
+                onFilterChange: setSelectedFilter
+              }, filterLabels && {
+                customOptions: filteredDataByFilterLabel,
+                selectedCustomSelection: selectedFilterLabel,
+                onSelectionChange: setSelectedFilterLabel
+              }), {
+                theme: currentConfig.theme,
+                variant: "compact"
+              })
+            ) : void 0
+          }
+        ),
+        !renderFilterInToolbar && filterEnum.length > 0 && /* @__PURE__ */ React.createElement(
+          ChartFilter,
+          __spreadProps(__spreadValues({
+            filterOptions: filterEnum,
+            selectedFilter,
+            onFilterChange: setSelectedFilter
+          }, filterLabels && {
+            customOptions: filteredDataByFilterLabel,
+            selectedCustomSelection: selectedFilterLabel,
+            onSelectionChange: setSelectedFilterLabel
+          }), {
+            theme: currentConfig.theme
+          })
+        ),
+        statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 16 } }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(
+          ChartStatistic,
+          __spreadProps(__spreadValues({
+            key: index
+          }, config), {
+            theme: currentConfig.theme
+          })
+        ))),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(`${prefixCls}-chart-wrapper`, hashId),
+            style: { height: responsiveHeight }
+          },
+          /* @__PURE__ */ React.createElement(Scatter, { ref: chartRef, data: processedData, options })
+        )
+      )
+    );
+  } catch (error) {
+    console.error("ScatterChart 渲染错误:", error);
+    return wrapSSR(
+      /* @__PURE__ */ React.createElement(
+        ChartContainer,
+        {
+          baseClassName: classNames(`${prefixCls}-container`),
+          theme: "light",
+          isMobile,
+          className: classNames(hashId, className),
+          variant: props.variant,
+          style: {
+            width: responsiveWidth,
+            height: responsiveHeight
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          ChartToolBar,
+          {
+            title: title || "散点图",
+            onDownload: () => {
+            },
+            extra: toolbarExtra,
+            dataTime
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(`${prefixCls}-error-wrapper`, hashId),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: responsiveHeight,
+              color: "#ff4d4f",
+              fontSize: "14px"
+            }
+          },
+          "图表渲染失败，请检查数据格式"
+        )
+      )
+    );
+  }
+};
+var ScatterChart_default = ScatterChart;
+export {
+  ScatterChart_default as default
+};