@cloudbase/weda-ui 2.0.26 → 3.1.0

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

@@ -1,396 +0,0 @@
-import { callDataSource, callWedaApi } from '../../../../utils/tcb';
-import getConfig from '../config/global';
-
-export type IEchartModalBase = typeof EchartBase;
-export abstract class AbstractEchartBaseModal {
-  abstract setOptions(options: any): Promise<void>;
-  abstract getOptions(option: any): Promise<void>;
-}
-
-type IReturnData = {
-  value: {
-    Key: string;
-    OperationType: 'count' | 'sum' | 'avg' | 'max' | 'min';
-  }[];
-  where: [];
-  dimension: {
-    TimeSpan?: string;
-    Key?: string;
-    IsCountEmpty?: boolean;
-  };
-  group: {
-    TimeSpan?: string;
-    Key?: string;
-  };
-};
-
-/**
- * 图表处理基类
- * @author loonglong
- **/
-class EchartBase extends AbstractEchartBaseModal {
-  // config: ECOption;
-  // TODO: type
-  config: any;
-  constructor() {
-    super();
-    this.config = getConfig();
-  }
-
-  public async setOptions(options: any): Promise<void> {}
-
-  /** 获取所有配置好的图表数据 */
-  public getOptions() {
-    return this.config;
-  }
-
-  /** 生成后台查询条件 */
-  protected createWhere({
-    filterData,
-    xField,
-    xStatistics,
-    xIsCountEmpty,
-    yField,
-    groupKey = {} as Record<string, any>,
-    groupKeyTimeSpan = '',
-  }) {
-    const objReturnData: IReturnData = {
-      value: [],
-      where: [],
-      dimension: {},
-      group: {},
-    };
-    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) => {
-            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,
-              },
-              ValueType: mval.valueType,
-              Expression: mval.expression,
-            };
-          });
-        }
-        return {
-          GroupLogic: val.groupLogic,
-          LogicData: arrLogicData,
-        };
-      });
-    }
-    if (xField && xField.name) {
-      objReturnData.dimension = {
-        Key: xField.name,
-      };
-      if (xStatistics) {
-        objReturnData.dimension.TimeSpan = xStatistics;
-      } else {
-        objReturnData.dimension.IsCountEmpty = xIsCountEmpty;
-      }
-    }
-    if (yField && yField.numValue && yField.numValue.length > 0) {
-      yField.numValue.forEach((itemVal) => {
-        objReturnData.value.push({
-          Key: itemVal.key,
-          OperationType: itemVal.operationType,
-        });
-      });
-    }
-
-    if (yField && groupKey && groupKey.name) {
-      objReturnData.group.Key = groupKey.name;
-      objReturnData.group.TimeSpan = groupKeyTimeSpan;
-    }
-    return objReturnData;
-  }
-
-  /**
-   * 从后台获取统计数据
-   *
-   **/
-  protected async getSourceData(
-    sourceName = '',
-    methods = '',
-    dataSourceType = '',
-    params
-  ) {
-    try {
-      if (dataSourceType === 'database') {
-        return await callWedaApi({
-          action: 'DescribeChartData',
-          data: {
-            DataSourceName: sourceName,
-            Value: params.value,
-            Where: params.where,
-            Dimension: params.dimension,
-            Group: params.group,
-          },
-        });
-      }
-      const res = await callDataSource({
-        dataSourceName: sourceName,
-        methodName: methods,
-        params,
-      });
-      return res.result ?? [];
-    } catch (err) {
-      return [];
-    }
-  }
-
-  protected setTitle({ isTitle, title, titleLocation = '' }) {
-    this.config.title;
-    this.config.title.show = isTitle;
-    this.config.title.text = title;
-
-    this.config.title.top = '-1%';
-    this.config.title.left = '35%';
-    this.config.title.right = null;
-  }
-
-  protected setLegend({ isLegend, legend = 'top' }) {
-    this.config.legend.show = isLegend;
-    switch (legend) {
-      case 'top':
-        this.config.legend.orient = 'horizontal';
-        this.config.legend.x = 'center';
-        this.config.legend.top = '6%';
-        break;
-      case 'left':
-        this.config.legend.orient = 'vertical';
-        this.config.legend.top = '30%';
-        this.config.legend.left = '1%';
-        break;
-      case 'right':
-        this.config.legend.orient = 'vertical';
-        this.config.legend.top = '30%';
-        this.config.legend.right = '6%';
-        break;
-      default:
-        this.config.legend.top = '89%';
-        this.config.legend.orient = 'horizontal';
-        this.config.legend.x = 'center';
-        break;
-    }
-  }
-
-  /**
-   * 设置 X轴数据
-   * @param { Array<object> } arrData 后台返回的数据
-   * @param { string } formatType 类型 datetime：日期时间;date:日期，time：时间，其它
-   */
-  protected setXaxis(sortedXAxisData, formatType) {
-    const xAxisData = [];
-    if (sortedXAxisData.length > 0) {
-      sortedXAxisData.forEach((itemSource) => {
-        let value = itemSource.XLabel.Value;
-        if (formatType === 'datetime') {
-          value = this.formatTime(itemSource.XLabel.Value, 'dt');
-        } else if (formatType === 'date') {
-          value = this.formatTime(itemSource.XLabel.Value, 'd');
-        } else if (formatType === 'time') {
-          value = this.formatTime(itemSource.XLabel.Value, 't');
-        }
-        xAxisData.push(value);
-      });
-      this.config.xAxis.data = xAxisData;
-    }
-    return xAxisData;
-  }
-  protected sortXAxisData(arrData, formatType = ''): Array<any> {
-    let xFields = [...arrData];
-    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) {
-          return 1;
-        }
-        if (!b.XLabel.Value) {
-          return -1;
-        }
-      });
-    }
-
-    return xFields;
-  }
-
-  /**
-   * 时间轴格式化为日期，时间，日期时间
-   * @param { number } time 时间戳
-   * @param { string } timeType 需要格式化的类型 dt：日期时间，d：日期，t：时间
-   * @returns { string } 格式化结果
-   */
-  private formatTime(time, timeType = 'dt') {
-    if (typeof time === 'undefined' || time === null) {
-      return '空';
-    }
-    if (typeof time === 'string') {
-      // 如果是字符串，代表后台返回的就是格式化的时间格式，则这里不再做格式化处理
-      return time;
-    }
-    const date = new Date(time + 8 * 3600 * 1000);
-    let startNum = 0;
-    let endNum = 19;
-    if (timeType === 'd') {
-      startNum = 0;
-      endNum = 10;
-    } else if (timeType === 't') {
-      startNum = 11;
-      endNum = 5;
-    }
-    return date.toISOString().substr(startNum, endNum).replace('T', ' ');
-  }
-
-  /**
-   * 当有分组字段时，该方法用于获取图表 series 里的 data值，自动补全没有的数据
-   * @param { array } arrXaxisData - 维度名 eg:['张三','李四','王二']
-   * @param { array } arrGroupValue - 所属当前分组的数据 eg:[{value:'统计值',name:'统计名',dimensionality:'维度名'}]
-   * @returns 返回补全的数组
-   **/
-  protected getSeriesDataGroup(arrXaxisData, arrGroupValue) {
-    const xNums = arrXaxisData.length;
-    const arrRe = [];
-    for (let i = 0; i < xNums; i++) {
-      const objIsInArray = this.isInArray(arrXaxisData[i], arrGroupValue);
-      if (Object.keys(objIsInArray).length > 0) {
-        arrRe.push({
-          value: objIsInArray.value,
-          name: objIsInArray.name,
-          dimensionality: arrXaxisData[i],
-        });
-      } else {
-        arrRe.push({
-          value: null,
-        });
-      }
-    }
-    return arrRe;
-  }
-
-  // 判断当前的维度名是否在该数组里
-  // TODO: any
-  private isInArray(strDimensionality, arrGroupValue): any {
-    let mixStatus = {};
-    if (arrGroupValue.length > 0) {
-      arrGroupValue.forEach((itemGroupValue) => {
-        if (strDimensionality === itemGroupValue.dimensionality) {
-          mixStatus = itemGroupValue;
-        }
-      });
-    }
-    return mixStatus;
-  }
-
-  // 显示 X 轴标签名
-  protected setIsXaxisAxisLabelShow({ isXaxisAxisLabelShow }) {
-    this.config.xAxis.axisLabel.show = isXaxisAxisLabelShow;
-  }
-  // 显示 X 轴名
-  protected setIsXaxisName({ isXaxisName, xAxisName }) {
-    this.config.xAxis.name = isXaxisName ? xAxisName : '';
-  }
-  // 显示X轴刻度线
-  protected setIsXaxisAxisTickShow({ isXaxisAxisTickShow }) {
-    this.config.xAxis.axisTick = { show: isXaxisAxisTickShow };
-  }
-  // X 轴文字倾斜
-  protected setIsXaxisAxisLabelRotate({
-    isXaxisAxisLabelRotate,
-    xStatistics,
-    angle = 30,
-  }) {
-    this.config.xAxis.axisLabel.rotate = isXaxisAxisLabelRotate ? angle : 0;
-    if (isXaxisAxisLabelRotate || xStatistics) {
-      // 如果X轴是时间类型，自动斜30度展示
-      this.config.xAxis.axisLabel.rotate = angle;
-    } else {
-      this.config.xAxis.axisLabel.rotate = 0;
-    }
-  }
-
-  // 显示网格线 及 线条类型
-  protected setIsYAxisSplitlineLinestyleWidth({
-    isYAxisSplitlineLinestyleWidth,
-    yAxisSplitlineLinestyleType,
-  }) {
-    this.config.yAxis.splitLine = { lineStyle: {} };
-    this.config.yAxis.splitLine.lineStyle.width = isYAxisSplitlineLinestyleWidth
-      ? 1
-      : 0;
-    this.config.yAxis.splitLine.lineStyle.type = yAxisSplitlineLinestyleType;
-  }
-  // 显示 Y 轴刻度 最大值，最小值
-  protected setYAxisMaxMin({ yAxisMax, yAxisMin }) {
-    this.config.yAxis.min = yAxisMin ? yAxisMin : null;
-    this.config.yAxis.max = yAxisMax ? yAxisMax : null;
-  }
-  // 显示 Y 轴名称
-  protected setIsYAxisName({ isYAxisName, yAxisName }) {
-    this.config.yAxis.name = isYAxisName ? yAxisName : '';
-  }
-  // 显示 Y 轴刻度线
-  protected setIsYAxisShow({ isYAxisShow }) {
-    this.config.yAxis.show = isYAxisShow;
-  }
-
-  /**
-   * 当为空值时，重写xAxis, 只处理单Y轴情况
-   * @param { array } arrXisCountEmptyIndex Y轴空值key记录
-   * @param { boolean } xIsCountEmpty 是否统计空值
-   */
-  protected setEmptyValue(xIsCountEmpty) {
-    if (!xIsCountEmpty) {
-      const nonEmpty = this.config.xAxis.data.filter(
-        (item) => item !== undefined && item !== null
-      );
-      this.config.xAxis.data = nonEmpty;
-    }
-  }
-
-  /**
-   * 删除数组里面不存在的键值
-   * @param { array }  arrXAxis 需要处理的数组
-   * @returns { array } 返回处理后的数组
-   **/
-  private removeEmpty(arrXAxis) {
-    const arrNewxAxis = [];
-    if (arrXAxis.length > 0) {
-      for (let i = 0; i < arrXAxis.length; i++) {
-        if (arrXAxis[i]) {
-          arrNewxAxis.push(arrXAxis[i]);
-        }
-      }
-      return arrNewxAxis;
-    } else {
-      return arrXAxis;
-    }
-  }
-
-  /**
-   * 根据值 value,返回指定单位的数
-   * @param {number} value 原始值
-   * @param {string} unit 单位，'%'百分比，'‰'千分比, K千，W万，BW 百万，Y 亿，B 十亿
-   * @returns {object} 返回对象 {value:新值，postfix:'单位'}
-   **/
-  protected getValueByUnit(value, unit) {
-    value = Number(value);
-    return value / unit;
-  }
-}
-
-export default EchartBase;

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

@@ -1,225 +0,0 @@
-import EchartBase from './eChartBase';
-import getConfig from '../config/line';
-/**
- * 折线图表
- * @author loonglong
- **/
-class EchartLine extends EchartBase {
-  constructor() {
-    super();
-    const config = getConfig();
-    this.config = { ...this.config, ...config };
-  }
-  async setSourceData({
-    dataSource,
-    filterData,
-    xField,
-    xStatistics,
-    xIsCountEmpty,
-    yField,
-    groupKey,
-    groupKeyTimeSpan,
-  }) {
-    const { name = '', type = '', methodName = '' } = dataSource;
-    if (name !== '') {
-      const params = this.createWhere({
-        filterData,
-        xField,
-        xStatistics,
-        xIsCountEmpty,
-        yField,
-        groupKey,
-        groupKeyTimeSpan,
-      });
-      const arrSourData = await this.getSourceData(
-        name,
-        methodName,
-        type,
-        params
-      );
-      // 获取 x 轴数据
-
-      const sortedXAxisData = this.sortXAxisData(arrSourData, xField.format);
-      const arrXaxisData = this.setXaxis(sortedXAxisData, xField.format);
-      const arrXisCountEmptyIndex = []; // 记录空值的key
-      if (Object.keys(groupKey ?? {}).length === 0) {
-        const numLine = sortedXAxisData[0].YLabels.length;
-        if (numLine > 0) {
-          for (let j = 0; j < numLine; j++) {
-            this.config.series[j] = {
-              type: 'line',
-              smooth: true,
-              name: '',
-              connectNulls: true,
-              showSymbol: true,
-              label: {
-                show: true,
-              },
-              data: [],
-            };
-            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
-              ) {
-                arrXisCountEmptyIndex.push(index);
-              } else {
-                const value = itemSource.YLabels[j].Value
-                  ? itemSource.YLabels[j].Value
-                  : 0;
-                this.config.series[j].data.push(value);
-              }
-            });
-          }
-        }
-        // 处理显示空值问题
-        this.setEmptyValue(xIsCountEmpty);
-      } else if (groupKey) {
-        // 如果是分组，则这里需要特殊处理
-        // 按groupKey分组存放数据值
-        const objGroupKey = {}; // {'分组字段':[{value:'统计的值', dimensionality:'维度名', name:'统计的数值字段名'}]}
-        sortedXAxisData.forEach((itemSourData) => {
-          itemSourData.YLabels.forEach((yLabel) => {
-            if (!objGroupKey[yLabel.Group_Name]) {
-              objGroupKey[yLabel.Group_Name] = [];
-            }
-            objGroupKey[yLabel.Group_Name].push({
-              value: yLabel.Value,
-              dimensionality: itemSourData.XLabel.Value,
-              name: yLabel.Cn_Name,
-            });
-          });
-        });
-
-        // 组装图表需要的数据
-        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}`;
-      }
-    }
-  }
-  setChartType({ chartType }) {
-    this.config.series.length > 0 &&
-      this.config.series.forEach((itemSeries) => {
-        itemSeries.smooth = chartType !== 'line';
-      });
-  }
-
-  // 显示图表上的数据标签 单位，标签，小数位数，后缀
-  setIsSeriesShowSymbol({
-    isSeriesShowSymbol,
-    isUnit,
-    unit,
-    decimalDigits,
-    suffix,
-  }) {
-    decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
-    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}`;
-          };
-        }
-      });
-    if (isUnit) {
-      this.config.yAxis.axisLabel.formatter = (value) => {
-        const objNewValue = this.getValueByUnit(value, unit);
-        return `${objNewValue.toFixed(decimalDigits)}${suffix}`;
-      };
-    } else {
-      this.config.yAxis.axisLabel.formatter = null;
-    }
-  }
-  async setOptions({
-    chartType,
-    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,
-  }) {
-    if (dataSource) {
-      await this.setSourceData({
-        dataSource,
-        filterData,
-        xField,
-        xStatistics,
-        xIsCountEmpty,
-        yField,
-        groupKey,
-        groupKeyTimeSpan,
-      });
-    }
-    legend = document.body.clientWidth < 1024 ? legend : legend2;
-    this.setChartType({ chartType });
-    this.setTitle({ isTitle, title, titleLocation });
-    this.setLegend({ isLegend, legend });
-    this.setIsXaxisAxisLabelShow({ isXaxisAxisLabelShow });
-    this.setIsXaxisName({ isXaxisName, xAxisName });
-    this.setIsXaxisAxisTickShow({ isXaxisAxisTickShow });
-    this.setIsXaxisAxisLabelRotate({ isXaxisAxisLabelRotate, xStatistics });
-    this.setIsYAxisSplitlineLinestyleWidth({
-      isYAxisSplitlineLinestyleWidth,
-      yAxisSplitlineLinestyleType,
-    });
-    this.setYAxisMaxMin({ yAxisMax, yAxisMin });
-    this.setIsYAxisName({ isYAxisName, yAxisName });
-    this.setIsYAxisShow({ isYAxisShow });
-    this.setIsSeriesShowSymbol({
-      isSeriesShowSymbol,
-      isUnit,
-      unit,
-      decimalDigits,
-      suffix,
-    });
-  }
-}
-
-export default EchartLine;