Haina
/
dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: home: 堆积柱状图. 调整组件配置

Browse Source
feature/2.0-sales-trade
Lei OT 2 years ago
parent 230ec4be81
commit 9a5e8c9aac
7 changed files with 168 additions and 21 deletions
Show Stats Download Patch File Download Diff File

10
src/components/Bullet.jsx
Unescape Escape View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { Bullet } from '@ant-design/plots';
import { sortBy } from '../utils/commons';
import { sortBy, merge } from '../utils/commons';
import { dataFieldAlias } from './../libs/ht';
export default observer((props) => {
@ -24,7 +24,7 @@ export default observer((props) => {
return () => {};
}, [extProps.measureField, dataSource]);
const config = {
const config = merge({
color: {
range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
measure: '#5B8FF9',
@ -72,17 +72,17 @@ export default observer((props) => {
},
],
},
// 全局的alias不起作用
// ? 全局的alias不起作用
tooltip: {
customItems: (originalItems) => {
// process originalItems,
return originalItems.map((ele) => ({ ...ele, name: dataFieldAlias[ele.name]?.alias || ele.name }));
},
},
};
}, extProps);
return (
<>
<Bullet {...config} {...extProps} data={parseData} />
<Bullet {...config} data={parseData} />
</>
);
});

66
src/components/Column.jsx
Unescape Escape View File

@ -0,0 +1,66 @@
import { useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { sortBy, merge } from '../utils/commons';
import { dataFieldAlias } from '../libs/ht';
import { Column } from '@ant-design/plots';
export default observer((props) => {
const { dataSource, line, ...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({
isStack: true,
// xField: 'value',
// yField: 'year',
// seriesField: 'type',
label: {
// 可手动配置 label 数据标签位置
position: 'middle',
// 'left', 'middle', 'right'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{
type: 'interval-adjust-position',
}, // 数据标签防遮挡
{
type: 'interval-hide-overlap',
}, // 数据标签文颜色自动调整
{
type: 'adjust-color',
},
],
},
meta: {
[extProps.yField]: {
alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField,
formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v,
max: Math.ceil(yMax / 0.95),
},
},
annotations: [...annotationsLine],
}, extProps);
return <Column {...config} data={dataSource} />;
});

9
src/components/Waterfall.jsx
Unescape Escape View File

@ -1,6 +1,7 @@
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;
@ -29,7 +30,7 @@ export default observer((props) => {
]
: [];
const config = {
const config = merge({
padding: 'auto',
appendPadding: [20, 0, 0, 0],
@ -50,18 +51,16 @@ export default observer((props) => {
},
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,
},
},
};
}, extProps);
return (
<>
<Waterfall {...config} {...extProps} data={dataSource} />
<Waterfall {...config} data={dataSource} />
</>
);
});

25
src/mock/2.0/trade.json
Unescape Escape View File

@ -13,7 +13,7 @@
"SumOrderKPIrate|20-100": 25,
"SumPersonNum": "@integer(999,9999)",
"SumPersonNumrate|-50-1": 33,
"SumPersonNumKPIrate|20-100": 33,
"SumPersonNumKPIrate": 0,
"groups": "2023-05-01~2023-05-31",
"key": "@increment"
},
@ -87,11 +87,11 @@
"result1|24": [
{
"groups|1": "@pick([\"inside\",\"outside\"])",
"groupDateVal": "@date('2023-MM')",
"SumML": "@increment(1000)",
"SumMLVSrate": "@float(0,70,2,2)",
"SumMLKPI": "@integer(1000,10000)",
"SumMLKPIrate": "@float(0,70,2,2)",
"month": "@date('2023-MM')",
"SumOrder": "@integer(9,999)",
"SumOrderVSrate": "@float(-20,20,0,2)",
"SumOrderKPIrate": "@float(20,100,0,2)",
@ -103,5 +103,26 @@
"result2": [
{}
]
},
"get|/service-web/QueryData/Getkpi": {
"errcode": 0,
"errmsg": "",
"loading": false,
"data": null,
"result1|10": [
{
"object|1": "@pick([\"dept\",\"sales\", \"group\"])",
"subject|1": "@pick([\"OrderCount\",\"SumML\", \"AvgML\", \"SuccessRate\"])",
"object_id": "@integer(10,100)",
"object_name": "@cname",
"date_type": "@pick([\"ConfirmDate\",\"startDate\", \"applyDate\"])",
"start_date": "@date(\"yyyy-MM-dd\")",
"end_date": "@datetime(\"yyyy-MM-dd HH:mm:ss\")",
"value": "@integer(99,9999)",
"key": "@increment"
}],
"result2": [
{}
]
}
}

11
src/stores/Trade.js
Unescape Escape View File

@ -23,6 +23,9 @@ class Trade {
const summaryData = {
loading: false,
dataSource: [
{ title: '成团', value: json.result1?.SumOrder, VSrate: json.result1?.SumOrderrate, KPIrate: json.result1?.SumOrderKPIrate, hasKPI: !isEmpty(json.result1?.SumOrderKPIrate) },
{ title: '毛利', value: json.result1?.SumML, VSrate: json.result1?.SumMLrate, KPIrate: json.result1?.SumMLKPIrate, hasKPI: !isEmpty(json.result1?.SumMLKPIrate) },
{ title: '完成率', value: `${json.result1?.SumMLKPIrate}%`, hasKPI: false },
{
title: '人数',
value: json.result1?.SumPersonNum,
@ -30,9 +33,6 @@ class Trade {
KPIrate: json.result1?.SumPersonNumKPIrate,
hasKPI: !isEmpty(json.result1?.SumPersonNumKPIrate),
},
{ title: '成团', value: json.result1?.SumOrder, VSrate: json.result1?.SumOrderrate, KPIrate: json.result1?.SumOrderKPIrate, hasKPI: !isEmpty(json.result1?.SumOrderKPIrate) },
{ title: '毛利', value: json.result1?.SumML, VSrate: json.result1?.SumMLrate, KPIrate: json.result1?.SumMLKPIrate, hasKPI: !isEmpty(json.result1?.SumMLKPIrate) },
{ title: '完成率', value: `${json.result1?.SumMLKPIrate}%`, hasKPI: false },
],
};
this.summaryData = summaryData;
@ -47,7 +47,7 @@ class Trade {
// req.fetchJSON('/service-web/QueryData/GetTradeByMonth').then((json) => {
if (json.errcode === 0) {
runInAction(() => {
const sortResult = json.result1.sort(sortBy('month'));
const sortResult = json.result1.sort(sortBy('groupDateVal'));
const groupsData = sortResult.reduce((r, v) => {
(r[v.groups] || (r[v.groups] = [])).push(v);
return r;
@ -56,6 +56,7 @@ class Trade {
const kpi = { label: '', value: 1200000 }; // 标注KPI
this.sideData.loading = false;
this.sideData.dataSource = groupsData;
this.sideData.monthData = sortResult;
this.sideData.kpi = kpi;
});
}
@ -76,7 +77,7 @@ class Trade {
}
summaryData = { loading: false, dataSource: [] };
sideData = { loading: false, dataSource: {}, kpi: {}, };
sideData = { loading: false, dataSource: {}, kpi: {}, monthData: [] };
topData = {};
defaultDataSubject = 'CJCount';
}

33
src/utils/commons.js
Unescape Escape View File

@ -282,3 +282,36 @@ export function set_array_index(result) {
export const sortBy = (key) => {
return (a, b) => (a[key] > b[key]) ? 1 : ((b[key] > a[key]) ? -1 : 0);
};
/**
* 合并Object, 递归地
*/
export function merge(...objects) {
const isDeep = objects.some(obj => obj !== null && typeof obj === 'object');
const result = objects[0] ?? {};
for (let i = 1; i < objects.length; i++) {
const obj = objects[i];
if (!obj) continue;
Object.keys(obj).forEach(key => {
const val = obj[key];
if (isDeep) {
if (Array.isArray(val)) {
result[key] = [...result[key] || [], ...val];
} else if (typeof val === 'object') {
result[key] = merge(result[key], val);
} else {
result[key] = val;
}
} else {
result[key] = typeof val === 'boolean' ? val : result[key];
}
});
}
return result;
}

35
src/views/Home.jsx
Unescape Escape View File

@ -3,10 +3,11 @@ import { observer } from 'mobx-react';
import { Row, Col, Spin, Space } from 'antd';
import { stores_Context } from '../config';
import { useNavigate } from 'react-router-dom';
import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
// import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import StatisticCard from '../components/StatisticCard';
import Bullet from '../components/Bullet';
import Waterfall from '../components/Waterfall';
import Column from '../components/Column';
import DataFieldRadio from './../components/DateFieldRadio';
import DatePickerCharts from './../components/search/DatePickerCharts';
@ -68,10 +69,10 @@ export default observer(() => {
};
const WaterfallConfig = {
xField: 'month',
xField: 'groupDateVal',
yField: 'SumML',
mergeMeta: {
month: {
meta: {
groupDateVal: {
alias: '月份',
},
},
@ -80,6 +81,29 @@ export default observer(() => {
},
};
const ColumnConfig = {
xField: 'groupDateVal',
yField: 'SumML',
seriesField: 'groups',
label: {
formatter: (v) => ((v.SumML / sideData.kpi.value) * 100).toFixed(2) + '%',
},
legend: false,
// annotations: sideData.monthData.map((d, ...args) => {
// console.log('aaa', d, args);
// return {
// type: 'dataMarker',
// position: d,
// point: {
// style: {
// stroke: '#FF6B3B',
// lineWidth: 1.5,
// },
// },
// };
// }),
};
return (
<>
<section>
@ -101,6 +125,9 @@ export default observer(() => {
<h3>市场进度</h3>
<Spin spinning={sideData.loading}>
<Row gutter={layoutProps3.gutter}>
<Col {...layoutProps3}>
<Column {...ColumnConfig} dataSource={sideData.monthData} line={sideData.kpi} />
</Col>
{Object.keys(sideData.dataSource).map((key) => (
<Col {...layoutProps3} key={key}>
<Waterfall {...WaterfallConfig} title={key} dataSource={sideData.dataSource[key]} line={sideData.kpi} />

Write Preview
Loading…
Cancel
Save