@ant-design/agentic-ui 2.0.0

package/dist/plugins/chart/ChartStatistic/style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * Statistic Style
+ * @param prefixCls
+ * @returns
+ */
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/plugins/chart/ChartStatistic/style.js

@@ -0,0 +1,153 @@
+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/ChartStatistic/style.ts
+import {
+  resetComponent,
+  useEditorStyleRegister
+} from "../../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px",
+      minWidth: "160px",
+      [`${token.componentCls}-header`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        [`${token.componentCls}-header-left`]: {
+          display: "flex",
+          alignItems: "center",
+          gap: "4px",
+          flex: 1
+        },
+        [`${token.componentCls}-title`]: {
+          fontFamily: "PingFang SC",
+          fontSize: "13px",
+          fontWeight: 500,
+          color: "#2C3E5D",
+          margin: 0
+        },
+        [`${token.componentCls}-question-icon`]: {
+          fontSize: "14px",
+          color: "#B3B9C4",
+          fontWeight: 500
+        }
+      },
+      [`${token.componentCls}-value`]: {
+        fontFamily: "Rubik",
+        fontSize: "24px",
+        fontWeight: 500,
+        lineHeight: 1,
+        color: "#2C3E5D",
+        [`${token.componentCls}-value-prefix`]: {
+          fontFamily: "PingFang SC",
+          fontSize: "13px",
+          fontWeight: "normal",
+          color: "#2C3E5D",
+          marginRight: "4px"
+        },
+        [`${token.componentCls}-value-suffix`]: {
+          fontFamily: "PingFang SC",
+          fontSize: "13px",
+          fontWeight: "normal",
+          color: "#2C3E5D",
+          marginLeft: "4px"
+        }
+      },
+      // Dark theme styles
+      "&-dark": {
+        [`${token.componentCls}-header`]: {
+          [`${token.componentCls}-title`]: {
+            color: "rgba(255, 255, 255, 0.65)"
+          },
+          [`${token.componentCls}-question-icon`]: {
+            color: "rgba(255, 255, 255, 0.45)",
+            "&:hover": {
+              color: "rgba(255, 255, 255, 0.65)"
+            }
+          }
+        },
+        [`${token.componentCls}-value`]: {
+          color: "#fff",
+          [`${token.componentCls}-value-prefix`]: {
+            color: "#fff"
+          },
+          [`${token.componentCls}-value-suffix`]: {
+            color: "#fff"
+          }
+        }
+      },
+      // Size variants
+      "&-small": {
+        [`${token.componentCls}-header`]: {
+          [`${token.componentCls}-title`]: {
+            fontSize: "12px"
+          },
+          [`${token.componentCls}-question-icon`]: {
+            fontSize: "14px"
+          }
+        },
+        [`${token.componentCls}-value`]: {
+          fontSize: "20px"
+        }
+      },
+      "&-large": {
+        gap: "12px",
+        [`${token.componentCls}-header`]: {
+          [`${token.componentCls}-title`]: {
+            fontSize: "13px"
+          },
+          [`${token.componentCls}-question-icon`]: {
+            fontSize: "14px"
+          }
+        },
+        [`${token.componentCls}-value`]: {
+          fontSize: "30px"
+        }
+      },
+      // Block mode - 占满整个区域，多个时平分父容器，左对齐
+      "&-block": {
+        flex: 1,
+        minWidth: 0,
+        textAlign: "left",
+        [`${token.componentCls}-header`]: {
+          justifyContent: "flex-start"
+        },
+        [`${token.componentCls}-value`]: {
+          textAlign: "left"
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("Statistic", (token) => {
+    const statisticToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [resetComponent(statisticToken), genStyle(statisticToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/plugins/chart/ChartStatistic/utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 数值格式化工具函数
+ */
+export interface NumberFormatOptions {
+    precision?: number;
+    groupSeparator?: string;
+}
+/**
+ * 格式化数值
+ * @param value 原始数值
+ * @param options 格式化选项
+ * @returns 格式化后的字符串
+ */
+export declare const formatNumber: (value: number | string | null | undefined, options?: NumberFormatOptions) => string;
+/**
+ * 检查值是否为有效的数值
+ */
+export declare const isValidNumber: (value: any) => boolean;

package/dist/plugins/chart/ChartStatistic/utils.js

@@ -0,0 +1,29 @@
+// src/plugins/chart/ChartStatistic/utils.ts
+var formatNumber = (value, options = {}) => {
+  const { precision, groupSeparator = "," } = options;
+  if (value === null || value === void 0 || value === "") {
+    return `--`;
+  }
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  if (isNaN(numValue)) {
+    return `--`;
+  }
+  let formattedValue = precision !== void 0 ? numValue.toFixed(precision) : numValue.toString();
+  if (groupSeparator && groupSeparator !== "") {
+    const parts = formattedValue.split(".");
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
+    formattedValue = parts.join(".");
+  }
+  return `${formattedValue}`;
+};
+var isValidNumber = (value) => {
+  if (value === null || value === void 0 || value === "") {
+    return false;
+  }
+  const numValue = typeof value === "string" ? parseFloat(value) : value;
+  return !isNaN(numValue) && isFinite(numValue);
+};
+export {
+  formatNumber,
+  isValidNumber
+};

package/dist/plugins/chart/DonutChart/Legend.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DonutChartData } from './types';
+interface LegendProps {
+    chartData: DonutChartData[];
+    backgroundColors: string[];
+    /** 按图索引维护的隐藏集合 */
+    hiddenDataIndicesByChart: Record<number, Set<number>>;
+    /** 当前图索引 */
+    chartIndex: number;
+    onLegendItemClick: (index: number) => void;
+    total: number;
+    baseClassName: string;
+    hashId: string;
+    isMobile: boolean;
+}
+declare const Legend: React.FC<LegendProps>;
+export default Legend;

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

@@ -0,0 +1,136 @@
+var __defProp = Object.defineProperty;
+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;
+};
+
+// src/plugins/chart/DonutChart/Legend.tsx
+import classNames from "classnames";
+import React from "react";
+var Legend = ({
+  chartData,
+  backgroundColors,
+  hiddenDataIndicesByChart,
+  chartIndex,
+  onLegendItemClick,
+  total,
+  baseClassName,
+  hashId,
+  isMobile
+}) => {
+  const hiddenDataIndices = React.useMemo(() => {
+    return hiddenDataIndicesByChart[chartIndex] || /* @__PURE__ */ new Set();
+  }, [hiddenDataIndicesByChart, chartIndex]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: classNames(`${baseClassName}-legend`, hashId),
+      style: __spreadValues({
+        marginLeft: isMobile ? 0 : 12,
+        maxHeight: isMobile ? "120px" : "none",
+        overflowY: isMobile ? "auto" : "visible"
+      }, isMobile ? { alignSelf: "center" } : {})
+    },
+    chartData.map((d, i) => {
+      const isHidden = hiddenDataIndices.has(i);
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: i,
+          className: classNames(`${baseClassName}-legend-item`, hashId),
+          style: {
+            cursor: "pointer",
+            padding: isMobile ? "4px 0" : "6px 0",
+            fontSize: isMobile ? 11 : 12,
+            minHeight: isMobile ? "24px" : "28px",
+            textDecoration: isHidden ? "line-through" : "none"
+          },
+          onClick: () => onLegendItemClick(i),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onLegendItemClick(i);
+            }
+          },
+          tabIndex: 0,
+          role: "button",
+          "aria-label": `${isHidden ? "显示" : "隐藏"} ${d.label}`
+        },
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(`${baseClassName}-legend-color`, hashId),
+            style: {
+              ["--donut-legend-color"]: backgroundColors[i] || "#ccc",
+              width: isMobile ? 10 : 12,
+              height: isMobile ? 10 : 12,
+              borderRadius: 4,
+              marginRight: isMobile ? 4 : 6
+            }
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(`${baseClassName}-legend-label`, hashId),
+            style: {
+              fontSize: isMobile ? 11 : 13,
+              flex: isMobile ? "0 1 auto" : 1,
+              minWidth: isMobile ? "60px" : "auto"
+            }
+          },
+          d.label
+        ),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: classNames(`${baseClassName}-legend-value`, hashId),
+            style: {
+              fontSize: isMobile ? 11 : 13,
+              fontWeight: isMobile ? 400 : 500,
+              marginLeft: isMobile ? 8 : 15,
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center"
+            }
+          },
+          /* @__PURE__ */ React.createElement("span", null, d.value),
+          /* @__PURE__ */ React.createElement(
+            "span",
+            {
+              className: classNames(
+                `${baseClassName}-legend-percent`,
+                hashId
+              ),
+              style: {
+                fontSize: isMobile ? 10 : 12,
+                marginLeft: isMobile ? 6 : 8,
+                marginTop: 0
+              }
+            },
+            (() => {
+              const v = typeof d.value === "number" ? d.value : Number(d.value);
+              return total > 0 && Number.isFinite(v) ? (v / total * 100).toFixed(0) : "0";
+            })(),
+            "%"
+          )
+        )
+      );
+    })
+  );
+};
+var Legend_default = Legend;
+export {
+  Legend_default as default
+};

package/dist/plugins/chart/DonutChart/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const DEFAULT_COLORS: string[];
+export declare const MOBILE_MAX_CHART_SIZE = 160;
+export declare const BASE_CLASS_NAME = "md-editor-donut-chart";
+export declare const SINGLE_MODE_DESKTOP_CUTOUT = "70%";
+export declare const SINGLE_MODE_MOBILE_CUTOUT = "65%";

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

@@ -0,0 +1,25 @@
+// src/plugins/chart/DonutChart/constants.ts
+var DEFAULT_COLORS = [
+  "#917EF7",
+  "#2AD8FC",
+  "#388BFF",
+  "#718AB6",
+  "#84DC18",
+  "#FACC15",
+  "#33E59B",
+  "#D666E4",
+  "#6151FF",
+  "#BF3C93",
+  "#005EE0"
+];
+var MOBILE_MAX_CHART_SIZE = 160;
+var BASE_CLASS_NAME = "md-editor-donut-chart";
+var SINGLE_MODE_DESKTOP_CUTOUT = "70%";
+var SINGLE_MODE_MOBILE_CUTOUT = "65%";
+export {
+  BASE_CLASS_NAME,
+  DEFAULT_COLORS,
+  MOBILE_MAX_CHART_SIZE,
+  SINGLE_MODE_DESKTOP_CUTOUT,
+  SINGLE_MODE_MOBILE_CUTOUT
+};

package/dist/plugins/chart/DonutChart/hooks.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { DonutChartData } from './types';
+export declare const useMobile: () => {
+    readonly isMobile: boolean;
+    readonly windowWidth: number;
+};
+export declare const useResponsiveDimensions: (isMobile: boolean, windowWidth: number, width: number | string, height: number | string) => {
+    readonly width: string | number;
+    readonly height: string | number;
+    readonly chartWidth: string | number;
+    readonly chartHeight: string | number;
+};
+export declare const useFilterLabels: (data: DonutChartData[]) => {
+    readonly filterLabels: string[] | undefined;
+    readonly filteredDataByFilterLabel: {
+        key: string;
+        label: string;
+    }[] | undefined;
+    readonly selectedFilterLabel: string | undefined;
+    readonly setSelectedFilterLabel: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+export declare const useAutoCategory: (data: DonutChartData[], enableAutoCategory: boolean, externalSelectedFilter?: string) => {
+    readonly autoCategoryData: {
+        readonly categories: (string | undefined)[];
+        readonly allData: DonutChartData[];
+    } | null;
+    readonly internalSelectedCategory: string;
+    readonly setInternalSelectedCategory: React.Dispatch<React.SetStateAction<string>>;
+    readonly selectedCategory: string;
+};

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

@@ -0,0 +1,121 @@
+// src/plugins/chart/DonutChart/hooks.ts
+import React from "react";
+import { MOBILE_MAX_CHART_SIZE } from "./constants";
+var useMobile = () => {
+  const [isMobile, setIsMobile] = React.useState(false);
+  const [windowWidth, setWindowWidth] = React.useState(0);
+  React.useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setWindowWidth(width);
+      setIsMobile(width <= 768);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return { isMobile, windowWidth };
+};
+var useResponsiveDimensions = (isMobile, windowWidth, width, height) => {
+  if (isMobile) {
+    const mobileWidth = Math.min(
+      windowWidth - 40,
+      Number(width),
+      MOBILE_MAX_CHART_SIZE
+    );
+    const mobileHeight = Math.min(
+      windowWidth - 40,
+      Number(height),
+      MOBILE_MAX_CHART_SIZE
+    );
+    return {
+      width: mobileWidth,
+      height: mobileHeight,
+      chartWidth: mobileWidth,
+      chartHeight: mobileHeight
+    };
+  }
+  return {
+    width,
+    height,
+    chartWidth: width,
+    chartHeight: height
+  };
+};
+var useFilterLabels = (data) => {
+  const validFilterLabels = React.useMemo(() => {
+    return data.map((item) => item.filterLabel).filter(
+      (filterLabel) => filterLabel !== void 0
+    );
+  }, [data]);
+  const filterLabels = React.useMemo(() => {
+    return validFilterLabels.length > 0 ? [...new Set(validFilterLabels)] : void 0;
+  }, [validFilterLabels]);
+  const [selectedFilterLabel, setSelectedFilterLabel] = React.useState(filterLabels && filterLabels.length > 0 ? filterLabels[0] : void 0);
+  React.useEffect(() => {
+    if (!filterLabels || filterLabels.length === 0) {
+      if (selectedFilterLabel !== void 0) {
+        setSelectedFilterLabel(void 0);
+      }
+      return;
+    }
+    if (!selectedFilterLabel || !filterLabels.includes(selectedFilterLabel)) {
+      setSelectedFilterLabel(filterLabels[0]);
+    }
+  }, [filterLabels]);
+  const filteredDataByFilterLabel = React.useMemo(() => {
+    return filterLabels == null ? void 0 : filterLabels.map((item) => ({ key: item, label: item }));
+  }, [filterLabels]);
+  return {
+    filterLabels,
+    filteredDataByFilterLabel,
+    selectedFilterLabel,
+    setSelectedFilterLabel
+  };
+};
+var useAutoCategory = (data, enableAutoCategory, externalSelectedFilter) => {
+  const autoCategoryData = React.useMemo(() => {
+    if (!enableAutoCategory || !data) {
+      return null;
+    }
+    const allData = data;
+    const categories = [
+      ...new Set(allData.map((item) => item.category).filter(Boolean))
+    ];
+    if (categories.length <= 1) {
+      return null;
+    }
+    return {
+      categories,
+      allData
+    };
+  }, [data, enableAutoCategory]);
+  const [internalSelectedCategory, setInternalSelectedCategory] = React.useState("");
+  React.useEffect(() => {
+    if (autoCategoryData && !internalSelectedCategory) {
+      setInternalSelectedCategory(
+        autoCategoryData.categories.find(Boolean) || ""
+      );
+    }
+  }, [autoCategoryData, internalSelectedCategory]);
+  React.useEffect(() => {
+    if (!enableAutoCategory || !autoCategoryData) {
+      if (internalSelectedCategory) {
+        setInternalSelectedCategory("");
+      }
+    }
+  }, [enableAutoCategory, autoCategoryData]);
+  const selectedCategory = externalSelectedFilter || internalSelectedCategory;
+  return {
+    autoCategoryData,
+    internalSelectedCategory,
+    setInternalSelectedCategory,
+    selectedCategory
+  };
+};
+export {
+  useAutoCategory,
+  useFilterLabels,
+  useMobile,
+  useResponsiveDimensions
+};

package/dist/plugins/chart/DonutChart/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DonutChartProps } from './types';
+export type { DonutChartConfig, DonutChartData, DonutChartProps, } from './types';
+declare const DonutChart: React.FC<DonutChartProps>;
+export default DonutChart;