@ant-design/agentic-ui 2.0.10 → 2.0.13

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

@@ -1,670 +0,0 @@
-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
-};