@cloudbase/weda-ui 3.1.9 → 3.2.1

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../../types';
+import type { ECOption } from './echarts';
+interface IChartProps extends CommonPropsType {
+    chartOptions: ECOption;
+    ['data-testid']: string;
+}
+export declare function Chart(props: IChartProps): JSX.Element;
+export {};

package/dist/src/web/components/chart/common/Chart.js

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+import classNames from '../../../utils/classnames';
+import { useChart } from './useChart';
+export function Chart(props) {
+    const { id, style, className, chartOptions, 'data-testid': dataTestId, } = props;
+    const inlineStyle = {
+        height: '380px',
+        width: '100%',
+        backgroundColor: '#ffffff',
+        ...style,
+    };
+    const ref = useRef(null);
+    const chart = useChart(ref);
+    useEffect(() => {
+        var _a;
+        (_a = chart === null || chart === void 0 ? void 0 : chart.setOption) === null || _a === void 0 ? void 0 : _a.call(chart, chartOptions);
+    }, [chart, chartOptions]);
+    return (React.createElement("div", { id: id, "data-testid": dataTestId, ref: ref, style: inlineStyle, className: classNames({
+            'echart-wrapper-canvas': true,
+            'echart-dark-body': true,
+            [className]: className,
+        }) }));
+}

package/dist/src/web/components/chart/common/chart-custom-connector.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IChartType, PropsType } from './types';
+export declare const ChartCustomConnector: (props: PropsType<IChartType, 'custom-connector'> & {
+    type: IChartType;
+    ['data-testid']: string;
+}) => JSX.Element;

package/dist/src/web/components/chart/common/chart-custom-connector.js

@@ -0,0 +1,35 @@
+import { useAsync } from '@react-hookz/web';
+import React, { useEffect } from 'react';
+import { callDataSource } from '../../../utils/tcb';
+import { Chart } from './Chart';
+import { ChartError } from './chart-error';
+import { transform } from './data-transform';
+export const ChartCustomConnector = (props) => {
+    var _a;
+    const { type, connector, connectorMethod, connectorParams, ...restProps } = props;
+    if (!((_a = connector === null || connector === void 0 ? void 0 : connector.datasource) === null || _a === void 0 ? void 0 : _a.name) || !(connectorMethod === null || connectorMethod === void 0 ? void 0 : connectorMethod.name)) {
+        throw new ChartError('连接器配置不完整，请选择连接器和方法');
+    }
+    const [state, actions] = useAsync(async () => {
+        var _a;
+        const res = await callDataSource({
+            dataSourceName: connector.datasource.name,
+            methodName: connectorMethod.name,
+            params: connectorParams,
+        });
+        return (_a = res.result) !== null && _a !== void 0 ? _a : [];
+    }, []);
+    useEffect(() => {
+        actions.execute();
+    }, [connector, connectorMethod, connectorParams]);
+    if (state.error) {
+        throw state.error;
+    }
+    const chartOptions = transform(type, state.result, restProps);
+    return (React.createElement(Chart, { id: restProps.id, className: restProps.className, "data-testid": restProps['data-testid'], style: restProps.style, events: restProps.events, chartOptions: chartOptions }));
+};
+/*
+
+
+
+*/

package/dist/src/web/components/chart/common/chart-error.d.ts

@@ -0,0 +1,2 @@
+export declare class ChartError extends Error {
+}

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

@@ -0,0 +1,2 @@
+export class ChartError extends Error {
+}

package/dist/src/web/components/chart/common/config/bar.d.ts

@@ -0,0 +1,48 @@
+export default getConfig;
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+declare function getConfig(): {
+    xAxis: {
+        name: string;
+        nameTextStyle: {
+            align: string;
+        };
+        axisLabel: {
+            show: boolean;
+            rotate: number;
+        };
+        axisTick: {
+            show: boolean;
+        };
+        inverse: boolean;
+        type: string;
+        data: string[];
+    };
+    yAxis: {
+        type: string;
+        show: boolean;
+        name: string;
+        splitLine: {
+            lineStyle: {
+                width: number;
+                type: string;
+            };
+        };
+        axisLabel: {
+            padding: number[];
+        };
+        min: any;
+        max: any;
+    };
+    series: {
+        name: string;
+        data: number[];
+        type: string;
+        itemStyle: {
+            color: string;
+        };
+        showSymbol: boolean;
+        label: {
+            show: boolean;
+        };
+    }[];
+};

package/dist/src/web/components/chart/common/config/bar.js

@@ -0,0 +1,49 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+    const barH5 = {
+        xAxis: {
+            name: 'X轴名',
+            nameTextStyle: { align: 'center' },
+            axisLabel: {
+                show: true,
+                rotate: 0, // 字体倾斜
+            },
+            axisTick: {
+                show: true, // 刻度显示
+            },
+            inverse: false,
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+            type: 'value',
+            show: true,
+            name: 'Y轴名',
+            splitLine: {
+                lineStyle: {
+                    width: 1,
+                    type: 'dashed', //solid,dashed,dotted
+                },
+            },
+            axisLabel: { padding: [0, -10, 0, 0] },
+            min: null,
+            max: null,
+        },
+        series: [
+            {
+                name: 'demo',
+                data: [0, 932, 901, 934, 1290, 1330, 1320],
+                type: 'bar',
+                itemStyle: {
+                    color: 'green',
+                },
+                showSymbol: true,
+                label: {
+                    show: true, // 显示线条上的数据
+                },
+            },
+        ],
+    };
+    return barH5;
+};
+export default getConfig;

package/dist/src/web/components/chart/common/config/global.d.ts

@@ -0,0 +1,13 @@
+export default getConfig;
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+declare function getConfig(): {
+    title: {
+        text: string;
+        show: boolean;
+        left: string;
+    };
+    legend: {
+        top: string;
+    };
+    tooltip: {};
+};

package/dist/src/web/components/chart/common/config/global.js

@@ -0,0 +1,16 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+    const globalH5 = {
+        title: {
+            text: 'demo实例',
+            show: true,
+            left: '50%',
+        },
+        legend: {
+            top: '88%',
+        },
+        tooltip: {},
+    };
+    return globalH5;
+};
+export default getConfig;

package/dist/src/web/components/chart/common/config/line.d.ts

@@ -0,0 +1,46 @@
+export default getConfig;
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+declare function getConfig(): {
+    xAxis: {
+        name: string;
+        nameTextStyle: {
+            align: string;
+        };
+        axisLabel: {
+            show: boolean;
+            rotate: number;
+        };
+        axisTick: {
+            show: boolean;
+        };
+        type: string;
+        data: string[];
+    };
+    yAxis: {
+        type: string;
+        show: boolean;
+        name: string;
+        splitLine: {
+            lineStyle: {
+                width: number;
+                type: string;
+            };
+        };
+        axisLabel: {
+            padding: number[];
+        };
+        min: any;
+        max: any;
+    };
+    series: {
+        name: string;
+        connectNulls: boolean;
+        data: number[];
+        type: string;
+        smooth: boolean;
+        showSymbol: boolean;
+        label: {
+            show: boolean;
+        };
+    }[];
+};

package/dist/src/web/components/chart/common/config/line.js

@@ -0,0 +1,49 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+    const lineH5 = {
+        xAxis: {
+            name: 'X轴名',
+            nameTextStyle: { align: 'center' },
+            axisLabel: {
+                show: true,
+                rotate: 0, // 字体倾斜
+            },
+            axisTick: {
+                show: true, // 刻度显示
+            },
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+        yAxis: {
+            type: 'value',
+            show: true,
+            name: 'Y轴名',
+            splitLine: {
+                lineStyle: {
+                    width: 1,
+                    type: 'dashed', //solid,dashed,dotted
+                },
+            },
+            axisLabel: {
+                padding: [0, -10, 0, 0],
+            },
+            min: null,
+            max: null,
+        },
+        series: [
+            {
+                name: 'demo',
+                connectNulls: true,
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                smooth: true,
+                showSymbol: true,
+                label: {
+                    show: true, // 显示线条上的数据
+                },
+            },
+        ],
+    };
+    return lineH5;
+};
+export default getConfig;

package/dist/src/web/components/chart/common/config/pie.d.ts

@@ -0,0 +1,29 @@
+export default getConfig;
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+declare function getConfig(): {
+    series: {
+        data: {
+            value: number;
+            name: string;
+            tooltip: {};
+            itemStyle: {};
+        }[];
+        label: {
+            show: boolean;
+            position: string;
+            normal: {
+                formatter: any;
+                position: string;
+            };
+        };
+        type: string;
+        radius: string;
+        emphasis: {
+            itemStyle: {
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowColor: string;
+            };
+        };
+    }[];
+};

package/dist/src/web/components/chart/common/config/pie.js

@@ -0,0 +1,36 @@
+/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
+const getConfig = () => {
+    const pieH5 = {
+        series: [
+            {
+                // name: 'demo',
+                data: [
+                    { value: 820, name: '实例数据1', tooltip: {}, itemStyle: {} },
+                    { value: 932, name: '实例数据2', tooltip: {}, itemStyle: {} },
+                    { value: 901, name: '实例数据3', tooltip: {}, itemStyle: {} },
+                    { value: 934, name: '实例数据4', tooltip: {}, itemStyle: {} },
+                    { value: 1290, name: '实例数据5', tooltip: {}, itemStyle: {} },
+                ],
+                label: {
+                    show: true,
+                    position: 'inner',
+                    normal: {
+                        formatter: null,
+                        position: 'inner',
+                    },
+                },
+                type: 'pie',
+                radius: '70%',
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)',
+                    },
+                },
+            },
+        ],
+    };
+    return pieH5;
+};
+export default getConfig;

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

@@ -0,0 +1,66 @@
+export default EchartBar;
+/**
+ * 柱状图表
+ * @author loonglong
+ **/
+declare class EchartBar extends EchartBase {
+    setSourceData({ dataSource, filterData, xField, xStatistics, xIsCountEmpty, groupKey, groupKeyTimeSpan, yField, isPile, }: {
+        dataSource: any;
+        filterData: any;
+        xField: any;
+        xStatistics: any;
+        xIsCountEmpty: any;
+        groupKey: any;
+        groupKeyTimeSpan: any;
+        yField: any;
+        isPile: any;
+    }): Promise<void>;
+    setColor({ setColor }: {
+        setColor: any;
+    }): void;
+    setIsSeriesShowSymbol({ isSeriesShowSymbol, isUnit, unit, decimalDigits, suffix, }: {
+        isSeriesShowSymbol: any;
+        isUnit: any;
+        unit: any;
+        decimalDigits: any;
+        suffix: any;
+    }): void;
+    setDirectionType({ directionType }: {
+        directionType: any;
+    }): void;
+    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;
+        dataSource: any;
+        filterData: any;
+        xField: any;
+        xStatistics: any;
+        groupKey: any;
+        groupKeyTimeSpan: any;
+        xIsCountEmpty: any;
+        yField: any;
+        isLegend: any;
+        legend: any;
+        isXaxisName: any;
+        xAxisName: any;
+        isXaxisAxisLabelShow: any;
+        isXaxisAxisTickShow: any;
+        isXaxisAxisLabelRotate: any;
+        isYAxisSplitlineLinestyleWidth: any;
+        yAxisSplitlineLinestyleType: any;
+        yAxisMax: any;
+        yAxisMin: any;
+        isYAxisName: any;
+        yAxisName: any;
+        isSeriesShowSymbol: any;
+        isYAxisShow: any;
+        isUnit: any;
+        unit: any;
+        decimalDigits: any;
+        suffix: any;
+    }): Promise<any>;
+}
+import EchartBase from "./eChartBase";