GridChart.js 3.08 KB
Newer Older
1 2 3
import React, { memo, useMemo } from 'react';
import _ from 'lodash';
import { BasicChart } from '@wisdom-components/basicchart';
4
import PandaEmpty from '@wisdom-components/empty';
5 6
import optionGenerator from './utils';

7
const ChartTitle = ({ prefixCls, title, unit }) => {
8 9 10
  const cls = `${prefixCls}-grid-item-title`;
  return (
    <div className={cls}>
11 12
      <span className={`${cls}_text`}>{title}</span>
      {unit && <span className={`${cls}_unit`}>(单位:{unit}</span>}
13 14 15 16
    </div>
  );
};

17
const GridChart = memo((props) => {
18 19 20 21 22 23 24
  const {
    dataSource,
    contrast = false,
    contrastOption = 'day',
    smooth = true,
    curveCenter,
  } = props;
25 26 27 28
  const { prefixCls } = props;

  const gridData = useMemo(() => {
    const grids = dataSource.reduce((pre, item, index) => {
29 30 31
      const { sensorName, deviceType } = item;
      const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组
      let grid = pre.find((g) => g.key === key);
32 33 34
      if (!grid) {
        const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']);
        grid = {
35
          key: key,
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
          list: [],
          ...restProp,
        };
        pre.push(grid);
      }
      grid.list.push(item);
      return pre;
    }, []);
    return grids;
  }, [dataSource]);

  const options = useMemo(() => {
    return gridData.map((item) => {
      const { key, list, equipmentName, sensorName, stationCode, unit } = item;
      const cusOption = {
        title: {
          show: true,
53 54
          // text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|(单位:' + unit + ')}' : ''}`,
          text: ' ',
55 56 57 58 59 60 61 62 63 64 65 66 67
          textStyle: {
            width: 200,
            overflow: 'truncate',
          },
        },
        legend: {
          // orient: 'vertical',
          itemGap: 10,
          padding: [0, 0, 0, 200],
          textStyle: {
            width: 120,
            overflow: 'truncate',
          },
68 69
        },
      };
70 71
      const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, {
        curveCenter,
72
        nameWithSensor: false,
73
        showGridLine: true,
74
      });
75 76 77 78 79
      return {
        key,
        option: option,
      };
    });
80
  }, [gridData, smooth, curveCenter]);
81 82 83

  return (
    <div className={`${prefixCls}-grid`}>
84 85
      {options.map((item, index) => {
        const { sensorName, unit } = gridData[index];
86 87 88 89 90 91
        const isEmpty =
          !item.option.series.length ||
          !item.option.series.find((e) => e.data && e.data.length > 0);
        return (
          <div key={item.key} className={`${prefixCls}-grid-item`}>
            <div className={`${prefixCls}-grid-item-wrap`}>
92
              <ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit} />
93 94 95 96 97 98 99 100 101 102
              {isEmpty ? (
                <PandaEmpty />
              ) : (
                <BasicChart
                  style={{ width: '100%', height: '100%' }}
                  option={item.option}
                  notMerge
                />
              )}
            </div>
103
          </div>
104 105
        );
      })}
106 107 108 109 110
    </div>
  );
});

export default GridChart;