|
|
|
import { observer } from 'mobx-react';
|
|
|
|
import { Line } from '@ant-design/plots';
|
|
|
|
import { merge, isEmpty, groupBy, sortBy } from '../utils/commons';
|
|
|
|
import { dataFieldAlias } from '../libs/ht';
|
|
|
|
|
|
|
|
export default observer((props) => {
|
|
|
|
const { dataSource, ...config } = props;
|
|
|
|
const kpiKey = dataFieldAlias[config.yField]?.nestkey?.v;
|
|
|
|
const seriesData = groupBy(dataSource, ele => ele[config.seriesField]);
|
|
|
|
const splitData = dataSource.reduce((r, v) => {
|
|
|
|
r.push(v);
|
|
|
|
if ( ! isEmpty(v[kpiKey])) { // 有设目标才多显示一条虚线, 颜色和数据线一致
|
|
|
|
r.push({...v, [config.yField]: v[kpiKey], [config.seriesField]: `${v[config.seriesField]} ${dataFieldAlias[kpiKey].label}`, extraLine: true,});
|
|
|
|
}
|
|
|
|
return r;
|
|
|
|
}, []).sort(sortBy(config.xField));
|
|
|
|
const dataColors = [
|
|
|
|
"#5B8FF9","#5AD8A6","#5D7092","#F6BD16","#6F5EF9","#6DC8EC","#945FB9","#FF9845","#1E9493",
|
|
|
|
"#FF99C3","#FF6B3B","#626681","#FFC100","#9FB40F","#76523B","#DAD5B5","#0E8E89","#E19348",
|
|
|
|
"#F383A2","#247FEA",
|
|
|
|
];
|
|
|
|
const colorSets = Object.keys(seriesData).sort().reduce((obj, k, i) => ({...obj, [k]: dataColors[i]}), {});
|
|
|
|
const mergeLineConfig = merge({
|
|
|
|
color: (item) => {
|
|
|
|
const thisSeries = item[config.seriesField]?.split(' ')?.[0];
|
|
|
|
return colorSets[thisSeries];
|
|
|
|
// return thisSeries.includes('目标') ? '#F4664A' : colorSets[thisSeries];
|
|
|
|
},
|
|
|
|
lineStyle: (data) => {
|
|
|
|
if (data[config.seriesField].includes('目标')) {
|
|
|
|
return {
|
|
|
|
lineDash: [4, 8],
|
|
|
|
opacity: 0.7,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
opacity: 1,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
custom: true,
|
|
|
|
items: Object.keys(seriesData).map((ele) => ({ id: ele, name: ele, value: ele, marker: { symbol: 'circle', style: { fill: colorSets[ele], color: colorSets[ele] } } })),
|
|
|
|
},
|
|
|
|
}, config);
|
|
|
|
return <Line {...mergeLineConfig} data={splitData} />;
|
|
|
|
});
|