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