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

perf:老客户:添加总计对比折线；修改折线颜色

Browse Source
main
ZJYHX 2 months ago
parent c9e13385dc
commit 6317c24a75
3 changed files with 80 additions and 27 deletions
Show Stats Download Patch File Download Diff File

7
src/charts/Customer_care_regular.jsx
Unescape Escape View File

@ -36,7 +36,7 @@ const Customer_care_regular = () => {
regular_data.data_compare=[];
if (obj.DateDiff1 && obj.DateDiff2){
regular_data.isCompareLine=true;
regular_data.showSum=false;
regular_data.showCompareSum=true;
await customer_store.regular_customer_order();
customer_store.regular_customer_order(false,true);
customer_store.regular_customer_order(true,false,true);
@ -44,7 +44,7 @@ const Customer_care_regular = () => {
}
else{
regular_data.isCompareLine=false;
regular_data.showSum=true;
regular_data.showCompareSum=false;
customer_store.regular_customer_order();
customer_store.regular_customer_order(true);
}
@ -116,7 +116,8 @@ const Customer_care_regular = () => {
<Col span={24}>
<LineWithAvg dataSource={regular_data.pivotData} loading={regular_data.detail_loading} xField={regular_data.pivotX} yField={regular_data.pivotY}
seriesField='_ylabel' showSUM={regular_data.showSum} solidLineTime={regular_data.solidLineTime} solidLineDash={regular_data.solidLineDash} isCompareLine={regular_data.isCompareLine}/>
seriesField='_ylabel' showCompareSum={regular_data.showCompareSum} solidLineTime={regular_data.solidLineTime} solidLineCompareTime={regular_data.solidLineCompareTime}
solidLineDash={regular_data.solidLineDash} isCompareLine={regular_data.isCompareLine}/>
</Col>
<Col span={24}>

96
src/components/LineWithAvg.jsx
Unescape Escape View File

@ -7,7 +7,8 @@ import DateGroupRadio from '../components/DateGroupRadio';
import { cloneDeep, groupBy, sortBy } from '../utils/commons';
export default observer((props) => {
const { dataSource: rawData, showAVG, showSUM, loading, solidLineTime, solidLineDash, isCompareLine, ...config } = props;
const { dataSource: rawData, showAVG, showCompareSum, loading, solidLineTime,
solidLineDash, isCompareLine,solidLineCompareTime, ...config } = props;
const { xField, yField, yFieldAlias, seriesField } = config;
const [dataBeforeXChange, setDataBeforeXChange] = useState([]);
@ -25,14 +26,15 @@ export default observer((props) => {
// xAxis: {
// type: 'timeCat',
// },
color: isCompareLine?['#17f485', '#1890ff','#17f485', '#1890ff',"#181414","#181414"]:undefined,
point: {
size: 4,
shape: "cicle",
},
lineStyle: (datum) => {
return {
stroke: isCompareLine?datum._ylabel.includes(solidLineTime) ? 'red' : 'blue':undefined, // 设置颜色
lineDash: isCompareLine?datum._ylabel.includes(solidLineDash) ? [4, 4] : undefined:undefined, // 设置虚线
stroke: isCompareLine?datum._ylabel.includes("总计")?"#181414":datum._ylabel.includes(solidLineDash) ? '#1890ff':'#17f485' : undefined, // 设置颜色
lineDash: isCompareLine?datum._ylabel.includes(solidLineTime) ? undefined:[4, 4] : undefined, // 设置虚线
};
},
yAxis: {
@ -101,7 +103,35 @@ export default observer((props) => {
// ];
// setLineConfig({ ...lineConfig, yField, xField, annotations: avgLine });
setLineConfig({ ...lineConfig, yField, xField,});
if (showSUM) {
if (showCompareSum) {
const _sumLine = Object.keys(byDays).reduce((r, _d) => {
const summaryVal = byDays[_d].reduce((rows, row) =>
{
if (row[seriesField].includes(solidLineTime)){
return rows + row[yField];
}
else{
return rows;
}
}
, 0);
const summaryCompareVal = byDays[_d].reduce((rows, row) =>
{
if (row[seriesField].includes(solidLineCompareTime)){
return rows + row[yField];
}
else{
return rows;
}
}
, 0);
r.push({ ...byDays[_d][0], [yField]: summaryVal, [seriesField]: solidLineTime+'总计' });
r.push({ ...byDays[_d][0], [yField]: summaryCompareVal, [seriesField]: solidLineCompareTime+'总计' });
return r;
}, []);
setSumSeries(_sumLine);
}
else{
const _sumLine = Object.keys(byDays).reduce((r, _d) => {
const summaryVal = byDays[_d].reduce((rows, row) => rows + row[yField], 0);
r.push({ ...byDays[_d][0], [yField]: summaryVal, [seriesField]: '总计' });
@ -110,9 +140,6 @@ export default observer((props) => {
// console.log(_sumLine.map((ele) => ele[yField]));
setSumSeries(_sumLine);
}
else{
setSumSeries([]);
}
};
const onChangeXDateFieldGroup = (value, data, avg1) => {
@ -125,8 +152,35 @@ export default observer((props) => {
}, {});
// console.log(groupByDate);
const _data = Object.keys(groupByDate).reduce((r, _d) => {
const summaryVal = groupByDate[_d].reduce((rows, row) => rows + row[yField], 0);
_sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: '总计' });
if (showCompareSum) {
const summaryVal = groupByDate[_d].reduce((rows, row) =>
{
if (row[seriesField].includes(solidLineTime)){
return rows + row[yField];
}
else{
return rows;
}
}
, 0);
const summaryCompareVal = groupByDate[_d].reduce((rows, row) =>
{
if (row[seriesField].includes(solidLineCompareTime)){
return rows + row[yField];
}
else{
return rows;
}
}
, 0);
_sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: solidLineTime+'总计' });
_sumLine.push({ ...groupByDate[_d][0], [yField]: summaryCompareVal, [seriesField]: solidLineCompareTime+'总计' });
}
else{
const summaryVal = groupByDate[_d].reduce((rows, row) => rows + row[yField], 0);
_sumLine.push({ ...groupByDate[_d][0], [yField]: summaryVal, [seriesField]: '总计' });
}
const xAxisGroup = groupByDate[_d].reduce((a, v) => {
(a[v[seriesField]] || (a[v[seriesField]] = [])).push(v);
@ -145,23 +199,19 @@ export default observer((props) => {
// console.log('date source=====', _data);
setLineChartX(value);
setDataSource(_data);
if (showSUM) {
setSumSeries(_sumLine);
}
else{
setSumSeries([]);
}
setSumSeries(_sumLine);
// setAvgLine1(avg1);
const avg1Int = Math.round(avg1);
const mergedConfig = { ...lineConfig,
annotations: [
{ type: 'text', position: ['start', avg1Int], content: avg1Int, offsetX: -15, style: { fill: '#F4664A', textBaseline: 'bottom' } },
{ type: 'line', start: [-10, avg1Int], end: ['max', avg1Int], style: { stroke: '#F4664A', lineDash: [2, 2] } },
],
};
// const avg1Int = Math.round(avg1);
// const mergedConfig = { ...lineConfig,
// annotations: [
// { type: 'text', position: ['start', avg1Int], content: avg1Int, offsetX: -15, style: { fill: '#F4664A', textBaseline: 'bottom' } },
// { type: 'line', start: [-10, avg1Int], end: ['max', avg1Int], style: { stroke: '#F4664A', lineDash: [2, 2] } },
// ],
// };
// console.log(mergedConfig);
setLineConfig(mergedConfig);
// setLineConfig(mergedConfig);
setLineConfig(cloneDeep(line_config));
};
return (
<section>

4
src/stores/CustomerStore.js
Unescape Escape View File

@ -148,6 +148,7 @@ class CustomerStore {
if (isCompareRender){
this.regular_data.detail_loading = false;
this.regular_data.solidLineTime=date_picker_store.start_date.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date.format(config.SMALL_DATETIME_FORMAT);
this.regular_data.solidLineCompareTime=date_picker_store.start_date_cp.format(config.DATE_FORMAT)+ '-' +date_picker_store.end_date_cp.format(config.SMALL_DATETIME_FORMAT);
const dump_l = (json || []).filter(ele => ele.COLI_IsOld !== '' && ele.COLI_IsCusCommend !== '').length;
this.regular_data.total_data_tips = dump_l > 0 ? `包含 ${dump_l} 条同时勾选的数据` : '';
/** 使用明细数据画图 */
@ -288,8 +289,9 @@ class CustomerStore {
data: [],
data_detail: [],
data_compare: [],
showSum:true,
showCompareSum:false,
solidLineTime:'',
solidLineCompareTime:'',
solidLineDash:'老客户推荐',
isCompareLine:false,
total_data_tips: '',

Write Preview
Loading…
Cancel
Save