@platox/pivot-table 0.0.32 → 0.0.34

package/es/dashboard-workbench/components/module-content/chart-module/index.js

@@ -0,0 +1,384 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import Chart from "./base-chart/index.js";
+import { useAppContext } from "../../../context.js";
+import { message, Spin } from "antd";
+import { mapConditionsToPostgrest } from "../utils.js";
+import { t } from "i18next";
+import { getChartConfig, getSerie, getGrid } from "./utils.js";
+import { getTransformValue } from "../../../utils/index.js";
+import { useMemoizedFn, useSize } from "ahooks";
+const ChartModule = ({
+  moduleDataApi,
+  customData,
+  customeStyle,
+  width = 2,
+  height = 2
+}) => {
+  const { globalData } = useAppContext();
+  const [chartData, setChartData] = useState();
+  const [loading, setloading] = useState();
+  const fetchChartData = useMemoizedFn(async () => {
+    var _a, _b;
+    setChartData([]);
+    if (customData) {
+      setloading(true);
+      let queryString = "";
+      const newXAxisField = (customData == null ? void 0 : customData.xAxis) === "tags" ? "tag" : customData == null ? void 0 : customData.xAxis;
+      const newGroupField = (customData == null ? void 0 : customData.groupField) === "tags" ? "tag" : customData == null ? void 0 : customData.groupField;
+      if (!customData.isGroup) {
+        if (customData.yAxis === "recordTotal") {
+          queryString += `select=${newXAxisField},id.count()`;
+        }
+        if (customData.yAxis === "fieldValue" && (customData == null ? void 0 : customData.yAxisField)) {
+          queryString += `select=${newXAxisField},${customData == null ? void 0 : customData.yAxisField}.${customData == null ? void 0 : customData.yAxisFieldType}()`;
+        }
+      } else {
+        if (customData.yAxis === "recordTotal") {
+          queryString += `select=${newXAxisField},${newGroupField},id.count()`;
+        }
+        if (customData.yAxis === "fieldValue" && (customData == null ? void 0 : customData.yAxisField)) {
+          queryString += `select=${newXAxisField},${newGroupField},${customData == null ? void 0 : customData.yAxisField}.${customData == null ? void 0 : customData.yAxisFieldType}()`;
+        }
+      }
+      if ((customData == null ? void 0 : customData.conditionData) && ((_b = (_a = customData == null ? void 0 : customData.conditionData) == null ? void 0 : _a.conditionList) == null ? void 0 : _b.length) > 0) {
+        queryString += `&${mapConditionsToPostgrest(customData == null ? void 0 : customData.conditionData)}`;
+      }
+      if (customData == null ? void 0 : customData.dataSourceId) {
+        moduleDataApi == null ? void 0 : moduleDataApi({
+          id: customData == null ? void 0 : customData.dataSourceId,
+          query: queryString
+        }).then((res) => {
+          if (!res.success) {
+            message.error(res.message);
+            return;
+          }
+          setChartData(res.data);
+        }).finally(() => {
+          setloading(false);
+        });
+      }
+    } else {
+      setChartData([]);
+    }
+  });
+  useEffect(() => {
+    if (customData) {
+      fetchChartData();
+    }
+  }, [
+    customData == null ? void 0 : customData.dataSourceId,
+    customData == null ? void 0 : customData.conditionData,
+    customData == null ? void 0 : customData.xAxis,
+    customData == null ? void 0 : customData.yAxis,
+    customData == null ? void 0 : customData.yAxisField,
+    customData == null ? void 0 : customData.yAxisFieldType,
+    customData == null ? void 0 : customData.isGroup,
+    customData == null ? void 0 : customData.groupField
+  ]);
+  const fieldOptions = useMemo(() => {
+    var _a, _b;
+    let ret = (_b = (_a = globalData == null ? void 0 : globalData.sourceData) == null ? void 0 : _a.find((item) => item.value === (customData == null ? void 0 : customData.dataSourceId))) == null ? void 0 : _b.fields;
+    return ret;
+  }, [globalData, customData == null ? void 0 : customData.dataSourceId]);
+  const [chartOptions, setChartOptions] = useState();
+  const initChartOptions = useMemoizedFn(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    if (customData && chartData && customData.type && chartData.length > 0) {
+      const label = {
+        show: ((_a = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _a.includes("label")) || ((_b = customeStyle == null ? void 0 : customeStyle.xchartOptions) == null ? void 0 : _b.includes("label")),
+        position: "top",
+        formatter: "{c}"
+      };
+      const newXAxisField = (customData == null ? void 0 : customData.xAxis) === "tags" ? "tag" : customData == null ? void 0 : customData.xAxis;
+      const newGroupField = (customData == null ? void 0 : customData.groupField) === "tags" ? "tag" : customData == null ? void 0 : customData.groupField;
+      const isShowLegend = (_c = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _c.includes("legend");
+      const getFieldLabel = (field) => {
+        const fieldData = fieldOptions == null ? void 0 : fieldOptions.find((item) => item.value === field);
+        return fieldData == null ? void 0 : fieldData.label;
+      };
+      const getFieldVal = ({ item, field }) => {
+        return getTransformValue({
+          fieldOptions,
+          val: item[field],
+          field,
+          fieldMap: globalData == null ? void 0 : globalData.fieldMap
+        });
+      };
+      const sortChartData = (data, sortField, sortOrder) => {
+        const orderMultiplier = sortOrder === "asc" ? 1 : -1;
+        return [...data].sort((a, b) => {
+          let valA, valB;
+          switch (sortField) {
+            case "xAxis":
+              valA = getFieldVal({
+                item: a,
+                field: newXAxisField
+              });
+              valB = getFieldVal({
+                item: b,
+                field: newXAxisField
+              });
+              break;
+            case "yAxisField":
+              valA = a[customData == null ? void 0 : customData.yAxisFieldType] || 0;
+              valB = b[customData == null ? void 0 : customData.yAxisFieldType] || 0;
+              break;
+            case "recordValue":
+            default:
+              valA = customData.yAxis === "recordTotal" ? a == null ? void 0 : a.count : a[customData == null ? void 0 : customData.yAxisFieldType] || 0;
+              valB = customData.yAxis === "recordTotal" ? b == null ? void 0 : b.count : b[customData == null ? void 0 : customData.yAxisFieldType] || 0;
+              break;
+          }
+          if (valA > valB) return 1 * orderMultiplier;
+          if (valA < valB) return -1 * orderMultiplier;
+          return 0;
+        });
+      };
+      const valueCounts = {};
+      const valuePercentages = {};
+      const valueGroups = {};
+      const valueGroupPercentages = {};
+      const categories = /* @__PURE__ */ new Set();
+      const stackCategories = /* @__PURE__ */ new Set();
+      chartData.forEach((item) => {
+        const category = getFieldVal({
+          item,
+          field: newXAxisField
+        });
+        categories.add(category);
+        const val = customData.yAxis === "recordTotal" ? item == null ? void 0 : item.count : item[customData == null ? void 0 : customData.yAxisFieldType] || 0;
+        if ((customData == null ? void 0 : customData.isGroup) && (customData == null ? void 0 : customData.groupField)) {
+          const stackCategory = getFieldVal({
+            item,
+            field: newGroupField
+          });
+          const key = category ?? t("unknown");
+          stackCategories.add(stackCategory);
+          if (!valueGroups[stackCategory]) {
+            valueGroups[stackCategory] = {};
+          }
+          valueGroups[stackCategory][key] = val;
+        } else {
+          const key = category ?? t("unknown");
+          valueCounts[key] = val;
+        }
+      });
+      if ((customData == null ? void 0 : customData.isGroup) && (customData == null ? void 0 : customData.groupField)) {
+        const totalPerCategory = {};
+        Object.keys(valueGroups).forEach((stackCategory) => {
+          Object.entries(valueGroups[stackCategory]).forEach(([key, val]) => {
+            totalPerCategory[key] = (totalPerCategory[key] || 0) + val;
+          });
+        });
+        Object.keys(valueGroups).forEach((stackCategory) => {
+          valueGroupPercentages[stackCategory] = {};
+          Object.entries(valueGroups[stackCategory]).forEach(([key, val]) => {
+            const total = totalPerCategory[key] || 1;
+            valueGroupPercentages[stackCategory][key] = val / total * 100;
+          });
+        });
+      } else {
+        Object.entries(valueCounts).forEach(([key, val]) => {
+          const total = val || 1;
+          valuePercentages[key] = val / total * 100;
+        });
+      }
+      if ((customData == null ? void 0 : customData.sortField) && (customData == null ? void 0 : customData.sortOrder)) {
+        const sortedChartData = sortChartData(chartData, customData.sortField, customData.sortOrder);
+        const sortedCategories = sortedChartData.map(
+          (item) => getFieldVal({
+            item,
+            field: newXAxisField
+          })
+        );
+        categories.clear();
+        sortedCategories.forEach((cat) => categories.add(cat));
+      }
+      const labels = Array.from(categories);
+      const stackLabels = Array.from(stackCategories);
+      const chartConfig = getChartConfig(customData.type, labels);
+      const series = [];
+      if ((customData == null ? void 0 : customData.isGroup) && (customData == null ? void 0 : customData.groupField)) {
+        stackLabels.forEach((stackCategory) => {
+          const data = customData.type === "chart-bar-percentage" || customData.type === "chart-strip-bar-percentage" ? labels.map((label2) => {
+            var _a2;
+            return ((_a2 = valueGroupPercentages[stackCategory][label2]) == null ? void 0 : _a2.toFixed(2)) || 0;
+          }) : labels.map((label2) => valueGroups[stackCategory][label2] || 0);
+          series.push(
+            getSerie({
+              type: customData.type,
+              data,
+              label,
+              name: stackCategory,
+              isGroup: customData == null ? void 0 : customData.isGroup,
+              groupField: customData == null ? void 0 : customData.groupField,
+              labels
+            })
+          );
+        });
+      } else {
+        const data = customData.type === "chart-bar-percentage" || customData.type === "chart-strip-bar-percentage" ? labels.map((label2) => {
+          var _a2;
+          return ((_a2 = valuePercentages[label2]) == null ? void 0 : _a2.toFixed(2)) || 0;
+        }) : labels.map((label2) => valueCounts[label2] || 0);
+        series.push(
+          getSerie({
+            type: customData.type,
+            data,
+            label,
+            name: customData.yAxis === "recordTotal" ? t("pb.statisticsText") : getFieldLabel(customData == null ? void 0 : customData.yAxisField),
+            isGroup: customData == null ? void 0 : customData.isGroup,
+            groupField: customData == null ? void 0 : customData.groupField,
+            labels
+          })
+        );
+      }
+      const grids = getGrid({ series, chartConfig, width });
+      const options = {
+        legend: {
+          type: "scroll",
+          left: "center",
+          right: "center",
+          top: "0",
+          show: isShowLegend,
+          itemWidth: 12,
+          itemHeight: 12,
+          data: (series == null ? void 0 : series.map((item) => (item == null ? void 0 : item.name) || "")) || []
+        },
+        grid: {
+          top: grids.top,
+          left: grids.left,
+          right: grids.right,
+          bottom: grids.bottom
+        },
+        graphic: {
+          elements: [
+            {
+              type: "text",
+              left: "center",
+              bottom: "10px",
+              style: {
+                text: (customeStyle == null ? void 0 : customeStyle.xtitle) || "",
+                fill: "#333",
+                // 文本颜色
+                fontSize: 12,
+                fontWeight: "bold"
+              }
+            },
+            {
+              type: "text",
+              left: "10px",
+              top: "center",
+              style: {
+                text: (customeStyle == null ? void 0 : customeStyle.ytitle) || "",
+                fill: "#333",
+                // 文本颜色
+                fontSize: 12,
+                fontWeight: "bold"
+              },
+              rotation: Math.PI / 2
+            }
+          ]
+        },
+        xAxis: {
+          ...chartConfig.xAxis,
+          axisTick: {
+            show: (_d = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _d.includes("axis")
+          },
+          axisLine: {
+            show: ((_e = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _e.includes("axis")) || ((_f = customeStyle == null ? void 0 : customeStyle.xchartOptions) == null ? void 0 : _f.includes("axisLine"))
+          },
+          axisLabel: {
+            show: ((_g = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _g.includes("label")) || ((_h = customeStyle == null ? void 0 : customeStyle.xchartOptions) == null ? void 0 : _h.includes("label")),
+            rotate: grids.axisLabelRotate,
+            // 使标签倾斜，调整为合适的角度
+            // interval: 0, // 保证所有标签都显示
+            formatter: (value) => {
+              return value.length > 15 ? `${value.slice(0, 15)}...` : value;
+            },
+            ...(_i = chartConfig.xAxis) == null ? void 0 : _i.axisLabel
+          },
+          splitLine: {
+            show: (_j = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _j.includes("splitLine")
+            // 不显示x轴网格线
+          }
+        },
+        yAxis: {
+          ...chartConfig.yAxis,
+          axisTick: {
+            show: (_k = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _k.includes("axis")
+          },
+          axisLine: {
+            show: ((_l = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _l.includes("axis")) || ((_m = customeStyle == null ? void 0 : customeStyle.ychartOptions) == null ? void 0 : _m.includes("axisLine"))
+          },
+          axisLabel: {
+            show: ((_n = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _n.includes("label")) || ((_o = customeStyle == null ? void 0 : customeStyle.ychartOptions) == null ? void 0 : _o.includes("label")),
+            formatter: (value) => {
+              return value.length > 15 ? `${value.slice(0, 15)}...` : value;
+            },
+            hideOverlap: true,
+            ...(_p = chartConfig.yAxis) == null ? void 0 : _p.axisLabel
+          },
+          splitLine: {
+            show: (_q = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _q.includes("splitLine")
+            // 不显示x轴网格线
+          }
+        },
+        series,
+        tooltip: {
+          trigger: "item",
+          // 触发方式：鼠标悬浮在坐标轴上
+          axisPointer: {
+            type: "shadow"
+            // 阴影指示器，鼠标悬停时显示柱状图的阴影
+          },
+          appendTo: "body"
+        }
+      };
+      setChartOptions(options);
+    } else {
+      setChartOptions({});
+    }
+  });
+  useEffect(() => {
+    initChartOptions();
+  }, [
+    customData == null ? void 0 : customData.sortField,
+    customData == null ? void 0 : customData.sortOrder,
+    customData == null ? void 0 : customData.type,
+    customData == null ? void 0 : customData.chartOptions,
+    customeStyle,
+    chartData,
+    width,
+    height,
+    fieldOptions
+  ]);
+  const echartRef = useRef();
+  const containerRef = useRef(null);
+  const size = useSize(containerRef);
+  useEffect(() => {
+    var _a;
+    if (!!size) {
+      (_a = echartRef == null ? void 0 : echartRef.current) == null ? void 0 : _a.resize();
+    }
+  }, [size]);
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%" }, ref: containerRef, children: !loading && chartOptions ? /* @__PURE__ */ jsx(Chart, { echartRef, options: chartOptions }) : /* @__PURE__ */ jsx(
+    Spin,
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      spinning: loading
+    }
+  ) });
+};
+const ChartModule$1 = React.memo(ChartModule);
+export {
+  ChartModule$1 as default
+};
+//# sourceMappingURL=index.js.map

package/es/dashboard-workbench/components/module-content/chart-module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../packages/dashboard-workbench/components/module-content/chart-module/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { ModuleDataApi, SourceDataFieldsTypes } from '../../../types'\nimport { ChartCustomeDataTypes } from '../../add-module-modal/add-chart-modal/custome-data'\nimport { ChartCustomeStylesTypes } from '../../add-module-modal/add-chart-modal/custome-styles'\nimport BaseChart from './base-chart'\nimport { useAppContext } from '../../../context'\nimport { message, Spin } from 'antd'\nimport { mapConditionsToPostgrest } from '../utils'\nimport { t } from 'i18next'\nimport { getChartConfig, getGrid, getSerie } from './utils'\nimport { getTransformValue } from '../../../utils'\nimport React from 'react'\nimport { useMemoizedFn, useSize } from 'ahooks'\nimport { EChartsOption } from 'echarts'\n\ninterface ChartModuleProps {\n  customData?: ChartCustomeDataTypes\n  customeStyle?: ChartCustomeStylesTypes\n  onChange?: (val: unknown) => void\n  moduleDataApi?: ModuleDataApi\n  width?: number\n  height?: number\n}\n\nconst ChartModule: React.FC<ChartModuleProps> = ({\n  moduleDataApi,\n  customData,\n  customeStyle,\n  width = 2,\n  height = 2,\n}) => {\n  const { globalData } = useAppContext()\n  /* ============================== split =============================== */\n  const [chartData, setChartData] = useState<any>()\n  const [loading, setloading] = useState<any>()\n  const fetchChartData = useMemoizedFn(async () => {\n    setChartData([])\n    if (customData) {\n      // 调用方法\n      setloading(true)\n      let queryString = ''\n      const newXAxisField = customData?.xAxis === 'tags' ? 'tag' : customData?.xAxis\n      const newGroupField = customData?.groupField === 'tags' ? 'tag' : customData?.groupField\n\n      if (!customData.isGroup) {\n        if (customData.yAxis === 'recordTotal') {\n          queryString += `select=${newXAxisField},id.count()`\n        }\n\n        if (customData.yAxis === 'fieldValue' && customData?.yAxisField) {\n          queryString += `select=${newXAxisField},${customData?.yAxisField}.${customData?.yAxisFieldType}()`\n        }\n      } else {\n        if (customData.yAxis === 'recordTotal') {\n          queryString += `select=${newXAxisField},${newGroupField},id.count()`\n        }\n        if (customData.yAxis === 'fieldValue' && customData?.yAxisField) {\n          queryString += `select=${newXAxisField},${newGroupField},${customData?.yAxisField}.${customData?.yAxisFieldType}()`\n        }\n      }\n\n      if (customData?.conditionData && customData?.conditionData?.conditionList?.length > 0) {\n        queryString += `&${mapConditionsToPostgrest(customData?.conditionData)}`\n      }\n\n      if (customData?.dataSourceId) {\n        moduleDataApi?.({\n          id: customData?.dataSourceId,\n          query: queryString,\n        })\n          .then((res: any) => {\n            if (!res.success) {\n              message.error(res.message)\n              return\n            }\n            setChartData(res.data)\n          })\n          .finally(() => {\n            setloading(false)\n          })\n      }\n    } else {\n      setChartData([])\n    }\n  })\n\n  useEffect(() => {\n    if (customData) {\n      fetchChartData()\n    }\n  }, [\n    customData?.dataSourceId,\n    customData?.conditionData,\n    customData?.xAxis,\n    customData?.yAxis,\n    customData?.yAxisField,\n    customData?.yAxisFieldType,\n    customData?.isGroup,\n    customData?.groupField,\n  ])\n\n  /* ============================== split =============================== */\n  const fieldOptions = useMemo(() => {\n    let ret = globalData?.sourceData?.find(item => item.value === customData?.dataSourceId)?.fields\n    return ret\n  }, [globalData, customData?.dataSourceId])\n\n  const [chartOptions, setChartOptions] = useState<any>()\n\n  const initChartOptions = useMemoizedFn(() => {\n    if (customData && chartData && customData.type && chartData.length > 0) {\n      const label = {\n        show:\n          customData?.chartOptions?.includes('label') ||\n          customeStyle?.xchartOptions?.includes('label'),\n        position: 'top',\n        formatter: '{c}',\n      }\n      const newXAxisField = customData?.xAxis === 'tags' ? 'tag' : customData?.xAxis\n      const newGroupField = customData?.groupField === 'tags' ? 'tag' : customData?.groupField\n      const isShowLegend = customData?.chartOptions?.includes('legend')\n\n      const getFieldLabel = (field: any) => {\n        const fieldData = fieldOptions?.find(item => item.value === field)\n        return fieldData?.label\n      }\n\n      const getFieldVal = ({ item, field }: { item: any; field: any }) => {\n        return getTransformValue({\n          fieldOptions,\n          val: item[field],\n          field: field,\n          fieldMap: globalData?.fieldMap,\n        })\n      }\n\n      const sortChartData = (\n        data: any[],\n        sortField: 'xAxis' | 'yAxisField' | 'recordValue',\n        sortOrder: 'asc' | 'desc'\n      ) => {\n        const orderMultiplier = sortOrder === 'asc' ? 1 : -1\n\n        return [...data].sort((a, b) => {\n          let valA, valB\n\n          switch (sortField) {\n            case 'xAxis':\n              valA = getFieldVal({\n                item: a,\n                field: newXAxisField,\n              })\n              valB = getFieldVal({\n                item: b,\n                field: newXAxisField,\n              })\n              break\n\n            case 'yAxisField':\n              valA = a[customData?.yAxisFieldType] || 0\n              valB = b[customData?.yAxisFieldType] || 0\n              break\n\n            case 'recordValue':\n            default:\n              valA =\n                customData.yAxis === 'recordTotal' ? a?.count : a[customData?.yAxisFieldType] || 0\n              valB =\n                customData.yAxis === 'recordTotal' ? b?.count : b[customData?.yAxisFieldType] || 0\n              break\n          }\n\n          if (valA > valB) return 1 * orderMultiplier\n          if (valA < valB) return -1 * orderMultiplier\n          return 0\n        })\n      }\n\n      const valueCounts: Record<string, any> = {}\n      const valuePercentages: Record<string, any> = {}\n      const valueGroups: Record<string, Record<string, number>> = {}\n      const valueGroupPercentages: Record<string, Record<string, number>> = {}\n      const categories = new Set<string>()\n      const stackCategories = new Set<string>()\n\n      // 数据分组处理\n      chartData.forEach((item: any) => {\n        const category = getFieldVal({\n          item: item,\n          field: newXAxisField,\n        })\n\n        categories.add(category)\n\n        const val =\n          customData.yAxis === 'recordTotal' ? item?.count : item[customData?.yAxisFieldType] || 0\n\n        if (customData?.isGroup && customData?.groupField) {\n          const stackCategory = getFieldVal({\n            item: item,\n            field: newGroupField,\n          })\n\n          const key = category ?? t('unknown')\n\n          stackCategories.add(stackCategory)\n\n          if (!valueGroups[stackCategory]) {\n            valueGroups[stackCategory] = {}\n          }\n          valueGroups[stackCategory][key] = val\n        } else {\n          const key = category ?? t('unknown')\n          valueCounts[key] = val\n        }\n      })\n\n      if (customData?.isGroup && customData?.groupField) {\n        const totalPerCategory: Record<string, number> = {}\n\n        Object.keys(valueGroups).forEach(stackCategory => {\n          Object.entries(valueGroups[stackCategory]).forEach(([key, val]) => {\n            totalPerCategory[key] = (totalPerCategory[key] || 0) + val\n          })\n        })\n\n        Object.keys(valueGroups).forEach(stackCategory => {\n          valueGroupPercentages[stackCategory] = {}\n          Object.entries(valueGroups[stackCategory]).forEach(([key, val]) => {\n            const total = totalPerCategory[key] || 1 // 防止除以 0\n            valueGroupPercentages[stackCategory][key] = (val / total) * 100\n          })\n        })\n      } else {\n        Object.entries(valueCounts).forEach(([key, val]) => {\n          const total = val || 1 // 防止除以 0\n          valuePercentages[key] = (val / total) * 100\n        })\n      }\n\n      if (customData?.sortField && customData?.sortOrder) {\n        const sortedChartData = sortChartData(chartData, customData.sortField, customData.sortOrder)\n\n        const sortedCategories = sortedChartData.map(item =>\n          getFieldVal({\n            item,\n            field: newXAxisField,\n          })\n        )\n        categories.clear()\n        sortedCategories.forEach(cat => categories.add(cat))\n      }\n\n      const labels = Array.from(categories)\n      const stackLabels = Array.from(stackCategories)\n\n      const chartConfig: any = getChartConfig(customData.type, labels)\n\n      const series = []\n      if (customData?.isGroup && customData?.groupField) {\n        stackLabels.forEach(stackCategory => {\n          const data =\n            customData.type === 'chart-bar-percentage' ||\n            customData.type === 'chart-strip-bar-percentage'\n              ? labels.map(label => valueGroupPercentages[stackCategory][label]?.toFixed(2) || 0)\n              : labels.map(label => valueGroups[stackCategory][label] || 0)\n          series.push(\n            getSerie({\n              type: customData.type,\n              data,\n              label,\n              name: stackCategory,\n              isGroup: customData?.isGroup,\n              groupField: customData?.groupField,\n              labels,\n            })\n          )\n        })\n      } else {\n        const data =\n          customData.type === 'chart-bar-percentage' ||\n          customData.type === 'chart-strip-bar-percentage'\n            ? labels.map(label => valuePercentages[label]?.toFixed(2) || 0) // 使用百分比数据\n            : labels.map(label => valueCounts[label] || 0)\n        series.push(\n          getSerie({\n            type: customData.type,\n            data,\n            label,\n            name:\n              customData.yAxis === 'recordTotal'\n                ? t('pb.statisticsText')\n                : getFieldLabel(customData?.yAxisField),\n            isGroup: customData?.isGroup,\n            groupField: customData?.groupField,\n            labels,\n          })\n        )\n      }\n\n      const grids = getGrid({ series, chartConfig, width })\n\n      const options: EChartsOption = {\n        legend: {\n          type: 'scroll',\n\n          left: 'center',\n          right: 'center',\n          top: '0',\n          show: isShowLegend,\n          itemWidth: 12,\n          itemHeight: 12,\n          data: series?.map((item: any) => item?.name || '') || [],\n        },\n        grid: {\n          top: grids.top,\n          left: grids.left,\n          right: grids.right,\n          bottom: grids.bottom,\n        },\n        graphic: {\n          elements: [\n            {\n              type: 'text',\n              left: 'center',\n              bottom: '10px',\n              style: {\n                text: customeStyle?.xtitle || '',\n                fill: '#333', // 文本颜色\n                fontSize: 12,\n                fontWeight: 'bold',\n              },\n            },\n            {\n              type: 'text',\n              left: '10px',\n              top: 'center',\n              style: {\n                text: customeStyle?.ytitle || '',\n                fill: '#333', // 文本颜色\n                fontSize: 12,\n                fontWeight: 'bold',\n              },\n              rotation: Math.PI / 2,\n            },\n          ],\n        },\n        xAxis: {\n          ...chartConfig.xAxis,\n          axisTick: {\n            show: customData?.chartOptions?.includes('axis'),\n          },\n          axisLine: {\n            show:\n              customData?.chartOptions?.includes('axis') ||\n              customeStyle?.xchartOptions?.includes('axisLine'),\n          },\n          axisLabel: {\n            show:\n              customData?.chartOptions?.includes('label') ||\n              customeStyle?.xchartOptions?.includes('label'),\n            rotate: grids.axisLabelRotate, // 使标签倾斜，调整为合适的角度\n            // interval: 0, // 保证所有标签都显示\n            formatter: (value: string) => {\n              return value.length > 15 ? `${value.slice(0, 15)}...` : value // 截断并添加 \"...\"\n            },\n            ...chartConfig.xAxis?.axisLabel,\n          },\n          splitLine: {\n            show: customData?.chartOptions?.includes('splitLine'), // 不显示x轴网格线\n          },\n        },\n        yAxis: {\n          ...chartConfig.yAxis,\n          axisTick: {\n            show: customData?.chartOptions?.includes('axis'),\n          },\n          axisLine: {\n            show:\n              customData?.chartOptions?.includes('axis') ||\n              customeStyle?.ychartOptions?.includes('axisLine'),\n          },\n          axisLabel: {\n            show:\n              customData?.chartOptions?.includes('label') ||\n              customeStyle?.ychartOptions?.includes('label'),\n            formatter: (value: string) => {\n              return value.length > 15 ? `${value.slice(0, 15)}...` : value // 截断并添加 \"...\"\n            },\n            hideOverlap: true,\n            ...chartConfig.yAxis?.axisLabel,\n          },\n          splitLine: {\n            show: customData?.chartOptions?.includes('splitLine'), // 不显示x轴网格线\n          },\n        },\n        series: series,\n        tooltip: {\n          trigger: 'item', // 触发方式：鼠标悬浮在坐标轴上\n          axisPointer: {\n            type: 'shadow', // 阴影指示器，鼠标悬停时显示柱状图的阴影\n          },\n          appendTo: 'body',\n        },\n      }\n      setChartOptions(options)\n    } else {\n      setChartOptions({})\n    }\n  })\n\n  useEffect(() => {\n    initChartOptions()\n  }, [\n    customData?.sortField,\n    customData?.sortOrder,\n    customData?.type,\n    customData?.chartOptions,\n    customeStyle,\n    chartData,\n    width,\n    height,\n    fieldOptions,\n  ])\n\n  /* ============================== split =============================== */\n  const echartRef = useRef<any>()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const size = useSize(containerRef)\n\n  useEffect(() => {\n    if (!!size) {\n      echartRef?.current?.resize()\n    }\n  }, [size])\n\n  return (\n    <div style={{ width: '100%', height: '100%' }} ref={containerRef}>\n      {!loading && chartOptions ? (\n        <BaseChart echartRef={echartRef} options={chartOptions} />\n      ) : (\n        <Spin\n          style={{\n            width: '100%',\n            height: '100%',\n            display: 'flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n          }}\n          spinning={loading}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(ChartModule)\n"],"names":["label","_a","BaseChart"],"mappings":"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"}

package/es/dashboard-workbench/components/module-content/chart-module/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const getChartConfig: (type: any, categories: any) => any;
+export declare const getSerie: ({ type, data, label, name, isGroup, groupField, labels }: any) => any;
+export declare const getGrid: ({ series, chartConfig, width }: any) => {
+    top: string;
+    left: string;
+    right: string;
+    bottom: string;
+    axisLabelRotate: number;
+};

package/es/dashboard-workbench/components/module-content/chart-module/utils.js

@@ -0,0 +1,200 @@
+const getChartConfig = (type, categories) => {
+  const optionsConfig = {
+    "chart-bar": {
+      xAxis: {
+        type: "category",
+        data: categories
+      },
+      yAxis: {
+        type: "value"
+      }
+    },
+    "chart-bar-pile": {
+      xAxis: { type: "category", data: categories },
+      yAxis: { type: "value" }
+    },
+    "chart-bar-percentage": {
+      xAxis: { type: "category", data: categories },
+      yAxis: {
+        type: "value",
+        max: 100,
+        axisLabel: {
+          formatter: "{value} %"
+          // 在值后面添加 'kg'
+        }
+      }
+    },
+    "chart-line": {
+      xAxis: { type: "category", data: categories },
+      yAxis: { type: "value" }
+    },
+    "chart-line-smooth": {
+      xAxis: { type: "category", data: categories },
+      yAxis: { type: "value" }
+    },
+    "chart-pie": {
+      xAxis: { show: false },
+      yAxis: { show: false }
+    },
+    "chart-pie-circular": {
+      xAxis: { show: false },
+      yAxis: { show: false }
+    },
+    "chart-strip-bar": {
+      xAxis: { type: "value" },
+      yAxis: { type: "category", data: categories }
+    },
+    "chart-strip-bar-pile": {
+      xAxis: { type: "value" },
+      yAxis: { type: "category", data: categories }
+    },
+    "chart-strip-bar-percentage": {
+      xAxis: {
+        type: "value",
+        max: 100,
+        axisLabel: {
+          formatter: "{value} %"
+          // 在值后面添加 'kg'
+        }
+      },
+      yAxis: {
+        type: "category",
+        data: categories
+      }
+    }
+  };
+  return optionsConfig[type];
+};
+const getSerie = ({ type, data, label, name, isGroup, groupField, labels }) => {
+  let serie;
+  if (type === "chart-pie") {
+    serie = {
+      data: data.map((item, idx) => ({
+        value: item,
+        name: labels[idx]
+      })),
+      name,
+      type: "pie",
+      radius: "50%",
+      label: {
+        ...label,
+        position: "outside"
+      },
+      labelLine: {
+        normal: {
+          show: true
+        }
+      }
+    };
+  } else if (type === "chart-pie-circular") {
+    serie = {
+      data: data.map((item, idx) => ({
+        value: item,
+        name: labels[idx]
+      })),
+      type: "pie",
+      name,
+      radius: ["40%", "70%"],
+      label: {
+        ...label,
+        position: "outside"
+      },
+      labelLine: {
+        normal: {
+          show: true
+        }
+      }
+    };
+  } else if (type === "chart-line") {
+    serie = {
+      data,
+      name,
+      type: "line",
+      label
+    };
+  } else if (type === "chart-line-smooth") {
+    serie = {
+      data,
+      name,
+      type: "line",
+      smooth: true,
+      // 这里设置平滑曲线
+      label
+    };
+  } else {
+    serie = {
+      data,
+      name,
+      type: "bar",
+      label
+    };
+  }
+  if (type === "chart-bar-percentage" || type === "chart-bar-pile" || type === "chart-strip-bar-pile" || type === "chart-strip-bar-percentage") {
+    if (isGroup && groupField) {
+      serie.stack = groupField;
+    }
+  }
+  return serie;
+};
+const getGrid = ({ series, chartConfig, width }) => {
+  var _a, _b, _c, _d;
+  const maxSeriesDataStrLen = Math.max(
+    ...(series ?? []).flatMap(
+      (item) => item.data.map((value) => String(value).length)
+    ) || []
+  );
+  const maxSeriesDataLen = Math.max(
+    ...(series == null ? void 0 : series.flatMap((item) => item.data.length)) || []
+  );
+  let labelAxis = ((_a = chartConfig == null ? void 0 : chartConfig.xAxis) == null ? void 0 : _a.type) === "category" ? "xAxis" : "yAxis";
+  let labelData = labelAxis === "xAxis" ? (_b = chartConfig == null ? void 0 : chartConfig.xAxis) == null ? void 0 : _b.data : (_c = chartConfig == null ? void 0 : chartConfig.yAxis) == null ? void 0 : _c.data;
+  const maxLabelLength = (_d = labelData ?? []) == null ? void 0 : _d.reduce((maxLength, value) => {
+    const length = String(value).length;
+    return Math.max(maxLength, length);
+  }, 0);
+  const fontSize = 9;
+  const gap = 12;
+  let top = 45;
+  let left = 0;
+  let right = gap;
+  let bottom = 0;
+  let axisRtateX = 0;
+  if (labelAxis == "xAxis") {
+    const labelUnitMapping = {
+      ["45"]: fontSize * 0.8,
+      // 根号2
+      ["90"]: fontSize,
+      ["0"]: fontSize
+    };
+    if (maxSeriesDataLen > 3) {
+      if (maxLabelLength >= 15) {
+        axisRtateX = 90;
+      }
+      if (maxLabelLength > 5) {
+        axisRtateX = 45;
+      }
+      if (width < 3) {
+        axisRtateX = 90;
+      }
+    }
+    const labelUnit = labelUnitMapping[`${axisRtateX}`];
+    bottom = labelUnit * (axisRtateX == 0 ? 1 : Math.min(maxLabelLength, 18)) + gap;
+    left = Math.min(maxSeriesDataStrLen, 18) * fontSize + gap;
+  } else {
+    bottom = Math.min(maxSeriesDataStrLen, 18) * fontSize + gap;
+    left = Math.min(maxLabelLength, 18) * fontSize + gap;
+  }
+  return {
+    top: top + "px",
+    left: Math.max(left, 40) + "px",
+    right: right + "px",
+    bottom: Math.max(bottom, 40) + "px",
+    axisLabelRotate: axisRtateX
+  };
+};
+export {
+  getChartConfig,
+  getGrid,
+  getSerie
+};
+//# sourceMappingURL=utils.js.map

package/es/dashboard-workbench/components/module-content/chart-module/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../packages/dashboard-workbench/components/module-content/chart-module/utils.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const getChartConfig = (type: any, categories: any): any => {\n  const optionsConfig: any = {\n    'chart-bar': {\n      xAxis: {\n        type: 'category',\n        data: categories,\n      },\n      yAxis: {\n        type: 'value',\n      },\n    },\n    'chart-bar-pile': {\n      xAxis: { type: 'category', data: categories },\n      yAxis: { type: 'value' },\n    },\n    'chart-bar-percentage': {\n      xAxis: { type: 'category', data: categories },\n      yAxis: {\n        type: 'value',\n        max: 100,\n        axisLabel: {\n          formatter: '{value} %', // 在值后面添加 'kg'\n        },\n      },\n    },\n    'chart-line': {\n      xAxis: { type: 'category', data: categories },\n      yAxis: { type: 'value' },\n    },\n    'chart-line-smooth': {\n      xAxis: { type: 'category', data: categories },\n      yAxis: { type: 'value' },\n    },\n    'chart-pie': {\n      xAxis: { show: false },\n      yAxis: { show: false },\n    },\n    'chart-pie-circular': {\n      xAxis: { show: false },\n      yAxis: { show: false },\n    },\n    'chart-strip-bar': {\n      xAxis: { type: 'value' },\n      yAxis: { type: 'category', data: categories },\n    },\n    'chart-strip-bar-pile': {\n      xAxis: { type: 'value' },\n      yAxis: { type: 'category', data: categories },\n    },\n    'chart-strip-bar-percentage': {\n      xAxis: {\n        type: 'value',\n        max: 100,\n        axisLabel: {\n          formatter: '{value} %', // 在值后面添加 'kg'\n        },\n      },\n      yAxis: {\n        type: 'category',\n        data: categories,\n      },\n    },\n  }\n\n  return optionsConfig[type]\n}\n\nexport const getSerie = ({ type, data, label, name, isGroup, groupField, labels }: any) => {\n  let serie: any\n  if (type === 'chart-pie') {\n    serie = {\n      data: data.map((item: number, idx: number) => ({\n        value: item,\n        name: labels[idx],\n      })),\n      name,\n      type: 'pie',\n      radius: '50%',\n      label: {\n        ...label,\n        position: 'outside',\n      },\n      labelLine: {\n        normal: {\n          show: true,\n        },\n      },\n    }\n  } else if (type === 'chart-pie-circular') {\n    serie = {\n      data: data.map((item: number, idx: number) => ({\n        value: item,\n        name: labels[idx],\n      })),\n      type: 'pie',\n      name,\n      radius: ['40%', '70%'],\n      label: {\n        ...label,\n        position: 'outside',\n      },\n      labelLine: {\n        normal: {\n          show: true,\n        },\n      },\n    }\n  } else if (type === 'chart-line') {\n    serie = {\n      data: data,\n      name,\n      type: 'line',\n      label,\n    }\n  } else if (type === 'chart-line-smooth') {\n    serie = {\n      data: data,\n      name,\n      type: 'line',\n      smooth: true, // 这里设置平滑曲线\n      label,\n    }\n  } else {\n    serie = {\n      data: data,\n      name,\n      type: 'bar',\n      label,\n    }\n  }\n\n  if (\n    type === 'chart-bar-percentage' ||\n    type === 'chart-bar-pile' ||\n    type === 'chart-strip-bar-pile' ||\n    type === 'chart-strip-bar-percentage'\n  ) {\n    if (isGroup && groupField) {\n      serie.stack = groupField\n    }\n  }\n\n  return serie\n}\n\n// see https://github.com/apache/echarts/pull/19348\n// see https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Concepts/Axes\n// 合并后弃用\nexport const getGrid = ({ series, chartConfig, width }: any) => {\n  interface SeriesItem {\n    name: string\n    data: number[]\n  }\n\n  // 获取数据的个数和长度\n  const maxSeriesDataStrLen = Math.max(\n    ...(((series as SeriesItem[]) ?? []).flatMap(item =>\n      item.data.map(value => String(value).length)\n    ) || [])\n  )\n  const maxSeriesDataLen = Math.max(\n    ...((series as SeriesItem[])?.flatMap(item => item.data.length) || [])\n  )\n\n  // 获取标签的长度\n  let labelAxis = chartConfig?.xAxis?.type === 'category' ? 'xAxis' : 'yAxis'\n  let labelData: any[] = labelAxis === 'xAxis' ? chartConfig?.xAxis?.data : chartConfig?.yAxis?.data\n\n  const maxLabelLength = (labelData ?? [])?.reduce((maxLength, value) => {\n    const length = String(value).length // 转换为字符串并计算长度\n    return Math.max(maxLength, length)\n  }, 0)\n\n  /* ============================== split =============================== */\n  const fontSize = 9\n  const gap = 12\n\n  let top = 45 //固定\n  // let left = Math.min(maxValueLength, 18) * fontSize + gap\n  let left = 0\n  let right = gap\n  let bottom = 0\n  let axisRtateX = 0\n\n  if (labelAxis == 'xAxis') {\n    // 自动旋转\n    const labelUnitMapping = {\n      ['45']: fontSize * 0.8, // 根号2\n      ['90']: fontSize,\n      ['0']: fontSize,\n    }\n    if (maxSeriesDataLen > 3) {\n      if (maxLabelLength >= 15) {\n        axisRtateX = 90\n      }\n      if (maxLabelLength > 5) {\n        axisRtateX = 45\n      }\n      if (width < 3) {\n        axisRtateX = 90\n      }\n    }\n\n    const labelUnit = labelUnitMapping[`${axisRtateX}` as keyof typeof labelUnitMapping]\n    bottom = labelUnit * (axisRtateX == 0 ? 1 : Math.min(maxLabelLength, 18)) + gap\n    left = Math.min(maxSeriesDataStrLen, 18) * fontSize + gap\n  } else {\n    bottom = Math.min(maxSeriesDataStrLen, 18) * fontSize + gap\n    left = Math.min(maxLabelLength, 18) * fontSize + gap\n  }\n\n  return {\n    top: top + 'px',\n    left: Math.max(left, 40) + 'px',\n    right: right + 'px',\n    bottom: Math.max(bottom, 40) + 'px',\n    axisLabelRotate: axisRtateX,\n  }\n}\n"],"names":[],"mappings":"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"}