@cloudbase/weda-ui 2.0.28 → 3.1.0

package/src/web/components/chart/bar/index.tsx

@@ -1,140 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { CommonPropsType } from '../../../types';
-import { DataSource, Xfield, Yfield } from '../common/core/type';
-import EchartBar from '../common/core/eChartBar';
-import { useWedaChart } from '../common/useChart';
-import classNames from '../../../utils/classnames';
-interface PropsType extends CommonPropsType {
-  directionType?: string;
-  isPile?: boolean;
-  isTitle?: boolean;
-  title?: string;
-  titleLocation?: string;
-  dataSource?: DataSource;
-  filterData?: string;
-  setColor?: Array<string>;
-  xField?: Xfield;
-  xStatistics?: string;
-  groupKey?: Xfield;
-  groupKeyTimeSpan?: 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 Bar(opts: PropsType) {
-  const {
-    directionType,
-    isPile,
-    id,
-    style,
-    className,
-    isTitle,
-    title,
-    titleLocation,
-    dataSource,
-    setColor,
-    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,
-  } = opts;
-  const domRef = useRef<HTMLDivElement>();
-  useWedaChart(domRef, EchartBar, {
-    directionType,
-    isPile,
-    setColor,
-    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,
-  });
-  const inlineStyle = {
-    height: '380px',
-    width: '100%',
-    backgroundColor: '#ffffff',
-    ...style,
-  };
-  return (
-    <div
-      id={id}
-      data-testid="bar"
-      ref={domRef}
-      style={inlineStyle}
-      className={classNames({
-        'weda-ui-chart-bar': true,
-        'echart-wrapper-canvas': true,
-        'echart-dark-body': true,
-        [className]: className,
-      })}
-    />
-  );
-}

package/src/web/components/chart/common/config/bar.js

@@ -1,49 +0,0 @@
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-const getConfig = () => {
-  const barH5 = {
-    xAxis: {
-      name: 'X轴名',
-      nameTextStyle: { align: 'center' },
-      axisLabel: {
-        show: true, // 刻度标签显示
-        rotate: 0, // 字体倾斜
-      },
-      axisTick: {
-        show: true, // 刻度显示
-      },
-      inverse: false,
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value',
-      show: true, // y轴刻度线
-      name: 'Y轴名',
-      splitLine: {
-        lineStyle: {
-          width: 1, // 网格线宽度，为0则不显示
-          type: 'dashed', //solid,dashed,dotted
-        },
-      },
-      axisLabel: { padding: [0, -10, 0, 0] },
-      min: null,
-      max: null,
-    },
-    series: [
-      {
-        name: 'demo',
-        data: [0, 932, 901, 934, 1290, 1330, 1320],
-        type: 'bar',
-        itemStyle: {
-          color: 'green',
-        },
-        showSymbol: true, //是否显示线条上数据标签
-        label: {
-          show: true, // 显示线条上的数据
-        },
-      },
-    ],
-  };
-  return barH5;
-};
-export default getConfig;

package/src/web/components/chart/common/config/global.js

@@ -1,16 +0,0 @@
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-const getConfig = () => {
-  const globalH5 = {
-    title: {
-      text: 'demo实例',
-      show: true,
-      left: '50%',
-    },
-    legend: {
-      top: '88%',
-    },
-    tooltip: {},
-  };
-  return globalH5;
-};
-export default getConfig;

package/src/web/components/chart/common/config/line.js

@@ -1,50 +0,0 @@
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-const getConfig = () => {
-  const lineH5 = {
-    xAxis: {
-      name: 'X轴名',
-      nameTextStyle: { align: 'center' },
-      axisLabel: {
-        show: true, // 刻度标签显示
-        rotate: 0, // 字体倾斜
-      },
-      axisTick: {
-        show: true, // 刻度显示
-      },
-      type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    },
-    yAxis: {
-      type: 'value',
-      show: true, // y轴刻度线
-      name: 'Y轴名',
-      splitLine: {
-        lineStyle: {
-          width: 1, // 网格线宽度，为0则不显示
-          type: 'dashed', //solid,dashed,dotted
-        },
-      },
-      axisLabel: {
-        padding: [0, -10, 0, 0],
-      },
-      min: null,
-      max: null,
-    },
-    series: [
-      {
-        name: 'demo',
-        connectNulls: true,
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
-        type: 'line',
-        smooth: true,
-        showSymbol: true, //是否显示线条上数据标签
-        label: {
-          show: true, // 显示线条上的数据
-        },
-      },
-    ],
-  };
-  return lineH5;
-};
-
-export default getConfig;

package/src/web/components/chart/common/config/pie.js

@@ -1,37 +0,0 @@
-/** 根据当前环境获取 pc 上配置，还是 H5上的配置 */
-const getConfig = () => {
-  const pieH5 = {
-    series: [
-      {
-        // name: 'demo',
-        data: [
-          { value: 820, name: '实例数据1', tooltip: {}, itemStyle: {} },
-          { value: 932, name: '实例数据2', tooltip: {}, itemStyle: {} },
-          { value: 901, name: '实例数据3', tooltip: {}, itemStyle: {} },
-          { value: 934, name: '实例数据4', tooltip: {}, itemStyle: {} },
-          { value: 1290, name: '实例数据5', tooltip: {}, itemStyle: {} },
-        ],
-        label: {
-          show: true,
-          position: 'inner',
-          normal: {
-            formatter: null,
-            position: 'inner',
-          },
-        },
-        type: 'pie',
-        radius: '70%',
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)',
-          },
-        },
-      },
-    ],
-  };
-
-  return pieH5;
-};
-export default getConfig;

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

@@ -1,259 +0,0 @@
-import EchartBase from './eChartBase';
-import getConfig from '../config/bar';
-/**
- * 柱状图表
- * @author loonglong
- **/
-class EchartBar extends EchartBase {
-  constructor() {
-    super();
-    const config = getConfig();
-    this.config = { ...this.config, ...config };
-  }
-  async setSourceData({
-    dataSource,
-    filterData,
-    xField,
-    xStatistics,
-    xIsCountEmpty,
-    groupKey,
-    groupKeyTimeSpan,
-    yField,
-    isPile,
-  }) {
-    const { name = '', type = '', methodName = '' } = dataSource;
-    if (name !== '') {
-      const params = this.createWhere({
-        filterData,
-        xField,
-        xStatistics,
-        xIsCountEmpty,
-        groupKey,
-        groupKeyTimeSpan,
-        yField,
-      });
-      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: 'bar',
-              name: '',
-              stack: isPile ? 'pile' : null,
-              itemStyle: { color: null },
-              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 arrGroupKey = Object.keys(objGroupKey);
-        this.config.series = arrGroupKey.map((groupKey) => {
-          // groupKey分组字段中文名
-          const serie = {
-            name: groupKey,
-            type: 'bar',
-            itemStyle: {
-              color: null,
-            },
-            showSymbol: true,
-            label: {
-              show: true,
-            },
-            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}`;
-      }
-    }
-  }
-  setColor({ setColor }) {
-    if (this.config.series.length > 0 && setColor && setColor.length > 0) {
-      let i = 0;
-      this.config.series.forEach((itemSeries) => {
-        itemSeries.itemStyle.color = setColor[i % 6];
-        i = i + 1;
-      });
-    }
-  }
-
-  // 显示图表上的数据标签 单位，标签，小数位数，后缀
-  setIsSeriesShowSymbol({
-    isSeriesShowSymbol,
-    isUnit,
-    unit,
-    decimalDigits,
-    suffix,
-  }) {
-    decimalDigits = Math.max(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;
-    }
-  }
-
-  // 设置柱状图X,Y倒转
-  setDirectionType({ directionType }) {
-    let temAxis = {};
-    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 {
-      // 纵向
-      if (this.config.yAxis.inverse) {
-        temAxis = this.config.yAxis;
-        // @ts-ignore
-        this.config.yAxis = this.config.xAxis;
-        // @ts-ignore
-        this.config.xAxis = temAxis;
-        this.config.xAxis.inverse = false;
-      }
-    }
-  }
-  async setOptions({
-    directionType,
-    isPile,
-    setColor,
-    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,
-  }) {
-    legend = document.body.clientWidth < 1024 ? legend : legend2;
-    if (dataSource) {
-      await this.setSourceData({
-        dataSource,
-        filterData,
-        xField,
-        xStatistics,
-        xIsCountEmpty,
-        groupKey,
-        groupKeyTimeSpan,
-        yField,
-        isPile,
-      });
-    }
-    this.setColor({ setColor });
-    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,
-    });
-    this.setDirectionType({ directionType });
-    return this.config;
-  }
-}
-
-export default EchartBar;