@platox/pivot-table 0.0.35 → 0.0.37

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

@@ -1,14 +1,15 @@
 import { jsxs, 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 React, { useMemo, useState, useRef, useEffect } from "react";
 import { message, Spin } from "antd";
-import { mapConditionsToPostgrest } from "../utils.js";
+import { useMemoizedFn, useDebounceEffect, useSize } from "ahooks";
 import { t } from "i18next";
-import { getChartConfig, getSerie, getGrid } from "./utils.js";
+import { useAppContext } from "../../../context.js";
 import { getTransformValue } from "../../../utils/index.js";
-import { useMemoizedFn, useSize } from "ahooks";
+import { ChartType } from "../../add-module-modal/add-chart-modal/interface.js";
+import { mapConditionsToPostgrest } from "../utils.js";
+import Chart from "./base-chart/index.js";
 import { Empty } from "./Empty.js";
+import { getChartConfig, getSerie, getGrid } from "./utils.js";
 const ChartModule = ({
   moduleDataApi,
   customData,
@@ -16,7 +17,13 @@ const ChartModule = ({
   width = 2,
   height = 2
 }) => {
-  const { globalData } = useAppContext();
+  const { globalData, globalFilterCondition } = useAppContext();
+  let matchGlobalFilterCondition = useMemo(() => {
+    let matchGlobalFilterCondition2 = globalFilterCondition == null ? void 0 : globalFilterCondition.find(
+      (item) => (item == null ? void 0 : item.dataSourceId) === (customData == null ? void 0 : customData.dataSourceId)
+    );
+    return matchGlobalFilterCondition2;
+  }, [globalFilterCondition, customData == null ? void 0 : customData.dataSourceId]);
   const [chartData, setChartData] = useState();
   const [loading, setloading] = useState();
   const fetchChartData = useMemoizedFn(async () => {
@@ -45,6 +52,9 @@ const ChartModule = ({
       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 (matchGlobalFilterCondition) {
+        queryString += `&${mapConditionsToPostgrest(matchGlobalFilterCondition)}`;
+      }
       if (customData == null ? void 0 : customData.dataSourceId) {
         moduleDataApi == null ? void 0 : moduleDataApi({
           id: customData == null ? void 0 : customData.dataSourceId,
@@ -63,116 +73,88 @@ const ChartModule = ({
       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
-  ]);
+  useDebounceEffect(
+    () => {
+      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,
+      matchGlobalFilterCondition
+    ],
+    { wait: 60 }
+  );
   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;
+  const chartOptions = useMemo(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     if (customData && chartData && customData.type && chartData.length > 0) {
-      const formatter = (data) => {
-        if ((customData == null ? void 0 : customData.isGroup) && (customData == null ? void 0 : customData.groupField)) {
-          return (data == null ? void 0 : data.value) == 0 ? "" : `${data == null ? void 0 : data.value}`;
-        } else {
-          return `${data == null ? void 0 : data.value}`;
-        }
-      };
-      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}',
-        formatter
-      };
-      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 }) => {
+      const getFieldVal = ({
+        item,
+        field,
+        timeGroupInterval
+      }) => {
         return getTransformValue({
           fieldOptions,
           val: item[field],
           field,
-          fieldMap: globalData == null ? void 0 : globalData.fieldMap
+          fieldMap: globalData == null ? void 0 : globalData.fieldMap,
+          timeGroupInterval
         });
       };
-      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 getFieldLabel = (field) => {
+        const fieldData = fieldOptions == null ? void 0 : fieldOptions.find((item) => item.value === field);
+        return fieldData == null ? void 0 : fieldData.label;
       };
-      const valueCounts = {};
-      const valuePercentages = {};
-      const valueGroups = {};
-      const valueGroupPercentages = {};
+      const isTimeField = (fieldName) => {
+        var _a2;
+        return ((_a2 = fieldOptions == null ? void 0 : fieldOptions.find((item) => item.value === fieldName)) == null ? void 0 : _a2.type) === "timestamp";
+      };
+      const mapping = {
+        tags: "tag"
+        //后端数据名不一致
+      };
+      const newXAxisField = mapping[customData == null ? void 0 : customData.xAxis] ?? (customData == null ? void 0 : customData.xAxis);
+      const newGroupField = mapping[customData == null ? void 0 : customData.groupField] ?? (customData == null ? void 0 : customData.groupField);
       const categories = /* @__PURE__ */ new Set();
       const stackCategories = /* @__PURE__ */ new Set();
+      const valueGroups = {};
+      const valueCounts = {};
       chartData.forEach((item) => {
         const category = getFieldVal({
           item,
-          field: newXAxisField
+          field: newXAxisField,
+          timeGroupInterval: customData == null ? void 0 : customData.timeGroupInterval
         });
-        categories.add(category);
         const val = customData.yAxis === "recordTotal" ? item == null ? void 0 : item.count : item[customData == null ? void 0 : customData.yAxisFieldType] || 0;
+        const key = category ?? t("unknown");
+        valueCounts[key] = val;
         if ((customData == null ? void 0 : customData.isGroup) && (customData == null ? void 0 : customData.groupField)) {
           const stackCategory = getFieldVal({
             item,
             field: newGroupField
           });
-          const key = category ?? t("unknown");
+          const key2 = category ?? t("unknown");
           stackCategories.add(stackCategory);
           if (!valueGroups[stackCategory]) {
             valueGroups[stackCategory] = {};
           }
-          valueGroups[stackCategory][key] = val;
-        } else {
-          const key = category ?? t("unknown");
-          valueCounts[key] = val;
+          valueGroups[stackCategory][key2] = val;
         }
       });
+      const valuePercentages = {};
+      const valueGroupPercentages = {};
       if ((customData == null ? void 0 : customData.isGroup) && (customData == null ? void 0 : customData.groupField)) {
         const totalPerCategory = {};
         Object.keys(valueGroups).forEach((stackCategory) => {
@@ -193,57 +175,170 @@ const ChartModule = ({
           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));
+      let sortField = (customData == null ? void 0 : customData.sortField) ?? "xAxis";
+      let sortOrder = (customData == null ? void 0 : customData.sortOrder) ?? "asc";
+      const sortedChartData = [...chartData].sort((a, b) => {
+        let valA, valB;
+        switch (sortField) {
+          case "xAxis":
+            valA = getFieldVal({
+              item: a,
+              field: newXAxisField,
+              timeGroupInterval: customData == null ? void 0 : customData.timeGroupInterval
+            });
+            valB = getFieldVal({
+              item: b,
+              field: newXAxisField,
+              timeGroupInterval: customData == null ? void 0 : customData.timeGroupInterval
+            });
+            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;
+        }
+        const orderMultiplier = sortOrder === "asc" ? 1 : -1;
+        if (valA > valB) return 1 * orderMultiplier;
+        if (valA < valB) return -1 * orderMultiplier;
+        return 0;
+      });
+      const sortedCategories = sortedChartData.map(
+        (item) => getFieldVal({
+          item,
+          field: newXAxisField,
+          timeGroupInterval: customData == null ? void 0 : customData.timeGroupInterval
+        })
+      );
+      categories.clear();
+      sortedCategories.forEach((cat) => categories.add(cat));
+      if (!isTimeField(customData == null ? void 0 : customData.xAxis) && customData.displayRange !== "ALL" && !!customData.displayRange) {
+        let sortedByCountCategories = Array.from(categories).sort((a, b) => {
+          return valueCounts[b] - valueCounts[a];
+        });
+        let ableCategories = [];
+        let [pos, count] = customData.displayRange.split("_");
+        if (pos === "TOP") {
+          ableCategories = sortedByCountCategories.slice(0, Number(count));
+        } else {
+          ableCategories = sortedByCountCategories.slice(-Number(count));
+        }
+        Array.from(categories).forEach((item) => {
+          if (!ableCategories.includes(item)) {
+            categories.delete(item);
+          }
+          return item;
+        });
       }
+      const formatter = (data) => {
+        if ((customData == null ? void 0 : customData.isGroup) && (customData == null ? void 0 : customData.groupField)) {
+          return (data == null ? void 0 : data.value) == 0 ? "" : `${data == null ? void 0 : data.value}`;
+        } else {
+          return `${data == null ? void 0 : data.value}`;
+        }
+      };
+      const label = {
+        show: (_a = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _a.includes("label"),
+        position: "top",
+        formatter
+      };
       const labels = Array.from(categories);
       const stackLabels = Array.from(stackCategories);
-      const chartConfig = getChartConfig(customData.type, labels);
       const series = [];
+      const chartConfig = getChartConfig({
+        type: customData == null ? void 0 : customData.type,
+        categories: labels
+      });
       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;
+          var _a2, _b2;
+          const data = ["chart-bar-percentage", "chart-strip-bar-percentage"].includes(
+            customData.type
+          ) ? labels.map((label2) => {
+            var _a3;
+            return ((_a3 = valueGroupPercentages[stackCategory][label2]) == null ? void 0 : _a3.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,
+          let type = customData.type;
+          let yAxisPos = "left";
+          if (type == ChartType["chartCombination"]) {
+            let matchCombinationChartConfig = ((customData == null ? void 0 : customData.groupFieldConfig) ?? []).find(
+              (item) => getFieldVal({
+                item: {
+                  [newGroupField]: item == null ? void 0 : item.value
+                },
+                field: newGroupField
+              }) == stackCategory
+            );
+            type = ((_a2 = matchCombinationChartConfig == null ? void 0 : matchCombinationChartConfig.config) == null ? void 0 : _a2.chartType) ?? ChartType["ChartBar"];
+            yAxisPos = ((_b2 = matchCombinationChartConfig == null ? void 0 : matchCombinationChartConfig.config) == null ? void 0 : _b2.yAxisPos) ?? "left";
+          }
+          let seriesItem = getSerie({
+            type,
             data,
             label,
-            name: customData.yAxis === "recordTotal" ? t("pb.statisticsText") : getFieldLabel(customData == null ? void 0 : customData.yAxisField),
+            name: stackCategory,
             isGroup: customData == null ? void 0 : customData.isGroup,
             groupField: customData == null ? void 0 : customData.groupField,
             labels
-          })
-        );
+          });
+          seriesItem.yAxisIndex = yAxisPos == "left" ? 0 : 1;
+          series.push(seriesItem);
+        });
+      } else {
+        const data = ["chart-bar-percentage", "chart-strip-bar-percentage"].includes(
+          customData.type
+        ) ? labels.map((label2) => {
+          var _a2;
+          return ((_a2 = valuePercentages[label2]) == null ? void 0 : _a2.toFixed(2)) || 0;
+        }) : labels.map((label2) => valueCounts[label2] || 0);
+        let type = customData.type;
+        let yAxisPos = "left";
+        if (type == ChartType["chartCombination"]) {
+          type = ((_b = customData == null ? void 0 : customData.yAxisFieldConfig) == null ? void 0 : _b.chartType) ?? ChartType["ChartBar"];
+        } else {
+          yAxisPos = ((_c = customData == null ? void 0 : customData.yAxisFieldConfig) == null ? void 0 : _c.yAxisPos) ?? "left";
+        }
+        let seriesItem = 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
+        });
+        seriesItem.yAxisIndex = yAxisPos == "left" ? 0 : 1;
+        series.push(seriesItem);
       }
-      const grids = getGrid({ series, chartConfig, width });
+      const grids = getGrid({ series, chartConfig, width, customeStyle });
+      const isShowLegend = (_d = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _d.includes("legend");
+      let isLeftYAxisShow = series.some((item) => (item == null ? void 0 : item.yAxisIndex) == 0);
+      let isRightYAxisShow = series.some((item) => (item == null ? void 0 : item.yAxisIndex) == 1);
+      let yAxisConfig = {
+        ...chartConfig.yAxis,
+        axisTick: {
+          show: (_e = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _e.includes("axis")
+        },
+        axisLine: {
+          show: (_f = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _f.includes("axis")
+        },
+        axisLabel: {
+          show: (_g = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _g.includes("label"),
+          formatter: (value) => {
+            return value.length > 15 ? `${value.slice(0, 15)}...` : value;
+          },
+          hideOverlap: true,
+          ...(_h = chartConfig.yAxis) == null ? void 0 : _h.axisLabel
+        },
+        splitLine: {
+          show: (_i = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _i.includes("splitLine")
+          // 不显示x轴网格线
+        }
+      };
       const options = {
         legend: {
           type: "scroll",
@@ -293,13 +388,13 @@ const ChartModule = ({
         xAxis: {
           ...chartConfig.xAxis,
           axisTick: {
-            show: (_d = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _d.includes("axis")
+            show: (_j = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _j.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"))
+            show: (_k = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _k.includes("axis")
           },
           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")),
+            show: (_l = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _l.includes("label"),
             rotate: grids.axisLabelRotate,
             // 使标签倾斜，调整为合适的角度
             interval: "auto",
@@ -307,34 +402,23 @@ const ChartModule = ({
             formatter: (value) => {
               return value.length > 15 ? `${value.slice(0, 15)}...` : value;
             },
-            ...(_i = chartConfig.xAxis) == null ? void 0 : _i.axisLabel
+            ...((_m = chartConfig.xAxis) == null ? void 0 : _m.axisLabel) ?? {}
           },
           splitLine: {
-            show: (_j = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _j.includes("splitLine")
+            show: (_n = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _n.includes("splitLine")
             // 不显示x轴网格线
           }
         },
-        yAxis: {
-          ...chartConfig.yAxis,
-          axisTick: {
-            show: (_k = customData == null ? void 0 : customData.chartOptions) == null ? void 0 : _k.includes("axis")
+        yAxis: [
+          {
+            show: isLeftYAxisShow,
+            ...yAxisConfig
           },
-          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轴网格线
+          {
+            show: isRightYAxisShow,
+            ...yAxisConfig
           }
-        },
+        ],
         series,
         tooltip: {
           trigger: "item",
@@ -346,18 +430,20 @@ const ChartModule = ({
           appendTo: "body"
         }
       };
-      setChartOptions(options);
+      return options;
     } else {
-      setChartOptions(void 0);
+      return {};
     }
-  });
-  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,
+    customData == null ? void 0 : customData.timeGroupInterval,
+    customData == null ? void 0 : customData.groupFieldConfig,
+    customData == null ? void 0 : customData.yAxisFieldConfig,
+    customData == null ? void 0 : customData.displayRange,
+    // customData,
     customeStyle,
     chartData,
     width,
@@ -376,11 +462,6 @@ const ChartModule = ({
   const isLoading = loading && !chartOptions;
   const isEmpyt = !loading && !chartOptions;
   const isOk = !isLoading && !isEmpyt;
-  console.log("asd", {
-    isLoading,
-    isEmpyt,
-    isOk
-  });
   return /* @__PURE__ */ jsxs("div", { style: { width: "100%", height: "100%" }, ref: containerRef, children: [
     isLoading && /* @__PURE__ */ jsx(
       Spin,