feat: home: 瀑布图-百分比; 排名图-进度
Lei OT
2 years ago
parent
d83e7dec92
commit
230ec4be81
@ -1,100 +0,0 @@
|
|||||||
import { observer } from 'mobx-react';
|
|
||||||
import { Bullet } from '@ant-design/plots';
|
|
||||||
|
|
||||||
export default observer((props) => {
|
|
||||||
const { dataSource, ...extProps } = props;
|
|
||||||
// todo: 处理进度图的数据格式, number -> array
|
|
||||||
const parseData = dataSource?.map(ele => ({...ele, CJCountRange: [0,1000], [extProps.measureField]: [ele[extProps.measureField]]}));
|
|
||||||
const config = {
|
|
||||||
// data,
|
|
||||||
// measureField: 'measures',
|
|
||||||
// rangeField: 'ranges',
|
|
||||||
// targetField: 'target',
|
|
||||||
// xField: 'title',
|
|
||||||
color: {
|
|
||||||
range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
|
|
||||||
measure: '#5B8FF9',
|
|
||||||
target: '#39a3f4',
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
// target: true,
|
|
||||||
// measure: {
|
|
||||||
// position: 'middle',
|
|
||||||
// style: {
|
|
||||||
// fill: '#fff',
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
line: null,
|
|
||||||
},
|
|
||||||
yAxis: false,
|
|
||||||
// 自定义 legend
|
|
||||||
legend: {
|
|
||||||
custom: true,
|
|
||||||
position: 'bottom',
|
|
||||||
items: [
|
|
||||||
// {
|
|
||||||
// value: '差',
|
|
||||||
// name: '差',
|
|
||||||
// marker: {
|
|
||||||
// symbol: 'square',
|
|
||||||
// style: {
|
|
||||||
// fill: '#FFbcb8',
|
|
||||||
// r: 5,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// value: '良',
|
|
||||||
// name: '良',
|
|
||||||
// marker: {
|
|
||||||
// symbol: 'square',
|
|
||||||
// style: {
|
|
||||||
// fill: '#FFe0b0',
|
|
||||||
// r: 5,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// value: '优',
|
|
||||||
// name: '优',
|
|
||||||
// marker: {
|
|
||||||
// symbol: 'square',
|
|
||||||
// style: {
|
|
||||||
// fill: '#bfeec8',
|
|
||||||
// r: 5,
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
value: '实际',
|
|
||||||
name: '实际',
|
|
||||||
marker: {
|
|
||||||
symbol: 'square',
|
|
||||||
style: {
|
|
||||||
fill: '#5B8FF9',
|
|
||||||
r: 5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '目标',
|
|
||||||
name: '目标',
|
|
||||||
marker: {
|
|
||||||
symbol: 'line',
|
|
||||||
style: {
|
|
||||||
stroke: '#39a3f4',
|
|
||||||
r: 5,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Bullet {...config} {...extProps} data={parseData} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { Bullet } from '@ant-design/plots';
|
||||||
|
import { sortBy } from '../utils/commons';
|
||||||
|
import { dataFieldAlias } from './../libs/ht';
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { dataSource, ...extProps } = props;
|
||||||
|
// 处理进度图的数据格式, number -> array
|
||||||
|
const dataParser = (origin) => {
|
||||||
|
const { measureField, rangeField, targetField } = extProps;
|
||||||
|
const maxKPI = Math.max(...(origin || []).map((ele) => ele[targetField]));
|
||||||
|
const maxValue = Math.max(...(origin || []).map((ele) => ele[measureField]));
|
||||||
|
const _max = Math.max(maxKPI, maxValue);
|
||||||
|
const sortData = origin.sort(sortBy(measureField));
|
||||||
|
// 顶格的值定在更远
|
||||||
|
const _parseData = sortData?.map((ele) => ({ ...ele, [rangeField]: [0, Math.ceil(_max / 0.9)], [measureField]: [ele[measureField]] }));
|
||||||
|
return _parseData;
|
||||||
|
};
|
||||||
|
|
||||||
|
const [parseData, setParseData] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
setParseData(dataParser(dataSource));
|
||||||
|
return () => {};
|
||||||
|
}, [extProps.measureField, dataSource]);
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
color: {
|
||||||
|
range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
|
||||||
|
measure: '#5B8FF9',
|
||||||
|
target: '#FF9845',
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
// target: true,
|
||||||
|
// measure: {
|
||||||
|
// position: 'middle',
|
||||||
|
// style: {
|
||||||
|
// fill: '#fff',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
line: null,
|
||||||
|
},
|
||||||
|
yAxis: false,
|
||||||
|
// 自定义 legend
|
||||||
|
legend: {
|
||||||
|
custom: true,
|
||||||
|
position: 'bottom',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
value: '实际',
|
||||||
|
name: '实际',
|
||||||
|
marker: {
|
||||||
|
symbol: 'square',
|
||||||
|
style: {
|
||||||
|
fill: '#5B8FF9',
|
||||||
|
r: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '目标',
|
||||||
|
name: '目标',
|
||||||
|
marker: {
|
||||||
|
symbol: 'line',
|
||||||
|
style: {
|
||||||
|
stroke: '#FF9845', // '#39a3f4',
|
||||||
|
r: 5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
// 全局的alias不起作用
|
||||||
|
tooltip: {
|
||||||
|
customItems: (originalItems) => {
|
||||||
|
// process originalItems,
|
||||||
|
return originalItems.map((ele) => ({ ...ele, name: dataFieldAlias[ele.name]?.alias || ele.name }));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Bullet {...config} {...extProps} data={parseData} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { Waterfall } from '@ant-design/plots';
|
||||||
|
import { dataFieldAlias } from './../libs/ht';
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { dataSource, line, title, ...extProps } = props;
|
||||||
|
const yMax = Math.max(line?.value || 0, ...dataSource.map((ele) => ele[extProps.yField]));
|
||||||
|
const annotationsLine = line
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
position: ['start', line.value],
|
||||||
|
content: `${line.label} ${line.value / 1000} K`,
|
||||||
|
// offsetX: -15,
|
||||||
|
style: {
|
||||||
|
fill: '#F4664A',
|
||||||
|
textBaseline: 'bottom',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
start: [-10, line.value],
|
||||||
|
end: ['max', line.value],
|
||||||
|
style: {
|
||||||
|
stroke: '#F4664A',
|
||||||
|
lineDash: [2, 2],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
padding: 'auto',
|
||||||
|
appendPadding: [20, 0, 0, 0],
|
||||||
|
|
||||||
|
/** 展示总计 */
|
||||||
|
total: {
|
||||||
|
label: `${title}总`,
|
||||||
|
style: {
|
||||||
|
fill: '#96a6a6',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: false,
|
||||||
|
/** 数据标签展示模式：绝对值 */
|
||||||
|
labelMode: 'absolute',
|
||||||
|
label: {
|
||||||
|
style: {
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
annotations: [...annotationsLine],
|
||||||
|
meta: {
|
||||||
|
...extProps.mergeMeta,
|
||||||
|
[extProps.yField]: {
|
||||||
|
...extProps.mergeMeta[extProps.yField],
|
||||||
|
max: Math.ceil(yMax / 0.95),
|
||||||
|
alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField,
|
||||||
|
formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Waterfall {...config} {...extProps} data={dataSource} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue