@cloudbase/weda-ui 3.1.0 → 3.1.1

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,
+        }) }));
+}

package/dist/web/components/chart/statisticsCard/index.css

@@ -0,0 +1,63 @@
+/* pc style */
+.weda-statistics-card {
+  background: #ffffff;
+  border: 0.07143rem solid #f1f2f5;
+  box-sizing: border-box;
+  box-shadow: 0 0.07143rem 0.14286rem rgba(0, 0, 0, 0.1);
+  border-radius: 0.42857rem;
+  box-sizing: border-box;
+  font-size: 1rem;
+}
+.weda-statistics-card.weda-statistics-card-pc {
+  width: 19.71429rem;
+  min-height: 9.14286rem;
+}
+
+.weda-statistics-card .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 2rem 1.71429rem;
+}
+
+.weda-statistics-card .weda-statistics-card__title {
+  font-size: 1em;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-statistics-card .weda-statistics-card__detail {
+  margin-top: 0.57143rem;
+}
+
+.weda-statistics-card .weda-statistics-card__count {
+  font-size: 2.28571em;
+  line-height: 3.14285em;
+  color: rgba(0, 0, 0, 0.9);
+  word-break: break-all;
+}
+
+.weda-statistics-card .weda-statistics-card__unit {
+  font-size: 1em;
+  line-height: 1.57142em;
+  color: rgba(0, 0, 0, 0.4);
+  margin-left: 0.28571rem;
+  vertical-align: middle;
+}
+
+/* h5 style */
+.weda-statistics-card.weda-statistics-card-mobile {
+  max-width: 100%;
+  min-height: 10rem;
+}
+.weda-statistics-card-mobile .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 2.85714rem 1.71429rem;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__detail {
+  margin-top: 0.28571rem;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__count {
+  font-size: 2em;
+  line-height: 2.42857em;
+}

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

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../../types';
+import './index.css';
+import { IDataSource, IField } from './interface';
+interface PropsType extends CommonPropsType {
+    /**
+     * 数据源
+     */
+    dataSource?: IDataSource;
+    /**
+     * 数据筛选
+     */
+    filterData?: any;
+    /**
+     * 字段
+     */
+    field?: IField;
+    /**
+     * 统计方式
+     */
+    operationType?: string;
+    /**
+     * 字段展示名称
+     */
+    label?: string;
+    /**
+     * 是否统计空值
+     */
+    isCountEmpty?: boolean;
+    /**
+     * 是否显示单位
+     */
+    isShowUnit?: boolean;
+    /**
+     * 单位
+     */
+    unit?: number;
+    /**
+     * 小数位数
+     */
+    decimalDigits?: number;
+    /**
+     * 后缀
+     */
+    suffix?: number;
+    /**
+     * app.cloud 对象依赖，默认会从 window.app 取值
+     */
+    appCloud?: {
+        callDataSource?: any;
+        callWedaApi?: any;
+    };
+    /**
+     * 其他属性
+     */
+    [key: string]: any;
+}
+/**
+ * 修复科学计数法问题
+ * @param num 小数
+ * @returns {string}
+ */
+export declare function scientificToNumber(num: any): any;
+/**
+ * 补齐小数位数0
+ * @param source          源字符串
+ * @param targetLength    目标长度
+ * @returns {string}
+ */
+export declare function padEnd(source: any, targetLength: any): any;
+/**
+ * 修复toFixed四舍五入不准确问题
+ * @param num
+ * @param digit 小数位数
+ * @returns {string}
+ */
+export declare function customToFixed(num: any, digit?: number): string;
+/**
+ * 添加千位分隔符
+ * @param fixedString
+ * @param digit
+ */
+export declare function addDelimiter(fixedString: any, digit: any): string;
+export default function StatisticsCard({ dataSource, filterData, field, operationType, label, isCountEmpty, isShowUnit, unit, decimalDigits, suffix, className, style, events, id, role, appCloud, }: PropsType): JSX.Element;
+export {};