You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dashboard/src/components/LineWithKPI.jsx

48 lines
1.9 KiB
React

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} />;
});