@ant-design/agentic-ui 2.0.10 → 2.0.13

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

@@ -1,501 +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/DonutChart/index.tsx
-import { ConfigProvider } from "antd";
-import {
-  ArcElement,
-  Chart as ChartJS,
-  Legend,
-  Tooltip
-} from "chart.js";
-import React, { useContext, useMemo, useRef, useState } from "react";
-import { Doughnut } from "react-chartjs-2";
-import {
-  ChartContainer,
-  ChartFilter,
-  ChartStatistic,
-  ChartToolBar,
-  downloadChart
-} from "../components";
-import { useChartStatistic } from "../hooks/useChartStatistic";
-import LegendView from "./Legend";
-import {
-  DEFAULT_COLORS,
-  SINGLE_MODE_DESKTOP_CUTOUT,
-  SINGLE_MODE_MOBILE_CUTOUT
-} from "./constants";
-import {
-  useAutoCategory,
-  useFilterLabels,
-  useMobile,
-  useResponsiveDimensions
-} from "./hooks";
-import { createBackgroundArcPlugin, createCenterTextPlugin } from "./plugins";
-import { useStyle } from "./style";
-ChartJS.register(ArcElement, Tooltip, Legend);
-var DonutChart = (_a) => {
-  var _b = _a, {
-    data,
-    configs,
-    width = 200,
-    height = 200,
-    className,
-    title,
-    showToolbar = true,
-    onDownload,
-    dataTime,
-    filterList,
-    selectedFilter,
-    onFilterChange,
-    enableAutoCategory = true,
-    singleMode = false,
-    toolbarExtra,
-    statistic: statisticConfig
-  } = _b, props = __objRest(_b, [
-    "data",
-    "configs",
-    "width",
-    "height",
-    "className",
-    "title",
-    "showToolbar",
-    "onDownload",
-    "dataTime",
-    "filterList",
-    "selectedFilter",
-    "onFilterChange",
-    "enableAutoCategory",
-    "singleMode",
-    "toolbarExtra",
-    "statistic"
-  ]);
-  var _a2;
-  const { isMobile, windowWidth } = useMobile();
-  const defaultConfigs = [{ showLegend: true }];
-  const finalConfigs = configs || defaultConfigs;
-  const context = useContext(ConfigProvider.ConfigContext);
-  const baseClassName = context == null ? void 0 : context.getPrefixCls("donut-chart");
-  const { hashId } = useStyle(baseClassName);
-  const chartRefs = useRef([]);
-  const [hiddenDataIndicesByChart, setHiddenDataIndicesByChart] = useState({});
-  const {
-    filterLabels,
-    filteredDataByFilterLabel,
-    selectedFilterLabel,
-    setSelectedFilterLabel
-  } = useFilterLabels(data);
-  const {
-    autoCategoryData,
-    internalSelectedCategory,
-    setInternalSelectedCategory,
-    selectedCategory
-  } = useAutoCategory(data, enableAutoCategory, selectedFilter);
-  const filteredData = useMemo(() => {
-    const byCategory = selectedCategory ? data.filter((item) => item.category === selectedCategory) : data;
-    if (!filterLabels || !selectedFilterLabel) {
-      return byCategory;
-    }
-    return byCategory.filter(
-      (item) => item.filterLabel === selectedFilterLabel
-    );
-  }, [data, selectedCategory, filterLabels, selectedFilterLabel]);
-  const handleInternalCategoryChange = (category) => {
-    setInternalSelectedCategory(category);
-  };
-  const handleLegendItemClick = (chartIndex, dataIndex) => {
-    setHiddenDataIndicesByChart((prev) => {
-      var _a3;
-      const next = __spreadValues({}, prev);
-      const currentSet = new Set((_a3 = next[chartIndex]) != null ? _a3 : /* @__PURE__ */ new Set());
-      if (currentSet.has(dataIndex)) {
-        currentSet.delete(dataIndex);
-      } else {
-        currentSet.add(dataIndex);
-      }
-      next[chartIndex] = currentSet;
-      return next;
-    });
-  };
-  if (filterList && filterList.length > 0) {
-    const uniqueItems = new Set(filterList);
-    if (uniqueItems.size !== filterList.length) {
-      const seen = /* @__PURE__ */ new Set();
-      const duplicates = /* @__PURE__ */ new Set();
-      filterList.forEach((item) => {
-        if (seen.has(item)) {
-          duplicates.add(item);
-        } else {
-          seen.add(item);
-        }
-      });
-      throw new Error(
-        `DonutChart filterList 包含重复项: [${Array.from(duplicates).join(", ")}]. 每个筛选项必须唯一。`
-      );
-    }
-  }
-  const statisticComponentConfigs = useChartStatistic(statisticConfig);
-  const handleDownload = () => {
-    var _a3, _b2;
-    if (onDownload) {
-      onDownload();
-      return;
-    }
-    const instances = (chartRefs.current || []).filter(
-      (c) => !!c
-    );
-    if (instances.length <= 1) {
-      const target = (_a3 = instances[0]) != null ? _a3 : null;
-      downloadChart(target, "donut-chart");
-      return;
-    }
-    try {
-      const canvases = instances.map((inst) => inst == null ? void 0 : inst.canvas).filter(Boolean);
-      if (canvases.length === 0) {
-        return;
-      }
-      const GAP = 16;
-      const widths = canvases.map((c) => c.width);
-      const heights = canvases.map((c) => c.height);
-      const maxWidth = Math.max(...widths);
-      const totalHeight = heights.reduce((sum, h) => sum + h, 0) + GAP * (canvases.length - 1);
-      const composite = document.createElement("canvas");
-      composite.width = maxWidth;
-      composite.height = totalHeight;
-      const ctx = composite.getContext("2d");
-      if (!ctx)
-        return;
-      ctx.fillStyle = "#ffffff";
-      ctx.fillRect(0, 0, composite.width, composite.height);
-      let offsetY = 0;
-      canvases.forEach((c, i) => {
-        const x = Math.floor((maxWidth - c.width) / 2);
-        ctx.drawImage(c, x, offsetY);
-        offsetY += c.height + (i < canvases.length - 1 ? GAP : 0);
-      });
-      const link = document.createElement("a");
-      link.download = `donut-charts-${Date.now()}.png`;
-      link.href = composite.toDataURL("image/png", 1);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    } catch (e) {
-      const target = (_b2 = instances[0]) != null ? _b2 : null;
-      downloadChart(target, "donut-chart");
-    }
-  };
-  const shouldShowFilter = filterList && filterList.length > 0 || autoCategoryData;
-  const finalFilterList = filterList || (autoCategoryData ? autoCategoryData.categories : []);
-  const finalSelectedFilter = selectedFilter || internalSelectedCategory;
-  const finalOnFilterChange = onFilterChange || handleInternalCategoryChange;
-  const chartFilterTheme = ((_a2 = finalConfigs[0]) == null ? void 0 : _a2.theme) || "light";
-  const dimensions = useResponsiveDimensions(
-    isMobile,
-    windowWidth,
-    width,
-    height
-  );
-  const renderConfigs = singleMode && !configs ? Array.from({ length: filteredData.length }, (_, i) => ({
-    showLegend: false,
-    showTooltip: false,
-    backgroundColor: [
-      DEFAULT_COLORS[i % DEFAULT_COLORS.length],
-      "#F7F8F9"
-    ]
-  })) : finalConfigs;
-  return /* @__PURE__ */ React.createElement(
-    ChartContainer,
-    {
-      baseClassName,
-      className,
-      variant: props.variant,
-      style: {
-        ["--donut-item-min-width"]: `${dimensions.width}px`
-      }
-    },
-    showToolbar && /* @__PURE__ */ React.createElement(
-      ChartContainer,
-      {
-        baseClassName: `${baseClassName}-toolbar-wrapper`,
-        variant: "borderless"
-      },
-      title && /* @__PURE__ */ React.createElement(
-        ChartToolBar,
-        {
-          title,
-          onDownload: handleDownload,
-          extra: toolbarExtra,
-          dataTime
-        }
-      ),
-      statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(
-        ChartStatistic,
-        __spreadProps(__spreadValues({
-          key: index
-        }, config), {
-          theme: chartFilterTheme
-        })
-      ))),
-      shouldShowFilter && /* @__PURE__ */ React.createElement(
-        ChartFilter,
-        __spreadProps(__spreadValues({
-          filterOptions: finalFilterList.map((item) => {
-            return {
-              label: item || "",
-              value: item || ""
-            };
-          }),
-          selectedFilter: finalSelectedFilter || "",
-          onFilterChange: finalOnFilterChange
-        }, filterLabels && {
-          customOptions: filteredDataByFilterLabel,
-          selectedCustomSelection: selectedFilterLabel,
-          onSelectionChange: setSelectedFilterLabel
-        }), {
-          theme: chartFilterTheme
-        })
-      )
-    ),
-    /* @__PURE__ */ React.createElement(
-      ChartContainer,
-      {
-        baseClassName: `${baseClassName}-content`,
-        variant: "borderless"
-      },
-      renderConfigs.map((cfg, idx) => {
-        var _a3, _b2;
-        const currentDataItem = filteredData[idx];
-        const isSingleValueMode = Boolean(singleMode && currentDataItem);
-        let chartData = filteredData;
-        if (isSingleValueMode && currentDataItem) {
-          const mainValue = typeof currentDataItem.value === "number" ? currentDataItem.value : Number(currentDataItem.value);
-          const remainingValue = Math.max(
-            0,
-            100 - (Number.isFinite(mainValue) ? mainValue : 0)
-          );
-          chartData = [
-            currentDataItem,
-            {
-              label: "剩余",
-              value: remainingValue,
-              category: currentDataItem.category
-            }
-          ];
-        }
-        const hiddenSetForChart = hiddenDataIndicesByChart[idx] || /* @__PURE__ */ new Set();
-        const visibleData = chartData.filter(
-          (_, index) => !hiddenSetForChart.has(index)
-        );
-        const toNum = (v) => typeof v === "number" ? v : Number(v);
-        const rawLabels = visibleData.map((d) => d.label);
-        const labels = isSingleValueMode ? rawLabels.map((labelText, i) => i === 1 ? "" : labelText) : rawLabels;
-        const values = visibleData.map((d) => toNum(d.value));
-        const safeValues = values.map((v) => Number.isFinite(v) ? v : 0);
-        const total = values.reduce(
-          (sum, v) => sum + (Number.isFinite(v) ? v : 0),
-          0
-        );
-        const backgroundColors = cfg.backgroundColor || DEFAULT_COLORS;
-        const mainColor = (_b2 = (_a3 = cfg.backgroundColor) == null ? void 0 : _a3[0]) != null ? _b2 : DEFAULT_COLORS[idx % DEFAULT_COLORS.length];
-        const chartJsData = {
-          labels,
-          datasets: [
-            {
-              data: safeValues,
-              backgroundColor: isSingleValueMode ? [mainColor, "transparent"] : backgroundColors.slice(0, values.length),
-              borderColor: isSingleValueMode ? [cfg.borderColor || "#fff", "transparent"] : cfg.borderColor || "#fff",
-              hoverBackgroundColor: isSingleValueMode ? [mainColor, "transparent"] : backgroundColors.slice(0, values.length),
-              hoverBorderColor: isSingleValueMode ? [cfg.borderColor || "#fff", "transparent"] : cfg.borderColor || "#fff",
-              borderWidth: cfg.chartStyle === "pie" ? 0 : isMobile ? 1 : 1,
-              spacing: isSingleValueMode ? 0 : cfg.chartStyle === "pie" ? 0 : isMobile ? 3 : 6,
-              borderRadius: cfg.chartStyle === "pie" ? 0 : 4,
-              hoverOffset: (ctx) => isSingleValueMode && (ctx == null ? void 0 : ctx.dataIndex) === 1 ? 0 : isMobile ? 4 : 6
-            }
-          ]
-        };
-        const cutout = (() => {
-          var _a4, _b3;
-          if (cfg.chartStyle === "pie") {
-            return 0;
-          }
-          if (isMobile) {
-            if (typeof cfg.cutout === "number")
-              return cfg.cutout * 0.9;
-            return (_a4 = cfg.cutout) != null ? _a4 : isSingleValueMode ? SINGLE_MODE_MOBILE_CUTOUT : "70%";
-          }
-          return (_b3 = cfg.cutout) != null ? _b3 : isSingleValueMode ? SINGLE_MODE_DESKTOP_CUTOUT : "75%";
-        })();
-        const isDarkTheme = cfg.theme === "dark";
-        const tooltipBackgroundColor = isDarkTheme ? "#1F2937" : "#FFFFFF";
-        const tooltipBorderColor = isDarkTheme ? "#374151" : "#E5E7EB";
-        const tooltipTitleColor = isDarkTheme ? "#F9FAFB" : "#111827";
-        const tooltipBodyColor = isDarkTheme ? "#D1D5DB" : "#374151";
-        const options = {
-          responsive: true,
-          maintainAspectRatio: false,
-          cutout,
-          plugins: {
-            legend: {
-              display: false
-            },
-            tooltip: {
-              enabled: cfg.showTooltip !== false,
-              filter: (tooltipItem) => !(isSingleValueMode && tooltipItem.dataIndex === 1),
-              backgroundColor: tooltipBackgroundColor,
-              borderColor: tooltipBorderColor,
-              borderWidth: 1,
-              titleColor: tooltipTitleColor,
-              bodyColor: tooltipBodyColor,
-              padding: isMobile ? 8 : 12,
-              titleFont: {
-                size: isMobile ? 12 : 14
-              },
-              bodyFont: {
-                size: isMobile ? 11 : 13
-              },
-              callbacks: {
-                label: ({ label, raw }) => {
-                  const val = typeof raw === "number" ? raw : Number(raw);
-                  const pct = total > 0 && Number.isFinite(val) ? (val / total * 100).toFixed(0) : "0";
-                  return `${label}: ${Number.isFinite(val) ? val : raw} (${pct}%)`;
-                }
-              }
-            }
-          },
-          animation: {
-            duration: isMobile ? 200 : 1e3
-          },
-          interaction: {
-            mode: "point",
-            intersect: false
-          },
-          layout: {
-            padding: isMobile ? 4 : 6
-          }
-        };
-        return /* @__PURE__ */ React.createElement(
-          ChartContainer,
-          {
-            key: idx,
-            baseClassName: `${baseClassName}-chart-wrapper`,
-            variant: "borderless"
-          },
-          isSingleValueMode ? /* @__PURE__ */ React.createElement(
-            ChartContainer,
-            {
-              baseClassName: `${baseClassName}-single`,
-              variant: "borderless",
-              style: __spreadValues({
-                ["--donut-chart-height"]: `${dimensions.height}px`,
-                ["--donut-chart-width"]: `${dimensions.width}px`,
-                width: dimensions.width,
-                height: dimensions.height,
-                marginTop: "20px"
-              }, isMobile ? { margin: "0 auto" } : {})
-            },
-            /* @__PURE__ */ React.createElement(
-              Doughnut,
-              {
-                ref: (instance) => {
-                  chartRefs.current[idx] = instance;
-                },
-                data: chartJsData,
-                options,
-                plugins: [
-                  // 只有环形图才显示中心文本和背景
-                  ...cfg.chartStyle !== "pie" ? [
-                    createCenterTextPlugin(
-                      (typeof currentDataItem.value === "number" ? currentDataItem.value : Number(currentDataItem.value)) / (total || 1) * 100,
-                      currentDataItem.label,
-                      isMobile
-                    ),
-                    createBackgroundArcPlugin()
-                    // 背景色
-                  ] : []
-                ]
-              }
-            )
-          ) : /* @__PURE__ */ React.createElement(
-            ChartContainer,
-            {
-              baseClassName: `${baseClassName}-row`,
-              variant: "borderless",
-              style: __spreadValues({}, isMobile ? { flexDirection: "column", alignItems: "stretch" } : {})
-            },
-            /* @__PURE__ */ React.createElement(
-              ChartContainer,
-              {
-                baseClassName: `${baseClassName}-chart`,
-                variant: "borderless",
-                style: {
-                  ["--donut-chart-width"]: `${dimensions.chartWidth}px`,
-                  ["--donut-chart-height"]: `${dimensions.chartHeight}px`,
-                  width: dimensions.chartWidth,
-                  height: dimensions.chartHeight,
-                  marginTop: "20px"
-                }
-              },
-              /* @__PURE__ */ React.createElement(
-                Doughnut,
-                {
-                  ref: (instance) => {
-                    chartRefs.current[idx] = instance;
-                  },
-                  data: chartJsData,
-                  options
-                }
-              )
-            ),
-            cfg.showLegend && /* @__PURE__ */ React.createElement(
-              LegendView,
-              {
-                chartData,
-                backgroundColors,
-                hiddenDataIndicesByChart,
-                chartIndex: idx,
-                onLegendItemClick: (dataIndex) => handleLegendItemClick(idx, dataIndex),
-                total,
-                baseClassName,
-                hashId,
-                isMobile
-              }
-            )
-          )
-        );
-      })
-    )
-  );
-};
-var DonutChart_default = DonutChart;
-export {
-  DonutChart_default as default
-};

package/dist/plugins/chart/DonutChart/plugins.js

@@ -1,45 +0,0 @@
-// src/plugins/chart/DonutChart/plugins.ts
-var createCenterTextPlugin = (value, label, isMobile = false) => ({
-  id: "centerText",
-  beforeDraw: (chart) => {
-    const { width, height, ctx } = chart;
-    ctx.save();
-    const centerX = width / 2;
-    const centerY = height / 2;
-    const percentFontSize = isMobile ? 11 : 15;
-    const labelFontSize = isMobile ? 10 : 12;
-    ctx.font = `${isMobile ? "400" : "500"} ${percentFontSize}px 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif`;
-    ctx.fillStyle = "#343A45";
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.fillText(`${value}%`, centerX, centerY - labelFontSize * 0.8);
-    ctx.font = `300 ${labelFontSize}px 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif`;
-    ctx.fillStyle = "#767E8B";
-    ctx.fillText(label, centerX, centerY + labelFontSize * 0.6);
-    ctx.restore();
-  }
-});
-var createBackgroundArcPlugin = (bgColor = "#F7F8F9", padding = 4) => ({
-  id: "backgroundArc",
-  beforeDatasetDraw(chart) {
-    var _a;
-    const meta = chart.getDatasetMeta(0);
-    if (!((_a = meta == null ? void 0 : meta.data) == null ? void 0 : _a[0]))
-      return;
-    const arc = meta.data[0];
-    const outerRadius = arc.outerRadius + padding;
-    const innerRadius = arc.innerRadius - padding;
-    const { ctx } = chart;
-    ctx.save();
-    ctx.beginPath();
-    ctx.arc(arc.x, arc.y, outerRadius, 0, 2 * Math.PI, false);
-    ctx.arc(arc.x, arc.y, innerRadius, 0, 2 * Math.PI, true);
-    ctx.fillStyle = bgColor;
-    ctx.fill();
-    ctx.restore();
-  }
-});
-export {
-  createBackgroundArcPlugin,
-  createCenterTextPlugin
-};