@cloudbase/weda-ui 3.3.0 → 3.3.2

package/dist/web/components/carousel/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import classNames from '../../utils/classnames';
 import Swipe from 'react-easy-swipe';
 import { useDebouncedCallback, useEventListener, useResizeObserver, } from '@react-hookz/web';
@@ -13,6 +13,15 @@ export default function Carousel({ className, style, autoplay, circular, vertica
     const [swipeStyle, setSwipeStyle] = useState(null);
     const [height, setHeight] = useState(0);
     const { change = () => { } } = events;
+    const setIndex = useCallback((index) => {
+        if (index >= itemCount) {
+            index = 0;
+        }
+        if (index < 0) {
+            index = itemCount - 1;
+        }
+        setCurrentIndex(index);
+    }, [itemCount, setCurrentIndex]);
     // 自动切换
     useEffect(() => {
         if (autoplay) {
@@ -23,10 +32,60 @@ export default function Carousel({ className, style, autoplay, circular, vertica
             }, interval);
             return () => clearInterval(timer);
         }
-    }, [currentIndex, autoplay]);
+    }, [currentIndex, autoplay, interval, setIndex]);
     // 触发切换
     const pre = useRef({ index: currentIndex }).current;
     useEffect(() => {
+        // 设置容器样式、动画
+        // TODO fix settimeout mess
+        const updateSwipeStyle = (to, cur, length) => {
+            let style = {};
+            // 最后向前到最开始
+            if (to === 0 && cur === length - 1) {
+                circular &&
+                    setSwipeStyle({
+                        transform: `translate3d(0, 0, 0)`,
+                    });
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -100%, 0)`
+                            : `translate3d(-100%, 0, 0)`,
+                        transitionDuration: `${duration}ms`,
+                    });
+                }, 50);
+                return;
+            }
+            // 第一个后退到最后
+            if (to === length - 1 && cur === 0) {
+                circular &&
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -${(to + 2) * 100}%, 0)`
+                            : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
+                    });
+                // eslint-disable-next-line rulesdir/no-timer
+                setTimeout(() => {
+                    setSwipeStyle({
+                        transform: vertical
+                            ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                            : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+                        transitionDuration: `${duration}ms`,
+                    });
+                }, 50);
+                return;
+            }
+            style = {
+                transform: vertical
+                    ? `translate3d(0, -${(to + 1) * 100}%, 0)`
+                    : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
+            };
+            if (to !== cur) {
+                style.transitionDuration = `${duration}ms`;
+            }
+            setSwipeStyle(style);
+        };
         updateSwipeStyle(currentIndex, pre.index, itemCount);
         change({
             current: currentIndex,
@@ -34,7 +93,7 @@ export default function Carousel({ className, style, autoplay, circular, vertica
         return () => {
             pre.index = currentIndex;
         };
-    }, [currentIndex, vertical]);
+    }, [currentIndex, vertical, pre, change, itemCount, circular, duration]);
     const outerWrapRef = useRef();
     useEventListener(outerWrapRef, 'load', (e) => {
         setHeight(e.target.clientHeight);
@@ -46,65 +105,6 @@ export default function Carousel({ className, style, autoplay, circular, vertica
                     width: x.width ? x.width : '100%',
                 } })));
     });
-    const setIndex = (index) => {
-        if (index >= itemCount) {
-            index = 0;
-        }
-        if (index < 0) {
-            index = itemCount - 1;
-        }
-        setCurrentIndex(index);
-    };
-    // 设置容器样式、动画
-    // TODO fix settimeout mess
-    const updateSwipeStyle = (to, cur, length) => {
-        let style = {};
-        // 最后向前到最开始
-        if (to === 0 && cur === length - 1) {
-            circular &&
-                setSwipeStyle({
-                    transform: `translate3d(0, 0, 0)`,
-                });
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -100%, 0)`
-                        : `translate3d(-100%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        // 第一个后退到最后
-        if (to === length - 1 && cur === 0) {
-            circular &&
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 2) * 100}%, 0)`
-                        : `translate3d(-${(to + 2) * 100}%, 0, 0)`,
-                });
-            // eslint-disable-next-line rulesdir/no-timer
-            setTimeout(() => {
-                setSwipeStyle({
-                    transform: vertical
-                        ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                        : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-                    transitionDuration: `${duration}ms`,
-                });
-            }, 50);
-            return;
-        }
-        style = {
-            transform: vertical
-                ? `translate3d(0, -${(to + 1) * 100}%, 0)`
-                : `translate3d(-${(to + 1) * 100}%, 0, 0)`,
-        };
-        if (to !== cur) {
-            style.transitionDuration = `${duration}ms`;
-        }
-        setSwipeStyle(style);
-    };
     return (React.createElement("div", { className: classNames('g-swiper weda-ui g-carousel', className, {
             vertical: vertical,
         }), style: { height: height ? height : 'auto', ...style }, ref: outerWrapRef, id: id, "data-testid": "carousel" },

package/dist/web/components/chart/bar/index.d.ts

@@ -1,41 +1,3 @@
 /// <reference types="react" />
-import type { CommonPropsType } from '../../../types';
-import { DataSource, Xfield, Yfield } from '../common/core/type';
-interface PropsType extends Omit<CommonPropsType, 'children'> {
-    directionType?: string;
-    isPile?: boolean;
-    isTitle?: boolean;
-    title?: string;
-    titleLocation?: string;
-    dataSource?: DataSource;
-    filterData?: string;
-    setColor?: Array<string>;
-    xField?: Xfield;
-    xStatistics?: string;
-    groupKey?: Xfield;
-    groupKeyTimeSpan?: string;
-    xIsCountEmpty?: boolean;
-    yField?: Yfield;
-    isLegend?: boolean;
-    legend?: string;
-    legend2?: string;
-    isXaxisName?: boolean;
-    xAxisName?: string;
-    isXaxisAxisLabelShow?: boolean;
-    isXaxisAxisTickShow?: boolean;
-    isXaxisAxisLabelRotate?: boolean;
-    isYAxisSplitlineLinestyleWidth?: boolean;
-    yAxisSplitlineLinestyleType?: string;
-    yAxisMax?: number;
-    yAxisMin?: number;
-    isYAxisName?: boolean;
-    yAxisName?: string;
-    isSeriesShowSymbol?: boolean;
-    isYAxisShow?: boolean;
-    isUnit?: boolean;
-    unit?: string;
-    decimalDigits?: number;
-    suffix?: string;
-}
-export default function Bar(opts: PropsType): JSX.Element;
-export {};
+import type { PropsType } from '../common/types';
+export default function Bar(props: PropsType<'bar'>): JSX.Element;

package/dist/web/components/chart/bar/index.js

@@ -1,56 +1,45 @@
-import React, { useRef } from 'react';
-import EchartBar from '../common/core/eChartBar';
-import { useWedaChart } from '../common/useChart';
-import classNames from '../../../utils/classnames';
-export default function Bar(opts) {
-    const { directionType, isPile, id, style, className, isTitle, title, titleLocation, dataSource, setColor, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, } = opts;
-    const domRef = useRef();
-    useWedaChart(domRef, EchartBar, {
-        directionType,
-        isPile,
-        setColor,
-        isTitle,
-        title,
-        titleLocation,
-        dataSource,
-        filterData,
-        xField,
-        xStatistics,
-        groupKey,
-        groupKeyTimeSpan,
-        xIsCountEmpty,
-        yField,
-        isLegend,
-        legend,
-        legend2,
-        isXaxisName,
-        xAxisName,
-        isXaxisAxisLabelShow,
-        isXaxisAxisTickShow,
-        isXaxisAxisLabelRotate,
-        isYAxisSplitlineLinestyleWidth,
-        yAxisSplitlineLinestyleType,
-        yAxisMax,
-        yAxisMin,
-        isYAxisName,
-        yAxisName,
-        isSeriesShowSymbol,
-        isYAxisShow,
-        isUnit,
-        unit,
-        decimalDigits,
-        suffix,
-    });
-    const inlineStyle = {
-        height: '380px',
-        width: '100%',
-        backgroundColor: '#ffffff',
-        ...style,
-    };
-    return (React.createElement("div", { id: id, "data-testid": "bar", ref: domRef, style: inlineStyle, className: classNames({
-            'weda-ui-chart-bar': true,
-            'echart-wrapper-canvas': true,
-            'echart-dark-body': true,
-            [className]: className,
-        }) }));
+import React from 'react';
+import OldBar from './index.old';
+import { checkIsNewData, transform } from '../common/data-transform';
+import { Chart } from '../common/Chart';
+import { emptyArray } from '../../../utils/constant';
+import { ChartCustomConnector } from '../common/chart-custom-connector';
+import { CommonErrorBoundary } from '../../common/error-boundary';
+import { debug } from '../../../utils/console';
+const logger = debug('bar:impl');
+function BarImpl(props) {
+    logger.log(props, checkIsNewData(props));
+    if (props.dataSourceType === 'data-model') {
+        if (checkIsNewData(props)) {
+            props.dataSource = {
+                name: props['dataModel'].name,
+                type: 'database',
+                subType: 'database',
+                methodName: 'wedaAggregateData',
+            };
+        }
+        const oldBarProps = { ...props };
+        oldBarProps['dataModel'] = undefined;
+        oldBarProps['datasourceVariable'] = undefined;
+        oldBarProps['connectorMethod'] = undefined;
+        oldBarProps['connectorParams'] = undefined;
+        oldBarProps['connector'] = undefined;
+        debug('bar:old').log('OldBar', oldBarProps);
+        return React.createElement(OldBar, { ...oldBarProps });
+    }
+    else if (props.dataSourceType === 'variable') {
+        const { datasourceVariable = emptyArray, id, style, className, events, ...rest } = props;
+        const chartOptions = transform('bar', datasourceVariable, rest);
+        return (React.createElement(Chart, { id: id, "data-testid": "bar", className: className, style: style, events: events, chartOptions: chartOptions }));
+    }
+    else if (props.dataSourceType === 'custom-connector') {
+        return React.createElement(ChartCustomConnector, { "data-testid": "bar", type: "bar", ...props });
+    }
+    else {
+        return React.createElement(OldBar, { ...props });
+    }
+}
+export default function Bar(props) {
+    return (React.createElement(CommonErrorBoundary, { ...props },
+        React.createElement(BarImpl, { ...props })));
 }

package/dist/web/components/chart/common/core/eChartBar.d.ts

@@ -28,13 +28,12 @@ declare class EchartBar extends EchartBase {
     setDirectionType({ directionType }: {
         directionType: any;
     }): void;
-    setOptions({ directionType, isPile, setColor, isTitle, title, titleLocation, dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }: {
+    setOptions({ directionType, isPile, setColor, isTitle, title, dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }: {
         directionType: any;
         isPile: any;
         setColor: any;
         isTitle: any;
         title: any;
-        titleLocation: any;
         dataSource: any;
         filterData: any;
         xField: any;
@@ -45,7 +44,6 @@ declare class EchartBar extends EchartBase {
         yField: any;
         isLegend: any;
         legend: any;
-        legend2: any;
         isXaxisName: any;
         xAxisName: any;
         isXaxisAxisLabelShow: any;

package/dist/web/components/chart/common/core/eChartBar.js

@@ -155,8 +155,11 @@ class EchartBar extends EchartBase {
             }
         }
     }
-    async setOptions({ directionType, isPile, setColor, isTitle, title, titleLocation, dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }) {
-        legend = document.body.clientWidth < 1024 ? legend : legend2;
+    async setOptions({ directionType, isPile, setColor, isTitle, title, 
+    // titleLocation,
+    dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, 
+    // legend2,
+    isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }) {
         if (dataSource) {
             await this.setSourceData({
                 dataSource,
@@ -171,7 +174,7 @@ class EchartBar extends EchartBase {
             });
         }
         this.setColor({ setColor });
-        this.setTitle({ isTitle, title, titleLocation });
+        this.setTitle({ isTitle, title });
         this.setLegend({ isLegend, legend });
         this.setIsXaxisAxisLabelShow({ isXaxisAxisLabelShow });
         this.setIsXaxisName({ isXaxisName, xAxisName });

package/dist/web/components/chart/common/core/eChartBase.d.ts

@@ -26,7 +26,7 @@ declare type IReturnData = {
 declare class EchartBase extends AbstractEchartBaseModal {
     config: any;
     constructor();
-    setOptions(options: any): Promise<void>;
+    setOptions(_options: any): Promise<void>;
     /** 获取所有配置好的图表数据 */
     getOptions(): any;
     /** 生成后台查询条件 */
@@ -44,10 +44,9 @@ declare class EchartBase extends AbstractEchartBaseModal {
      *
      **/
     protected getSourceData(sourceName: string, methods: string, dataSourceType: string, params: any): Promise<any>;
-    protected setTitle({ isTitle, title, titleLocation }: {
+    protected setTitle({ isTitle, title }: {
         isTitle: any;
         title: any;
-        titleLocation?: string;
     }): void;
     protected setLegend({ isLegend, legend }: {
         isLegend: any;

package/dist/web/components/chart/common/core/eChartBase.js

@@ -19,7 +19,8 @@ class EchartBase extends AbstractEchartBaseModal {
         });
         this.config = getConfig();
     }
-    async setOptions(options) { }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    async setOptions(_options) { }
     /** 获取所有配置好的图表数据 */
     getOptions() {
         return this.config;
@@ -91,9 +92,10 @@ class EchartBase extends AbstractEchartBaseModal {
      **/
     async getSourceData(sourceName = '', methods = '', dataSourceType = '', params) {
         var _a, _b, _c;
-        if (!sourceName ||
-            Object.keys((_a = params === null || params === void 0 ? void 0 : params.dimension) !== null && _a !== void 0 ? _a : {}).length <= 0 ||
-            ((_b = params.value) !== null && _b !== void 0 ? _b : []).length <= 0) {
+        if (dataSourceType === 'database' &&
+            (!sourceName ||
+                Object.keys((_a = params === null || params === void 0 ? void 0 : params.dimension) !== null && _a !== void 0 ? _a : {}).length <= 0 ||
+                ((_b = params.value) !== null && _b !== void 0 ? _b : []).length <= 0)) {
             console.warn('charts 参数不完整');
             return [];
         }
@@ -121,7 +123,7 @@ class EchartBase extends AbstractEchartBaseModal {
             return [];
         }
     }
-    setTitle({ isTitle, title, titleLocation = '' }) {
+    setTitle({ isTitle, title }) {
         this.config.title;
         this.config.title.show = isTitle;
         this.config.title.text = title;
@@ -182,8 +184,46 @@ class EchartBase extends AbstractEchartBaseModal {
     sortXAxisData(arrData, formatType = '') {
         const xFields = [...arrData];
         if (['datetime', 'date', 'time'].includes(formatType)) {
+            const monthRegex = /^(\d{4}(?:-\d{2}){0,2}) {0,1}(\d{2})$/;
+            const weekRegex = /^(\d{4})W(\d+)$/;
             xFields.sort((a, b) => {
                 if (a.XLabel.Value && b.XLabel.Value) {
+                    const monthMathcA = monthRegex.exec(a.XLabel.Value);
+                    const monthMatchB = monthRegex.exec(b.XLabel.Value);
+                    if (monthMatchB &&
+                        monthMatchB &&
+                        monthMathcA[1] &&
+                        monthMatchB[1] &&
+                        monthMathcA[2] &&
+                        monthMatchB[2]) {
+                        // 月的 格式 YYYY-MM-DD HH
+                        const aDate = new Date(monthMathcA[1]).getTime();
+                        const bDate = new Date(monthMatchB[1]).getTime();
+                        const aHour = parseInt(monthMathcA[2], 10);
+                        const bHour = parseInt(monthMatchB[2], 10);
+                        if (aDate !== bDate) {
+                            return aDate - bDate;
+                        }
+                        return aHour - bHour;
+                    }
+                    const weekMathcA = weekRegex.exec(a.XLabel.Value);
+                    const weekMatchB = weekRegex.exec(b.XLabel.Value);
+                    if (weekMatchB &&
+                        weekMatchB &&
+                        weekMathcA[1] &&
+                        weekMatchB[1] &&
+                        weekMathcA[2] &&
+                        weekMatchB[2]) {
+                        // 月的格式 2022W5
+                        const aYear = parseInt(weekMathcA[1], 10);
+                        const bYear = parseInt(weekMatchB[1], 10);
+                        const aWeek = parseInt(weekMathcA[2], 10);
+                        const bWeek = parseInt(weekMatchB[2], 10);
+                        if (aYear !== bYear) {
+                            return aYear - bYear;
+                        }
+                        return aWeek - bWeek;
+                    }
                     return (new Date(a.XLabel.Value).getTime() -
                         new Date(b.XLabel.Value).getTime());
                 }
@@ -267,6 +307,8 @@ class EchartBase extends AbstractEchartBaseModal {
     // 显示 X 轴标签名
     setIsXaxisAxisLabelShow({ isXaxisAxisLabelShow }) {
         this.config.xAxis.axisLabel.show = isXaxisAxisLabelShow;
+        // 阻止自动隐藏
+        this.config.xAxis.axisLabel.interval = 0;
     }
     // 显示 X 轴名
     setIsXaxisName({ isXaxisName, xAxisName }) {

package/dist/web/components/chart/common/core/eChartLine.d.ts

@@ -24,11 +24,10 @@ declare class EchartLine extends EchartBase {
         decimalDigits: any;
         suffix: any;
     }): void;
-    setOptions({ chartType, isTitle, title, titleLocation, dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }: {
+    setOptions({ chartType, isTitle, title, dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }: {
         chartType: any;
         isTitle: any;
         title: any;
-        titleLocation: any;
         dataSource: any;
         filterData: any;
         xField: any;
@@ -39,7 +38,6 @@ declare class EchartLine extends EchartBase {
         yField: any;
         isLegend: any;
         legend: any;
-        legend2: any;
         isXaxisName: any;
         xAxisName: any;
         isXaxisAxisLabelShow: any;

package/dist/web/components/chart/common/core/eChartLine.js

@@ -130,7 +130,11 @@ class EchartLine extends EchartBase {
             this.config.yAxis.axisLabel.formatter = null;
         }
     }
-    async setOptions({ chartType, isTitle, title, titleLocation, dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }) {
+    async setOptions({ chartType, isTitle, title, 
+    // titleLocation,
+    dataSource, filterData, xField, xStatistics, groupKey, groupKeyTimeSpan, xIsCountEmpty, yField, isLegend, legend, 
+    // legend2,
+    isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, }) {
         if (dataSource) {
             await this.setSourceData({
                 dataSource,
@@ -143,9 +147,8 @@ class EchartLine extends EchartBase {
                 groupKeyTimeSpan,
             });
         }
-        legend = document.body.clientWidth < 1024 ? legend : legend2;
         this.setChartType({ chartType });
-        this.setTitle({ isTitle, title, titleLocation });
+        this.setTitle({ isTitle, title });
         this.setLegend({ isLegend, legend });
         this.setIsXaxisAxisLabelShow({ isXaxisAxisLabelShow });
         this.setIsXaxisName({ isXaxisName, xAxisName });

package/dist/web/components/chart/common/core/eChartPie.d.ts

@@ -24,11 +24,10 @@ declare class EchartPie extends EchartBase {
         decimalDigits: any;
         suffix: any;
     }): void;
-    setOptions({ chartType, isTitle, title, titleLocation, dataSource, filterData, setColor, xField, xStatistics, xIsCountEmpty, yField, isLegend, legend, legend2, isSeriesShowSymbol, isPercent, isUnit, unit, decimalDigits, suffix, }: {
+    setOptions({ chartType, isTitle, title, dataSource, filterData, setColor, xField, xStatistics, xIsCountEmpty, yField, isLegend, legend, isSeriesShowSymbol, isPercent, isUnit, unit, decimalDigits, suffix, }: {
         chartType: any;
         isTitle: any;
         title: any;
-        titleLocation: any;
         dataSource: any;
         filterData: any;
         setColor: any;
@@ -38,7 +37,6 @@ declare class EchartPie extends EchartBase {
         yField: any;
         isLegend: any;
         legend: any;
-        legend2: any;
         isSeriesShowSymbol: any;
         isPercent: any;
         isUnit: any;

package/dist/web/components/chart/common/core/eChartPie.js

@@ -103,8 +103,11 @@ class EchartPie extends EchartBase {
             };
         }
     }
-    async setOptions({ chartType, isTitle, title, titleLocation, dataSource, filterData, setColor, xField, xStatistics, xIsCountEmpty, yField, isLegend, legend, legend2, isSeriesShowSymbol, isPercent, isUnit, unit, decimalDigits, suffix, }) {
-        legend = document.body.clientWidth < 1024 ? legend : legend2;
+    async setOptions({ chartType, isTitle, title, 
+    // titleLocation,
+    dataSource, filterData, setColor, xField, xStatistics, xIsCountEmpty, yField, isLegend, legend, 
+    // legend2,
+    isSeriesShowSymbol, isPercent, isUnit, unit, decimalDigits, suffix, }) {
         if (dataSource) {
             await this.setSourceData({
                 dataSource,
@@ -117,7 +120,7 @@ class EchartPie extends EchartBase {
             });
         }
         this.setChartType({ chartType });
-        this.setTitle({ isTitle, title, titleLocation });
+        this.setTitle({ isTitle, title });
         this.setLegend({ isLegend, legend });
         this.setIsSeriesShowSymbol({
             isSeriesShowSymbol,

package/dist/web/components/chart/common/echarts.d.ts

@@ -1,2 +1,5 @@
 import * as echarts from 'echarts/core';
+import type { BarSeriesOption, LineSeriesOption, PieSeriesOption } from 'echarts/charts';
+import type { TitleComponentOption, TooltipComponentOption, LegendComponentOption, GridComponentOption } from 'echarts/components';
 export default echarts;
+export declare type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | PieSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption | LegendComponentOption>;

package/dist/web/components/chart/common/useChart.js

@@ -1,7 +1,9 @@
-import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect, } from '@react-hookz/web';
-import { useEffect, useRef, } from 'react';
+import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect, useResizeObserver, } from '@react-hookz/web';
+import { useEffect, useState } from 'react';
+import { debug } from '../../../utils/console';
+const logger = debug('chart:use-chart');
 export function useChart(ref) {
-    const chartRef = useRef();
+    const [chartRef, setChartRef] = useState(null);
     const isMounted = useIsMounted();
     useMountEffect(async () => {
         if (!ref.current || !isMounted) {
@@ -9,17 +11,18 @@ export function useChart(ref) {
         }
         const echarts = (await import(/* webpackChunkName: "echarts" */ './echarts')).default;
         const echartDom = ref.current;
-        const chart = echarts.init(echartDom);
-        chartRef.current = chart;
+        setChartRef(echarts.init(echartDom));
         return () => {
-            chart.dispose();
-            chartRef.current = null;
+            chartRef.dispose();
         };
     });
     useEventListener(window, 'resize', () => {
-        chartRef.current && chartRef.current.resize();
+        chartRef && chartRef.resize();
     });
-    return chartRef.current;
+    useResizeObserver(ref, () => {
+        chartRef && chartRef.resize();
+    });
+    return chartRef;
 }
 /**
  * @deprecated The method should not be used
@@ -29,6 +32,7 @@ export function useWedaChart(domRef, ModalClass, options) {
     const getOptions = async () => {
         const chartModal = new ModalClass();
         let finalOptions = await chartModal.setOptions(options);
+        logger.log(options, finalOptions);
         if (!finalOptions) {
             finalOptions = chartModal.getOptions();
         }
@@ -46,8 +50,16 @@ export function useWedaChart(domRef, ModalClass, options) {
         actions,
     ]);
     useEffect(() => {
+        if (state.status === 'loading' || state.status === 'not-executed') {
+            chart === null || chart === void 0 ? void 0 : chart.showLoading();
+            return;
+        }
+        chart === null || chart === void 0 ? void 0 : chart.hideLoading();
+    }, [chart, state.status]);
+    useEffect(() => {
+        logger.log(state, state.result);
         if (state.status === 'success' && chart) {
-            console.log(ModalClass.name, options, state.result, window.location.href);
+            logger.log(options, state.result, window.location.href);
             chart.setOption(state.result, true // noMerge 全刷
             );
         }
@@ -56,5 +68,5 @@ export function useWedaChart(domRef, ModalClass, options) {
                 console.error(state.error);
             }
         }
-    }, [state]);
+    }, [state, chart, options]);
 }