@cloudbase/weda-ui 0.2.16 → 0.2.17

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

@@ -0,0 +1,139 @@
+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({
+  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,
+}: PropsType) {
+  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

@@ -0,0 +1,49 @@
+/** 根据当前环境获取 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

@@ -0,0 +1,16 @@
+/** 根据当前环境获取 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

@@ -0,0 +1,50 @@
+/** 根据当前环境获取 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;
+};
+
+module.exports = getConfig;

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

@@ -0,0 +1,37 @@
+/** 根据当前环境获取 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

@@ -0,0 +1,264 @@
+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 arrXaxisData = this.setXaxis(arrSourData, xField.format);
+      const arrXisCountEmptyIndex = []; // 记录空值的key
+      if (!groupKey) {
+        const numLine = arrSourData[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: [],
+            };
+            arrSourData.forEach((itemSource,index) => {
+              this.config.series[j].name = itemSource.YLabels[j].Cn_Name;
+              if ((!itemSource.YLabels[j].Value || itemSource.YLabels[j].Value === 0 || 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:'统计的数值字段名'}]}
+        arrSourData.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;