@cloudbase/weda-ui 2.0.9 → 2.0.12

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

@@ -19,7 +19,7 @@ class EchartBar extends EchartBase {
     groupKey,
     groupKeyTimeSpan,
     yField,
-    isPile
+    isPile,
   }) {
     const { name = '', type = '', methodName = '' } = dataSource;
     if (name !== '') {
@@ -36,7 +36,7 @@ class EchartBar extends EchartBase {
         name,
         methodName,
         type,
-        params,
+        params
       );
       // 获取 x 轴数据
       const sortedXAxisData = this.sortXAxisData(arrSourData, xField.format);
@@ -57,12 +57,18 @@ class EchartBar 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);
               }
             });
@@ -87,7 +93,6 @@ class EchartBar extends EchartBase {
           });
         });
 
-
         // 组装图表需要的数据
         const arrGroupKey = Object.keys(objGroupKey);
         this.config.series = arrGroupKey.map((groupKey) => {
@@ -102,23 +107,13 @@ class EchartBar extends EchartBase {
             label: {
               show: true,
             },
-            data: this.getSeriesDataGroup(
-              arrXaxisData,
-              objGroupKey[groupKey],
-            ),
+            data: this.getSeriesDataGroup(arrXaxisData, objGroupKey[groupKey]),
             stack: isPile ? 'pile' : null,
           };
           return serie;
         });
-        this.config.tooltip.formatter = params => (
-          `${params.data.dimensionality
-          }\r\n${
-            params.data.name
-          }\r\n${
-            params.seriesName
-          }:${
-            params.value}`
-        );
+        this.config.tooltip.formatter = (params) =>
+          `${params.data.dimensionality}\r\n${params.data.name}\r\n${params.seriesName}:${params.value}`;
       }
     }
   }
@@ -138,19 +133,17 @@ class EchartBar extends EchartBase {
     isUnit,
     unit,
     decimalDigits,
-    suffix
+    suffix,
   }) {
     decimalDigits = Math.max(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}`;
           };
         }
       });
@@ -165,17 +158,18 @@ class EchartBar extends EchartBase {
   }
 
   // 设置柱状图X,Y倒转
-  setDirectionType({directionType}) {
+  setDirectionType({ directionType }) {
     let temAxis = {};
-    if (directionType === 'crosswise') { // 横向
+    if (directionType === 'crosswise') {
+      // 横向
       temAxis = this.config.xAxis;
       // @ts-ignore
       this.config.xAxis = this.config.yAxis;
       // @ts-ignore
       this.config.yAxis = temAxis;
-      this.config.yAxis.inverse =  true;
-
-    } else { // 纵向
+      this.config.yAxis.inverse = true;
+    } else {
+      // 纵向
       if (this.config.yAxis.inverse) {
         temAxis = this.config.yAxis;
         // @ts-ignore
@@ -220,7 +214,7 @@ class EchartBar extends EchartBase {
     isUnit,
     unit,
     decimalDigits,
-    suffix
+    suffix,
   }) {
     legend = document.body.clientWidth < 1024 ? legend : legend2;
     if (dataSource) {
@@ -233,7 +227,7 @@ class EchartBar extends EchartBase {
         groupKey,
         groupKeyTimeSpan,
         yField,
-        isPile
+        isPile,
       });
     }
     this.setColor({ setColor });
@@ -255,9 +249,9 @@ class EchartBar extends EchartBase {
       isUnit,
       unit,
       decimalDigits,
-      suffix
+      suffix,
     });
-    this.setDirectionType({directionType});
+    this.setDirectionType({ directionType });
     return this.config;
   }
 }

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