@cloudbase/weda-ui 3.1.9 → 3.2.1

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

@@ -0,0 +1,135 @@
+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, }) {
+        if (dataSource) {
+            await this.setSourceData({
+                dataSource,
+                filterData,
+                setColor,
+                xField,
+                xStatistics,
+                xIsCountEmpty,
+                yField,
+            });
+        }
+        this.setChartType({ chartType });
+        this.setTitle({ isTitle, title });
+        this.setLegend({ isLegend, legend });
+        this.setIsSeriesShowSymbol({
+            isSeriesShowSymbol,
+            isPercent,
+            isUnit,
+            unit,
+            decimalDigits,
+            suffix,
+        });
+    }
+}
+export default EchartPie;

package/dist/src/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/src/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/src/web/components/chart/common/data-transform.d.ts

@@ -0,0 +1,6 @@
+import type { ECOption } from './echarts';
+import type { IDataInputItem, IChartInput, IPieChartInput, IChartType, PropsType } from './types';
+export declare const checkIsNewData: (props: PropsType) => boolean;
+export declare function transform(chartType: 'pie', dataInput: Readonly<IDataInputItem[]>, chartInput: IPieChartInput): ECOption;
+export declare function transform(chartType: 'bar' | 'line', dataInput: Readonly<IDataInputItem[]>, chartInput: IChartInput): ECOption;
+export declare function transform(chartType: IChartType, dataInput: Readonly<IDataInputItem[]>, chartInput: Readonly<typeof chartType extends 'bar' | 'line' ? IChartInput : typeof chartType extends 'pie' ? IPieChartInput : IPieChartInput & IChartInput>): ECOption;

package/dist/src/web/components/chart/common/data-transform.js

@@ -0,0 +1,246 @@
+import { ChartError } from './chart-error';
+export const checkIsNewData = (props) => {
+    var _a, _b;
+    return (Object.keys((_a = props.dataSource) !== null && _a !== void 0 ? _a : {}).length === 0 &&
+        Object.keys((_b = props['dataModel']) !== null && _b !== void 0 ? _b : {}).length > 0);
+};
+export function transform(chartType, dataInput, chartInput) {
+    var _a;
+    if (!Array.isArray(dataInput)) {
+        throw new ChartError('Chart 数据输入应该是数组类型');
+    }
+    const title = {
+        text: chartInput.title,
+        show: chartInput.isTitle,
+        left: '35%',
+        top: '-1%',
+        right: null,
+    };
+    const legend = {
+        show: chartInput.isLegend,
+    };
+    switch (chartInput.legend) {
+        case 'top':
+            legend.orient = 'horizontal';
+            legend.top = '6%';
+            break;
+        /* istanbul ignore next */
+        case 'left':
+            legend.orient = 'vertical';
+            legend.top = '30%';
+            legend.left = '1%';
+            break;
+        /* istanbul ignore next */
+        case 'right':
+            legend.orient = 'vertical';
+            legend.top = '30%';
+            legend.right = '6%';
+            break;
+        default:
+            legend.top = '89%';
+            legend.orient = 'horizontal';
+            break;
+    }
+    // const numberOfYAxis = dataInput?.[0]?.YLabels.length ?? 0;
+    // const sortedDataInput = dataInput.sort((a, b) => {
+    //   // if (['datetime', 'date', 'time'].includes(formatType)) {
+    // });
+    // 自定义连接器或者变量不用前端排序
+    // 是否显示空值
+    const finalDataInput = (_a = (dataInput !== null && dataInput !== void 0 ? dataInput : [])) === null || _a === void 0 ? void 0 : _a.filter((item) => {
+        if (!chartInput.xIsCountEmpty) {
+            return (item.XLabel['Value'] !== undefined && item.XLabel['Value'] !== null);
+        }
+        return true;
+    });
+    const unitFormatter = (value) => {
+        let val = Number(value);
+        if (chartInput.isUnit) {
+            val = val / chartInput.unit;
+        }
+        return `${val.toFixed(chartInput.decimalDigits)}${chartInput.suffix}`;
+    };
+    const series = [];
+    const groups = [];
+    finalDataInput.forEach((eachAxis) => {
+        eachAxis.YLabels.forEach((yLabel) => {
+            if (yLabel.Group_Name && groups.indexOf(yLabel.Group_Name) < 0) {
+                // 去重且保留顺序
+                groups.push(yLabel.Group_Name);
+            }
+        });
+    });
+    //
+    if (chartType === 'pie' && groups.length > 0) {
+        throw new ChartError('饼图不支持分组功能');
+    }
+    if (groups.length <= 0) {
+        finalDataInput.forEach((item) => {
+            item.YLabels.forEach((eachYaxis, idx) => {
+                var _a, _b, _c;
+                if (!series[idx]) {
+                    series[idx] = {
+                        type: chartType,
+                        name: chartType === 'pie'
+                            ? undefined
+                            : (_a = eachYaxis.Cn_Name) !== null && _a !== void 0 ? _a : eachYaxis.Name,
+                        stack: chartInput.isPile ? 'pile' : undefined,
+                        showSymbol: chartType === 'pie' ? undefined : chartInput.isSeriesShowSymbol,
+                        label: {
+                            show: chartInput.isSeriesShowSymbol, // 老逻辑这么来的
+                        },
+                        itemStyle: chartType === 'pie'
+                            ? undefined
+                            : {
+                                color: (_c = (_b = chartInput === null || chartInput === void 0 ? void 0 : chartInput.setColor) === null || _b === void 0 ? void 0 : _b[idx % 6]) !== null && _c !== void 0 ? _c : null,
+                            },
+                        data: chartType === 'pie'
+                            ? [
+                                {
+                                    value: eachYaxis.Value,
+                                    name: item.XLabel.Value.toString(),
+                                },
+                            ]
+                            : [eachYaxis.Value],
+                    };
+                    if (chartInput.isUnit) {
+                        series[idx].label.formatter = (params) => unitFormatter(params.value);
+                    }
+                }
+                else {
+                    if (chartType === 'pie') {
+                        series[idx].data.push({
+                            value: eachYaxis.Value,
+                            name: item.XLabel.Value.toString(),
+                        });
+                    }
+                    else {
+                        series[idx].data.push(eachYaxis.Value);
+                    }
+                }
+                if (chartType === 'pie') {
+                    // series[idx].label.position = 'inner';
+                    series[idx].label['normal'] = {
+                        position: 'inner',
+                    };
+                    series[idx]['radius'] = '70%';
+                    series[idx]['emphasis'] = {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)',
+                        },
+                    };
+                }
+            });
+        });
+    }
+    else {
+        // 先给每个分组留位置
+        groups.forEach((groupName, idx) => {
+            var _a, _b;
+            series.push({
+                type: chartType,
+                name: groupName,
+                stack: chartInput.isPile ? 'pile' : undefined,
+                showSymbol: chartType === 'pie' ? undefined : chartInput.isSeriesShowSymbol,
+                label: {
+                    show: chartInput.isSeriesShowSymbol, // 老逻辑这么来的
+                },
+                itemStyle: chartType === 'pie'
+                    ? undefined
+                    : {
+                        color: (_b = (_a = chartInput === null || chartInput === void 0 ? void 0 : chartInput.setColor) === null || _a === void 0 ? void 0 : _a[idx % 6]) !== null && _b !== void 0 ? _b : null,
+                    },
+                data: [],
+            });
+        });
+        // 然后再往data里放东西
+        finalDataInput.forEach((item) => {
+            item.YLabels.forEach((eachYaxis) => {
+                var _a;
+                if (eachYaxis.Group_Name) {
+                    series[groups.indexOf(eachYaxis.Group_Name)].data.push({
+                        value: eachYaxis.Value,
+                        name: (_a = eachYaxis.Cn_Name) !== null && _a !== void 0 ? _a : eachYaxis.Name,
+                    });
+                    for (let i = 0; i < groups.length; i++) {
+                        if (groups.indexOf(eachYaxis.Group_Name) !== i) {
+                            series[i].data.push({ value: null });
+                        }
+                    }
+                }
+            });
+        });
+    }
+    console.log(dataInput, chartInput, 'TRANSFORM');
+    if (chartType === 'bar' || chartType === 'line') {
+        const xAxis = {
+            name: chartInput.isXaxisName ? chartInput.xAxisName : '',
+            nameTextStyle: { align: 'center' },
+            axisLabel: {
+                show: chartInput.isXaxisAxisLabelShow,
+                // 禁用默认的小屏幕自适应隐藏列
+                interval: 0,
+                rotate: chartInput.isXaxisAxisLabelRotate ? 30 : 0,
+            },
+            axisTick: {
+                show: chartInput.isXaxisAxisTickShow,
+            },
+            // 老逻辑是这样的，但看不懂为啥
+            inverse: chartInput.directionType === 'crosswise',
+            type: 'category',
+            data: [],
+        };
+        const yAxis = {
+            show: chartInput.isYAxisShow,
+            name: chartInput.isYAxisName ? chartInput.yAxisName : '',
+            splitLine: {
+                lineStyle: {
+                    width: chartInput.isYAxisSplitlineLinestyleWidth ? 1 : 0,
+                    type: chartInput.yAxisSplitlineLinestyleType,
+                },
+            },
+            axisLabel: {
+                padding: [0, -10, 0, 0],
+                formatter: null,
+            },
+            min: chartInput.yAxisMin || null,
+            max: chartInput.yAxisMax || null,
+            type: 'value',
+        };
+        xAxis.data = finalDataInput.map((item) => {
+            var _a;
+            return (_a = item.XLabel.Value) !== null && _a !== void 0 ? _a : null;
+        });
+        if (chartInput.isUnit) {
+            yAxis.axisLabel.formatter = unitFormatter;
+        }
+        if (chartInput.directionType === 'crosswise') {
+            return {
+                title,
+                legend,
+                xAxis: yAxis,
+                yAxis: xAxis,
+                series,
+            };
+        }
+        return {
+            title,
+            legend,
+            xAxis,
+            yAxis,
+            series,
+        };
+    }
+    if (chartType === 'pie') {
+        return {
+            title,
+            legend,
+            series,
+            tooltip: {
+                trigger: 'item',
+            },
+        };
+    }
+}

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

@@ -0,0 +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/src/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/src/web/components/chart/common/error-boundary.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CommonPropsType } from '../../../types';
+export declare const ChartErrorBoundary: (props: CommonPropsType & {
+    children: React.ReactNode;
+}) => JSX.Element;

package/dist/src/web/components/chart/common/error-boundary.js

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ChartError } from './chart-error';
+export const ChartErrorBoundary = (props) => {
+    return (React.createElement(ErrorBoundary, { FallbackComponent: ({ error, resetErrorBoundary }) => {
+            const errorMsg = useMemo(() => {
+                var _a;
+                if (error instanceof ChartError) {
+                    return error.message;
+                }
+                else {
+                    return (_a = error.stack) !== null && _a !== void 0 ? _a : error.message;
+                }
+            }, [error]);
+            return (React.createElement("div", { style: props.style, id: props.id, className: props.className },
+                React.createElement("code", null,
+                    React.createElement("pre", { style: { display: 'inline' } }, errorMsg)),
+                React.createElement("a", { href: "#", style: {
+                        padding: '0 8px',
+                        textDecoration: 'none',
+                    }, onClick: (ev) => {
+                        ev.preventDefault();
+                        resetErrorBoundary();
+                    } }, "\u91CD\u8BD5")));
+        } }, props.children));
+};

package/dist/src/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/src/web/components/chart/common/useChart.js

@@ -0,0 +1,61 @@
+import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect, useResizeObserver, } from '@react-hookz/web';
+import { useEffect, useState } from 'react';
+export function useChart(ref) {
+    const [chartRef, setChartRef] = useState(null);
+    const isMounted = useIsMounted();
+    useMountEffect(async () => {
+        if (!ref.current || !isMounted) {
+            return;
+        }
+        const echarts = (await import(/* webpackChunkName: "echarts" */ './echarts')).default;
+        const echartDom = ref.current;
+        setChartRef(echarts.init(echartDom));
+        return () => {
+            chartRef.dispose();
+        };
+    });
+    useEventListener(window, 'resize', () => {
+        chartRef && chartRef.resize();
+    });
+    useResizeObserver(ref, () => {
+        chartRef && chartRef.resize();
+    });
+    return chartRef;
+}
+/**
+ * @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/src/web/components/chart/line/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { PropsType } from '../common/types';
+export default function Line(props: PropsType<'line'>): JSX.Element;

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import OldLine from './index.old';
+import { checkIsNewData, transform } from '../common/data-transform';
+import { emptyArray } from '../../../utils/constant';
+import { Chart } from '../common/Chart';
+import { ChartCustomConnector } from '../common/chart-custom-connector';
+import { ChartErrorBoundary } from '../common/error-boundary';
+function LineImpl(props) {
+    if (props.dataSourceType === 'data-model') {
+        if (checkIsNewData(props)) {
+            props.dataSource = {
+                name: props['dataModel'].name,
+                type: 'database',
+                subType: 'database',
+                methodName: 'wedaAggregateData',
+            };
+        }
+        const oldLineProps = { ...props };
+        oldLineProps['dataModel'] = undefined;
+        oldLineProps['datasourceVariable'] = undefined;
+        oldLineProps['connectorMethod'] = undefined;
+        oldLineProps['connectorParams'] = undefined;
+        oldLineProps['connector'] = undefined;
+        return React.createElement(OldLine, { ...oldLineProps });
+    }
+    else if (props.dataSourceType === 'variable') {
+        const { datasourceVariable = emptyArray, id, style, className, events, ...rest } = props;
+        const chartOptions = transform('line', datasourceVariable, rest);
+        return (React.createElement(Chart, { id: id, "data-testid": "line", className: className, style: style, events: events, chartOptions: chartOptions }));
+    }
+    else if (props.dataSourceType === 'custom-connector') {
+        return React.createElement(ChartCustomConnector, { "data-testid": "line", type: "line", ...props });
+    }
+    else {
+        // 老逻辑
+        return React.createElement(OldLine, { ...props });
+    }
+}
+export default function Line(props) {
+    return (React.createElement(ChartErrorBoundary, { ...props },
+        React.createElement(LineImpl, { ...props })));
+}

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../../types';
+import { DataSource, Xfield, Yfield } from '../common/core/type';
+export 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?: number;
+    decimalDigits?: number;
+    suffix?: string;
+}
+export default function Line(opts: PropsType): JSX.Element;