Merge branch 'feature/2.0' of github.com:hainatravel/dashboard into feature/2.0
YCC
2 years ago
commit
fac532d83a
@ -0,0 +1,53 @@
|
|||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { Line } from '@ant-design/plots';
|
||||||
|
import { merge, isEmpty } from '../utils/commons';
|
||||||
|
import { dataFieldAlias } from '../libs/ht';
|
||||||
|
|
||||||
|
const uniqueByKey = (array, key, pickLast) => {
|
||||||
|
const seen = new Map();
|
||||||
|
const isPickLast = pickLast === true;
|
||||||
|
|
||||||
|
return array.filter(item => {
|
||||||
|
const k = item[key];
|
||||||
|
const storedItem = seen.get(k);
|
||||||
|
|
||||||
|
if(storedItem) {
|
||||||
|
if(isPickLast) {
|
||||||
|
seen.set(k, item); // update with last item
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
seen.set(k, item);
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { config, dataSource, ...extProps } = props;
|
||||||
|
const kpiKey = dataFieldAlias[config.yField]?.nestkey?.v;
|
||||||
|
const _data = dataSource.reduce((r, v) => {
|
||||||
|
r.push(v);
|
||||||
|
if ( ! isEmpty(v[kpiKey])) { // 有设目标才多显示一条虚线 颜色: #F4664A
|
||||||
|
r.push({...v, [config.yField]: v[kpiKey], [config.seriesField]: dataFieldAlias[kpiKey].label});
|
||||||
|
}
|
||||||
|
return r;
|
||||||
|
}, []);
|
||||||
|
const mergeLineConfig = merge({
|
||||||
|
color: ['#598cf3', '#F4664A', '#FAAD14'],
|
||||||
|
lineStyle: (data) => {
|
||||||
|
console.log(data);
|
||||||
|
if (data[config.seriesField].includes('目标')) {
|
||||||
|
return {
|
||||||
|
lineDash: [4, 4],
|
||||||
|
opacity: 0.5,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
opacity: 1,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}, config);
|
||||||
|
return <Line {...mergeLineConfig} data={_data} />;
|
||||||
|
});
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { sortBy, merge } from '../utils/commons';
|
||||||
|
import { dataFieldAlias } from '../libs/ht';
|
||||||
|
import { Mix, Scatter } from '@ant-design/plots';
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { dataSource, ...extProps } = props;
|
||||||
|
const config = merge(
|
||||||
|
{
|
||||||
|
appendPadding: 10,
|
||||||
|
// xField: 'Revenue (Millions)',
|
||||||
|
// yField: 'Rating',
|
||||||
|
shape: 'circle',
|
||||||
|
// colorField: 'Genre',
|
||||||
|
size: 4,
|
||||||
|
yAxis: {
|
||||||
|
nice: true,
|
||||||
|
line: {
|
||||||
|
style: {
|
||||||
|
stroke: '#aaa',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
min: -100,
|
||||||
|
grid: {
|
||||||
|
line: {
|
||||||
|
style: {
|
||||||
|
stroke: '#eee',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
line: {
|
||||||
|
style: {
|
||||||
|
stroke: '#aaa',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}, extProps);
|
||||||
|
return <Scatter {...config} data={dataSource} />;
|
||||||
|
});
|
||||||
@ -1,23 +1,22 @@
|
|||||||
import { useContext } from 'react';
|
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
// import { stores_Context } from '../config';
|
|
||||||
import { Table } from 'antd';
|
|
||||||
import KPISettings from './KPISettings';
|
import KPISettings from './KPISettings';
|
||||||
import { bu, KPISubjects } from '../../libs/ht';
|
import { bu, KPISubjects } from '../../libs/ht';
|
||||||
|
|
||||||
|
const sort = { DateType: 10, years: 11 };
|
||||||
|
const yearInitial = {};
|
||||||
const searchFormItemSet = {
|
const searchFormItemSet = {
|
||||||
'bu': { shows: ['DateType', 'years', 'HTBusinessUnits'] },
|
'bu': { shows: ['DateType', 'years', 'HTBusinessUnits'], sort },
|
||||||
'dept': { shows: ['DateType', 'years', 'DepartmentList'], fieldProps: { DepartmentList: { allowClear: true } } },
|
'dept': { shows: ['DateType', 'years', 'DepartmentList'], sort, fieldProps: { DepartmentList: { allowClear: true,isLeaf: true, show_all: false } }, },
|
||||||
'operator': { shows: ['DateType', 'years', 'DepartmentList'] }, // , 'operator'
|
'operator': { shows: ['DateType', 'years', 'DepartmentList', 'operator'], fieldProps: { DepartmentList: { allowClear: true, isLeaf: true }, operator: { param: { is_assign: 1 } } }, sort },
|
||||||
'destination': { shows: ['DateType', 'years', 'destination'] },
|
'destination': { shows: ['DateType', 'years', 'destination'], sort },
|
||||||
'country': { shows: ['DateType', 'years', 'country'] },
|
'country': { shows: ['DateType', 'years', 'country'], sort },
|
||||||
};
|
};
|
||||||
|
|
||||||
export default observer((props) => {
|
export default observer((props) => {
|
||||||
const searchProps = searchFormItemSet?.[props.curObject] || {};
|
const searchProps = searchFormItemSet?.[props.curObject] || {};
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<KPISettings {...{ searchProps, objects: bu, KPISubjects }} {...props} />
|
<KPISettings {...{ searchProps, KPISubjects }} {...props} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -0,0 +1,90 @@
|
|||||||
|
import { useContext, useEffect, useMemo } from 'react';
|
||||||
|
import { observer } from 'mobx-react';
|
||||||
|
import { stores_Context } from '../config';
|
||||||
|
import { Row, Col, Spin, Space, Radio, Tabs, Table } from 'antd';
|
||||||
|
import { empty } from '../utils/commons';
|
||||||
|
import { dataFieldAlias } from '../libs/ht';
|
||||||
|
import Scatter from './../components/Scatter';
|
||||||
|
import SearchForm from './../components/search/SearchForm';
|
||||||
|
import { Histogram } from '@ant-design/plots';
|
||||||
|
|
||||||
|
export default observer((props) => {
|
||||||
|
const { date_picker_store: searchFormStore, DistributionStore } = useContext(stores_Context);
|
||||||
|
const { formValues, formValuesToSub } = searchFormStore;
|
||||||
|
const { curTab, scatterDays, detailData } = DistributionStore;
|
||||||
|
|
||||||
|
const detailRefresh = (obj) => {
|
||||||
|
DistributionStore.getDetailData({
|
||||||
|
...(obj || formValuesToSub),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (empty(detailData.dataSource)) {
|
||||||
|
detailRefresh();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const ScatterConfig = {
|
||||||
|
xField: 'startDate',
|
||||||
|
yField: 'tourdays',
|
||||||
|
colorField: 'country',
|
||||||
|
size: 4,
|
||||||
|
// xAxis: {
|
||||||
|
// min: 0,
|
||||||
|
// max: 30,
|
||||||
|
// },
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: 10,
|
||||||
|
},
|
||||||
|
// quadrant: {
|
||||||
|
// xBaseline: 15,
|
||||||
|
// yBaseline: 5,
|
||||||
|
// },
|
||||||
|
tooltip: false,
|
||||||
|
legend: {
|
||||||
|
position: 'right-top',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const HistogramConfig = {
|
||||||
|
binField: 'personNum',
|
||||||
|
binWidth: 1,
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row gutter={16} style={{ margin: '-16px -8px' }}>
|
||||||
|
{/* style={{ margin: '-16px -8px', padding: 0 }} */}
|
||||||
|
<Col className="gutter-row" span={24}>
|
||||||
|
<SearchForm
|
||||||
|
defaultValue={{
|
||||||
|
initialValue: {
|
||||||
|
...formValues,
|
||||||
|
},
|
||||||
|
shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'dates', 'country'],
|
||||||
|
fieldProps: {
|
||||||
|
DepartmentList: { show_all: true },
|
||||||
|
WebCode: { show_all: true },
|
||||||
|
dates: { hide_vs: true },
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onSubmit={(_err, obj, form, str) => {
|
||||||
|
detailRefresh(obj);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<Spin spinning={detailData.loading}>
|
||||||
|
<Scatter {...ScatterConfig} dataSource={scatterDays} />
|
||||||
|
</Spin>
|
||||||
|
</section>
|
||||||
|
{/* <section>
|
||||||
|
<Spin spinning={detailData.loading}>
|
||||||
|
<Histogram {...HistogramConfig} data={scatterDays} />
|
||||||
|
</Spin>
|
||||||
|
</section> */}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue