GridChart.js 1.75 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
import React, { memo, useMemo } from 'react';
import _ from 'lodash';
import { BasicChart } from '@wisdom-components/basicchart';
import optionGenerator from './utils';

const GridChart = memo((props) => {
  const { dataSource, contrast = false, contrastOption = 'day', smooth = true } = props;
  const { prefixCls } = props;

  const gridData = useMemo(() => {
    const grids = dataSource.reduce((pre, item, index) => {
      const { sensorName } = item;
      let grid = pre.find((g) => g.key === sensorName);
      if (!grid) {
        const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']);
        grid = {
          key: sensorName,
          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,
          text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|(单位:' + unit + ')}' : ''}`,
        },
      };
      const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth);
      return {
        key,
        option: option,
      };
    });
  }, [gridData, smooth]);

  return (
    <div className={`${prefixCls}-grid`}>
      {
        options.map(item => (
          <div key={item.key} className={`${prefixCls}-grid-item`}>
            <div className={`${prefixCls}-grid-item-wrap`}>
              <BasicChart style={{ width: '100%', height: '100%' }} option={item.option} notMerge />
            </div>
          </div>
        ))
      }
    </div>
  );
});

export default GridChart;