@ant-design/agentic-ui 2.0.10 → 2.0.12

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

@@ -0,0 +1,410 @@
+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/AreaChart/index.tsx
+import { ConfigProvider } from "antd";
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+} from "chart.js";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Line } from "react-chartjs-2";
+import {
+  ChartContainer,
+  ChartFilter,
+  ChartStatistic,
+  ChartToolBar,
+  downloadChart
+} from "../components";
+import {
+  useChartStatistic
+} from "../hooks/useChartStatistic";
+import {
+  extractAndSortXValues,
+  findDataPointByXValue
+} from "../utils";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  Legend
+);
+var defaultColors = [
+  "#1677ff",
+  // 蓝色
+  "#8954FC",
+  // 紫色
+  "#15e7e4",
+  // 青色
+  "#F45BB5",
+  // 粉色
+  "#00A6FF",
+  // 天蓝色
+  "#33E59B",
+  // 绿色
+  "#D666E4",
+  // 紫红色
+  "#6151FF",
+  // 靛蓝色
+  "#BF3C93",
+  // 深粉色
+  "#005EE0"
+  // 深蓝色
+];
+var hexToRgba = (hex, alpha) => {
+  const sanitized = hex.replace("#", "");
+  const isShort = sanitized.length === 3;
+  const r = parseInt(
+    isShort ? sanitized[0] + sanitized[0] : sanitized.slice(0, 2),
+    16
+  );
+  const g = parseInt(
+    isShort ? sanitized[1] + sanitized[1] : sanitized.slice(2, 4),
+    16
+  );
+  const b = parseInt(
+    isShort ? sanitized[2] + sanitized[2] : sanitized.slice(4, 6),
+    16
+  );
+  const a = Math.max(0, Math.min(1, alpha));
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+var AreaChart = ({
+  title,
+  data,
+  width = 600,
+  height = 400,
+  className,
+  dataTime,
+  theme = "light",
+  color,
+  showLegend = true,
+  legendPosition = "bottom",
+  legendAlign = "start",
+  showGrid = true,
+  xPosition = "bottom",
+  yPosition = "left",
+  hiddenX = false,
+  hiddenY = false,
+  toolbarExtra,
+  renderFilterInToolbar = false,
+  statistic: statisticConfig,
+  variant
+}) => {
+  const safeData = Array.isArray(data) ? data : [];
+  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);
+    }
+  }, []);
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context == null ? void 0 : context.getPrefixCls("area-chart-container");
+  const chartRef = useRef(null);
+  const statisticComponentConfigs = useChartStatistic(statisticConfig);
+  const categories = useMemo(() => {
+    const uniqueCategories = [
+      ...new Set(safeData.map((item) => item.category))
+    ].filter(Boolean);
+    return uniqueCategories;
+  }, [safeData]);
+  const validFilterLabels = useMemo(() => {
+    return safeData.map((item) => item.filterLabel).filter(
+      (filterLabel) => filterLabel !== void 0
+    );
+  }, [safeData]);
+  const filterLabels = useMemo(() => {
+    return validFilterLabels.length > 0 ? [...new Set(validFilterLabels)] : void 0;
+  }, [validFilterLabels]);
+  const [selectedFilter, setSelectedFilter] = useState(
+    categories.find(Boolean) || ""
+  );
+  const [selectedFilterLabel, setSelectedFilterLabel] = useState(
+    filterLabels && filterLabels.length > 0 ? filterLabels[0] : void 0
+  );
+  useEffect(() => {
+    if (selectedFilter && !categories.includes(selectedFilter)) {
+      setSelectedFilter(categories.find(Boolean) || "");
+    }
+  }, [categories, selectedFilter]);
+  const filteredData = useMemo(() => {
+    const base = selectedFilter ? safeData.filter((item) => item.category === selectedFilter) : safeData;
+    const withFilterLabel = !filterLabels || !selectedFilterLabel ? base : base.filter((item) => item.filterLabel === selectedFilterLabel);
+    return withFilterLabel.filter(
+      (item) => item.x !== null && item.x !== void 0
+    );
+  }, [safeData, selectedFilter, filterLabels, selectedFilterLabel]);
+  const types = useMemo(() => {
+    return [...new Set(filteredData.map((item) => item.type))];
+  }, [filteredData]);
+  const xValues = useMemo(() => {
+    return extractAndSortXValues(filteredData);
+  }, [filteredData]);
+  const xTitle = useMemo(() => {
+    const titles = [
+      ...new Set(filteredData.map((item) => item.xtitle).filter(Boolean))
+    ];
+    return titles[0] || "";
+  }, [filteredData]);
+  const yTitle = useMemo(() => {
+    const titles = [
+      ...new Set(filteredData.map((item) => item.ytitle).filter(Boolean))
+    ];
+    return titles[0] || "";
+  }, [filteredData]);
+  const processedData = useMemo(() => {
+    const labels = xValues.map((x) => x.toString());
+    const datasets = types.map((type, index) => {
+      const provided = color;
+      const baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColors[index % defaultColors.length] : provided || defaultColors[index % defaultColors.length];
+      const typeData = xValues.map((x) => {
+        const dataPoint = findDataPointByXValue(filteredData, x, type);
+        const v = dataPoint == null ? void 0 : dataPoint.y;
+        const n = typeof v === "number" ? v : Number(v);
+        return Number.isFinite(n) ? n : null;
+      });
+      return {
+        label: type || "默认",
+        data: typeData,
+        borderColor: baseColor,
+        backgroundColor: (ctx) => {
+          const chart = ctx.chart;
+          const chartArea = chart.chartArea;
+          if (!chartArea)
+            return hexToRgba(baseColor, 0.2);
+          const { top, bottom } = chartArea;
+          const gradient = chart.ctx.createLinearGradient(0, top, 0, bottom);
+          gradient.addColorStop(0, hexToRgba(baseColor, 0.28));
+          gradient.addColorStop(1, hexToRgba(baseColor, 0.05));
+          return gradient;
+        },
+        pointBackgroundColor: baseColor,
+        pointBorderColor: "#fff",
+        pointBorderWidth: 1,
+        borderWidth: 3,
+        tension: 0,
+        fill: true
+      };
+    });
+    return { labels, datasets };
+  }, [filteredData, types, xValues]);
+  const filterOptions = useMemo(() => {
+    return categories.map((category) => ({
+      label: category || "默认",
+      value: category || "默认"
+    }));
+  }, [categories]);
+  const filteredDataByFilterLabel = useMemo(() => {
+    return filterLabels == null ? void 0 : filterLabels.map((item) => ({
+      key: item,
+      label: item
+    }));
+  }, [filterLabels]);
+  const isLight = theme === "light";
+  const axisTextColor = isLight ? "rgba(0, 25, 61, 0.3255)" : "rgba(255, 255, 255, 0.8)";
+  const gridColor = isLight ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.2)";
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    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"
+        }
+      },
+      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,
+        displayColors: true,
+        callbacks: {
+          label: (context2) => {
+            const label = context2.dataset.label || "";
+            const y = context2.parsed.y;
+            return `${label}: ${y}`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        display: !hiddenX,
+        position: xPosition,
+        title: {
+          display: !!xTitle,
+          text: xTitle,
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12, weight: "normal" },
+          align: "end"
+        },
+        grid: {
+          display: showGrid,
+          color: gridColor,
+          lineWidth: 1,
+          drawTicks: false,
+          tickLength: 0
+        },
+        ticks: {
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12 },
+          padding: isMobile ? 10 : 12
+        },
+        border: {
+          color: gridColor
+        }
+      },
+      y: {
+        display: !hiddenY,
+        position: yPosition,
+        beginAtZero: true,
+        title: {
+          display: !!yTitle,
+          text: yTitle,
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12, weight: "normal" },
+          align: "end"
+        },
+        grid: {
+          display: showGrid,
+          color: gridColor,
+          lineWidth: 1,
+          drawTicks: false,
+          tickLength: 0
+        },
+        ticks: {
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12 },
+          padding: isMobile ? 10 : 12
+        },
+        border: {
+          color: gridColor
+        }
+      }
+    },
+    elements: {
+      point: {
+        radius: isMobile ? 2 : 3,
+        hoverRadius: isMobile ? 3 : 5,
+        borderWidth: isMobile ? 1 : 2,
+        hoverBorderWidth: isMobile ? 1 : 2
+      },
+      line: {
+        borderWidth: 3
+      }
+    }
+  };
+  const handleDownload = () => {
+    downloadChart(chartRef.current, "area-chart");
+  };
+  return /* @__PURE__ */ React.createElement(
+    ChartContainer,
+    {
+      baseClassName,
+      className,
+      theme,
+      isMobile,
+      variant,
+      style: {
+        width: responsiveWidth,
+        height: responsiveHeight
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      ChartToolBar,
+      {
+        title,
+        theme,
+        onDownload: handleDownload,
+        extra: toolbarExtra,
+        dataTime,
+        filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /* @__PURE__ */ React.createElement(
+          ChartFilter,
+          __spreadProps(__spreadValues({
+            filterOptions,
+            selectedFilter,
+            onFilterChange: setSelectedFilter
+          }, filterLabels && {
+            customOptions: filteredDataByFilterLabel,
+            selectedCustomSelection: selectedFilterLabel,
+            onSelectionChange: setSelectedFilterLabel
+          }), {
+            theme,
+            variant: "compact"
+          })
+        ) : void 0
+      }
+    ),
+    statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
+    !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
+      ChartFilter,
+      __spreadProps(__spreadValues({
+        filterOptions,
+        selectedFilter,
+        onFilterChange: setSelectedFilter
+      }, filterLabels && {
+        customOptions: filteredDataByFilterLabel,
+        selectedCustomSelection: selectedFilterLabel,
+        onSelectionChange: setSelectedFilterLabel
+      }), {
+        theme
+      })
+    ),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "chart-wrapper",
+        style: { marginTop: "20px", height: responsiveHeight }
+      },
+      /* @__PURE__ */ React.createElement(Line, { ref: chartRef, data: processedData, options })
+    )
+  );
+};
+var AreaChart_default = AreaChart;
+export {
+  AreaChart_default as default
+};

package/dist/Plugins/chart/AreaChart/style.js

@@ -0,0 +1,89 @@
+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/AreaChart/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
+          // 移动端最小高度
+        },
+        // 移动端图表标题样式优化
+        ".chart-title": {
+          fontSize: 14,
+          marginBottom: 8,
+          textAlign: "center"
+        },
+        // 移动端筛选器样式优化
+        ".chart-filter": {
+          flexWrap: "wrap",
+          gap: 8,
+          marginBottom: 12,
+          ".filter-button": {
+            fontSize: 12,
+            padding: "6px 12px"
+          }
+        }
+      },
+      // 超小屏幕优化 (375px以下)
+      "@media (max-width: 375px)": {
+        padding: 8,
+        ".chart-wrapper": {
+          minHeight: 220
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("AreaChart", (token) => {
+    const areaToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(areaToken)];
+  });
+}
+export {
+  useStyle
+};