import React, {memo, useMemo} from 'react'; import _ from 'lodash'; import {BasicChart} from '@wisdom-components/basicchart'; import PandaEmpty from '@wisdom-components/empty'; import optionGenerator from './utils'; const ChartTitle = ({prefixCls, title, unit}) => { const cls = `${prefixCls}-grid-item-title`; return ( <div className={cls}> <span className={`${cls}_text`}>{title}</span> {unit && <span className={`${cls}_unit`}>(单位:{unit})</span>} </div> ); }; const GridChart = memo((props) => { const { dataSource, contrast = false, contrastOption = 'day', smooth = true, curveCenter, } = props; const {prefixCls} = props; const gridData = useMemo(() => { const grids = dataSource.reduce((pre, item, index) => { const {sensorName, deviceType} = item; const key = `${deviceType}_${sensorName}`; // 同设备类型同指标才在同一组 let grid = pre.find((g) => g.key === key); if (!grid) { const restProp = _.pick(item, ['equipmentName', 'sensorName', 'stationCode', 'unit']); grid = { key: key, list: [], ...restProp, }; pre.push(grid); } grid.list.push(item); return pre; }, []); return grids; }, [dataSource]); const options = useMemo(() => { let _options = gridData.map((item) => { const {key, list, equipmentName, sensorName, stationCode, unit} = item; let max = 300; // 5:左侧竖条的宽度;10:标题部分的左侧margin; // sensorName长度*单个宽度16.7;5:单位部分的左侧margin; // 91:单位部分的宽度(格式固定,宽度相对固定) let maxTitleLength = 5 + 10 + sensorName.length * 16.7 + 5 + 91; let finalLength = maxTitleLength > max ? max : maxTitleLength const cusOption = { title: { show: true, // text: `{prefix|}{t|${sensorName}}${unit ? '{suffix|(单位:' + unit + ')}' : ''}`, text: ' ', textStyle: { width: finalLength, overflow: 'truncate', }, }, legend: { // orient: 'vertical', itemGap: 10, padding: [0, 0, 0, finalLength], textStyle: { width: 120, overflow: 'truncate', }, }, }; const option = optionGenerator(list, cusOption, contrast, contrastOption, smooth, { curveCenter, nameWithSensor: false, showGridLine: true, isMultiple: gridData.length > 1 }); // 在多图表里,底部缩放条的高度减小 return { key, option: option, }; }); return _options; }, [gridData, smooth, curveCenter]); return ( <div className={`${prefixCls}-grid`}> {options.map((item, index) => { const {sensorName, unit} = gridData[index]; 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`} style={{ height: gridData.length === 1 ? '100%' : '', width: gridData.length === 1 ? '100%' : '', }} > <div className={`${prefixCls}-grid-item-wrap`}> <ChartTitle prefixCls={prefixCls} title={sensorName} unit={unit}/> {isEmpty ? ( <PandaEmpty/> ) : ( <BasicChart style={{width: '100%', height: '100%'}} option={item.option} notMerge /> )} </div> </div> ); })} </div> ); }); export default GridChart;