@cloudbase/weda-ui 2.0.10 → 2.0.26

package/src/web/components/chart/common/core/eChartBase.ts

@@ -1,7 +1,7 @@
 import { callDataSource, callWedaApi } from '../../../../utils/tcb';
 import getConfig from '../config/global';
 
-export type IEchartModalBase = typeof EchartBase
+export type IEchartModalBase = typeof EchartBase;
 export abstract class AbstractEchartBaseModal {
   abstract setOptions(options: any): Promise<void>;
   abstract getOptions(option: any): Promise<void>;
@@ -11,18 +11,18 @@ type IReturnData = {
   value: {
     Key: string;
     OperationType: 'count' | 'sum' | 'avg' | 'max' | 'min';
-  }[],
-  where: [],
+  }[];
+  where: [];
   dimension: {
     TimeSpan?: string;
     Key?: string;
     IsCountEmpty?: boolean;
-  },
+  };
   group: {
     TimeSpan?: string;
     Key?: string;
-  },
-}
+  };
+};
 
 /**
  * 图表处理基类
@@ -39,7 +39,6 @@ class EchartBase extends AbstractEchartBaseModal {
 
   public async setOptions(options: any): Promise<void> {}
 
-
   /** 获取所有配置好的图表数据 */
   public getOptions() {
     return this.config;
@@ -52,8 +51,8 @@ class EchartBase extends AbstractEchartBaseModal {
     xStatistics,
     xIsCountEmpty,
     yField,
-    groupKey=({} as Record<string, any>),
-    groupKeyTimeSpan='',
+    groupKey = {} as Record<string, any>,
+    groupKeyTimeSpan = '',
   }) {
     const objReturnData: IReturnData = {
       value: [],
@@ -61,28 +60,29 @@ class EchartBase extends AbstractEchartBaseModal {
       dimension: {},
       group: {},
     };
-    if (filterData && filterData.length > 0) { // 协议转化，把首字母改成大写
+    if (filterData && filterData.length > 0) {
+      // 协议转化，把首字母改成大写
       objReturnData.where = filterData.map((val) => {
         let arrLogicData = val.logicData;
         if (val.logicData && val.logicData.length > 0) {
-          arrLogicData = val.logicData.map((mval)=>{
+          arrLogicData = val.logicData.map((mval) => {
             return {
               Key: mval.key,
               Rel: mval.rel,
               Value: mval.value,
               Logic: mval.logic,
               Extra: {
-                Type:mval?.extra?.type,
-                Format:mval?.extra?.format,
-                IsExpression:mval?.extra?.isExpression,
+                Type: mval?.extra?.type,
+                Format: mval?.extra?.format,
+                IsExpression: mval?.extra?.isExpression,
               },
-              ValueType:mval.valueType,
-              Expression:mval.expression
+              ValueType: mval.valueType,
+              Expression: mval.expression,
             };
           });
         }
         return {
-          GroupLogic:val.groupLogic,
+          GroupLogic: val.groupLogic,
           LogicData: arrLogicData,
         };
       });
@@ -121,7 +121,7 @@ class EchartBase extends AbstractEchartBaseModal {
     sourceName = '',
     methods = '',
     dataSourceType = '',
-    params,
+    params
   ) {
     try {
       if (dataSourceType === 'database') {
@@ -157,20 +157,20 @@ class EchartBase extends AbstractEchartBaseModal {
     this.config.title.right = null;
   }
 
-  protected setLegend({ isLegend, legend= 'top'}) {
+  protected setLegend({ isLegend, legend = 'top' }) {
     this.config.legend.show = isLegend;
     switch (legend) {
-      case 'top' :
+      case 'top':
         this.config.legend.orient = 'horizontal';
         this.config.legend.x = 'center';
         this.config.legend.top = '6%';
         break;
-      case 'left' :
+      case 'left':
         this.config.legend.orient = 'vertical';
         this.config.legend.top = '30%';
         this.config.legend.left = '1%';
         break;
-      case 'right' :
+      case 'right':
         this.config.legend.orient = 'vertical';
         this.config.legend.top = '30%';
         this.config.legend.right = '6%';
@@ -194,11 +194,11 @@ class EchartBase extends AbstractEchartBaseModal {
       sortedXAxisData.forEach((itemSource) => {
         let value = itemSource.XLabel.Value;
         if (formatType === 'datetime') {
-          value =  this.formatTime(itemSource.XLabel.Value, 'dt');
+          value = this.formatTime(itemSource.XLabel.Value, 'dt');
         } else if (formatType === 'date') {
-          value =  this.formatTime(itemSource.XLabel.Value, 'd');
+          value = this.formatTime(itemSource.XLabel.Value, 'd');
         } else if (formatType === 'time') {
-          value =  this.formatTime(itemSource.XLabel.Value, 't');
+          value = this.formatTime(itemSource.XLabel.Value, 't');
         }
         xAxisData.push(value);
       });
@@ -208,16 +208,19 @@ class EchartBase extends AbstractEchartBaseModal {
   }
   protected sortXAxisData(arrData, formatType = ''): Array<any> {
     let xFields = [...arrData];
-    if(['datetime', 'date', 'time'].includes(formatType)) {
+    if (['datetime', 'date', 'time'].includes(formatType)) {
       xFields.sort((a, b) => {
-        if(a.XLabel.Value && b.XLabel.Value ) {
-          return new Date(a.XLabel.Value).getTime() - new Date(b.XLabel.Value).getTime();
+        if (a.XLabel.Value && b.XLabel.Value) {
+          return (
+            new Date(a.XLabel.Value).getTime() -
+            new Date(b.XLabel.Value).getTime()
+          );
         }
         // 产品需求空值放最后
-        if(!a.XLabel.Value) {
+        if (!a.XLabel.Value) {
           return 1;
         }
-        if(!b.XLabel.Value) {
+        if (!b.XLabel.Value) {
           return -1;
         }
       });
@@ -232,16 +235,17 @@ class EchartBase extends AbstractEchartBaseModal {
    * @param { string } timeType 需要格式化的类型 dt：日期时间，d：日期，t：时间
    * @returns { string } 格式化结果
    */
-  private formatTime(time, timeType='dt') {
-    if(typeof time === 'undefined' || time === null) {
+  private formatTime(time, timeType = 'dt') {
+    if (typeof time === 'undefined' || time === null) {
       return '空';
     }
-    if (typeof(time) === 'string') { // 如果是字符串，代表后台返回的就是格式化的时间格式，则这里不再做格式化处理
+    if (typeof time === 'string') {
+      // 如果是字符串，代表后台返回的就是格式化的时间格式，则这里不再做格式化处理
       return time;
     }
     const date = new Date(time + 8 * 3600 * 1000);
     let startNum = 0;
-    let endNum =  19;
+    let endNum = 19;
     if (timeType === 'd') {
       startNum = 0;
       endNum = 10;
@@ -301,13 +305,18 @@ class EchartBase extends AbstractEchartBaseModal {
     this.config.xAxis.name = isXaxisName ? xAxisName : '';
   }
   // 显示X轴刻度线
- protected setIsXaxisAxisTickShow({ isXaxisAxisTickShow }) {
-    this.config.xAxis.axisTick = {show:isXaxisAxisTickShow};
+  protected setIsXaxisAxisTickShow({ isXaxisAxisTickShow }) {
+    this.config.xAxis.axisTick = { show: isXaxisAxisTickShow };
   }
   // X 轴文字倾斜
-  protected setIsXaxisAxisLabelRotate({ isXaxisAxisLabelRotate, xStatistics, angle = 30}) {
+  protected setIsXaxisAxisLabelRotate({
+    isXaxisAxisLabelRotate,
+    xStatistics,
+    angle = 30,
+  }) {
     this.config.xAxis.axisLabel.rotate = isXaxisAxisLabelRotate ? angle : 0;
-    if (isXaxisAxisLabelRotate || xStatistics) { // 如果X轴是时间类型，自动斜30度展示
+    if (isXaxisAxisLabelRotate || xStatistics) {
+      // 如果X轴是时间类型，自动斜30度展示
       this.config.xAxis.axisLabel.rotate = angle;
     } else {
       this.config.xAxis.axisLabel.rotate = 0;
@@ -319,8 +328,10 @@ class EchartBase extends AbstractEchartBaseModal {
     isYAxisSplitlineLinestyleWidth,
     yAxisSplitlineLinestyleType,
   }) {
-    this.config.yAxis.splitLine = {lineStyle:{}};
-    this.config.yAxis.splitLine.lineStyle.width = isYAxisSplitlineLinestyleWidth ? 1 : 0;
+    this.config.yAxis.splitLine = { lineStyle: {} };
+    this.config.yAxis.splitLine.lineStyle.width = isYAxisSplitlineLinestyleWidth
+      ? 1
+      : 0;
     this.config.yAxis.splitLine.lineStyle.type = yAxisSplitlineLinestyleType;
   }
   // 显示 Y 轴刻度 最大值，最小值
@@ -344,7 +355,9 @@ class EchartBase extends AbstractEchartBaseModal {
    */
   protected setEmptyValue(xIsCountEmpty) {
     if (!xIsCountEmpty) {
-      const nonEmpty = this.config.xAxis.data.filter(item => item !== undefined && item !== null);
+      const nonEmpty = this.config.xAxis.data.filter(
+        (item) => item !== undefined && item !== null
+      );
       this.config.xAxis.data = nonEmpty;
     }
   }
@@ -357,7 +370,7 @@ class EchartBase extends AbstractEchartBaseModal {
   private removeEmpty(arrXAxis) {
     const arrNewxAxis = [];
     if (arrXAxis.length > 0) {
-      for(let i = 0; i < arrXAxis.length; i++) {
+      for (let i = 0; i < arrXAxis.length; i++) {
         if (arrXAxis[i]) {
           arrNewxAxis.push(arrXAxis[i]);
         }

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

@@ -35,7 +35,7 @@ class EchartLine extends EchartBase {
         name,
         methodName,
         type,
-        params,
+        params
       );
       // 获取 x 轴数据
 
@@ -57,12 +57,18 @@ class EchartLine extends EchartBase {
               },
               data: [],
             };
-            sortedXAxisData.forEach((itemSource,index) => {
+            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) {
+              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;
+                const value = itemSource.YLabels[j].Value
+                  ? itemSource.YLabels[j].Value
+                  : 0;
                 this.config.series[j].data.push(value);
               }
             });
@@ -90,38 +96,28 @@ class EchartLine extends EchartBase {
         // 组装图表需要的数据
         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}`
-        );
+          // 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) => {
+    this.config.series.length > 0 &&
+      this.config.series.forEach((itemSeries) => {
         itemSeries.smooth = chartType !== 'line';
       });
   }
@@ -132,19 +128,17 @@ class EchartLine extends EchartBase {
     isUnit,
     unit,
     decimalDigits,
-    suffix
+    suffix,
   }) {
     decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
-    this.config.series.length > 0
-      && this.config.series.forEach((itemSeries) => {
+    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}`
-            );
+            return `${objNewValue.toFixed(decimalDigits)}${suffix}`;
           };
         }
       });
@@ -189,7 +183,7 @@ class EchartLine extends EchartBase {
     isUnit,
     unit,
     decimalDigits,
-    suffix
+    suffix,
   }) {
     if (dataSource) {
       await this.setSourceData({
@@ -223,7 +217,7 @@ class EchartLine extends EchartBase {
       isUnit,
       unit,
       decimalDigits,
-      suffix
+      suffix,
     });
   }
 }

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

@@ -32,7 +32,7 @@ class EchartPie extends EchartBase {
         name,
         methodName,
         type,
-        params,
+        params
       );
       // 获取 x 轴数据
       if (arrSourData.length >= 0) {
@@ -59,8 +59,8 @@ class EchartPie extends EchartBase {
     }
   }
   setChartType({ chartType }) {
-    this.config.series.length > 0
-      && this.config.series.forEach((itemSeries) => {
+    this.config.series.length > 0 &&
+      this.config.series.forEach((itemSeries) => {
         if (chartType === 'pie') {
           itemSeries.radius = '70%';
         } else {
@@ -77,7 +77,7 @@ class EchartPie extends EchartBase {
     isUnit,
     unit,
     decimalDigits,
-    suffix
+    suffix,
   }) {
     decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
     let show = false;
@@ -94,10 +94,12 @@ class EchartPie extends EchartBase {
     } else {
       this.config.series[0].label.normal.formatter = (objValue) => {
         let reData = '';
-        if (isSeriesShowSymbol) { // 显示数值
+        if (isSeriesShowSymbol) {
+          // 显示数值
           reData = objValue.value;
         }
-        if (isUnit) { // 显示单位
+        if (isUnit) {
+          // 显示单位
           if (unit) {
             const objNewValue = this.getValueByUnit(objValue.value, unit);
             reData = `${objNewValue.toFixed(decimalDigits)}${suffix}`;
@@ -111,7 +113,8 @@ class EchartPie extends EchartBase {
             };
           });
         }
-        if (isPercent) { // 显示百分比
+        if (isPercent) {
+          // 显示百分比
           reData = `${reData}(${objValue.percent}%)`;
         }
         return reData;
@@ -138,7 +141,7 @@ class EchartPie extends EchartBase {
     isUnit,
     unit,
     decimalDigits,
-    suffix
+    suffix,
   }) {
     legend = document.body.clientWidth < 1024 ? legend : legend2;
     if (dataSource) {
@@ -162,7 +165,7 @@ class EchartPie extends EchartBase {
       isUnit,
       unit,
       decimalDigits,
-      suffix
+      suffix,
     });
   }
 }

package/src/web/components/chart/common/core/type.ts

@@ -1,34 +1,34 @@
 export interface DataSource {
-    name:string, // 数据源名
-    type:string, // 数据源类型
-    subType:string, // 数据源子类型
-    provider?:string, // 内置连接器类型
-    methodName:string // 数据源方法名
+  name: string; // 数据源名
+  type: string; // 数据源类型
+  subType: string; // 数据源子类型
+  provider?: string; // 内置连接器类型
+  methodName: string; // 数据源方法名
 }
 export interface ObjSource {
-    dataSourceName:string, // 数据源名
-    dataSourceType:string, // 数据源类型
-    dataSourceMethodName:string // 数据源方法名
+  dataSourceName: string; // 数据源名
+  dataSourceType: string; // 数据源类型
+  dataSourceMethodName: string; // 数据源方法名
 }
 export interface Xfield {
-    format:string,
-    type:string,
-    title:string,
-    name:string,
+  format: string;
+  type: string;
+  title: string;
+  name: string;
 }
 enum CountType {
-    'count',
-    'sum',
-    'avg',
-    'max',
-    'min'
+  'count',
+  'sum',
+  'avg',
+  'max',
+  'min',
 }
 export interface YfieldOne {
-    key:string,
-    operationType:CountType,
-    title?:string,
+  key: string;
+  operationType: CountType;
+  title?: string;
 }
 export interface Yfield {
-    groupKey?:string,
-    numValue?:Array<YfieldOne>,
-}
+  groupKey?: string;
+  numValue?: Array<YfieldOne>;
+}

package/src/web/components/chart/common/echart.css

@@ -17,17 +17,17 @@
 }
 .weda-ui-echart .echart-light-box {
   position: relative;
-  background-color: #F4F5F6;
+  background-color: #f4f5f6;
 }
 .weda-ui-echart .echart-light-body {
   background-color: #ffffff;
 }
 .weda-ui-echart .echart-dark-box {
   position: relative;
-  background-color: #4B5D6C;
+  background-color: #4b5d6c;
 }
 .weda-ui-echart .echart-dark-body {
-  background-color: #1D1F24;
+  background-color: #1d1f24;
   margin: 6px;
 }
 .weda-ui-echart .btn-grounp {
@@ -67,20 +67,20 @@
   user-select: none;
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
   position: relative;
-  color: #4B5D6C;
+  color: #4b5d6c;
   background-color: #fff;
-  border-color: #CCD2D8;
+  border-color: #ccd2d8;
 }
 .weda-ui-echart .button,
-.weda-ui-echart html [type="button"],
-.weda-ui-echart [type="reset"],
-.weda-ui-echart [type="submit"] {
+.weda-ui-echart html [type='button'],
+.weda-ui-echart [type='reset'],
+.weda-ui-echart [type='submit'] {
   -webkit-appearance: button;
 }
 .weda-ui-echart .ant-btn-primary {
   color: #fff;
-  background-color: #4A62E7;
-  border-color: #4A62E7;
+  background-color: #4a62e7;
+  border-color: #4a62e7;
 }
 .weda-ui-echart .ant-btn:not([disabled]):hover {
   text-decoration: none;
@@ -94,9 +94,9 @@
 }
 .weda-ui-echart .ant-btn:hover,
 .weda-ui-echart .ant-btn:focus {
-  color: #4A62E7;
+  color: #4a62e7;
   background-color: #fff;
-  border-color: #4A62E7;
+  border-color: #4a62e7;
 }
 .weda-ui-echart .ant-btn-primary:hover,
 .weda-ui-echart .ant-btn-primary:focus {

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

@@ -7,7 +7,7 @@ import {
   TitleComponent,
   TooltipComponent,
   LegendComponent,
-  GridComponent
+  GridComponent,
 } from 'echarts/components';
 // 标签自动布局，全局过渡动画等特性
 import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -25,9 +25,7 @@ echarts.use([
   CanvasRenderer,
   BarChart,
   LineChart,
-  PieChart
+  PieChart,
 ]);
 
-export {
-  echarts
-};
+export { echarts };

package/src/web/components/chart/common/useChart.tsx

@@ -1,14 +1,28 @@
-import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect } from "@react-hookz/web";
-import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef } from "react";
-import { IEchartModalBase } from "./core/eChartBase";
-import { echarts } from "./echarts";
+import {
+  useAsync,
+  useDeepCompareEffect,
+  useEventListener,
+  useIsMounted,
+  useMountEffect,
+} from '@react-hookz/web';
+import {
+  MutableRefObject,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { IEchartModalBase } from './core/eChartBase';
+import { echarts } from './echarts';
 
-export function useChart(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>) {
+export function useChart(
+  ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>
+) {
   const chartRef = useRef<echarts.ECharts>();
   const isMounted = useIsMounted();
   useMountEffect(() => {
-
-    if(!ref.current || !isMounted) {
+    if (!ref.current || !isMounted) {
       return;
     }
 
@@ -28,16 +42,19 @@ export function useChart(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElem
   return chartRef.current;
 }
 
-
 /**
  * @deprecated The method should not be used
  */
-export function useWedaChart(domRef, ModalClass: IEchartModalBase, options: echarts.EChartsCoreOption) {
+export function useWedaChart(
+  domRef,
+  ModalClass: IEchartModalBase,
+  options: echarts.EChartsCoreOption
+) {
   const chart = useChart(domRef);
-  const getOptions = async() => {
+  const getOptions = async () => {
     const chartModal = new ModalClass();
     let finalOptions: any = await chartModal.setOptions(options);
-    if(!finalOptions) {
+    if (!finalOptions) {
       finalOptions = chartModal.getOptions() as any;
     }
     return finalOptions;
@@ -50,18 +67,19 @@ export function useWedaChart(domRef, ModalClass: IEchartModalBase, options: echa
   useDeepCompareEffect(() => {
     actions.execute();
   }, [
-  // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
-  options,
-  actions]);
+    // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
+    options,
+    actions,
+  ]);
   useEffect(() => {
-    if(state.status === 'success' && chart) {
+    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') {
+      if (state.status === 'error') {
         console.error(state.error);
       }
     }