@ant-design/agentic-ui 2.0.10 → 2.0.13

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

@@ -0,0 +1,627 @@
+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/RadarChart/index.tsx
+import { ConfigProvider } from "antd";
+import {
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LineElement,
+  PointElement,
+  RadialLinearScale,
+  Tooltip
+} from "chart.js";
+import classNames from "classnames";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import { Radar } 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(
+  RadialLinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  Legend
+);
+var defaultColors = [
+  "#388BFF",
+  // 第一个颜色：蓝色
+  "#917EF7",
+  // 第二个颜色：紫色
+  "#2AD8FC",
+  // 第三个颜色：青色
+  "#F45BB5",
+  // 粉色
+  "#00A6FF",
+  // 天蓝色
+  "#33E59B",
+  // 绿色
+  "#D666E4",
+  // 紫红色
+  "#6151FF",
+  // 靛蓝色
+  "#BF3C93",
+  // 玫红色
+  "#005EE0"
+  // 深蓝色
+];
+var RadarChart = (_a) => {
+  var _b = _a, {
+    data,
+    title,
+    width = 600,
+    height = 400,
+    className,
+    toolbarExtra,
+    renderFilterInToolbar = false,
+    dataTime,
+    borderColor,
+    backgroundColor,
+    pointBackgroundColor,
+    statistic,
+    textMaxWidth = 80
+  } = _b, props = __objRest(_b, [
+    "data",
+    "title",
+    "width",
+    "height",
+    "className",
+    "toolbarExtra",
+    "renderFilterInToolbar",
+    "dataTime",
+    "borderColor",
+    "backgroundColor",
+    "pointBackgroundColor",
+    "statistic",
+    "textMaxWidth"
+  ]);
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls("radar-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.85, 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-radar-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" && "label" 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 labels = Array.from(
+    new Set(
+      filteredData.map((item) => item == null ? void 0 : item.label).filter((label) => Boolean(label))
+    )
+  );
+  const datasetTypes = Array.from(
+    new Set(
+      filteredData.map((item) => item == null ? void 0 : item.type).filter((type) => Boolean(type))
+    )
+  );
+  if (safeData.length === 0 || labels.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 scores = labels.map((label) => {
+      const item = typeData.find((d) => (d == null ? void 0 : d.label) === label);
+      if (!item || item.score === null || item.score === void 0) {
+        return 0;
+      }
+      const score = item.score;
+      if (typeof score === "number") {
+        return Number.isFinite(score) && score >= 0 ? score : 0;
+      }
+      if (typeof score === "string") {
+        const trimmed = score.trim();
+        if (trimmed === "" || trimmed === "null" || trimmed === "undefined") {
+          return 0;
+        }
+        const parsed = Number(trimmed);
+        return Number.isFinite(parsed) && parsed >= 0 ? parsed : 0;
+      }
+      return 0;
+    });
+    const safeIndex = Math.max(0, index % defaultColors.length);
+    const safeDefaultColor = defaultColors[safeIndex] || "#388BFF";
+    return {
+      label: type || "默认",
+      data: scores,
+      borderColor: borderColor || safeDefaultColor,
+      backgroundColor: backgroundColor || `${safeDefaultColor}20`,
+      borderWidth: isMobile ? 1.5 : 2,
+      pointBackgroundColor: pointBackgroundColor || safeDefaultColor,
+      pointBorderColor: "#fff",
+      pointBorderWidth: isMobile ? 1 : 2,
+      pointRadius: isMobile ? 3 : 4,
+      pointHoverRadius: isMobile ? 5 : 6,
+      fill: true
+    };
+  });
+  const currentConfig = {
+    theme: "light",
+    showLegend: true,
+    legendPosition: "right"
+  };
+  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 = {
+    labels: labels.length > 0 ? labels : ["默认"],
+    datasets: datasets.length > 0 ? datasets : [
+      {
+        label: "默认",
+        data: [0],
+        borderColor: defaultColors[0] || "#388BFF",
+        backgroundColor: `${defaultColors[0] || "#388BFF"}20`,
+        borderWidth: isMobile ? 1.5 : 2,
+        pointBackgroundColor: defaultColors[0] || "#388BFF",
+        pointBorderColor: "#fff",
+        pointBorderWidth: isMobile ? 1 : 2,
+        pointRadius: isMobile ? 3 : 4,
+        pointHoverRadius: isMobile ? 5 : 6,
+        fill: true
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: currentConfig.showLegend !== false,
+        position: isMobile ? "bottom" : currentConfig.legendPosition || "right",
+        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 _a2, _b2, _c, _d, _e, _f;
+          const { chart, tooltip } = context;
+          if (tooltip.opacity === 0) {
+            const tooltipEl2 = document.getElementById("custom-radar-tooltip");
+            if (tooltipEl2) {
+              tooltipEl2.style.opacity = "0";
+            }
+            return;
+          }
+          let tooltipEl = document.getElementById("custom-radar-tooltip");
+          if (!tooltipEl) {
+            tooltipEl = document.createElement("div");
+            tooltipEl.id = "custom-radar-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;
+          }
+          const dimensionTitle = ((_a2 = dataPoint == null ? void 0 : dataPoint.label) == null ? void 0 : _a2.toString()) || "";
+          const label = ((_c = (_b2 = dataPoint == null ? void 0 : dataPoint.dataset) == null ? void 0 : _b2.label) == null ? void 0 : _c.toString()) || "数据指标";
+          let value = "";
+          try {
+            const rawValue = (_d = dataPoint == null ? void 0 : dataPoint.parsed) == null ? void 0 : _d.r;
+            if (typeof rawValue === "number" && Number.isFinite(rawValue)) {
+              value = rawValue.toFixed(1);
+            } else {
+              value = String(rawValue || 0);
+            }
+          } catch (error) {
+            value = "0";
+          }
+          const iconColor = ((_f = (_e = dataPoint == null ? void 0 : dataPoint.dataset) == null ? void 0 : _e.borderColor) == null ? void 0 : _f.toString()) || "#388BFF";
+          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;
+                 ">${value}</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: {
+      r: {
+        beginAtZero: true,
+        max: 100,
+        // Assuming max score is 100 for now
+        min: 0,
+        ticks: {
+          stepSize: isMobile ? 25 : 20,
+          // 移动端减少刻度线以避免拥挤
+          color: currentConfig.theme === "light" ? "rgba(0, 25, 61, 0.3255)" : "#fff",
+          font: {
+            size: isMobile ? 8 : 10
+          },
+          backdropColor: "transparent",
+          callback: function(value) {
+            return value;
+          }
+        },
+        grid: {
+          color: currentConfig.theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)",
+          lineWidth: 1
+        },
+        angleLines: {
+          color: currentConfig.theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.2)",
+          lineWidth: 1
+        },
+        pointLabels: {
+          color: currentConfig.theme === "light" ? "rgba(0, 25, 61, 0.3255)" : "#fff",
+          font: {
+            size: isMobile ? 10 : 12,
+            weight: 500
+          },
+          padding: isMobile ? 10 : 15
+        }
+      }
+    },
+    elements: {
+      point: {
+        hoverRadius: isMobile ? 4 : 6
+      }
+    }
+  };
+  const handleDownload = () => {
+    try {
+      if (chartRef.current) {
+        downloadChart(chartRef.current, "radar-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) }, /* @__PURE__ */ React.createElement(Radar, { ref: chartRef, data: processedData, options }))
+      )
+    );
+  } catch (error) {
+    console.error("RadarChart 渲染错误:", error);
+    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}-error-wrapper`, hashId),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: responsiveHeight,
+              color: "#ff4d4f",
+              fontSize: "14px"
+            }
+          },
+          "图表渲染失败，请检查数据格式"
+        )
+      )
+    );
+  }
+};
+var RadarChart_default = RadarChart;
+export {
+  RadarChart_default as default
+};