@platox/pivot-table 0.0.32 → 0.0.34

package/es/dashboard-workbench/components/add-module-modal/components/select-color/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../packages/dashboard-workbench/components/add-module-modal/components/select-color/index.tsx"],"sourcesContent":["import { CheckOutlined } from '@ant-design/icons'\nimport './index.less'\nimport { useEffect, useState } from 'react'\n\nexport type StatisticsCustomeStylesTypes = {\n  color?: string\n  unit?: string\n  precision?: number\n  desc: string\n}\n\ninterface CustomeStylesProps {\n  value?: string\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: ((values: any) => void) | undefined\n}\nconst CustomeStyles: React.FC<CustomeStylesProps> = ({ value, onChange }) => {\n  const [color, setColor] = useState<string | undefined>()\n  const colors = [\n    '#373c43',\n    '#3370ff',\n    '#4954e6',\n    '#34c724',\n    '#14c0ff',\n    '#ffc60a',\n    '#f80',\n    '#f76964',\n  ]\n\n  useEffect(() => {\n    setColor(value)\n  }, [value])\n\n  return (\n    <div className=\"pane-item-body item-body-column\">\n      <div className=\"panel-single-color-selector\">\n        {colors.map((item, idx) => (\n          <div\n            key={idx}\n            className=\"panel-single-color-selector-color-item\"\n            onClick={() => {\n              setColor(item)\n              onChange?.(item)\n            }}\n          >\n            <div\n              className=\"panel-single-color-selector-color-item-background\"\n              style={{ background: item }}\n            ></div>\n            {color === item ? (\n              <span className=\"panel-icon\">\n                <CheckOutlined />\n              </span>\n            ) : null}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\nexport default CustomeStyles\n"],"names":[],"mappings":";;;;AAgBA,MAAM,gBAA8C,CAAC,EAAE,OAAO,eAAe;AAC3E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B;AACvD,QAAM,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,YAAU,MAAM;AACd,aAAS,KAAK;AAAA,EAAA,GACb,CAAC,KAAK,CAAC;AAEV,SACG,oBAAA,OAAA,EAAI,WAAU,mCACb,UAAC,oBAAA,OAAA,EAAI,WAAU,+BACZ,UAAO,OAAA,IAAI,CAAC,MAAM,QACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,SAAS,MAAM;AACb,iBAAS,IAAI;AACb,6CAAW;AAAA,MACb;AAAA,MAEA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,KAAK;AAAA,UAAA;AAAA,QAC3B;AAAA,QACA,UAAU,OACR,oBAAA,QAAA,EAAK,WAAU,cACd,UAAA,oBAAC,eAAc,CAAA,CAAA,EACjB,CAAA,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,IAfC;AAAA,EAAA,CAiBR,GACH,EACF,CAAA;AAEJ;"}

package/es/dashboard-workbench/components/module-content/calendar-module/index.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { ModuleDataApi } from '../../../types';
+import { CalendarCustomeDataTypes } from '../../add-module-modal/add-calendar-modal/custome-data';
+interface CalendarModuleProps {
+    customData?: CalendarCustomeDataTypes;
+    onChange?: (val: unknown) => void;
+    moduleDataApi?: ModuleDataApi;
+    width?: number;
+    height?: number;
+    rowWidth?: number;
+    rowHeight?: number;
+}
+declare const _default: React.NamedExoticComponent<CalendarModuleProps>;
+export default _default;

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

@@ -0,0 +1,231 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect, useMemo, useRef } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
+import { useAppContext } from "../../../context.js";
+import { useTranslation } from "react-i18next";
+import { mapConditionsToPostgrest } from "../utils.js";
+import { message, Spin, Modal, Descriptions } from "antd";
+import { getTransformValue } from "../../../utils/index.js";
+import { useMemoizedFn, useSize } from "ahooks";
+dayjs.extend(isBetween);
+const CalendarModule = ({
+  moduleDataApi,
+  customData,
+  width,
+  height
+}) => {
+  const { t } = useTranslation();
+  const { globalData } = useAppContext();
+  const [startMonthIntervals, setStartMonthIntervals] = useState(["", ""]);
+  const handleDatesSet = (dateInfo) => {
+    const currentDate = dayjs(dateInfo.view.currentStart);
+    const firstDay = currentDate.startOf("month").format("YYYY-MM-DD");
+    const lastDay = currentDate.endOf("month").format("YYYY-MM-DD");
+    setStartMonthIntervals([firstDay, lastDay]);
+  };
+  const [isloading, setIsloading] = useState(false);
+  const [chartData, setChartData] = useState();
+  const fetchChartData = useMemoizedFn(async () => {
+    var _a, _b;
+    setChartData([]);
+    if (customData) {
+      setIsloading(true);
+      let queryString = "";
+      const firstDayOfMonth = dayjs().startOf("month").format("YYYY-MM-DD");
+      const lastDayOfMonth = dayjs().endOf("month").format("YYYY-MM-DD");
+      const conditionData = customData.conditionData;
+      const FMDay = startMonthIntervals.length > 0 ? startMonthIntervals[0] : firstDayOfMonth;
+      const LMDay = startMonthIntervals.length > 0 ? startMonthIntervals[1] : lastDayOfMonth;
+      if (conditionData) {
+        if ((_b = (_a = conditionData == null ? void 0 : conditionData.conditionList) == null ? void 0 : _a.map((item) => item.type)) == null ? void 0 : _b.includes("timestamp")) {
+          queryString += `${mapConditionsToPostgrest(conditionData)}`;
+        } else {
+          queryString += `added_on=gt.${FMDay}&added_on=lt.${LMDay}&${mapConditionsToPostgrest(
+            conditionData
+          )}`;
+        }
+      } else {
+        queryString = `added_on=gt.${FMDay}&added_on=lt.${LMDay}`;
+      }
+      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(() => {
+          setIsloading(false);
+        });
+      }
+    }
+  });
+  useEffect(() => {
+    if (customData) {
+      fetchChartData();
+    }
+  }, [customData == null ? void 0 : customData.dataSourceId, customData == null ? void 0 : customData.conditionData, startMonthIntervals]);
+  const fieldOptions = useMemo(() => {
+    var _a, _b;
+    return (_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;
+  }, [globalData, customData]);
+  const events = useMemo(() => {
+    const calendarEvents = chartData == null ? void 0 : chartData.map((item) => {
+      var _a, _b;
+      const title = getTransformValue({
+        fieldOptions,
+        val: (customData == null ? void 0 : customData.titleField) ? item == null ? void 0 : item[customData.titleField] : "",
+        field: customData == null ? void 0 : customData.titleField,
+        fieldMap: globalData == null ? void 0 : globalData.fieldMap
+      });
+      return {
+        title: title ?? t("unnamedRecord"),
+        start: (customData == null ? void 0 : customData.startDateField) && item[customData == null ? void 0 : customData.startDateField] ? (_a = dayjs(item[customData == null ? void 0 : customData.startDateField])) == null ? void 0 : _a.toISOString() : "",
+        end: (customData == null ? void 0 : customData.endDateField) && item[customData == null ? void 0 : customData.endDateField] ? (_b = dayjs(item[customData == null ? void 0 : customData.endDateField])) == null ? void 0 : _b.toISOString() : void 0,
+        allDay: true,
+        ...item,
+        originalData: item
+      };
+    });
+    return calendarEvents;
+  }, [chartData, customData, fieldOptions]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currData, setCurrData] = useState();
+  const currTitle = getTransformValue({
+    fieldOptions,
+    val: (customData == null ? void 0 : customData.titleField) ? currData == null ? void 0 : currData[customData.titleField] : "",
+    field: customData == null ? void 0 : customData.titleField,
+    fieldMap: globalData == null ? void 0 : globalData.fieldMap
+  });
+  const handleEventClick = useMemoizedFn((info) => {
+    var _a;
+    const event = info.event;
+    setIsModalOpen(true);
+    setCurrData((_a = event.extendedProps) == null ? void 0 : _a.originalData);
+  });
+  const boxRef = useRef();
+  const calendarRef = useRef(null);
+  const size = useSize(boxRef);
+  useEffect(() => {
+    setTimeout(() => {
+      var _a, _b;
+      (_b = (_a = calendarRef.current) == null ? void 0 : _a.getApi()) == null ? void 0 : _b.updateSize();
+    }, 16);
+  }, [size]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: boxRef,
+      style: {
+        height: "100%",
+        width: "100%",
+        boxSizing: "border-box",
+        padding: "12px"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "full-calendar-app",
+          style: {
+            height: "100%",
+            width: "100%",
+            overflowY: "auto",
+            position: "relative"
+          },
+          children: [
+            isloading ? /* @__PURE__ */ jsx(
+              Spin,
+              {
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  position: "absolute",
+                  background: "rgba(255,255,255,0.6)",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  zIndex: 1e3
+                },
+                spinning: isloading
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              FullCalendar,
+              {
+                ref: calendarRef,
+                plugins: [dayGridPlugin],
+                headerToolbar: {
+                  left: "title,today,prev,next",
+                  center: "",
+                  right: ""
+                },
+                initialView: "dayGridMonth",
+                height: "auto",
+                contentHeight: "auto",
+                editable: true,
+                selectable: true,
+                selectMirror: true,
+                fixedWeekCount: false,
+                datesSet: handleDatesSet,
+                timeZone: "UTC",
+                events,
+                eventContent: (eventInfo) => {
+                  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("i", { children: eventInfo.event.title }) });
+                },
+                eventClick: handleEventClick
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Modal,
+              {
+                title: currTitle ?? t("unnamedRecord"),
+                open: isModalOpen,
+                onOk: () => {
+                  setIsModalOpen(false);
+                },
+                onCancel: () => {
+                  setIsModalOpen(false);
+                },
+                destroyOnClose: true,
+                footer: (_, { OkBtn }) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(OkBtn, {}) }),
+                children: ((fieldOptions == null ? void 0 : fieldOptions.length) ?? 0) > 0 ? /* @__PURE__ */ jsx(
+                  Descriptions,
+                  {
+                    className: "reset-descriptions",
+                    layout: "vertical",
+                    column: 2,
+                    items: fieldOptions == null ? void 0 : fieldOptions.map((field, fieldKey) => ({
+                      key: fieldKey,
+                      label: field.label,
+                      children: getTransformValue({
+                        fieldOptions,
+                        val: currData == null ? void 0 : currData[field.value],
+                        field: field.value,
+                        fieldMap: globalData == null ? void 0 : globalData.fieldMap
+                      })
+                    }))
+                  }
+                ) : null
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const CalendarModule$1 = React.memo(CalendarModule);
+export {
+  CalendarModule$1 as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../packages/dashboard-workbench/components/module-content/calendar-module/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport FullCalendar from '@fullcalendar/react'\nimport dayGridPlugin from '@fullcalendar/daygrid'\nimport dayjs from 'dayjs'\nimport isBetween from 'dayjs/plugin/isBetween'\nimport { EventContentArg, EventSourceInput } from '@fullcalendar/core'\nimport { ModuleDataApi, SourceDataFieldsTypes } from '../../../types'\nimport { CalendarCustomeDataTypes } from '../../add-module-modal/add-calendar-modal/custome-data'\nimport { useAppContext } from '../../../context'\nimport { useTranslation } from 'react-i18next'\nimport { mapConditionsToPostgrest } from '../utils'\nimport { Descriptions, message, Modal, Spin } from 'antd'\nimport { getTransformValue } from '../../../utils'\nimport { useMemoizedFn, useSize } from 'ahooks'\n\ndayjs.extend(isBetween)\n\ninterface CalendarModuleProps {\n  customData?: CalendarCustomeDataTypes\n  onChange?: (val: unknown) => void\n  moduleDataApi?: ModuleDataApi\n  width?: number\n  height?: number\n  rowWidth?: number\n  rowHeight?: number\n}\n\nconst CalendarModule: React.FC<CalendarModuleProps> = ({\n  moduleDataApi,\n  customData,\n  width,\n  height,\n}) => {\n  const { t } = useTranslation()\n  const { globalData } = useAppContext()\n\n  /* ============================== split =============================== */\n  const [startMonthIntervals, setStartMonthIntervals] = useState<[string, string]>(['', ''])\n  const handleDatesSet = (dateInfo: any) => {\n    const currentDate = dayjs(dateInfo.view.currentStart)\n    const firstDay = currentDate.startOf('month').format('YYYY-MM-DD')\n    const lastDay = currentDate.endOf('month').format('YYYY-MM-DD')\n    setStartMonthIntervals([firstDay, lastDay])\n  }\n  /* ============================== split =============================== */\n  const [isloading, setIsloading] = useState(false)\n  const [chartData, setChartData] = useState<any>()\n  const fetchChartData = useMemoizedFn(async () => {\n    setChartData([])\n    if (customData) {\n      setIsloading(true)\n      let queryString = ''\n      const firstDayOfMonth = dayjs().startOf('month').format('YYYY-MM-DD')\n      const lastDayOfMonth = dayjs().endOf('month').format('YYYY-MM-DD')\n      const conditionData = customData.conditionData\n      const FMDay = startMonthIntervals.length > 0 ? startMonthIntervals[0] : firstDayOfMonth\n      const LMDay = startMonthIntervals.length > 0 ? startMonthIntervals[1] : lastDayOfMonth\n\n      if (conditionData) {\n        if (conditionData?.conditionList?.map(item => item.type)?.includes('timestamp')) {\n          queryString += `${mapConditionsToPostgrest(conditionData)}`\n        } else {\n          queryString += `added_on=gt.${FMDay}&added_on=lt.${LMDay}&${mapConditionsToPostgrest(\n            conditionData\n          )}`\n        }\n      } else {\n        queryString = `added_on=gt.${FMDay}&added_on=lt.${LMDay}`\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            setIsloading(false)\n          })\n      }\n    }\n  })\n  useEffect(() => {\n    if (customData) {\n      fetchChartData()\n    }\n  }, [customData?.dataSourceId, customData?.conditionData, startMonthIntervals])\n\n  /* ============================== split =============================== */\n  const fieldOptions = useMemo(() => {\n    return globalData?.sourceData?.find(item => item.value === customData?.dataSourceId)?.fields\n  }, [globalData, customData])\n\n  const events = useMemo(() => {\n    const calendarEvents = chartData?.map((item: any) => {\n      const title = getTransformValue({\n        fieldOptions,\n        val: customData?.titleField ? item?.[customData.titleField] : '',\n        field: customData?.titleField,\n        fieldMap: globalData?.fieldMap,\n      })\n      return {\n        title: title ?? t('unnamedRecord'),\n        start:\n          customData?.startDateField && item[customData?.startDateField]\n            ? dayjs(item[customData?.startDateField])?.toISOString()\n            : '',\n        end:\n          customData?.endDateField && item[customData?.endDateField]\n            ? dayjs(item[customData?.endDateField])?.toISOString()\n            : undefined,\n        allDay: true,\n        ...item,\n        originalData: item,\n      }\n    })\n    return calendarEvents\n  }, [chartData, customData, fieldOptions])\n\n  /* ============================== split =============================== */\n  const [isModalOpen, setIsModalOpen] = useState(false)\n  const [currData, setCurrData] = useState()\n  const currTitle = getTransformValue({\n    fieldOptions,\n    val: customData?.titleField ? currData?.[customData.titleField] : '',\n    field: customData?.titleField,\n    fieldMap: globalData?.fieldMap,\n  })\n\n  const handleEventClick = useMemoizedFn((info: any) => {\n    const event = info.event\n    setIsModalOpen(true)\n\n    setCurrData(event.extendedProps?.originalData)\n  })\n\n  /* ============================== split =============================== */\n  const boxRef = useRef<any>()\n  const calendarRef = useRef<any>(null)\n  const size = useSize(boxRef)\n  useEffect(() => {\n    setTimeout(() => {\n      calendarRef.current?.getApi()?.updateSize()\n    }, 16) //不是一个div 会有延迟\n  }, [size])\n\n  /* ============================== split =============================== */\n\n  return (\n    <div\n      ref={boxRef}\n      style={{\n        height: '100%',\n        width: '100%',\n        boxSizing: 'border-box',\n        padding: '12px',\n      }}\n    >\n      <div\n        className=\"full-calendar-app\"\n        style={{\n          height: '100%',\n          width: '100%',\n          overflowY: 'auto',\n          position: 'relative',\n        }}\n      >\n        {isloading ? (\n          <Spin\n            style={{\n              width: '100%',\n              height: '100%',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              position: 'absolute',\n              background: 'rgba(255,255,255,0.6)',\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              zIndex: 1000,\n            }}\n            spinning={isloading}\n          />\n        ) : null}\n\n        <FullCalendar\n          ref={calendarRef} // 设置 FullCalendar 引用\n          plugins={[dayGridPlugin]}\n          headerToolbar={{\n            left: 'title,today,prev,next',\n            center: '',\n            right: '',\n          }}\n          initialView=\"dayGridMonth\"\n          height=\"auto\" // 自适应高度\n          contentHeight=\"auto\" // 自动调整内容高度\n          // dayMaxEvents={4} // 如果一天的事件太多则显示更多按钮\n          editable={true}\n          selectable={true}\n          selectMirror={true}\n          fixedWeekCount={false}\n          datesSet={handleDatesSet}\n          timeZone=\"UTC\"\n          events={events} // 将筛选后的事件传递给 FullCalendar\n          eventContent={(eventInfo: EventContentArg) => {\n            return (\n              <>\n                <i>{eventInfo.event.title}</i>\n              </>\n            )\n          }} // 自定义事件内容渲染\n          eventClick={handleEventClick} // 事件点击时调用\n        ></FullCalendar>\n        <Modal\n          title={currTitle ?? t('unnamedRecord')}\n          open={isModalOpen}\n          onOk={() => {\n            setIsModalOpen(false)\n          }}\n          onCancel={() => {\n            setIsModalOpen(false)\n          }}\n          destroyOnClose\n          footer={(_, { OkBtn }) => (\n            <>\n              <OkBtn />\n            </>\n          )}\n        >\n          {(fieldOptions?.length ?? 0) > 0 ? (\n            <Descriptions\n              className=\"reset-descriptions\"\n              layout=\"vertical\"\n              column={2}\n              items={fieldOptions?.map((field: any, fieldKey) => ({\n                key: fieldKey,\n                label: field.label,\n                children: getTransformValue({\n                  fieldOptions,\n                  val: currData?.[field.value],\n                  field: field.value,\n                  fieldMap: globalData?.fieldMap,\n                }),\n              }))}\n            />\n          ) : null}\n        </Modal>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(CalendarModule)\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { EChartsOption } from 'echarts';
+interface ChartProps {
+    options?: EChartsOption;
+    echartRef?: any;
+}
+declare const Chart: React.FC<ChartProps>;
+export default Chart;

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

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect, useImperativeHandle } from "react";
+import * as echarts from "echarts/core";
+import { BarChart, LineChart, PieChart } from "echarts/charts";
+import { GraphicComponent, LegendComponent, TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent } from "echarts/components";
+import { LabelLayout, UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  GraphicComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+const Chart = React.memo(({ options, echartRef }) => {
+  const chartRef = useRef(null);
+  const chartInstanceRef = useRef(null);
+  useEffect(() => {
+    if (chartRef.current) {
+      chartInstanceRef.current = echarts.init(chartRef.current);
+      window.__chartInstanceRef = chartInstanceRef;
+    }
+    return () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.dispose();
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (chartInstanceRef.current) {
+      chartInstanceRef.current.clear();
+      if (options && Object.keys(options).length > 0) {
+        chartInstanceRef.current.setOption({ ...options });
+      }
+    }
+  }, [options]);
+  useImperativeHandle(echartRef, () => ({
+    resize: () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.resize();
+      }
+    },
+    getWidth: () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.getWidth();
+      }
+    }
+  }));
+  return /* @__PURE__ */ jsx("div", { ref: chartRef, style: { width: "100%", height: "100%" } });
+});
+export {
+  Chart as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../packages/dashboard-workbench/components/module-content/chart-module/base-chart/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React, { useEffect, useImperativeHandle, useRef } from 'react'\nimport * as echarts from 'echarts/core'\nimport { BarChart, LineChart, PieChart } from 'echarts/charts'\nimport {\n  GraphicComponent,\n  TitleComponent,\n  TooltipComponent,\n  GridComponent,\n  DatasetComponent,\n  TransformComponent,\n  LegendComponent,\n} from 'echarts/components'\n\nimport { LabelLayout, UniversalTransition } from 'echarts/features'\nimport { CanvasRenderer } from 'echarts/renderers'\nimport { EChartsOption } from 'echarts'\n\necharts.use([\n  GraphicComponent,\n  LegendComponent,\n  TitleComponent,\n  TooltipComponent,\n  GridComponent,\n  DatasetComponent,\n  TransformComponent,\n  BarChart,\n  LineChart,\n  PieChart,\n  LabelLayout,\n  UniversalTransition,\n  CanvasRenderer,\n])\n\ninterface ChartProps {\n  options?: EChartsOption\n  echartRef?: any\n}\n\nconst Chart: React.FC<ChartProps> = React.memo(({ options, echartRef }) => {\n  const chartRef = useRef<HTMLDivElement>(null)\n  const chartInstanceRef = useRef<echarts.ECharts | null>(null)\n\n  useEffect(() => {\n    if (chartRef.current) {\n      chartInstanceRef.current = echarts.init(chartRef.current)\n      //@ts-ignore\n      window.__chartInstanceRef = chartInstanceRef\n      // chartInstanceRef.current = echarts.init(chartRef.current, 'light223')\n    }\n    return () => {\n      if (chartInstanceRef.current) {\n        chartInstanceRef.current.dispose()\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    if (chartInstanceRef.current) {\n      chartInstanceRef.current.clear()\n      if (options && Object.keys(options).length > 0) {\n        chartInstanceRef.current.setOption({ ...options })\n      }\n    }\n  }, [options])\n\n  useImperativeHandle(echartRef, () => ({\n    resize: () => {\n      if (chartInstanceRef.current) {\n        chartInstanceRef.current.resize()\n      }\n    },\n    getWidth: () => {\n      if (chartInstanceRef.current) {\n        chartInstanceRef.current.getWidth()\n      }\n    },\n  }))\n\n  return <div ref={chartRef} style={{ width: '100%', height: '100%' }} />\n})\n\nexport default Chart\n"],"names":[],"mappings":";;;;;;;AAkBA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAOD,MAAM,QAA8B,MAAM,KAAK,CAAC,EAAE,SAAS,gBAAgB;AACnE,QAAA,WAAW,OAAuB,IAAI;AACtC,QAAA,mBAAmB,OAA+B,IAAI;AAE5D,YAAU,MAAM;AACd,QAAI,SAAS,SAAS;AACpB,uBAAiB,UAAU,QAAQ,KAAK,SAAS,OAAO;AAExD,aAAO,qBAAqB;AAAA,IAAA;AAG9B,WAAO,MAAM;AACX,UAAI,iBAAiB,SAAS;AAC5B,yBAAiB,QAAQ,QAAQ;AAAA,MAAA;AAAA,IAErC;AAAA,EACF,GAAG,EAAE;AAEL,YAAU,MAAM;AACd,QAAI,iBAAiB,SAAS;AAC5B,uBAAiB,QAAQ,MAAM;AAC/B,UAAI,WAAW,OAAO,KAAK,OAAO,EAAE,SAAS,GAAG;AAC9C,yBAAiB,QAAQ,UAAU,EAAE,GAAG,SAAS;AAAA,MAAA;AAAA,IACnD;AAAA,EACF,GACC,CAAC,OAAO,CAAC;AAEZ,sBAAoB,WAAW,OAAO;AAAA,IACpC,QAAQ,MAAM;AACZ,UAAI,iBAAiB,SAAS;AAC5B,yBAAiB,QAAQ,OAAO;AAAA,MAAA;AAAA,IAEpC;AAAA,IACA,UAAU,MAAM;AACd,UAAI,iBAAiB,SAAS;AAC5B,yBAAiB,QAAQ,SAAS;AAAA,MAAA;AAAA,IACpC;AAAA,EACF,EACA;AAEK,SAAA,oBAAC,OAAI,EAAA,KAAK,UAAU,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAU,EAAA,CAAA;AACvE,CAAC;"}

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

@@ -0,0 +1,14 @@
+import { ModuleDataApi } from '../../../types';
+import { ChartCustomeDataTypes } from '../../add-module-modal/add-chart-modal/custome-data';
+import { ChartCustomeStylesTypes } from '../../add-module-modal/add-chart-modal/custome-styles';
+import { default as React } from 'react';
+interface ChartModuleProps {
+    customData?: ChartCustomeDataTypes;
+    customeStyle?: ChartCustomeStylesTypes;
+    onChange?: (val: unknown) => void;
+    moduleDataApi?: ModuleDataApi;
+    width?: number;
+    height?: number;
+}
+declare const _default: React.NamedExoticComponent<ChartModuleProps>;
+export default _default;