@platox/pivot-table 0.0.34 → 0.0.36

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/components/GroupFieldConfigPicker.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import clsx from "clsx";
+import { Tooltip, Input } from "antd";
+import { useControllableValue, useMemoizedFn } from "ahooks";
+import { ChartType } from "../interface.js";
+import { CombinationChartOptionPicker } from "./CombinationChartOptionPicker.js";
+import styles from "./index.module.less.js";
+const componentName = "group-field-config-picker";
+const empty = [];
+const GroupFieldConfigPicker = (props) => {
+  const { style, className, options = empty } = props;
+  const [value = empty, setValue] = useControllableValue(props);
+  const getFieldValue = useMemoizedFn((key) => {
+    let match = (value ?? []).find((v) => v.value === key);
+    return match ? match.config : void 0;
+  });
+  const handleFieldChange = useMemoizedFn((key, config) => {
+    let newData = [...value ?? []];
+    let match = newData.find((v) => v.value === key);
+    if (match) {
+      match.config = config;
+    } else {
+      newData.push({ value: key, config });
+    }
+    setValue(newData);
+    return;
+  });
+  useEffect(() => {
+    if ((options == null ? void 0 : options.length) > 0) {
+      let newData = options.map((v) => {
+        return {
+          value: v,
+          config: {
+            chartType: ChartType["ChartBar"],
+            yAxisPos: "left",
+            ...getFieldValue(v) ?? {}
+          }
+        };
+      });
+      setValue(newData);
+    }
+  }, [options]);
+  return useMemo(
+    () => /* @__PURE__ */ jsx("div", { className: clsx(className, styles[`${componentName}`]), style, children: /* @__PURE__ */ jsx("div", { children: ((props == null ? void 0 : props.options) ?? []).map((fieldName) => {
+      let str = `${fieldName}`;
+      const value2 = getFieldValue(fieldName);
+      return /* @__PURE__ */ jsxs("div", { className: clsx(styles[`${componentName}__item`]), children: [
+        /* @__PURE__ */ jsx(Tooltip, { title: str, children: /* @__PURE__ */ jsx("div", { className: clsx(styles[`${componentName}__input`]), children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: str,
+            disabled: true,
+            style: {
+              width: 200,
+              pointerEvents: "none"
+            }
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(
+          CombinationChartOptionPicker,
+          {
+            value: value2,
+            onChange: (v) => {
+              handleFieldChange(fieldName, v);
+            }
+          }
+        )
+      ] }, str);
+    }) }) }),
+    [value, options]
+  );
+};
+GroupFieldConfigPicker.displayName = "GroupFieldConfigPicker";
+export {
+  GroupFieldConfigPicker,
+  GroupFieldConfigPicker as default
+};
+//# sourceMappingURL=GroupFieldConfigPicker.js.map

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/components/GroupFieldConfigPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupFieldConfigPicker.js","sources":["../../../../../../packages/dashboard-workbench/components/add-module-modal/add-chart-modal/components/GroupFieldConfigPicker.tsx"],"sourcesContent":["import { useEffect, useMemo, type CSSProperties } from 'react'\nimport clsx from 'clsx'\nimport { Input, Tooltip } from 'antd'\nimport { useControllableValue, useMemoizedFn } from 'ahooks'\nimport { ChartCustomDataType, ChartType, CombinationChartConfig } from '../interface'\nimport { CombinationChartOptionPicker } from './CombinationChartOptionPicker'\nimport styles from './index.module.less'\n\nconst componentName = 'group-field-config-picker'\n\nconst empty: unknown[] = []\n\nexport type GroupFieldConfigPickerProps<T> = {\n  style?: CSSProperties\n  className?: string\n\n  options?: T[]\n\n  value?: ChartCustomDataType['groupFieldConfig']\n  onChange?: (v: ChartCustomDataType['groupFieldConfig']) => void\n}\n\nexport const GroupFieldConfigPicker = <T,>(props: GroupFieldConfigPickerProps<T>) => {\n  const { style, className, options = empty as T[] } = props\n\n  const [value = empty as ChartCustomDataType['groupFieldConfig'], setValue] =\n    useControllableValue<ChartCustomDataType['groupFieldConfig']>(props)\n\n  const getFieldValue = useMemoizedFn((key: T) => {\n    let match = (value ?? []).find(v => v.value === key)\n    return match ? match.config : undefined\n  })\n\n  const handleFieldChange = useMemoizedFn((key: T, config: CombinationChartConfig) => {\n    let newData = [...(value ?? [])]\n    let match = newData.find(v => v.value === key)\n    if (match) {\n      match.config = config\n    } else {\n      newData.push({ value: key, config })\n    }\n    setValue(newData)\n    return\n  })\n\n  /* ============================== 默认值 =============================== */\n  useEffect(() => {\n    if (options?.length > 0) {\n      let newData: ChartCustomDataType['groupFieldConfig'] = options.map(v => {\n        return {\n          value: v,\n          config: {\n            chartType: ChartType['ChartBar'],\n            yAxisPos: 'left',\n            ...(getFieldValue(v) ?? {}),\n          },\n        }\n      })\n      setValue(newData)\n    }\n  }, [options])\n\n  return useMemo(\n    () => (\n      <div className={clsx(className, styles[`${componentName}`])} style={style}>\n        <div>\n          {(props?.options ?? []).map(fieldName => {\n            let str = `${fieldName}`\n            const value = getFieldValue(fieldName)\n            return (\n              <div className={clsx(styles[`${componentName}__item`])} key={str}>\n                <Tooltip title={str}>\n                  <div className={clsx(styles[`${componentName}__input`])}>\n                    <Input\n                      value={str}\n                      disabled={true}\n                      style={{\n                        width: 200,\n                        pointerEvents: 'none',\n                      }}\n                    ></Input>\n                  </div>\n                </Tooltip>\n\n                <CombinationChartOptionPicker\n                  value={value}\n                  onChange={v => {\n                    handleFieldChange(fieldName, v)\n                  }}\n                />\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    ),\n    [value, options]\n  )\n}\n\nGroupFieldConfigPicker.displayName = 'GroupFieldConfigPicker'\n\nexport default GroupFieldConfigPicker\n"],"names":["value"],"mappings":";;;;;;;;AAQA,MAAM,gBAAgB;AAEtB,MAAM,QAAmB,CAAC;AAYb,MAAA,yBAAyB,CAAK,UAA0C;AACnF,QAAM,EAAE,OAAO,WAAW,UAAU,MAAiB,IAAA;AAErD,QAAM,CAAC,QAAQ,OAAkD,QAAQ,IACvE,qBAA8D,KAAK;AAE/D,QAAA,gBAAgB,cAAc,CAAC,QAAW;AAC1C,QAAA,SAAS,SAAS,IAAI,KAAK,CAAK,MAAA,EAAE,UAAU,GAAG;AAC5C,WAAA,QAAQ,MAAM,SAAS;AAAA,EAAA,CAC/B;AAED,QAAM,oBAAoB,cAAc,CAAC,KAAQ,WAAmC;AAClF,QAAI,UAAU,CAAC,GAAI,SAAS,EAAG;AAC/B,QAAI,QAAQ,QAAQ,KAAK,CAAK,MAAA,EAAE,UAAU,GAAG;AAC7C,QAAI,OAAO;AACT,YAAM,SAAS;AAAA,IAAA,OACV;AACL,cAAQ,KAAK,EAAE,OAAO,KAAK,QAAQ;AAAA,IAAA;AAErC,aAAS,OAAO;AAChB;AAAA,EAAA,CACD;AAGD,YAAU,MAAM;AACV,SAAA,mCAAS,UAAS,GAAG;AACnB,UAAA,UAAmD,QAAQ,IAAI,CAAK,MAAA;AAC/D,eAAA;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,YACN,WAAW,UAAU,UAAU;AAAA,YAC/B,UAAU;AAAA,YACV,GAAI,cAAc,CAAC,KAAK,CAAA;AAAA,UAAC;AAAA,QAE7B;AAAA,MAAA,CACD;AACD,eAAS,OAAO;AAAA,IAAA;AAAA,EAClB,GACC,CAAC,OAAO,CAAC;AAEL,SAAA;AAAA,IACL,0BACG,OAAI,EAAA,WAAW,KAAK,WAAW,OAAO,GAAG,aAAa,EAAE,CAAC,GAAG,OAC3D,8BAAC,OACG,EAAA,YAAA,+BAAO,YAAW,CAAC,GAAG,IAAI,CAAa,cAAA;AACnC,UAAA,MAAM,GAAG,SAAS;AAChBA,YAAAA,SAAQ,cAAc,SAAS;AAEnC,aAAA,qBAAC,SAAI,WAAW,KAAK,OAAO,GAAG,aAAa,QAAQ,CAAC,GACnD,UAAA;AAAA,QAAA,oBAAC,SAAQ,EAAA,OAAO,KACd,UAAA,oBAAC,OAAI,EAAA,WAAW,KAAK,OAAO,GAAG,aAAa,SAAS,CAAC,GACpD,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,eAAe;AAAA,YAAA;AAAA,UACjB;AAAA,WAEJ,EACF,CAAA;AAAA,QAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAOA;AAAAA,YACP,UAAU,CAAK,MAAA;AACb,gCAAkB,WAAW,CAAC;AAAA,YAAA;AAAA,UAChC;AAAA,QAAA;AAAA,MACF,EAAA,GAnB2D,GAoB7D;AAAA,IAAA,CAEH,GACH,EACF,CAAA;AAAA,IAEF,CAAC,OAAO,OAAO;AAAA,EACjB;AACF;AAEA,uBAAuB,cAAc;"}

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/components/index.module.less.js

@@ -0,0 +1,11 @@
+const styles = {
+  "combination-chart-option": "_combination-chart-option_1cwba_1",
+  "group-field-config-picker": "_group-field-config-picker_1cwba_11",
+  "group-field-config-picker__title": "_group-field-config-picker__title_1cwba_14",
+  "group-field-config-picker__item": "_group-field-config-picker__item_1cwba_18",
+  "group-field-config-picker__input": "_group-field-config-picker__input_1cwba_23"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=index.module.less.js.map

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/components/index.module.less.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.less.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/config.d.ts

@@ -0,0 +1,14 @@
+import { DisplayRange } from './interface';
+export declare const useChartTypeOption: () => {
+    label: string;
+    value: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+}[];
+export declare const useTimeGroupIntervalOption: () => {
+    label: string;
+    value: string;
+}[];
+export declare const useDisplayRangeOption: () => {
+    label: string;
+    value: DisplayRange;
+}[];

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/config.js

@@ -0,0 +1,153 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import SvgComponent from "../../../icon/icon-chart-combination.js";
+import IconBar from "../../../icon/icon-bar.js";
+import IconBarPercentage from "../../../icon/icon-bar-percentage.js";
+import IconBarPile from "../../../icon/icon-bar-pile.js";
+import IconLine from "../../../icon/icon-line.js";
+import IconLineSmooth from "../../../icon/icon-line-smooth.js";
+import IconPie from "../../../icon/icon-pie.js";
+import IconPieCircular from "../../../icon/icon-pie-circular.js";
+import IconStripBar from "../../../icon/icon-strip-bar.js";
+import IconStripBarPercentage from "../../../icon/icon-strip-bar-percentage.js";
+import IconStripBarPile from "../../../icon/icon-strip-bar-pile.js";
+import { ChartType, DisplayRange } from "./interface.js";
+const useChartTypeOption = () => {
+  const { t, i18n } = useTranslation();
+  const ret = useMemo(() => {
+    return [
+      {
+        label: t("chart.t2"),
+        value: "chart-bar",
+        icon: /* @__PURE__ */ jsx(IconBar, {})
+      },
+      {
+        label: t("chart.t3"),
+        value: "chart-bar-pile",
+        icon: /* @__PURE__ */ jsx(IconBarPile, {})
+      },
+      {
+        label: t("chart.t4"),
+        value: "chart-bar-percentage",
+        icon: /* @__PURE__ */ jsx(IconBarPercentage, {})
+      },
+      {
+        label: t("chart.t5"),
+        value: "chart-strip-bar",
+        icon: /* @__PURE__ */ jsx(IconStripBar, {})
+      },
+      {
+        label: t("chart.t6"),
+        value: "chart-strip-bar-pile",
+        icon: /* @__PURE__ */ jsx(IconStripBarPile, {})
+      },
+      {
+        label: t("chart.t7"),
+        value: "chart-strip-bar-percentage",
+        icon: /* @__PURE__ */ jsx(IconStripBarPercentage, {})
+      },
+      {
+        label: t("chart.t8"),
+        value: "chart-line",
+        icon: /* @__PURE__ */ jsx(IconLine, {})
+      },
+      {
+        label: t("chart.t9"),
+        value: "chart-line-smooth",
+        icon: /* @__PURE__ */ jsx(IconLineSmooth, {})
+      },
+      {
+        label: t("chart.t10"),
+        value: "chart-pie",
+        icon: /* @__PURE__ */ jsx(IconPie, {})
+      },
+      {
+        label: t("chart.t11"),
+        value: "chart-pie-circular",
+        icon: /* @__PURE__ */ jsx(IconPieCircular, {})
+      },
+      {
+        label: t("chart._t12"),
+        value: ChartType["chartCombination"],
+        //  icon: <IconPieCircular />,
+        icon: /* @__PURE__ */ jsx(SvgComponent, {})
+      }
+    ];
+  }, [i18n.language]);
+  return ret;
+};
+const useTimeGroupIntervalOption = () => {
+  const { t, i18n } = useTranslation();
+  const ret = useMemo(() => {
+    return [
+      {
+        label: t("chart.t40"),
+        value: "day"
+      },
+      {
+        label: t("chart.t41"),
+        value: "week"
+      },
+      {
+        label: t("chart.t42"),
+        value: "month"
+      },
+      {
+        label: t("chart.t43"),
+        value: "year"
+      }
+    ];
+  }, [i18n.language]);
+  return ret;
+};
+const useDisplayRangeOption = () => {
+  const { t, i18n } = useTranslation();
+  const ret = useMemo(() => {
+    return [
+      {
+        label: t("displayRange.all", "ALL"),
+        value: DisplayRange["ALL"]
+      },
+      {
+        label: t("displayRange.top5", "TOP5"),
+        value: DisplayRange["TOP5"]
+      },
+      {
+        label: t("displayRange.top10", "TOP10"),
+        value: DisplayRange["TOP10"]
+      },
+      {
+        label: t("displayRange.top20", "TOP20"),
+        value: DisplayRange["TOP20"]
+      },
+      {
+        label: t("displayRange.top30", "TOP30"),
+        value: DisplayRange["TOP30"]
+      },
+      {
+        label: t("displayRange.bottom5", "BOTTOM5"),
+        value: DisplayRange["BOTTOM5"]
+      },
+      {
+        label: t("displayRange.bottom10", "BOTTOM10"),
+        value: DisplayRange["BOTTOM10"]
+      },
+      {
+        label: t("displayRange.bottom20", "BOTTOM20"),
+        value: DisplayRange["BOTTOM20"]
+      },
+      {
+        label: t("displayRange.bottom30", "BOTTOM30"),
+        value: DisplayRange["BOTTOM30"]
+      }
+    ];
+  }, [i18n.language]);
+  return ret;
+};
+export {
+  useChartTypeOption,
+  useDisplayRangeOption,
+  useTimeGroupIntervalOption
+};
+//# sourceMappingURL=config.js.map

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sources":["../../../../../packages/dashboard-workbench/components/add-module-modal/add-chart-modal/config.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport IconChartCombination from '@platox/pivot-table/icon/icon-chart-combination'\nimport IconBar from '../../../icon/icon-bar'\nimport IconBarPercentage from '../../../icon/icon-bar-percentage'\nimport IconBarPile from '../../../icon/icon-bar-pile'\nimport IconLine from '../../../icon/icon-line'\nimport IconLineSmooth from '../../../icon/icon-line-smooth'\nimport IconPie from '../../../icon/icon-pie'\nimport IconPieCircular from '../../../icon/icon-pie-circular'\nimport IconStripBar from '../../../icon/icon-strip-bar'\nimport IconStripBarPercentage from '../../../icon/icon-strip-bar-percentage'\nimport IconStripBarPile from '../../../icon/icon-strip-bar-pile'\nimport { ChartType, DisplayRange } from './interface'\n\nexport const useChartTypeOption = () => {\n  const { t, i18n } = useTranslation()\n\n  const ret = useMemo(() => {\n    return [\n      {\n        label: t('chart.t2'),\n        value: 'chart-bar',\n        icon: <IconBar />,\n      },\n      {\n        label: t('chart.t3'),\n        value: 'chart-bar-pile',\n        icon: <IconBarPile />,\n      },\n      {\n        label: t('chart.t4'),\n        value: 'chart-bar-percentage',\n        icon: <IconBarPercentage />,\n      },\n      {\n        label: t('chart.t5'),\n        value: 'chart-strip-bar',\n        icon: <IconStripBar />,\n      },\n      {\n        label: t('chart.t6'),\n        value: 'chart-strip-bar-pile',\n        icon: <IconStripBarPile />,\n      },\n      {\n        label: t('chart.t7'),\n        value: 'chart-strip-bar-percentage',\n        icon: <IconStripBarPercentage />,\n      },\n      {\n        label: t('chart.t8'),\n        value: 'chart-line',\n        icon: <IconLine />,\n      },\n      {\n        label: t('chart.t9'),\n        value: 'chart-line-smooth',\n        icon: <IconLineSmooth />,\n      },\n      {\n        label: t('chart.t10'),\n        value: 'chart-pie',\n        icon: <IconPie />,\n      },\n      {\n        label: t('chart.t11'),\n        value: 'chart-pie-circular',\n        icon: <IconPieCircular />,\n      },\n      {\n        label: t('chart._t12'),\n        value: ChartType['chartCombination'],\n        //  icon: <IconPieCircular />,\n        icon: <IconChartCombination />,\n      },\n    ]\n  }, [i18n.language])\n\n  return ret\n}\n\nexport const useTimeGroupIntervalOption = () => {\n  const { t, i18n } = useTranslation()\n\n  const ret = useMemo(() => {\n    return [\n      {\n        label: t('chart.t40'),\n        value: 'day',\n      },\n      {\n        label: t('chart.t41'),\n        value: 'week',\n      },\n      {\n        label: t('chart.t42'),\n        value: 'month',\n      },\n      {\n        label: t('chart.t43'),\n        value: 'year',\n      },\n    ]\n  }, [i18n.language])\n\n  return ret\n}\n\nexport const useDisplayRangeOption = () => {\n  const { t, i18n } = useTranslation()\n\n  const ret = useMemo(() => {\n    return [\n      {\n        label: t('displayRange.all', 'ALL'),\n        value: DisplayRange['ALL'],\n      },\n      {\n        label: t('displayRange.top5', 'TOP5'),\n        value: DisplayRange['TOP5'],\n      },\n      {\n        label: t('displayRange.top10', 'TOP10'),\n        value: DisplayRange['TOP10'],\n      },\n      {\n        label: t('displayRange.top20', 'TOP20'),\n        value: DisplayRange['TOP20'],\n      },\n      {\n        label: t('displayRange.top30', 'TOP30'),\n        value: DisplayRange['TOP30'],\n      },\n      {\n        label: t('displayRange.bottom5', 'BOTTOM5'),\n        value: DisplayRange['BOTTOM5'],\n      },\n      {\n        label: t('displayRange.bottom10', 'BOTTOM10'),\n        value: DisplayRange['BOTTOM10'],\n      },\n      {\n        label: t('displayRange.bottom20', 'BOTTOM20'),\n        value: DisplayRange['BOTTOM20'],\n      },\n      {\n        label: t('displayRange.bottom30', 'BOTTOM30'),\n        value: DisplayRange['BOTTOM30'],\n      },\n    ]\n  }, [i18n.language])\n\n  return ret\n}\n"],"names":["IconChartCombination"],"mappings":"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"}

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/custome-data.d.ts

@@ -1,23 +1,5 @@
-import { ModuleData } from '../../module-content';
 import { EnumDataApi } from '../../../types';
-import { ConditionListItemTypes } from '../components/condition-modal';
-export type ChartCustomeDataTypes = {
-    conditionData?: {
-        conditionList: ConditionListItemTypes[];
-        conditionType: 'all' | 'any';
-    };
-    dataSourceId?: string;
-    type: 'chart-bar' | 'chart-bar-pile' | 'chart-bar-percentage' | 'chart-line' | 'chart-line-smooth' | 'chart-strip-bar' | 'chart-strip-bar-pile' | 'chart-strip-bar-percentage' | 'chart-pie' | 'chart-pie-circular';
-    xAxis: string;
-    yAxis: string;
-    yAxisField: string;
-    yAxisFieldType: 'sum' | 'max' | 'min' | 'avg';
-    groupField: string;
-    isGroup: boolean;
-    chartOptions: any;
-    sortField: 'xAxis' | 'yAxisField' | 'recordValue';
-    sortOrder: 'asc' | 'desc';
-};
+import { ModuleData } from '../../module-content';
 interface CustomDataProps {
     selectModuleData?: ModuleData;
     onAllValuesChange?: ((values: any) => void) | undefined;

package/es/dashboard-workbench/components/add-module-modal/add-chart-modal/custome-data.js

@@ -1,91 +1,46 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Form, Select, Button, Flex, Checkbox, Divider, Radio, Space } from "antd";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useMemo, useState, useRef, useEffect } from "react";
+import clsx from "clsx";
+import { Form, Select, Button, Flex, Checkbox, Divider, Radio, Space, Spin } from "antd";
+import { useTranslation } from "react-i18next";
+import { useMemoizedFn, useRequest, useDebounceFn } from "ahooks";
+import { getTransformValue } from "../../../utils/index.js";
 import { useAppContext } from "../../../context.js";
-import IconBarPercentage from "../../../icon/icon-bar-percentage.js";
-import IconBarPile from "../../../icon/icon-bar-pile.js";
-import IconStripBar from "../../../icon/icon-strip-bar.js";
-import IconStripBarPercentage from "../../../icon/icon-strip-bar-percentage.js";
-import IconStripBarPile from "../../../icon/icon-strip-bar-pile.js";
-import IconBar from "../../../icon/icon-bar.js";
-import IconLineSmooth from "../../../icon/icon-line-smooth.js";
-import IconLine from "../../../icon/icon-line.js";
-import IconPie from "../../../icon/icon-pie.js";
-import IconPieCircular from "../../../icon/icon-pie-circular.js";
+import { mapConditionsToPostgrest } from "../../module-content/utils.js";
 import ConditionModal from "../components/condition-modal/index.js";
-import { useTranslation } from "react-i18next";
-import { useMemoizedFn, useDebounceFn } from "ahooks";
+import { CombinationChartOptionPicker } from "./components/CombinationChartOptionPicker.js";
+import { GroupFieldConfigPicker } from "./components/GroupFieldConfigPicker.js";
+import { useChartTypeOption, useTimeGroupIntervalOption, useDisplayRangeOption } from "./config.js";
+import styles from "./index.module.less.js";
+import { ChartType } from "./interface.js";
+const componentName = "chart-modal";
 const CustomData = ({
   selectModuleData,
   onAllValuesChange,
   enumDataApi
 }) => {
   const { globalData } = useAppContext();
-  const { t, i18n } = useTranslation();
-  const ChartOption = useMemo(() => {
-    return [
-      {
-        label: t("chart.t2"),
-        value: "chart-bar",
-        icon: /* @__PURE__ */ jsx(IconBar, {})
-      },
-      {
-        label: t("chart.t3"),
-        value: "chart-bar-pile",
-        icon: /* @__PURE__ */ jsx(IconBarPile, {})
-      },
-      {
-        label: t("chart.t4"),
-        value: "chart-bar-percentage",
-        icon: /* @__PURE__ */ jsx(IconBarPercentage, {})
-      },
-      {
-        label: t("chart.t5"),
-        value: "chart-strip-bar",
-        icon: /* @__PURE__ */ jsx(IconStripBar, {})
-      },
-      {
-        label: t("chart.t6"),
-        value: "chart-strip-bar-pile",
-        icon: /* @__PURE__ */ jsx(IconStripBarPile, {})
-      },
-      {
-        label: t("chart.t7"),
-        value: "chart-strip-bar-percentage",
-        icon: /* @__PURE__ */ jsx(IconStripBarPercentage, {})
-      },
-      {
-        label: t("chart.t8"),
-        value: "chart-line",
-        icon: /* @__PURE__ */ jsx(IconLine, {})
-      },
-      {
-        label: t("chart.t9"),
-        value: "chart-line-smooth",
-        icon: /* @__PURE__ */ jsx(IconLineSmooth, {})
-      },
-      {
-        label: t("chart.t10"),
-        value: "chart-pie",
-        icon: /* @__PURE__ */ jsx(IconPie, {})
-      },
-      {
-        label: t("chart.t11"),
-        value: "chart-pie-circular",
-        icon: /* @__PURE__ */ jsx(IconPieCircular, {})
-      }
-    ];
-  }, [i18n.language]);
+  const { t } = useTranslation();
+  const ChartTypeOption = useChartTypeOption();
+  const TimeGroupIntervalOption = useTimeGroupIntervalOption();
+  const DisplayRangeOption = useDisplayRangeOption();
   const initialValues = {
     dataSourceId: "",
     yAxis: "recordTotal",
     chartOptions: ["legend", "label", "axis", "splitLine"],
     sortField: "xAxis",
-    sortOrder: "asc"
+    sortOrder: "asc",
+    timeGroupInterval: "day",
+    displayRange: "ALL",
+    yAxisFieldConfig: {
+      chartType: ChartType.ChartBar,
+      yAxisPos: "left"
+    }
   };
   const [form] = Form.useForm();
   const type = Form.useWatch("type", form);
   const dataSourceId = Form.useWatch("dataSourceId", form);
+  const isGroup = Form.useWatch("isGroup", form);
   const xAxis = Form.useWatch("xAxis", form);
   const yAxisField = Form.useWatch("yAxisField", form);
   const groupField = Form.useWatch("groupField", form);
@@ -116,6 +71,10 @@ const CustomData = ({
       groupFieldOption: groupFieldOption2
     };
   }, [dataSourceId, xAxis, yAxisField, groupField]);
+  const isTimeField = useMemoizedFn((fieldName) => {
+    var _a;
+    return ((_a = fieldOptions.find((item) => item.value === fieldName)) == null ? void 0 : _a.type) === "timestamp";
+  });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const conditionDataRef = useRef();
   const [conditionData, setConditionData] = useState({
@@ -129,9 +88,41 @@ const CustomData = ({
     conditionDataRef.current = val;
     setConditionDataNum(((_a = val == null ? void 0 : val.conditionList) == null ? void 0 : _a.length) || 0);
   };
+  const { service } = useAppContext();
+  const { data: CombinationGroupOptions, loading: isGetCombinationGroupOptionsLoading } = useRequest(
+    async () => {
+      var _a, _b, _c;
+      if (isGroup && type === ChartType["chartCombination"] && !!groupField) {
+        const newGroupField = groupField === "tags" ? "tag" : groupField;
+        let queryString = `select=${newGroupField}`;
+        if (((_a = conditionData == null ? void 0 : conditionData.conditionList) == null ? void 0 : _a.length) > 0) {
+          queryString += `&${mapConditionsToPostgrest(conditionData)}`;
+        }
+        let res = await ((_b = service == null ? void 0 : service.moduleDataApi) == null ? void 0 : _b.call(service, {
+          id: dataSourceId,
+          query: queryString
+        }));
+        let options = (_c = res == null ? void 0 : res.data) == null ? void 0 : _c.map((item) => {
+          return getTransformValue({
+            fieldOptions,
+            val: item[newGroupField],
+            field: newGroupField,
+            fieldMap: globalData == null ? void 0 : globalData.fieldMap
+          });
+        });
+        return [...new Set(options)];
+      } else {
+        return [];
+      }
+    },
+    {
+      refreshDeps: [type, isGroup, groupField, conditionData, dataSourceId]
+    }
+  );
   const { run: debounceSubmit } = useDebounceFn(
     useMemoizedFn(() => {
       onAllValuesChange == null ? void 0 : onAllValuesChange({
+        ...initialValues,
         ...form.getFieldsValue(),
         conditionData: conditionDataRef.current
       });
@@ -150,6 +141,15 @@ const CustomData = ({
         isGroup: false
       });
     }
+    if (changedValues.xAxis) {
+      form.setFieldsValue(
+        isTimeField(changedValues.xAxis) ? {
+          timeGroupInterval: initialValues == null ? void 0 : initialValues.timeGroupInterval
+        } : {
+          displayRange: initialValues == null ? void 0 : initialValues.displayRange
+        }
+      );
+    }
     if (changedValues.yAxis) {
       let value = changedValues.yAxis;
       form.setFieldsValue({
@@ -182,7 +182,7 @@ const CustomData = ({
     setCondition((_c = selectModuleData == null ? void 0 : selectModuleData.customData) == null ? void 0 : _c.conditionData);
     debounceSubmit();
   }, [selectModuleData, globalData]);
-  return /* @__PURE__ */ jsxs("div", { style: { height: "50vh", overflowX: "auto" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { height: "50vh", overflowX: "auto" }, className: clsx(styles[`${componentName}`]), children: [
     /* @__PURE__ */ jsxs(
       Form,
       {
@@ -210,7 +210,7 @@ const CustomData = ({
           /* @__PURE__ */ jsx(Form.Item, { label: t("chart.t1"), name: "type", children: /* @__PURE__ */ jsx(
             Select,
             {
-              options: ChartOption,
+              options: ChartTypeOption,
               optionRender: (option) => /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
                 /* @__PURE__ */ jsx("span", { role: "img", style: { marginTop: "5px" }, "aria-label": option.data.label, children: option.data.icon }),
                 option.data.label
@@ -234,7 +234,8 @@ const CustomData = ({
               children: /* @__PURE__ */ jsx(Select, { options: xAxisFieldOption })
             }
           ),
-          /* @__PURE__ */ jsx(Form.Item, { dependencies: ["type"], children: ({ getFieldValue }) => {
+          /* @__PURE__ */ jsx(Form.Item, { noStyle: true, dependencies: ["type", "xAxis"], children: ({ getFieldValue }) => isTimeField(getFieldValue("xAxis")) ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Form.Item, { name: "timeGroupInterval", label: t("chart.t39"), children: /* @__PURE__ */ jsx(Select, { options: TimeGroupIntervalOption }) }) }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Form.Item, { name: "displayRange", label: t("displayRange.title"), children: /* @__PURE__ */ jsx(Select, { options: DisplayRangeOption }) }) }) }),
+          /* @__PURE__ */ jsx(Form.Item, { dependencies: ["type"], noStyle: true, children: ({ getFieldValue }) => {
             var _a;
             return !((_a = getFieldValue("type")) == null ? void 0 : _a.includes("pie")) ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Form.Item, { name: "sortField", label: t("chart.t31"), children: /* @__PURE__ */ jsxs(Radio.Group, { children: [
@@ -267,38 +268,68 @@ const CustomData = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx(Form.Item, { dependencies: ["yAxis"], noStyle: true, children: ({ getFieldValue }) => getFieldValue("yAxis") === "fieldValue" ? /* @__PURE__ */ jsx(Form.Item, { label: t("selectField"), children: /* @__PURE__ */ jsxs(Space.Compact, { children: [
-            /* @__PURE__ */ jsx(Form.Item, { noStyle: true, name: "yAxisField", children: /* @__PURE__ */ jsx(Select, { style: { width: "100px" }, options: yAxisFieldOption }) }),
-            /* @__PURE__ */ jsx(Form.Item, { name: "yAxisFieldType", noStyle: true, children: /* @__PURE__ */ jsx(
-              Select,
-              {
-                style: { width: "100px" },
-                options: [
-                  {
-                    value: "sum",
-                    label: t("sumVal")
-                  },
-                  {
-                    value: "max",
-                    label: t("maxVal")
-                  },
-                  {
-                    value: "min",
-                    label: t("minVal")
-                  },
+          /* @__PURE__ */ jsx(Form.Item, { dependencies: ["yAxis"], noStyle: true, children: ({ getFieldValue }) => getFieldValue("yAxis") === "fieldValue" ? /* @__PURE__ */ jsx(Form.Item, { label: t("selectField"), children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(Space.Compact, { children: [
+                  /* @__PURE__ */ jsx(Form.Item, { noStyle: true, name: "yAxisField", children: /* @__PURE__ */ jsx(Select, { style: { width: "100px" }, options: yAxisFieldOption }) }),
+                  /* @__PURE__ */ jsx(Form.Item, { name: "yAxisFieldType", noStyle: true, children: /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      style: { width: "100px" },
+                      options: [
+                        {
+                          value: "sum",
+                          label: t("sumVal")
+                        },
+                        {
+                          value: "max",
+                          label: t("maxVal")
+                        },
+                        {
+                          value: "min",
+                          label: t("minVal")
+                        },
+                        {
+                          value: "avg",
+                          label: t("averageVal")
+                        }
+                      ]
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Form.Item,
                   {
-                    value: "avg",
-                    label: t("averageVal")
+                    noStyle: true,
+                    name: "yAxisFieldConfig",
+                    dependencies: ["type", "isGroup"],
+                    hidden: getFieldValue("type") !== ChartType["chartCombination"] && getFieldValue("isGroup"),
+                    children: /* @__PURE__ */ jsx(CombinationChartOptionPicker, {})
                   }
-                ]
-              }
-            ) })
-          ] }) }) : null }),
-          /* @__PURE__ */ jsx(Form.Item, { dependencies: ["type"], children: ({ getFieldValue }) => {
+                )
+              ]
+            }
+          ) }) : null }),
+          /* @__PURE__ */ jsx(Form.Item, { dependencies: ["type"], noStyle: true, children: ({ getFieldValue }) => {
             var _a;
-            return !((_a = getFieldValue("type")) == null ? void 0 : _a.includes("pie")) ? /* @__PURE__ */ jsxs(Form.Item, { children: [
+            return !((_a = getFieldValue("type")) == null ? void 0 : _a.includes("pie")) ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(Form.Item, { name: "isGroup", valuePropName: "checked", noStyle: true, children: /* @__PURE__ */ jsx(Checkbox, { style: { marginBottom: "5px" }, children: t("chart.t38") }) }),
-              /* @__PURE__ */ jsx(Form.Item, { dependencies: ["isGroup"], children: ({ getFieldValue: getFieldValue2 }) => getFieldValue2("isGroup") ? /* @__PURE__ */ jsx(Form.Item, { name: "groupField", children: /* @__PURE__ */ jsx(Select, { options: groupFieldOption }) }) : null })
+              /* @__PURE__ */ jsx(Form.Item, { dependencies: ["isGroup"], noStyle: true, children: ({ getFieldValue: getFieldValue2 }) => getFieldValue2("isGroup") ? /* @__PURE__ */ jsx(Form.Item, { name: "groupField", children: /* @__PURE__ */ jsx(Select, { options: groupFieldOption }) }) : null }),
+              /* @__PURE__ */ jsx(Spin, { spinning: isGetCombinationGroupOptionsLoading, children: /* @__PURE__ */ jsx(
+                Form.Item,
+                {
+                  name: "groupFieldConfig",
+                  label: t("chart.groupFieldConfig"),
+                  hidden: !(getFieldValue("type") === ChartType["chartCombination"] && getFieldValue("isGroup")),
+                  children: /* @__PURE__ */ jsx(GroupFieldConfigPicker, { options: CombinationGroupOptions })
+                }
+              ) })
             ] }) : null;
           } })
         ]