@cloudbase/weda-ui 3.1.0 → 3.1.3

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

@@ -0,0 +1,168 @@
+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) => {
+                            this.config.series[j].name = itemSource.YLabels[j].Cn_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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,132 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,9 @@
+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

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

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

@@ -0,0 +1,24 @@
+// 引入 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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,39 @@
+/// <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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,27 @@
+/// <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

@@ -0,0 +1,40 @@
+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,
+        }) }));
+}