@yoka-ui/ui 1.0.6 → 1.0.7

package/dist/lib/business/YkCharts/Line.js

@@ -0,0 +1,349 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/business/YkCharts/Line.tsx
+var Line_exports = {};
+__export(Line_exports, {
+  default: () => Line_default
+});
+module.exports = __toCommonJS(Line_exports);
+var import_antd = require("antd");
+var import_decimal = __toESM(require("decimal.js"));
+var echarts = __toESM(require("echarts"));
+var import_lodash = require("lodash");
+var import_react = __toESM(require("react"));
+var import_server = __toESM(require("react-dom/server"));
+var import_constants = require("./constants");
+var import_index_module = __toESM(require("./index.module.less"));
+var import_utils = require("./utils");
+var MAX_SECTORS = 500;
+var Line = ({
+  count,
+  // 指标显示数量
+  metric,
+  // 指标
+  groupBys,
+  // 维度
+  tableData,
+  // 表格数据
+  baseData,
+  // 基础数据
+  columnConfigMap,
+  // 列配置
+  sqlFormatMap,
+  // 列配置(用于SQL可视化中的格式化处理，SQL中的格式化走了另一套逻辑)
+  height
+}) => {
+  const { x = [], x_field, group_by } = tableData;
+  const chartContainerRef = (0, import_react.useRef)(null);
+  const chartInstanceRef = (0, import_react.useRef)(null);
+  const onlyOneMetric = (0, import_react.useMemo)(() => {
+    return metric.length === 1;
+  }, [metric]);
+  const seriesData = (0, import_react.useMemo)(() => {
+    if (Array.isArray(groupBys) && groupBys.some((g) => Array.isArray(g.selected) && g.selected.length === 0)) {
+      return [];
+    }
+    const validGroupBys = groupBys.filter((g) => Array.isArray(g.selected) && g.selected.length > 0);
+    const validGroupByKeys = validGroupBys.map((g) => g.key);
+    if (!baseData || baseData.length === 0) {
+      return [];
+    }
+    const filteredBaseData = baseData.filter((item) => {
+      return validGroupBys.every((g) => {
+        const itemValue = String(item[g.key] ?? "");
+        return g.selected.includes(itemValue);
+      });
+    });
+    const dataIndexMap = /* @__PURE__ */ new Map();
+    const existingCombinations = /* @__PURE__ */ new Map();
+    const getName = (category, groupByObj) => {
+      if (group_by && group_by.length > 0) {
+        if (onlyOneMetric) {
+          return group_by.map((g) => groupByObj[g]).join("，");
+        }
+        return [category, ...group_by.map((g) => groupByObj[g])].join("，");
+      }
+      return category;
+    };
+    filteredBaseData.forEach((item) => {
+      const groupByValues = validGroupByKeys.map((key) => String(item[key] ?? "")).join("|");
+      metric.forEach((cat) => {
+        const key = `${item[x_field]}|${groupByValues}|${cat}`;
+        dataIndexMap.set(key, item);
+        const combinationKey = `${groupByValues}|${cat}`;
+        if (!existingCombinations.has(combinationKey)) {
+          const groupByObj = { category: cat };
+          validGroupByKeys.forEach((gKey) => {
+            groupByObj[gKey] = item[gKey];
+          });
+          const name = getName(cat, groupByObj);
+          existingCombinations.set(combinationKey, {
+            groupByValues,
+            category: cat,
+            groupByObj,
+            name
+            // 预先计算好的 name
+          });
+        }
+      });
+    });
+    const result = Array.from(existingCombinations.values()).map(({ groupByValues, category, name }) => {
+      const data = new Array(x.length);
+      for (let i = 0; i < x.length; i++) {
+        const item = x[i];
+        const key = `${item}|${groupByValues}|${category}`;
+        const itemData = dataIndexMap.get(key);
+        data[i] = itemData == null ? void 0 : itemData[category];
+      }
+      return {
+        name,
+        type: "line",
+        smooth: true,
+        showSymbol: true,
+        symbol: "emptyCircle",
+        symbolSize: 0.8,
+        lineStyle: {
+          width: 1.5
+        },
+        emphasis: {
+          scale: 8
+        },
+        data,
+        dataSum: data.reduce((sum, val) => {
+          const num = typeof val === "number" ? val : 0;
+          return sum + (isNaN(num) ? 0 : num);
+        }, 0)
+      };
+    });
+    const sortedResult = result.sort((a, b) => {
+      const sumA = a.dataSum;
+      const sumB = b.dataSum;
+      return sumB - sumA;
+    });
+    return sortedResult;
+  }, [baseData, metric, groupBys, x, x_field, group_by, onlyOneMetric]);
+  const yAxisFormatter = (0, import_react.useMemo)(() => {
+    var _a, _b;
+    if (!(0, import_lodash.isEmpty)(sqlFormatMap) && metric.length > 0) {
+      const format = (_a = sqlFormatMap[metric[0]]) == null ? void 0 : _a.format;
+      if ((format == null ? void 0 : format.type) === "currency") {
+        return "number";
+      }
+      if ((format == null ? void 0 : format.type) === "percent") {
+        return "percent";
+      }
+      if ((format == null ? void 0 : format.decimals) > 0) {
+        return "decimal";
+      }
+      return "number";
+    }
+    if (metric.length === 1) {
+      return (_b = columnConfigMap[metric[0]]) == null ? void 0 : _b.format;
+    }
+    return null;
+  }, [metric, columnConfigMap, sqlFormatMap]);
+  const grid = {
+    top: 10,
+    left: 5,
+    right: 10,
+    bottom: 40,
+    containLabel: true
+  };
+  const legend = {
+    bottom: 0,
+    type: "scroll",
+    itemWidth: 13,
+    itemStyle: {
+      opacity: 0
+    },
+    lineStyle: {
+      width: 2,
+      type: "solid"
+    }
+  };
+  const xAxis = {
+    type: "category",
+    data: x,
+    axisLine: {
+      lineStyle: {
+        color: "#EBEEF4"
+      }
+    },
+    axisLabel: {
+      color: "#9CA4B3",
+      fontSize: 12
+    },
+    axisTick: {
+      alignWithLabel: true
+    },
+    boundaryGap: true
+  };
+  const yAxis = {
+    type: "value",
+    splitNumber: 4,
+    // 设置Y轴坐标点数量
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#EBEEF4",
+        shadowOffsetY: -10,
+        shadowColor: "#EBEEF4"
+      }
+    },
+    axisLabel: {
+      color: "#999999",
+      fontSize: 12,
+      padding: [0, 0, 0, 5],
+      formatter: (value) => {
+        if (yAxisFormatter === "percent") {
+          return new import_decimal.default(value).mul(100) + "%";
+        }
+        if (yAxisFormatter === "decimal") {
+          return (0, import_utils.formatValue)(value, yAxisFormatter);
+        }
+        const [result, unit] = (0, import_utils.formatNumber)(value, true);
+        return result + unit;
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        type: [2, 3],
+        // 虚线
+        color: "#E7E7E7"
+        // 背景线颜色
+      }
+    },
+    axisTick: {
+      show: true
+    }
+  };
+  const tooltipFormatter = (params) => {
+    var _a;
+    const title = ((_a = params[0]) == null ? void 0 : _a.axisValue) ?? "";
+    const tooltipDom = /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.tooltip }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.title }, /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement("span", { style: { float: "right", paddingRight: 10 } }, onlyOneMetric && metric.length === 1 ? " " + metric[0] : "")), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.content }, params.map((m) => {
+      var _a2;
+      const metricName = onlyOneMetric && metric.length === 1 ? metric[0] : m.seriesName.split("，")[0];
+      const columnConfig = columnConfigMap[metricName];
+      const format = (columnConfig == null ? void 0 : columnConfig.format) ?? "string";
+      let showValue = format === "currency" ? (0, import_utils.formatNumber)(m.value, true) : (0, import_utils.formatValue)(m.value, format);
+      if (!(0, import_lodash.isEmpty)(sqlFormatMap) && metric.length > 0) {
+        const format2 = (_a2 = sqlFormatMap[metricName]) == null ? void 0 : _a2.format;
+        showValue = (0, import_utils.sqlFormat)(m.value, format2);
+      }
+      const showValueText = showValue === "" || showValue[0] === "" ? "-" : showValue;
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.item, key: m.seriesName }, /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.point, style: { background: m.color } }), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.category }, m.seriesName), /* @__PURE__ */ import_react.default.createElement("div", { className: import_index_module.default.value }, showValueText));
+    })));
+    return import_server.default.renderToStaticMarkup(tooltipDom);
+  };
+  const tooltip = {
+    trigger: "axis",
+    padding: 0,
+    confine: true,
+    enterable: true,
+    axisPointer: {
+      type: "line",
+      // 设置悬浮指针为线
+      lineStyle: {
+        color: "#EBEEF4",
+        // 设置线的颜色
+        type: "dashed"
+        // 设置虚线样式
+      }
+    },
+    formatter: tooltipFormatter
+  };
+  const chartOptions = (0, import_react.useMemo)(() => {
+    if (seriesData.length > MAX_SECTORS) {
+      import_antd.message.warning(`数据量过大，仅绘制前 ${MAX_SECTORS} 条数据`);
+    }
+    const result = {
+      color: import_constants.chartColors,
+      grid,
+      legend: {
+        ...legend,
+        itemWidth: 13,
+        itemStyle: {
+          opacity: 0
+        },
+        lineStyle: {
+          width: 2,
+          type: "solid"
+        }
+      },
+      xAxis,
+      yAxis,
+      // 前端这里做个限制，防止数据量过大导致性能问题
+      series: seriesData.length > MAX_SECTORS ? seriesData.slice(0, MAX_SECTORS) : seriesData,
+      tooltip
+    };
+    return result;
+  }, [seriesData]);
+  (0, import_react.useEffect)(() => {
+    if (!chartContainerRef.current)
+      return;
+    let chart = chartInstanceRef.current;
+    if (!chart) {
+      chart = echarts.init(chartContainerRef.current);
+      chartInstanceRef.current = chart;
+    }
+    chart == null ? void 0 : chart.setOption(chartOptions, true);
+    return () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, [chartOptions]);
+  (0, import_react.useEffect)(() => {
+    const chartElement = chartContainerRef.current;
+    if (!chartElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      const chart = chartInstanceRef.current;
+      if (chart) {
+        chart.resize();
+      }
+    });
+    resizeObserver.observe(chartElement);
+    return () => {
+      resizeObserver.unobserve(chartElement);
+      resizeObserver.disconnect();
+    };
+  }, [seriesData]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, seriesData.length > 0 ? /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: chartContainerRef,
+      className: import_index_module.default.echarts,
+      style: { width: "100%", height: height || "100%", minHeight: 220 }
+    }
+  ) : /* @__PURE__ */ import_react.default.createElement(import_antd.Empty, { className: import_index_module.default.empty, description: "暂无数据", image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE }));
+};
+var Line_default = (0, import_react.memo)(Line);
+//# sourceMappingURL=Line.js.map

package/dist/lib/business/YkCharts/Line.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/business/YkCharts/Line.tsx"],
+  "sourcesContent": ["import { Empty, message } from 'antd';\nimport Decimal from 'decimal.js';\nimport * as echarts from 'echarts';\nimport { isEmpty } from 'lodash';\nimport React, { type FC, memo, useEffect, useMemo, useRef } from 'react';\nimport ReactDOMServer from 'react-dom/server';\nimport { chartColors } from './constants';\nimport styles from './index.module.less';\nimport type { ColumnConfig, GroupByItem, SqlMetaConfig, TableData } from './typing';\nimport { formatNumber, formatValue, sqlFormat } from './utils';\n\ntype RowItem = {\n  [key: string]: number | string;\n};\n\ntype PageTypes = {\n  count?: number;\n  metric: string[];\n  groupBys: GroupByItem[];\n  tableData: TableData;\n  baseData: RowItem[];\n  columnConfigMap: { [key: string]: ColumnConfig };\n  sqlFormatMap?: { [key: string]: SqlMetaConfig };\n  height?: number;\n};\n\nconst MAX_SECTORS = 500;\n\nconst Line: FC<PageTypes> = ({\n  count, // 指标显示数量\n  metric, // 指标\n  groupBys, // 维度\n  tableData, // 表格数据\n  baseData, // 基础数据\n  columnConfigMap, // 列配置\n  sqlFormatMap, // 列配置(用于SQL可视化中的格式化处理，SQL中的格式化走了另一套逻辑)\n  height,\n}) => {\n  const { x = [], x_field, group_by } = tableData;\n  const chartContainerRef = useRef<HTMLDivElement | null>(null);\n  const chartInstanceRef = useRef<echarts.ECharts | null>(null);\n\n  // 是否只有一个指标\n  const onlyOneMetric = useMemo(() => {\n    return metric.length === 1;\n  }, [metric]);\n\n  // 获取series数据\n  const seriesData = useMemo(() => {\n    if (Array.isArray(groupBys) && groupBys.some((g) => Array.isArray(g.selected) && g.selected.length === 0)) {\n      return [];\n    }\n    // 提前计算 validGroupBys 和 validGroupByKeys\n    const validGroupBys = groupBys.filter((g) => Array.isArray(g.selected) && g.selected.length > 0);\n    const validGroupByKeys = validGroupBys.map((g) => g.key);\n    // 如果没有 baseData，直接返回空数组\n    if (!baseData || baseData.length === 0) {\n      return [];\n    }\n    // 根据 groupBys 的 selected 过滤 baseData\n    // 只保留符合所有 groupBy selected 条件的数据\n    const filteredBaseData = baseData.filter((item) => {\n      return validGroupBys.every((g) => {\n        const itemValue = String(item[g.key] ?? '');\n        return g.selected.includes(itemValue);\n      });\n    });\n    // 建立 baseData 索引 Map，使用复合键 (x_field + validGroupByKeys + category) 作为 key\n    // 格式: `${x_field}|${groupByKey1}|${groupByKey2}|...|${category}`\n    const dataIndexMap = new Map<string, RowItem>();\n    // 从 baseData 中提取实际存在的 groupBy 组合（而不是生成所有可能的组合）\n    // 使用 Set 存储唯一的组合标识符，格式: `${groupByValue1}|${groupByValue2}|...|${metric}`\n    const existingCombinations = new Map<\n      string,\n      {\n        groupByValues: string;\n        category: string;\n        groupByObj: any;\n        name: string;\n      }\n    >();\n\n    // 预计算 name 的生成函数（提取到循环外，避免重复创建函数）\n    const getName = (category: string, groupByObj: any) => {\n      if (group_by && group_by.length > 0) {\n        if (onlyOneMetric) {\n          return group_by.map((g) => groupByObj[g]).join('，');\n        }\n        return [category, ...group_by.map((g) => groupByObj[g])].join('，');\n      }\n      return category;\n    };\n\n    filteredBaseData.forEach((item) => {\n      const groupByValues = validGroupByKeys.map((key) => String(item[key] ?? '')).join('|');\n      // 为每个 metric 建立索引和记录组合\n      metric.forEach((cat) => {\n        const key = `${item[x_field]}|${groupByValues}|${cat}`;\n        dataIndexMap.set(key, item);\n        // 记录实际存在的组合（每个 metric + groupBy 组合只记录一次）\n        const combinationKey = `${groupByValues}|${cat}`;\n        if (!existingCombinations.has(combinationKey)) {\n          // 构建 groupBy 对象，用于后续生成 name\n          const groupByObj: any = { category: cat };\n          validGroupByKeys.forEach((gKey) => {\n            groupByObj[gKey] = item[gKey];\n          });\n          // 预先计算 name，避免在 map 时重复计算\n          const name = getName(cat, groupByObj);\n          existingCombinations.set(combinationKey, {\n            groupByValues,\n            category: cat,\n            groupByObj,\n            name, // 预先计算好的 name\n          });\n        }\n      });\n    });\n\n    // 直接从实际存在的组合生成 series，避免生成数百万个无效组合\n    const result = Array.from(existingCombinations.values()).map(({ groupByValues, category, name }) => {\n      // 预分配数组，避免动态扩容\n      const data = new Array(x.length);\n      for (let i = 0; i < x.length; i++) {\n        const item = x[i];\n        const key = `${item}|${groupByValues}|${category}`;\n        const itemData = dataIndexMap.get(key);\n        data[i] = itemData?.[category];\n      }\n\n      return {\n        name,\n        type: 'line',\n        smooth: true,\n        showSymbol: true,\n        symbol: 'emptyCircle',\n        symbolSize: 0.8,\n        lineStyle: {\n          width: 1.5,\n        },\n        emphasis: {\n          scale: 8,\n        },\n        data,\n        dataSum: data.reduce((sum, val) => {\n          const num = typeof val === 'number' ? val : 0;\n          return sum + (isNaN(num) ? 0 : num);\n        }, 0),\n      };\n    });\n\n    // 按照 data 中数值合计从大到小排序\n    const sortedResult = result.sort((a, b) => {\n      const sumA = a.dataSum;\n      const sumB = b.dataSum;\n      return sumB - sumA; // 从大到小排序\n    });\n    return sortedResult;\n  }, [baseData, metric, groupBys, x, x_field, group_by, onlyOneMetric]);\n\n  // 获取y轴的格式化方式\n  const yAxisFormatter = useMemo(() => {\n    // SQL可视化中的特殊格式化处理\n    if (!isEmpty(sqlFormatMap) && metric.length > 0) {\n      const format = sqlFormatMap[metric[0]]?.format;\n      if (format?.type === 'currency') {\n        return 'number';\n      }\n      if (format?.type === 'percent') {\n        return 'percent';\n      }\n      if (format?.decimals > 0) {\n        return 'decimal';\n      }\n      return 'number';\n    }\n    if (metric.length === 1) {\n      return columnConfigMap[metric[0]]?.format;\n    }\n    return null;\n  }, [metric, columnConfigMap, sqlFormatMap]);\n\n  const grid = {\n    top: 10,\n    left: 5,\n    right: 10,\n    bottom: 40,\n    containLabel: true,\n  };\n  const legend = {\n    bottom: 0,\n    type: 'scroll',\n    itemWidth: 13,\n    itemStyle: {\n      opacity: 0,\n    },\n    lineStyle: {\n      width: 2,\n      type: 'solid',\n    },\n  };\n  const xAxis = {\n    type: 'category',\n    data: x,\n    axisLine: {\n      lineStyle: {\n        color: '#EBEEF4',\n      },\n    },\n    axisLabel: {\n      color: '#9CA4B3',\n      fontSize: 12,\n    },\n    axisTick: {\n      alignWithLabel: true,\n    },\n    boundaryGap: true,\n  };\n  const yAxis = {\n    type: 'value',\n    splitNumber: 4, // 设置Y轴坐标点数量\n    axisLine: {\n      show: true,\n      lineStyle: {\n        color: '#EBEEF4',\n        shadowOffsetY: -10,\n        shadowColor: '#EBEEF4',\n      },\n    },\n    axisLabel: {\n      color: '#999999',\n      fontSize: 12,\n      padding: [0, 0, 0, 5],\n      formatter: (value: number) => {\n        if (yAxisFormatter === 'percent') {\n          return new Decimal(value).mul(100) + '%';\n        }\n        if (yAxisFormatter === 'decimal') {\n          return formatValue(value, yAxisFormatter);\n        }\n        const [result, unit] = formatNumber(value, true);\n        return result + unit;\n      },\n    },\n    splitLine: {\n      lineStyle: {\n        type: [2, 3], // 虚线\n        color: '#E7E7E7', // 背景线颜色\n      },\n    },\n    axisTick: {\n      show: true,\n    },\n  };\n  const tooltipFormatter = (params: any) => {\n    const title = params[0]?.axisValue ?? '';\n    const tooltipDom = (\n      <div className={styles.tooltip}>\n        <div className={styles.title}>\n          <span>{title}</span>\n          <span style={{ float: 'right', paddingRight: 10 }}>\n            {onlyOneMetric && metric.length === 1 ? ' ' + metric[0] : ''}\n          </span>\n        </div>\n        <div className={styles.content}>\n          {params.map((m: any) => {\n            const metricName = onlyOneMetric && metric.length === 1 ? metric[0] : m.seriesName.split('，')[0];\n            const columnConfig = columnConfigMap[metricName];\n            const format = columnConfig?.format ?? 'string'; // 使用可选链和默认值\n            let showValue = format === 'currency' ? formatNumber(m.value, true) : formatValue(m.value, format);\n            // SQL可视化中的特殊格式化处理\n            if (!isEmpty(sqlFormatMap) && metric.length > 0) {\n              const format = sqlFormatMap[metricName]?.format;\n              showValue = sqlFormat(m.value, format);\n            }\n            const showValueText = showValue === '' || showValue[0] === '' ? '-' : showValue;\n            return (\n              <div className={styles.item} key={m.seriesName}>\n                <div className={styles.point} style={{ background: m.color }}></div>\n                <div className={styles.category}>{m.seriesName}</div>\n                <div className={styles.value}>{showValueText}</div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n    return ReactDOMServer.renderToStaticMarkup(tooltipDom);\n  };\n\n  const tooltip = {\n    trigger: 'axis',\n    padding: 0,\n    confine: true,\n    enterable: true,\n    axisPointer: {\n      type: 'line', // 设置悬浮指针为线\n      lineStyle: {\n        color: '#EBEEF4', // 设置线的颜色\n        type: 'dashed', // 设置虚线样式\n      },\n    },\n    formatter: tooltipFormatter,\n  };\n\n  // 图表配置\n  const chartOptions = useMemo(() => {\n    if (seriesData.length > MAX_SECTORS) {\n      message.warning(`数据量过大，仅绘制前 ${MAX_SECTORS} 条数据`);\n    }\n    const result = {\n      color: chartColors,\n      grid,\n      legend: {\n        ...legend,\n        itemWidth: 13,\n        itemStyle: {\n          opacity: 0,\n        },\n        lineStyle: {\n          width: 2,\n          type: 'solid',\n        },\n      },\n      xAxis,\n      yAxis,\n      // 前端这里做个限制，防止数据量过大导致性能问题\n      series: seriesData.length > MAX_SECTORS ? seriesData.slice(0, MAX_SECTORS) : seriesData,\n      tooltip,\n    };\n\n    return result;\n  }, [seriesData]);\n\n  // 初始化图表\n  useEffect(() => {\n    if (!chartContainerRef.current) return;\n    let chart = chartInstanceRef.current;\n    if (!chart) {\n      chart = echarts.init(chartContainerRef.current);\n      chartInstanceRef.current = chart;\n    }\n    chart?.setOption(chartOptions, true);\n    return () => {\n      if (chartInstanceRef.current) {\n        chartInstanceRef.current.dispose();\n        chartInstanceRef.current = null;\n      }\n    };\n  }, [chartOptions]);\n\n  // 监听图表容器大小变化\n  useEffect(() => {\n    const chartElement = chartContainerRef.current;\n    if (!chartElement) return;\n    const resizeObserver = new ResizeObserver(() => {\n      const chart = chartInstanceRef.current;\n      if (chart) {\n        chart.resize();\n      }\n    });\n    resizeObserver.observe(chartElement);\n    return () => {\n      resizeObserver.unobserve(chartElement);\n      resizeObserver.disconnect();\n    };\n  }, [seriesData]);\n\n  return (\n    <>\n      {seriesData.length > 0 ? (\n        <div\n          ref={chartContainerRef}\n          className={styles.echarts}\n          style={{ width: '100%', height: height || '100%', minHeight: 220 }}\n        ></div>\n      ) : (\n        <Empty className={styles.empty} description='暂无数据' image={Empty.PRESENTED_IMAGE_SIMPLE} />\n      )}\n    </>\n  );\n};\n\n// 使用 memo 包裹组件，避免不必要的重新渲染\n// 自定义比较函数，深度比较关键 props\nexport default memo(Line);\n"],
+  "mappings": "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",
+  "names": ["Decimal", "React", "styles", "_a", "format", "ReactDOMServer"]
+}

package/dist/lib/business/YkCharts/Pie.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 组件名称：Pie
+ * 组件描述：一个用于显示饼图的组件
+ * 组件使用场景：在需要显示饼图的场景中使用
+ * 组件参数说明：
+ * - item: 饼图数据
+ * - height: 高度
+ */
+import { type FC } from 'react';
+type PieProps = {
+    item: any;
+    height?: number;
+    legend?: {
+        bottom: number;
+        type: string;
+    };
+};
+declare const Pie: FC<PieProps>;
+export default Pie;

package/dist/lib/business/YkCharts/Pie.js

@@ -0,0 +1,117 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/business/YkCharts/Pie.tsx
+var Pie_exports = {};
+__export(Pie_exports, {
+  default: () => Pie_default
+});
+module.exports = __toCommonJS(Pie_exports);
+var echarts = __toESM(require("echarts"));
+var import_react = __toESM(require("react"));
+var import_constants = require("./constants");
+var import_utils = require("./utils");
+var Pie = ({ item, height, legend }) => {
+  const chartContainerRef = (0, import_react.useRef)(null);
+  const chartInstanceRef = (0, import_react.useRef)(null);
+  const chartOptions = (0, import_react.useMemo)(() => {
+    return {
+      title: [
+        // 饼图中心标题
+        {
+          text: item.name,
+          bottom: "center",
+          left: "49.5%",
+          textAlign: "center",
+          textStyle: {
+            color: "#666",
+            width: 150,
+            fontSize: 14,
+            overflow: "truncate",
+            fontWeight: "normal",
+            textAlign: "center"
+          }
+        }
+      ],
+      ...legend && { legend },
+      color: import_constants.chartColors,
+      tooltip: {
+        trigger: "item",
+        borderColor: "#fff",
+        textStyle: {
+          fontSize: 12
+        },
+        formatter: (params) => {
+          const { name, value, percent, data } = params;
+          const { format } = data;
+          const displayValue = (item.format ? (0, import_utils.sqlFormat)(value, item.format) : (format == null ? void 0 : format.format) === "currency" ? (0, import_utils.formatNumber)(value).join("") : (0, import_utils.formatValue)(value, format.format)) || value;
+          return `${name ? name + "：" : ""} ${displayValue}（${percent}%）`;
+        }
+      },
+      label: {
+        position: "center"
+      },
+      series: [item]
+    };
+  }, [item]);
+  (0, import_react.useEffect)(() => {
+    if (chartContainerRef.current) {
+      let chart = chartInstanceRef.current;
+      if (!chart) {
+        chart = echarts.init(chartContainerRef.current);
+        chartInstanceRef.current = chart;
+      }
+      chart == null ? void 0 : chart.setOption(chartOptions, true);
+      return () => {
+        if (chartInstanceRef.current) {
+          chartInstanceRef.current.dispose();
+          chartInstanceRef.current = null;
+        }
+      };
+    }
+  }, [chartContainerRef.current, chartOptions]);
+  (0, import_react.useEffect)(() => {
+    const chartElement = chartContainerRef.current;
+    if (!chartElement)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      const chart = chartInstanceRef.current;
+      if (chart) {
+        chart.resize();
+      }
+    });
+    resizeObserver.observe(chartElement);
+    return () => {
+      resizeObserver.unobserve(chartElement);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: chartContainerRef, style: { height: height || "100%", width: "100%" } });
+};
+var Pie_default = Pie;
+//# sourceMappingURL=Pie.js.map

package/dist/lib/business/YkCharts/Pie.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/business/YkCharts/Pie.tsx"],
+  "sourcesContent": ["/**\n * 组件名称：Pie\n * 组件描述：一个用于显示饼图的组件\n * 组件使用场景：在需要显示饼图的场景中使用\n * 组件参数说明：\n * - item: 饼图数据\n * - height: 高度\n */\n\nimport * as echarts from 'echarts';\nimport React, { type FC, useEffect, useMemo, useRef } from 'react';\nimport { chartColors } from './constants';\nimport { formatNumber, formatValue, sqlFormat } from './utils';\n\ntype PieProps = {\n  item: any;\n  height?: number;\n  legend?: {\n    bottom: number;\n    type: string;\n  };\n};\n\nconst Pie: FC<PieProps> = ({ item, height, legend }) => {\n  const chartContainerRef = useRef<HTMLDivElement | null>(null);\n  const chartInstanceRef = useRef<echarts.ECharts | null>(null);\n  const chartOptions = useMemo(() => {\n    return {\n      title: [\n        // 饼图中心标题\n        {\n          text: item.name,\n          bottom: 'center',\n          left: '49.5%',\n          textAlign: 'center',\n          textStyle: {\n            color: '#666',\n            width: 150,\n            fontSize: 14,\n            overflow: 'truncate',\n            fontWeight: 'normal',\n            textAlign: 'center',\n          },\n        },\n      ],\n      ...(legend && { legend }),\n      color: chartColors,\n      tooltip: {\n        trigger: 'item',\n        borderColor: '#fff',\n        textStyle: {\n          fontSize: 12,\n        },\n        formatter: (params: any) => {\n          const { name, value, percent, data } = params;\n          const { format } = data;\n          const displayValue =\n            (item.format\n              ? sqlFormat(value, item.format)\n              : format?.format === 'currency'\n                ? formatNumber(value).join('')\n                : formatValue(value, format.format)) || value;\n          return `${name ? name + '：' : ''} ${displayValue}（${percent}%）`;\n        },\n      },\n      label: {\n        position: 'center',\n      },\n      series: [item],\n    };\n  }, [item]);\n\n  useEffect(() => {\n    if (chartContainerRef.current) {\n      let chart = chartInstanceRef.current;\n      if (!chart) {\n        chart = echarts.init(chartContainerRef.current);\n        chartInstanceRef.current = chart;\n      }\n      chart?.setOption(chartOptions, true);\n      return () => {\n        if (chartInstanceRef.current) {\n          chartInstanceRef.current.dispose();\n          chartInstanceRef.current = null;\n        }\n      };\n    }\n  }, [chartContainerRef.current, chartOptions]);\n\n  // 监听图表容器大小变化\n  useEffect(() => {\n    const chartElement = chartContainerRef.current;\n    if (!chartElement) return;\n    const resizeObserver = new ResizeObserver(() => {\n      const chart = chartInstanceRef.current;\n      if (chart) {\n        chart.resize();\n      }\n    });\n    resizeObserver.observe(chartElement);\n    return () => {\n      resizeObserver.unobserve(chartElement);\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  return <div ref={chartContainerRef} style={{ height: height || '100%', width: '100%' }}></div>;\n};\n\nexport default Pie;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,cAAyB;AACzB,mBAA2D;AAC3D,uBAA4B;AAC5B,mBAAqD;AAWrD,IAAM,MAAoB,CAAC,EAAE,MAAM,QAAQ,OAAO,MAAM;AACtD,QAAM,wBAAoB,qBAA8B,IAAI;AAC5D,QAAM,uBAAmB,qBAA+B,IAAI;AAC5D,QAAM,mBAAe,sBAAQ,MAAM;AACjC,WAAO;AAAA,MACL,OAAO;AAAA;AAAA,QAEL;AAAA,UACE,MAAM,KAAK;AAAA,UACX,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,WAAW;AAAA,UACX,WAAW;AAAA,YACT,OAAO;AAAA,YACP,OAAO;AAAA,YACP,UAAU;AAAA,YACV,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,WAAW;AAAA,UACb;AAAA,QACF;AAAA,MACF;AAAA,MACA,GAAI,UAAU,EAAE,OAAO;AAAA,MACvB,OAAO;AAAA,MACP,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aAAa;AAAA,QACb,WAAW;AAAA,UACT,UAAU;AAAA,QACZ;AAAA,QACA,WAAW,CAAC,WAAgB;AAC1B,gBAAM,EAAE,MAAM,OAAO,SAAS,KAAK,IAAI;AACvC,gBAAM,EAAE,OAAO,IAAI;AACnB,gBAAM,gBACH,KAAK,aACF,wBAAU,OAAO,KAAK,MAAM,KAC5B,iCAAQ,YAAW,iBACjB,2BAAa,KAAK,EAAE,KAAK,EAAE,QAC3B,0BAAY,OAAO,OAAO,MAAM,MAAM;AAC9C,iBAAO,GAAG,OAAO,OAAO,MAAM,MAAM,gBAAgB;AAAA,QACtD;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,UAAU;AAAA,MACZ;AAAA,MACA,QAAQ,CAAC,IAAI;AAAA,IACf;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,8BAAU,MAAM;AACd,QAAI,kBAAkB,SAAS;AAC7B,UAAI,QAAQ,iBAAiB;AAC7B,UAAI,CAAC,OAAO;AACV,gBAAgB,aAAK,kBAAkB,OAAO;AAC9C,yBAAiB,UAAU;AAAA,MAC7B;AACA,qCAAO,UAAU,cAAc;AAC/B,aAAO,MAAM;AACX,YAAI,iBAAiB,SAAS;AAC5B,2BAAiB,QAAQ,QAAQ;AACjC,2BAAiB,UAAU;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,kBAAkB,SAAS,YAAY,CAAC;AAG5C,8BAAU,MAAM;AACd,UAAM,eAAe,kBAAkB;AACvC,QAAI,CAAC;AAAc;AACnB,UAAM,iBAAiB,IAAI,eAAe,MAAM;AAC9C,YAAM,QAAQ,iBAAiB;AAC/B,UAAI,OAAO;AACT,cAAM,OAAO;AAAA,MACf;AAAA,IACF,CAAC;AACD,mBAAe,QAAQ,YAAY;AACnC,WAAO,MAAM;AACX,qBAAe,UAAU,YAAY;AACrC,qBAAe,WAAW;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,6BAAAA,QAAA,cAAC,SAAI,KAAK,mBAAmB,OAAO,EAAE,QAAQ,UAAU,QAAQ,OAAO,OAAO,GAAG;AAC1F;AAEA,IAAO,cAAQ;",
+  "names": ["React"]
+}

package/dist/lib/business/YkCharts/PieProperty.d.ts

@@ -0,0 +1,18 @@
+import { type FC } from 'react';
+import type { ColumnConfig, GroupByItem, TableData } from './typing';
+type RowItem = {
+    [key: string]: number | string;
+};
+type PageTypes = {
+    count?: number;
+    metric: string[];
+    groupBys: GroupByItem[];
+    tableData: TableData;
+    baseData: RowItem[];
+    columnConfigMap: {
+        [key: string]: ColumnConfig;
+    };
+    height?: number;
+};
+declare const PieProperty: FC<PageTypes>;
+export default PieProperty;