@cloudbase/weda-ui 0.2.14 → 0.2.17

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

@@ -0,0 +1,229 @@
+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 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: 'line',
+              smooth: true,
+              name: '',
+              connectNulls: true,
+              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 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;

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

@@ -0,0 +1,170 @@
+import EchartBase from './eChartBase';
+import getConfig from '../config/pie';
+/**
+ * 饼状图表
+ * @author loonglong
+ **/
+class EchartPie extends EchartBase {
+  constructor() {
+    super();
+    const config = getConfig();
+    this.config = { ...this.config, ...config };
+  }
+  async setSourceData({
+    dataSource,
+    filterData,
+    setColor,
+    xField,
+    xStatistics,
+    xIsCountEmpty,
+    yField,
+  }) {
+    const { name = '', type = '', methodName = '' } = dataSource;
+    if (name !== '') {
+      const params = this.createWhere({
+        filterData,
+        xField,
+        xStatistics,
+        xIsCountEmpty,
+        yField,
+      });
+      const arrSourData = await this.getSourceData(
+        name,
+        methodName,
+        type,
+        params,
+      );
+      // 获取 x 轴数据
+      if (arrSourData.length >= 0) {
+        const numPie = arrSourData[0].YLabels.length;
+        if (numPie > 0) {
+          const arrData = [];
+          let i = 0;
+          arrSourData.forEach((itemSource) => {
+            const numc = setColor ? setColor.length : 0;
+            const strColor = numc > 0 ? { color: setColor[i % numc] } : {};
+            arrData.push({
+              value: itemSource.YLabels[0].Value,
+              name: itemSource.XLabel.Value,
+              tooltip: {},
+              itemStyle: strColor,
+            });
+            i = i + 1;
+          });
+          this.config.series[0].data = arrData;
+        }
+      } else {
+        // this.config['series'][0].data = [];
+      }
+    }
+  }
+  setChartType({ chartType }) {
+    this.config.series.length > 0
+      && this.config.series.forEach((itemSeries) => {
+        if (chartType === 'pie') {
+          itemSeries.radius = '70%';
+        } else {
+          // @ts-ignore
+          itemSeries.radius = ['40%', '70%'];
+        }
+      });
+  }
+
+  // 显示图表上的数据标签 单位，标签，小数位数，后缀
+  setIsSeriesShowSymbol({
+    isSeriesShowSymbol,
+    isPercent,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix
+  }) {
+    decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
+    let show = false;
+    let position = 'inner';
+    let formatter = null;
+
+    if (isSeriesShowSymbol || isPercent || isUnit) {
+      formatter = '';
+    }
+    this.config.series[0].label.show = show;
+    this.config.series[0].label.position = position;
+    if (formatter === null) {
+      this.config.series[0].label.normal = null;
+    } else {
+      this.config.series[0].label.normal.formatter = (objValue) => {
+        let reData = '';
+        if (isSeriesShowSymbol) { // 显示数值
+          reData = objValue.value;
+        }
+        if (isUnit) { // 显示单位
+          if (unit) {
+            const objNewValue = this.getValueByUnit(objValue.value, unit);
+            reData = `${objNewValue.toFixed(decimalDigits)}${suffix}`;
+          } else {
+            reData = `${objValue.value.toFixed(decimalDigits)}`;
+          }
+          this.config.series[0].data.forEach((itemData) => {
+            itemData.tooltip.formatter = (objVal) => {
+              const objItemData = this.getValueByUnit(objVal.value, unit);
+              return `${objItemData.toFixed(decimalDigits)}${suffix}`;
+            };
+          });
+        }
+        if (isPercent) { // 显示百分比
+          reData = `${reData}(${objValue.percent}%)`;
+        }
+        return reData;
+      };
+    }
+  }
+  async setOptions({
+    chartType,
+    isTitle,
+    title,
+    titleLocation,
+    dataSource,
+    filterData,
+    setColor,
+    xField,
+    xStatistics,
+    xIsCountEmpty,
+    yField,
+    isLegend,
+    legend,
+    legend2,
+    isSeriesShowSymbol,
+    isPercent,
+    isUnit,
+    unit,
+    decimalDigits,
+    suffix
+  }) {
+    legend = document.body.clientWidth < 1024 ? legend : legend2;
+    if (dataSource) {
+      await this.setSourceData({
+        dataSource,
+        filterData,
+        setColor,
+        xField,
+        xStatistics,
+        xIsCountEmpty,
+        yField,
+      });
+    }
+
+    this.setChartType({ chartType });
+    this.setTitle({ isTitle, title, titleLocation });
+    this.setLegend({ isLegend, legend });
+    this.setIsSeriesShowSymbol({
+      isSeriesShowSymbol,
+      isPercent,
+      isUnit,
+      unit,
+      decimalDigits,
+      suffix
+    });
+  }
+}
+
+export default EchartPie;

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

@@ -0,0 +1,34 @@
+export interface DataSource {
+    name:string, // 数据源名
+    type:string, // 数据源类型
+    subType:string, // 数据源子类型
+    provider?:string, // 内置连接器类型
+    methodName:string // 数据源方法名
+}
+export interface ObjSource {
+    dataSourceName:string, // 数据源名
+    dataSourceType:string, // 数据源类型
+    dataSourceMethodName:string // 数据源方法名
+}
+export interface Xfield {
+    format:string,
+    type:string,
+    title:string,
+    name:string,
+}
+enum CountType {
+    'count',
+    'sum',
+    'avg',
+    'max',
+    'min'
+}
+export interface YfieldOne {
+    key:string,
+    operationType:CountType,
+    title?:string,
+}
+export interface Yfield {
+    groupKey?:string,
+    numValue?:Array<YfieldOne>,
+}

package/src/web/components/chart/common/echart.css

@@ -0,0 +1,106 @@
+.weda-ui-echart .set_bottom {
+  padding: 4px 0;
+  background: #fff;
+  margin: 0;
+}
+.weda-ui-echart .pc_set_title {
+  height: 48px;
+  line-height: 48px;
+  font-size: 16px;
+  padding-left: 24px;
+}
+.weda-ui-echart .mobile_set_title {
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  padding-left: 12px;
+}
+.weda-ui-echart .echart-light-box {
+  position: relative;
+  background-color: #F4F5F6;
+}
+.weda-ui-echart .echart-light-body {
+  background-color: #ffffff;
+}
+.weda-ui-echart .echart-dark-box {
+  position: relative;
+  background-color: #4B5D6C;
+}
+.weda-ui-echart .echart-dark-body {
+  background-color: #1D1F24;
+  margin: 6px;
+}
+.weda-ui-echart .btn-grounp {
+  position: absolute;
+  top: 60px;
+  left: 58px;
+  z-index: 999;
+  background: transparent;
+}
+.weda-ui-echart button {
+  text-transform: none;
+}
+.weda-ui-echart .ant-btn,
+.weda-ui-echart .ant-btn:active,
+.weda-ui-echart .ant-btn:focus {
+  outline: 0;
+}
+.weda-ui-echart .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+  line-height: 1.499;
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding: 0 23px;
+  font-size: 14px;
+  border-radius: 4px;
+  height: 36px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  position: relative;
+  color: #4B5D6C;
+  background-color: #fff;
+  border-color: #CCD2D8;
+}
+.weda-ui-echart .button,
+.weda-ui-echart html [type="button"],
+.weda-ui-echart [type="reset"],
+.weda-ui-echart [type="submit"] {
+  -webkit-appearance: button;
+}
+.weda-ui-echart .ant-btn-primary {
+  color: #fff;
+  background-color: #4A62E7;
+  border-color: #4A62E7;
+}
+.weda-ui-echart .ant-btn:not([disabled]):hover {
+  text-decoration: none;
+}
+.weda-ui-echart .ant-btn:hover,
+.weda-ui-echart .ant-btn:focus,
+.weda-ui-echart .ant-btn:active,
+.weda-ui-echart .ant-btn.active {
+  background: #fff;
+  text-decoration: none;
+}
+.weda-ui-echart .ant-btn:hover,
+.weda-ui-echart .ant-btn:focus {
+  color: #4A62E7;
+  background-color: #fff;
+  border-color: #4A62E7;
+}
+.weda-ui-echart .ant-btn-primary:hover,
+.weda-ui-echart .ant-btn-primary:focus {
+  color: #fff;
+  background-color: #5f78ff;
+  border-color: #5f78ff;
+}

package/src/web/components/chart/common/echarts.ts

@@ -0,0 +1,33 @@
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core';
+// 引入图表，图表后缀都为 Chart
+import { BarChart, LineChart, PieChart } from 'echarts/charts';
+//组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent
+} from 'echarts/components';
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers';
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart
+]);
+
+export {
+  echarts
+};

package/src/web/components/chart/common/useChart.tsx

@@ -0,0 +1,69 @@
+import { useAsync, useDeepCompareEffect, useEventListener, useIsMounted, useMountEffect } from "@react-hookz/web";
+import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef } from "react";
+import { IEchartModalBase } from "./core/eChartBase";
+import { echarts } from "./echarts";
+
+export function useChart(ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>) {
+  const chartRef = useRef<echarts.ECharts>();
+  const isMounted = useIsMounted();
+  useMountEffect(() => {
+
+    if(!ref.current || !isMounted) {
+      return;
+    }
+
+    const echartDom = ref.current;
+    const chart = echarts.init(echartDom);
+    chartRef.current = chart;
+    return () => {
+      chart.dispose();
+      chartRef.current = null;
+    };
+  });
+
+  useEventListener(window, 'resize', () => {
+    chartRef.current && chartRef.current.resize();
+  });
+
+  return chartRef.current;
+}
+
+
+/**
+ * @deprecated The method should not be used
+ */
+export function useWedaChart(domRef, ModalClass: IEchartModalBase, options: echarts.EChartsCoreOption) {
+  const chart = useChart(domRef);
+  const getOptions = async() => {
+    const chartModal = new ModalClass();
+    let finalOptions: any = await chartModal.setOptions(options);
+    if(!finalOptions) {
+      finalOptions = chartModal.getOptions() as any;
+    }
+    return finalOptions;
+  };
+  const [state, actions] = useAsync(getOptions);
+
+  useMountEffect(() => {
+    actions.execute();
+  });
+  useDeepCompareEffect(() => {
+    actions.execute();
+  }, [
+  // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
+  options,
+  actions]);
+  useEffect(() => {
+    if(state.status === 'success' && chart) {
+      console.log(ModalClass.name, options, state.result, window.location.href);
+      chart.setOption(
+        state.result,
+        true // noMerge 全刷
+      );
+    } else {
+      if(state.status === 'error') {
+        console.error(state.error);
+      }
+    }
+  }, [state]);
+}