@cloudbase/weda-ui 3.2.1 → 3.3.1

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

@@ -1,170 +0,0 @@
-import EchartBase from './eChartBase';
-import getConfig from '../config/line';
-/**
- * 折线图表
- * @author loonglong
- **/
-class EchartLine extends EchartBase {
-    constructor() {
-        super();
-        const config = getConfig();
-        this.config = { ...this.config, ...config };
-    }
-    async setSourceData({ dataSource, filterData, xField, xStatistics, xIsCountEmpty, yField, groupKey, groupKeyTimeSpan, }) {
-        const { name = '', type = '', methodName = '' } = dataSource;
-        if (name !== '') {
-            const params = this.createWhere({
-                filterData,
-                xField,
-                xStatistics,
-                xIsCountEmpty,
-                yField,
-                groupKey,
-                groupKeyTimeSpan,
-            });
-            const arrSourData = await this.getSourceData(name, methodName, type, params);
-            // 获取 x 轴数据
-            const sortedXAxisData = this.sortXAxisData(arrSourData, xField.format);
-            const arrXaxisData = this.setXaxis(sortedXAxisData, xField.format);
-            const arrXisCountEmptyIndex = []; // 记录空值的key
-            if (Object.keys(groupKey !== null && groupKey !== void 0 ? groupKey : {}).length === 0) {
-                const numLine = sortedXAxisData[0].YLabels.length;
-                if (numLine > 0) {
-                    for (let j = 0; j < numLine; j++) {
-                        this.config.series[j] = {
-                            type: 'line',
-                            smooth: true,
-                            name: '',
-                            connectNulls: true,
-                            showSymbol: true,
-                            label: {
-                                show: true,
-                            },
-                            data: [],
-                        };
-                        sortedXAxisData.forEach((itemSource, index) => {
-                            var _a, _b;
-                            this.config.series[j].name =
-                                (_b = (_a = itemSource.YLabels[j]) === null || _a === void 0 ? void 0 : _a.Cn_Name) !== null && _b !== void 0 ? _b : itemSource.YLabels[j].Name;
-                            if ((itemSource.YLabels[j].Value === undefined ||
-                                itemSource.YLabels[j].Value === null) &&
-                                !xIsCountEmpty) {
-                                arrXisCountEmptyIndex.push(index);
-                            }
-                            else {
-                                const value = itemSource.YLabels[j].Value
-                                    ? itemSource.YLabels[j].Value
-                                    : 0;
-                                this.config.series[j].data.push(value);
-                            }
-                        });
-                    }
-                }
-                // 处理显示空值问题
-                this.setEmptyValue(xIsCountEmpty);
-            }
-            else if (groupKey) {
-                // 如果是分组，则这里需要特殊处理
-                // 按groupKey分组存放数据值
-                const objGroupKey = {}; // {'分组字段':[{value:'统计的值', dimensionality:'维度名', name:'统计的数值字段名'}]}
-                sortedXAxisData.forEach((itemSourData) => {
-                    itemSourData.YLabels.forEach((yLabel) => {
-                        if (!objGroupKey[yLabel.Group_Name]) {
-                            objGroupKey[yLabel.Group_Name] = [];
-                        }
-                        objGroupKey[yLabel.Group_Name].push({
-                            value: yLabel.Value,
-                            dimensionality: itemSourData.XLabel.Value,
-                            name: yLabel.Cn_Name,
-                        });
-                    });
-                });
-                // 组装图表需要的数据
-                const groupNames = Object.keys(objGroupKey);
-                this.config.series = groupNames.map((groupKey) => {
-                    // groupKey分组字段中文名
-                    const serie = {
-                        name: groupKey,
-                        connectNulls: true,
-                        data: this.getSeriesDataGroup(arrXaxisData, objGroupKey[groupKey]),
-                        type: 'line',
-                        smooth: true,
-                        showSymbol: true,
-                        label: {
-                            show: true, // 显示线条上的数据
-                        },
-                    };
-                    return serie;
-                });
-                this.config.tooltip.formatter = (params) => `${params.data.dimensionality}\r\n${params.data.name}\r\n${params.seriesName}:${params.value}`;
-            }
-        }
-    }
-    setChartType({ chartType }) {
-        this.config.series.length > 0 &&
-            this.config.series.forEach((itemSeries) => {
-                itemSeries.smooth = chartType !== 'line';
-            });
-    }
-    // 显示图表上的数据标签 单位，标签，小数位数，后缀
-    setIsSeriesShowSymbol({ isSeriesShowSymbol, isUnit, unit, decimalDigits, suffix, }) {
-        decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
-        this.config.series.length > 0 &&
-            this.config.series.forEach((itemSeries) => {
-                itemSeries.showSymbol = isSeriesShowSymbol;
-                itemSeries.label.show = isSeriesShowSymbol;
-                if (isUnit) {
-                    itemSeries.label.formatter = (params) => {
-                        const objNewValue = this.getValueByUnit(params.value, unit);
-                        return `${objNewValue.toFixed(decimalDigits)}${suffix}`;
-                    };
-                }
-            });
-        if (isUnit) {
-            this.config.yAxis.axisLabel.formatter = (value) => {
-                const objNewValue = this.getValueByUnit(value, unit);
-                return `${objNewValue.toFixed(decimalDigits)}${suffix}`;
-            };
-        }
-        else {
-            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, }) {
-        if (dataSource) {
-            await this.setSourceData({
-                dataSource,
-                filterData,
-                xField,
-                xStatistics,
-                xIsCountEmpty,
-                yField,
-                groupKey,
-                groupKeyTimeSpan,
-            });
-        }
-        legend = document.body.clientWidth < 1024 ? legend : legend2;
-        this.setChartType({ chartType });
-        this.setTitle({ isTitle, title, titleLocation });
-        this.setLegend({ isLegend, legend });
-        this.setIsXaxisAxisLabelShow({ isXaxisAxisLabelShow });
-        this.setIsXaxisName({ isXaxisName, xAxisName });
-        this.setIsXaxisAxisTickShow({ isXaxisAxisTickShow });
-        this.setIsXaxisAxisLabelRotate({ isXaxisAxisLabelRotate, xStatistics });
-        this.setIsYAxisSplitlineLinestyleWidth({
-            isYAxisSplitlineLinestyleWidth,
-            yAxisSplitlineLinestyleType,
-        });
-        this.setYAxisMaxMin({ yAxisMax, yAxisMin });
-        this.setIsYAxisName({ isYAxisName, yAxisName });
-        this.setIsYAxisShow({ isYAxisShow });
-        this.setIsSeriesShowSymbol({
-            isSeriesShowSymbol,
-            isUnit,
-            unit,
-            decimalDigits,
-            suffix,
-        });
-    }
-}
-export default EchartLine;

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

@@ -1,50 +0,0 @@
-export default EchartPie;
-/**
- * 饼状图表
- * @author loonglong
- **/
-declare class EchartPie extends EchartBase {
-    setSourceData({ dataSource, filterData, setColor, xField, xStatistics, xIsCountEmpty, yField, }: {
-        dataSource: any;
-        filterData: any;
-        setColor: any;
-        xField: any;
-        xStatistics: any;
-        xIsCountEmpty: any;
-        yField: any;
-    }): Promise<void>;
-    setChartType({ chartType }: {
-        chartType: any;
-    }): void;
-    setIsSeriesShowSymbol({ isSeriesShowSymbol, isPercent, isUnit, unit, decimalDigits, suffix, }: {
-        isSeriesShowSymbol: any;
-        isPercent: any;
-        isUnit: any;
-        unit: any;
-        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, }: {
-        chartType: any;
-        isTitle: any;
-        title: any;
-        titleLocation: any;
-        dataSource: any;
-        filterData: any;
-        setColor: any;
-        xField: any;
-        xStatistics: any;
-        xIsCountEmpty: any;
-        yField: any;
-        isLegend: any;
-        legend: any;
-        legend2: any;
-        isSeriesShowSymbol: any;
-        isPercent: any;
-        isUnit: any;
-        unit: any;
-        decimalDigits: any;
-        suffix: any;
-    }): Promise<void>;
-}
-import EchartBase from "./eChartBase";

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

@@ -1,132 +0,0 @@
-import EchartBase from './eChartBase';
-import getConfig from '../config/pie';
-/**
- * 饼状图表
- * @author loonglong
- **/
-class EchartPie extends EchartBase {
-    constructor() {
-        super();
-        const config = getConfig();
-        this.config = { ...this.config, ...config };
-    }
-    async setSourceData({ dataSource, filterData, setColor, xField, xStatistics, xIsCountEmpty, yField, }) {
-        const { name = '', type = '', methodName = '' } = dataSource;
-        if (name !== '') {
-            const params = this.createWhere({
-                filterData,
-                xField,
-                xStatistics,
-                xIsCountEmpty,
-                yField,
-            });
-            const arrSourData = await this.getSourceData(name, methodName, type, params);
-            // 获取 x 轴数据
-            if (arrSourData.length > 0) {
-                const numPie = arrSourData[0].YLabels.length;
-                if (numPie > 0) {
-                    const arrData = [];
-                    let i = 0;
-                    arrSourData.forEach((itemSource) => {
-                        const numc = setColor ? setColor.length : 0;
-                        const strColor = numc > 0 ? { color: setColor[i % numc] } : {};
-                        arrData.push({
-                            value: itemSource.YLabels[0].Value,
-                            name: itemSource.XLabel.Value,
-                            tooltip: {},
-                            itemStyle: strColor,
-                        });
-                        i = i + 1;
-                    });
-                    this.config.series[0].data = arrData;
-                }
-            }
-            else {
-                // this.config['series'][0].data = [];
-            }
-        }
-    }
-    setChartType({ chartType }) {
-        this.config.series.length > 0 &&
-            this.config.series.forEach((itemSeries) => {
-                if (chartType === 'pie') {
-                    itemSeries.radius = '70%';
-                }
-                else {
-                    // @ts-ignore no type
-                    itemSeries.radius = ['40%', '70%'];
-                }
-            });
-    }
-    // 显示图表上的数据标签 单位，标签，小数位数，后缀
-    setIsSeriesShowSymbol({ isSeriesShowSymbol, isPercent, isUnit, unit, decimalDigits, suffix, }) {
-        decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
-        let show = false;
-        let position = 'inner';
-        let formatter = null;
-        if (isSeriesShowSymbol || isPercent || isUnit) {
-            formatter = '';
-        }
-        this.config.series[0].label.show = show;
-        this.config.series[0].label.position = position;
-        if (formatter === null) {
-            this.config.series[0].label.normal = null;
-        }
-        else {
-            this.config.series[0].label.normal.formatter = (objValue) => {
-                let reData = '';
-                if (isSeriesShowSymbol) {
-                    // 显示数值
-                    reData = objValue.value;
-                }
-                if (isUnit) {
-                    // 显示单位
-                    if (unit) {
-                        const objNewValue = this.getValueByUnit(objValue.value, unit);
-                        reData = `${objNewValue.toFixed(decimalDigits)}${suffix}`;
-                    }
-                    else {
-                        reData = `${objValue.value.toFixed(decimalDigits)}`;
-                    }
-                    this.config.series[0].data.forEach((itemData) => {
-                        itemData.tooltip.formatter = (objVal) => {
-                            const objItemData = this.getValueByUnit(objVal.value, unit);
-                            return `${objItemData.toFixed(decimalDigits)}${suffix}`;
-                        };
-                    });
-                }
-                if (isPercent) {
-                    // 显示百分比
-                    reData = `${reData}(${objValue.percent}%)`;
-                }
-                return reData;
-            };
-        }
-    }
-    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;
-        if (dataSource) {
-            await this.setSourceData({
-                dataSource,
-                filterData,
-                setColor,
-                xField,
-                xStatistics,
-                xIsCountEmpty,
-                yField,
-            });
-        }
-        this.setChartType({ chartType });
-        this.setTitle({ isTitle, title, titleLocation });
-        this.setLegend({ isLegend, legend });
-        this.setIsSeriesShowSymbol({
-            isSeriesShowSymbol,
-            isPercent,
-            isUnit,
-            unit,
-            decimalDigits,
-            suffix,
-        });
-    }
-}
-export default EchartPie;

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

@@ -1,35 +0,0 @@
-export interface DataSource {
-    name: string;
-    type: string;
-    subType: string;
-    provider?: string;
-    methodName: string;
-}
-export interface ObjSource {
-    dataSourceName: string;
-    dataSourceType: string;
-    dataSourceMethodName: string;
-}
-export interface Xfield {
-    format: string;
-    type: string;
-    title: string;
-    name: string;
-}
-declare enum CountType {
-    'count' = 0,
-    'sum' = 1,
-    'avg' = 2,
-    'max' = 3,
-    'min' = 4
-}
-export interface YfieldOne {
-    key: string;
-    operationType: CountType;
-    title?: string;
-}
-export interface Yfield {
-    groupKey?: string;
-    numValue?: Array<YfieldOne>;
-}
-export {};

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

@@ -1,9 +0,0 @@
-var CountType;
-(function (CountType) {
-    CountType[CountType["count"] = 0] = "count";
-    CountType[CountType["sum"] = 1] = "sum";
-    CountType[CountType["avg"] = 2] = "avg";
-    CountType[CountType["max"] = 3] = "max";
-    CountType[CountType["min"] = 4] = "min";
-})(CountType || (CountType = {}));
-export {};

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

@@ -1,2 +0,0 @@
-import * as echarts from 'echarts/core';
-export default echarts;

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

@@ -1,24 +0,0 @@
-// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
-import * as echarts from 'echarts/core';
-// 引入图表，图表后缀都为 Chart
-import { BarChart, LineChart, PieChart } from 'echarts/charts';
-//组件，组件后缀都为 Component
-import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, } from 'echarts/components';
-// 标签自动布局，全局过渡动画等特性
-import { LabelLayout, UniversalTransition } from 'echarts/features';
-// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-import { CanvasRenderer } from 'echarts/renderers';
-// 注册必须的组件
-echarts.use([
-    TitleComponent,
-    TooltipComponent,
-    GridComponent,
-    LegendComponent,
-    LabelLayout,
-    UniversalTransition,
-    CanvasRenderer,
-    BarChart,
-    LineChart,
-    PieChart,
-]);
-export default echarts;

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

@@ -1,8 +0,0 @@
-import { MutableRefObject, RefObject } from 'react';
-import { IEchartModalBase } from './core/eChartBase';
-import type IEcharts from './echarts';
-export declare function useChart(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>): IEcharts.ECharts;
-/**
- * @deprecated The method should not be used
- */
-export declare function useWedaChart(domRef: any, ModalClass: IEchartModalBase, options: IEcharts.EChartsCoreOption): void;

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

@@ -1,60 +0,0 @@
-import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect, } from '@react-hookz/web';
-import { useEffect, useRef, } from 'react';
-export function useChart(ref) {
-    const chartRef = useRef();
-    const isMounted = useIsMounted();
-    useMountEffect(async () => {
-        if (!ref.current || !isMounted) {
-            return;
-        }
-        const echarts = (await import(/* webpackChunkName: "echarts" */ './echarts')).default;
-        const echartDom = ref.current;
-        const chart = echarts.init(echartDom);
-        chartRef.current = chart;
-        return () => {
-            chart.dispose();
-            chartRef.current = null;
-        };
-    });
-    useEventListener(window, 'resize', () => {
-        chartRef.current && chartRef.current.resize();
-    });
-    return chartRef.current;
-}
-/**
- * @deprecated The method should not be used
- */
-export function useWedaChart(domRef, ModalClass, options) {
-    const chart = useChart(domRef);
-    const getOptions = async () => {
-        const chartModal = new ModalClass();
-        let finalOptions = await chartModal.setOptions(options);
-        if (!finalOptions) {
-            finalOptions = chartModal.getOptions();
-        }
-        return finalOptions;
-    };
-    const [state, actions] = useAsync(getOptions);
-    useMountEffect(() => {
-        actions.execute();
-    });
-    useDeepCompareEffect(() => {
-        actions.execute();
-    }, [
-        // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
-        options,
-        actions,
-    ]);
-    useEffect(() => {
-        if (state.status === 'success' && chart) {
-            console.log(ModalClass.name, options, state.result, window.location.href);
-            chart.setOption(state.result, true // noMerge 全刷
-            );
-        }
-        else {
-            if (state.status === 'error') {
-                console.error(state.error);
-            }
-        }
-    }, [state]);
-}

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

@@ -1,39 +0,0 @@
-/// <reference types="react" />
-import type { CommonPropsType } from '../../../types';
-import { DataSource, Xfield, Yfield } from '../common/core/type';
-interface PropsType extends Omit<CommonPropsType, 'children'> {
-    chartType?: string;
-    isTitle?: boolean;
-    title?: string;
-    titleLocation?: string;
-    dataSource?: DataSource;
-    filterData?: string;
-    xField?: Xfield;
-    groupKey?: Xfield;
-    groupKeyTimeSpan?: string;
-    xStatistics?: 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 Line(opts: PropsType): JSX.Element;
-export {};

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

@@ -1,53 +0,0 @@
-import React, { useRef } from 'react';
-import EChartLine from '../common/core/eChartLine';
-import classNames from '../../../utils/classnames';
-import { useWedaChart } from '../common/useChart';
-export default function Line(opts) {
-    const { id, style, className, chartType, isTitle, title, titleLocation, dataSource, filterData, xField, xStatistics, xIsCountEmpty, yField, groupKey, groupKeyTimeSpan, 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, EChartLine, {
-        chartType,
-        isTitle,
-        title,
-        titleLocation,
-        dataSource,
-        filterData,
-        xField,
-        xStatistics,
-        xIsCountEmpty,
-        yField,
-        groupKey,
-        groupKeyTimeSpan,
-        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, ref: domRef, "data-testid": "line", style: inlineStyle, className: classNames({
-            'echart-wrapper-canvas': true,
-            'echart-dark-body': true,
-            [className]: className,
-        }) }));
-}

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

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import type { CommonPropsType } from '../../../types';
-import { DataSource, Xfield, Yfield } from '../common/core/type';
-interface PropsType extends Omit<CommonPropsType, 'children'> {
-    chartType?: string;
-    isTitle?: boolean;
-    title?: string;
-    titleLocation?: string;
-    dataSource?: DataSource;
-    filterData?: string;
-    setColor?: Array<string>;
-    xField?: Xfield;
-    xStatistics?: string;
-    xIsCountEmpty?: boolean;
-    yField?: Yfield;
-    isLegend?: boolean;
-    legend?: string;
-    legend2?: string;
-    isSeriesShowSymbol?: boolean;
-    isPercent?: boolean;
-    isUnit?: boolean;
-    unit?: string;
-    decimalDigits?: number;
-    suffix?: string;
-}
-export default function Line({ id, style, className, chartType, isTitle, title, titleLocation, dataSource, filterData, setColor, xField, xStatistics, xIsCountEmpty, yField, isLegend, legend, legend2, isSeriesShowSymbol, isPercent, isUnit, unit, decimalDigits, suffix, }: PropsType): JSX.Element;
-export {};

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

@@ -1,40 +0,0 @@
-import React, { useRef } from 'react';
-import EchartPie from '../common/core/eChartPie';
-import { useWedaChart } from '../common/useChart';
-import classNames from '../../../utils/classnames';
-export default function Line({ id, style, className, chartType, isTitle, title, titleLocation, dataSource, filterData, setColor, xField, xStatistics, xIsCountEmpty, yField, isLegend, legend, legend2, isSeriesShowSymbol, isPercent, isUnit, unit, decimalDigits, suffix, }) {
-    const domRef = useRef();
-    useWedaChart(domRef, EchartPie, {
-        chartType,
-        isTitle,
-        title,
-        titleLocation,
-        dataSource,
-        filterData,
-        setColor,
-        xField,
-        xStatistics,
-        xIsCountEmpty,
-        yField,
-        isLegend,
-        legend,
-        legend2,
-        isSeriesShowSymbol,
-        isPercent,
-        isUnit,
-        unit,
-        decimalDigits,
-        suffix,
-    });
-    const inlineStyle = {
-        height: '380px',
-        width: '100%',
-        backgroundColor: '#ffffff',
-        ...style,
-    };
-    return (React.createElement("div", { id: id, "data-testid": "pie", ref: domRef, style: inlineStyle, className: classNames({
-            'echart-wrapper-canvas': true,
-            'echart-dark-body': true,
-            [className]: className,
-        }) }));
-}