@cloudbase/weda-ui 2.0.11 → 2.0.27

package/src/web/actions/showModal/index.tsx

@@ -2,8 +2,10 @@ import * as ReactDOM from 'react-dom';
 import * as React from 'react';
 import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
 import { Modal, Button, Text, ModalProps, ConfigProvider } from 'tea-component';
-import type { ModalShowHandle, ModalShowOptions } from 'tea-component/lib/modal/ModalShow';
-
+import type {
+  ModalShowHandle,
+  ModalShowOptions,
+} from 'tea-component/lib/modal/ModalShow';
 
 interface ModalShowInstance {
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -26,9 +28,8 @@ const ModalShow = forwardRef(function ModalShow(
   return <Modal {...props} visible={visible} />;
 });
 
-
 function show(options: ModalShowOptions): ModalShowHandle {
-  const el = document.createElement("div");
+  const el = document.createElement('div');
 
   const instanceRef = React.createRef<ModalShowInstance>();
 

package/src/web/components/calendar/index.css

@@ -1,11 +1,16 @@
- /* weda_calendar */
+/* weda_calendar */
+
+.weda-calendar {
+  font-size: 14px;
+}
 
 /* pc 日历样式 start */
 .weda-calendar.weda-calendar-pc {
-  background: #FFFFFF;
-  border: 0.5px solid #DCDCDC;
+  background: #ffffff;
+  border: 0.5px solid #dcdcdc;
   box-sizing: border-box;
-  box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1);
   border-radius: 3px;
   min-width: 560px;
 }
@@ -45,31 +50,22 @@
   margin-right: 0;
 }
 
-.weda-calendar-pc .weda-calendar__control-section .weda-calendar__control-section-cell {
+.weda-calendar-pc
+  .weda-calendar__control-section
+  .weda-calendar__control-section-cell {
   height: 100%;
   margin-right: 8px;
 }
 
-.weda-calendar-pc .weda-calendar__control-section .weda-calendar__control-section-cell:last-child {
+.weda-calendar-pc
+  .weda-calendar__control-section
+  .weda-calendar__control-section-cell:last-child {
   margin-right: 0;
 }
 
-.weda-calendar-pc .weda-calendar__control-section .tea-dropdown .tea-dropdown__header {
-  background: #E7E7E7;
-  border-radius: 3px;
-  padding: 5px 32px 5px 12px;
-  height: 32px;
-
-}
-
-.weda-calendar-pc .weda-calendar__control-section .tea-dropdown .tea-dropdown__value {
-  font-size: 14px;
-  line-height: 22px;
-}
-
 .weda-calendar-pc .weda-calendar__control_pc .weda-calendar__current-date {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.57142em;
   color: rgba(0, 0, 0, 0.9);
 }
 
@@ -81,6 +77,7 @@
 }
 
 .weda-calendar .weda-calendar__table {
+  font-size: inherit;
   border-collapse: collapse;
   border-spacing: 0;
   width: 100%;
@@ -116,15 +113,17 @@
   justify-content: flex-end;
   height: 100%;
   padding: 0;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.57142em;
   color: rgba(0, 0, 0, 0.6);
   margin-right: 12px;
   position: relative;
 }
 
 .weda-calendar .weda-calendar__table .weda-calendar__table-head-cell:last-child,
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell:last-child {
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell:last-child {
   margin-right: 0;
 }
 
@@ -136,7 +135,7 @@
   flex: 1;
   -webkit-box-flex: 1;
   -ms-flex: 1;
-  border-top: 1px solid #E7E7E7;
+  border-top: 1px solid #e7e7e7;
   padding: 0;
   height: 87.4px;
   display: flex;
@@ -156,34 +155,46 @@
   color: rgba(0, 0, 0, 0.26);
 }
 
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell.is-disabled,
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell.is-invalid {
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled,
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid {
   cursor: not-allowed;
 }
 
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell.is-invalid {
-  background: #F3F3F3;
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid {
+  background: #f3f3f3;
 }
 
 .weda-calendar .weda-calendar__table .weda-calendar__table-body-cell.is-now {
-  border-top-color: #0052D9;
-  background: #ECF2FE;
+  border-top-color: #0052d9;
+  background: #ecf2fe;
 }
 
 .weda-calendar .weda-calendar__table .weda-calendar__table-body-cell-value {
-  font-size: 14px;
+  font-size: 1em;
   font-weight: 400;
-  line-height: 22px;
+  line-height: 1.57142em;
   color: rgba(0, 0, 0, 0.9);
   margin-top: 3px;
   position: relative;
 }
 
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell.is-disabled .weda-calendar__table-body-cell-value {
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell-value {
   color: rgba(0, 0, 0, 0.26);
 }
 
-.weda-calendar .weda-calendar__table .weda-calendar__table-body-cell .weda-calendar__table-body-cell-marked {
+.weda-calendar
+  .weda-calendar__table
+  .weda-calendar__table-body-cell
+  .weda-calendar__table-body-cell-marked {
   position: absolute;
   width: 6px;
   height: 6px;
@@ -198,7 +209,7 @@
 /* h5 日历样式 start */
 
 .weda-calendar.weda-calendar-h5 {
-  background: #FFFFFF;
+  background: #ffffff;
   width: 100%;
   opacity: 0.9;
 }
@@ -222,29 +233,33 @@
   background-position: center;
 }
 
-.weda-calendar__control_h5 .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line,
-.weda-calendar__control_h5 .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
+.weda-calendar__control_h5
+  .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line,
+.weda-calendar__control_h5
+  .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
   position: absolute;
   top: 17px;
-  width: 20px;
-  height: 20px;
+  width: 1.42857em;
+  height: 1.42857em;
 }
 
-.weda-calendar__control_h5 .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line {
+.weda-calendar__control_h5
+  .weda-calendar_prevMonth.wedatea2td-icon-arrowleft--line {
   left: 16px;
 }
-.weda-calendar__control_h5 .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
+.weda-calendar__control_h5
+  .weda-calendar_nextMonth.wedatea2td-icon-arrowright--line {
   right: 16px;
 }
 
 .weda-calendar__control_h5 .weda-calendar__current-date {
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1em;
+  line-height: 1.57142em;
   font-weight: bold;
 }
 
 .weda-calendar-h5 .weda-calendar__panel {
-  height: 306px;
+  height: 21.85714em;
   padding: 20px 16px 16px 16px;
   width: 100%;
   box-sizing: border-box;
@@ -271,7 +286,7 @@
 }
 
 .weda-calendar-h5 .weda-calendar__table .weda-calendar__table-head-cell {
-  font-size: 12px;
+  font-size: 0.85714em;
   line-height: 20px;
   width: 100%;
   height: 100%;
@@ -279,8 +294,8 @@
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.85714em;
+  line-height: 1.428571em;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -318,8 +333,8 @@
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 0.85714em;
+  line-height: 1.42857em;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-pack: center;
@@ -336,47 +351,66 @@
   background: transparent;
 }
 
-.weda-calendar-h5 .weda-calendar__table-body .weda-calendar__table-body-cell-value {
-  font-size: 14px;
+.weda-calendar-h5
+  .weda-calendar__table-body
+  .weda-calendar__table-body-cell-value {
+  font-size: 1em;
   text-align: center;
   border-radius: 50%;
   width: 40px;
-  line-height: 40px;
+  line-height: 2.85714em;
   margin: 0;
   box-sizing: border-box;
 }
 
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell.is-now .weda-calendar__table-body-cell-value {
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-now
+  .weda-calendar__table-body-cell-value {
   color: #fff;
 }
 
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell.is-now .weda-calendar__table-body-cell-bg {
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-now
+  .weda-calendar__table-body-cell-bg {
   position: absolute;
-  width: 24px;
-  height: 24px;
-  background: #0052D9;
+  width: 1.714285em;
+  height: 1.714285em;
+  background: #0052d9;
   border-radius: 100%;
-  left: calc(50% - 12px);
-  top: calc(50% - 12px);
+  left: calc(50% - 0.85714em);
+  top: calc(50% - 0.85714em);
   z-index: -1;
 }
 
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell .weda-calendar__table-body-cell-marked {
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell
+  .weda-calendar__table-body-cell-marked {
   width: 4px;
   height: 4px;
   top: calc(50% + 14px);
 }
 
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell.is-disabled .weda-calendar__table-body-cell-value {
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell-value {
   color: rgba(0, 0, 0, 0.6);
 }
 
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell.is-invalid {
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid {
   background: transparent;
 }
 
-.weda-calendar-h5 .weda-calendar__table .weda-calendar__table-body-cell.is-invalid .weda-calendar__table-body-cell-value {
+.weda-calendar-h5
+  .weda-calendar__table
+  .weda-calendar__table-body-cell.is-invalid
+  .weda-calendar__table-body-cell-value {
   color: #c5c5c5;
 }
 
-/* h5 日历样式 end */
+/* h5 日历样式 end */

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