|
|
|
import { observer } from 'mobx-react';
|
|
|
|
import { Waterfall } from '@ant-design/plots';
|
|
|
|
import { dataFieldAlias } from './../libs/ht';
|
|
|
|
import { merge } from '../utils/commons';
|
|
|
|
|
|
|
|
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 = merge({
|
|
|
|
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.yField]: {
|
|
|
|
max: Math.ceil(yMax / 0.95),
|
|
|
|
alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField,
|
|
|
|
formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}, extProps);
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Waterfall {...config} data={dataSource} />
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
});
|