Max Red - Starting refactoring of component stats [skip ci]
This commit is contained in:
ivan
parent
30f1526f1c
commit
ebb3516df3
|
|
@ -13,7 +13,6 @@ class StatsChart extends React.Component {
|
|||
value: React.PropTypes.number
|
||||
}))
|
||||
})),
|
||||
//showed: React.PropTypes.arrayOf(React.PropTypes.bool),
|
||||
period: React.PropTypes.number
|
||||
};
|
||||
|
||||
|
|
@ -85,7 +84,6 @@ class StatsChart extends React.Component {
|
|||
}
|
||||
|
||||
hitRadius(index) {
|
||||
//if (!this.props.showed[index]) return 0;
|
||||
if (this.props.period <= 7) return 20;
|
||||
if (this.props.period <= 30) return 15;
|
||||
if (this.props.period <= 90) return 10;
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
import React from 'react';
|
||||
import _ from 'lodash';
|
||||
|
||||
import i18n from 'lib-app/i18n';
|
||||
import API from 'lib-app/api-call';
|
||||
|
||||
import DropDown from 'core-components/drop-down';
|
||||
import ToggleList from 'core-components/toggle-list';
|
||||
|
||||
import StatsChart from 'app-components/stats-chart';
|
||||
|
||||
const generalStrokes = ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'];
|
||||
const staffStrokes = ['ASSIGN', 'CLOSE'];
|
||||
|
||||
class Stats extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
type: React.PropTypes.string
|
||||
};
|
||||
|
||||
state = {
|
||||
stats: {
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 0,
|
||||
'SIGNUP': 0,
|
||||
'COMMENT': 0
|
||||
},
|
||||
strokes: [
|
||||
{
|
||||
name: 'CREATE_TICKET',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'CLOSE',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'SIGNUP',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'COMMENT',
|
||||
values: []
|
||||
}
|
||||
],
|
||||
showed: [0],
|
||||
period: 0
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.retrieve(7);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<DropDown {...this.getDropDownProps()}/>
|
||||
<ToggleList {...this.getToggleListProps()} />
|
||||
<StatsChart {...this.getStatsChartProps()} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getToggleListProps() {
|
||||
return {
|
||||
values: this.state.showed,
|
||||
className: 'admin-panel-stats__toggle-list',
|
||||
onChange: this.onToggleListChange.bind(this),
|
||||
items: ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'].map((name) => {
|
||||
return {
|
||||
content:
|
||||
<div className={'admin-panel-stats__toggle-list-item'}>
|
||||
<div className={'admin-panel-stats__toggle-list-item-value'}>{this.state.stats[name]}</div>
|
||||
<div className={'admin-panel-stats__toggle-list-item-name'}>{i18n('CHART_' + name)}</div>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
onToggleListChange(event) {
|
||||
this.setState({
|
||||
showed: event.target.value
|
||||
});
|
||||
}
|
||||
|
||||
getDropDownProps() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
content: 'Last 7 days',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
content: 'Last 30 days',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
content: 'Last 90 days',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
content: 'Last 365 days',
|
||||
icon: ''
|
||||
}
|
||||
],
|
||||
onChange: this.onDropDownChange.bind(this),
|
||||
className: 'admin-panel-stats__dropdown'
|
||||
}
|
||||
}
|
||||
|
||||
onDropDownChange(event) {
|
||||
let val = [7, 30, 90, 3 65];
|
||||
|
||||
this.retrieve(val[event.index]);
|
||||
}
|
||||
|
||||
getStatsChartProps() {
|
||||
let showed = this.getShowedArray();
|
||||
|
||||
return {
|
||||
period: this.state.period,
|
||||
strokes: _.filter(this.state.strokes, (s, i) => showed[i])
|
||||
};
|
||||
}
|
||||
|
||||
retrieve(period) {
|
||||
let periodName;
|
||||
switch (period) {
|
||||
case 30:
|
||||
periodName = 'MONTH';
|
||||
break;
|
||||
case 90:
|
||||
periodName = 'QUARTER';
|
||||
break;
|
||||
case 365:
|
||||
periodName = 'YEAR';
|
||||
break;
|
||||
default:
|
||||
periodName = 'WEEK';
|
||||
}
|
||||
|
||||
API.call({
|
||||
path: '/system/get-stats',
|
||||
data: {
|
||||
period: periodName
|
||||
}
|
||||
}).then(this.onRetrieveSuccess.bind(this, period));
|
||||
}
|
||||
|
||||
onRetrieveSuccess(period, result) {
|
||||
|
||||
let newStats = {
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 0,
|
||||
'SIGNUP': 0,
|
||||
'COMMENT': 0
|
||||
};
|
||||
|
||||
let ID = {
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 1,
|
||||
'SIGNUP': 2,
|
||||
'COMMENT': 3
|
||||
};
|
||||
|
||||
let newStrokes = [
|
||||
{
|
||||
name: 'CREATE_TICKET',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'CLOSE',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'SIGNUP',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'COMMENT',
|
||||
values: []
|
||||
}
|
||||
];
|
||||
|
||||
let realPeriod = result.data.length / 4;
|
||||
|
||||
for (let i = 0; i < result.data.length; i++) {
|
||||
newStats[result.data[i].type] += result.data[i].value * 1;
|
||||
|
||||
newStrokes[ ID[result.data[i].type] ].values.push({
|
||||
date: result.data[i].date,
|
||||
value: result.data[i].value * 1
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({stats: newStats, strokes: newStrokes, period: realPeriod});
|
||||
}
|
||||
|
||||
getShowedArray() {
|
||||
let showed = [false, false, false, false];
|
||||
|
||||
for (let i = 0; i < showed.length; i++) {
|
||||
showed[this.state.showed[i]] = true;
|
||||
}
|
||||
|
||||
return showed;
|
||||
}
|
||||
}
|
||||
|
||||
export default Stats;
|
||||
|
|
@ -1,238 +1,20 @@
|
|||
import React from 'react';
|
||||
import _ from 'lodash';
|
||||
|
||||
import i18n from 'lib-app/i18n';
|
||||
import API from 'lib-app/api-call';
|
||||
|
||||
import Stats from 'app-components/stats';
|
||||
import Header from 'core-components/header';
|
||||
import DropDown from 'core-components/drop-down';
|
||||
import ToggleList from 'core-components/toggle-list';
|
||||
|
||||
import StatsChart from 'app/admin/panel/dashboard/admin-panel-stats-chart';
|
||||
|
||||
class AdminPanelStats extends React.Component {
|
||||
|
||||
state = {
|
||||
stats: {
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 0,
|
||||
'SIGNUP': 0,
|
||||
'COMMENT': 0
|
||||
},
|
||||
strokes: [
|
||||
{
|
||||
name: 'CREATE_TICKET',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'CLOSE',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'SIGNUP',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'COMMENT',
|
||||
values: []
|
||||
}
|
||||
],
|
||||
showed: [0],
|
||||
period: 0
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.retrieve(7);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="admin-panel-stats">
|
||||
<Header title={i18n('TICKET_ACTIVITY')}/>
|
||||
<DropDown {...this.getDropDownProps()}/>
|
||||
<ToggleList {...this.getToggleListProps()} />
|
||||
<StatsChart {...this.getStatsChartProps()} />
|
||||
<Stats type="general"/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
getToggleListProps() {
|
||||
return {
|
||||
values: this.state.showed,
|
||||
className: 'admin-panel-stats__toggle-list',
|
||||
onChange: this.onToggleListChange.bind(this),
|
||||
items: ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'].map((name) => {
|
||||
return {
|
||||
content:
|
||||
<div className={'admin-panel-stats__toggle-list-item'}>
|
||||
<div className={'admin-panel-stats__toggle-list-item-value'}>{this.state.stats[name]}</div>
|
||||
<div className={'admin-panel-stats__toggle-list-item-name'}>{i18n('CHART_' + name)}</div>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
/*sitems: [
|
||||
{
|
||||
content:
|
||||
<div>
|
||||
{this.state.stats['CREATE_TICKET']}
|
||||
<div>{i18n('CHART_CREATE_TICKET')}</div>
|
||||
</div>
|
||||
},
|
||||
{
|
||||
content:
|
||||
<div>
|
||||
{this.state.stats['CLOSE']}
|
||||
<div>{i18n('CHART_CLOSE')}</div>
|
||||
</div>
|
||||
},
|
||||
{
|
||||
content:
|
||||
<div>
|
||||
{this.state.stats['SIGNUP']}
|
||||
<div>{i18n('CHART_SIGNUP')}</div>
|
||||
</div>
|
||||
},
|
||||
{
|
||||
content:
|
||||
<div>
|
||||
{this.state.stats['COMMENT']}
|
||||
<div>{i18n('CHART_COMMENT')}</div>
|
||||
</div>
|
||||
}
|
||||
]*/
|
||||
};
|
||||
}
|
||||
|
||||
onToggleListChange(event) {
|
||||
this.setState({
|
||||
showed: event.target.value
|
||||
});
|
||||
}
|
||||
|
||||
getDropDownProps() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
content: 'Last 7 days',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
content: 'Last 30 days',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
content: 'Last 90 days',
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
content: 'Last 365 days',
|
||||
icon: ''
|
||||
}
|
||||
],
|
||||
onChange: this.onDropDownChange.bind(this),
|
||||
className: 'admin-panel-stats__dropdown'
|
||||
}
|
||||
}
|
||||
|
||||
onDropDownChange(event) {
|
||||
let val = [7, 30, 90, 365];
|
||||
|
||||
this.retrieve(val[event.index]);
|
||||
}
|
||||
|
||||
getStatsChartProps() {
|
||||
let showed = this.getShowedArray();
|
||||
|
||||
return {
|
||||
period: this.state.period,
|
||||
strokes: _.filter(this.state.strokes, (s, i) => showed[i])
|
||||
//strokes: this.state.strokes,
|
||||
//showed: this.getShowedArray()
|
||||
};
|
||||
}
|
||||
|
||||
retrieve(period) {
|
||||
let periodName;
|
||||
switch (period) {
|
||||
case 30:
|
||||
periodName = 'MONTH';
|
||||
break;
|
||||
case 90:
|
||||
periodName = 'QUARTER';
|
||||
break;
|
||||
case 365:
|
||||
periodName = 'YEAR';
|
||||
break;
|
||||
default:
|
||||
periodName = 'WEEK';
|
||||
}
|
||||
|
||||
API.call({
|
||||
path: '/system/get-stats',
|
||||
data: {
|
||||
period: periodName
|
||||
}
|
||||
}).then(this.onRetrieveSuccess.bind(this, period));
|
||||
}
|
||||
|
||||
onRetrieveSuccess(period, result) {
|
||||
|
||||
let newState = {
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 0,
|
||||
'SIGNUP': 0,
|
||||
'COMMENT': 0
|
||||
};
|
||||
|
||||
let ID = {
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 1,
|
||||
'SIGNUP': 2,
|
||||
'COMMENT': 3
|
||||
};
|
||||
|
||||
let newStrokes = [
|
||||
{
|
||||
name: 'CREATE_TICKET',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'CLOSE',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'SIGNUP',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'COMMENT',
|
||||
values: []
|
||||
}
|
||||
];
|
||||
|
||||
let realPeriod = result.data.length / 4;
|
||||
|
||||
for (let i = 0; i < result.data.length; i++) {
|
||||
newState[result.data[i].type] += result.data[i].value * 1;
|
||||
|
||||
newStrokes[ ID[result.data[i].type] ].values.push({
|
||||
date: result.data[i].date,
|
||||
value: result.data[i].value * 1
|
||||
});
|
||||
}
|
||||
|
||||
this.setState({stats: newState, strokes: newStrokes, period: realPeriod});
|
||||
}
|
||||
|
||||
getShowedArray() {
|
||||
let showed = [false, false, false, false];
|
||||
|
||||
for (let i = 0; i < showed.length; i++) {
|
||||
showed[this.state.showed[i]] = true;
|
||||
}
|
||||
|
||||
return showed;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default AdminPanelStats;
|
||||
|
|
@ -182,7 +182,7 @@ module.exports = [
|
|||
date: '201701' + (i + 10) % 100,
|
||||
type: 'SIGNUP',
|
||||
general: 1,
|
||||
value: (Math.floor(Math.random() * i * i / 365)).toString()
|
||||
value: (Math.floor(Math.random() * (i - 180) * (i - 185) / (1.027**i) )).toString()
|
||||
});
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
|
|
@ -194,7 +194,7 @@ module.exports = [
|
|||
date: '201701' + (i + 10) % 100,
|
||||
type: 'CREATE_TICKET',
|
||||
general: 1,
|
||||
value: (Math.floor(Math.random()*Math.random()*Math.random()*Math.random()*Math.random()*1.05**i)).toString()
|
||||
value: (Math.floor(Math.random()*Math.random()*Math.random()*Math.random()*Math.random()*1.027**i)).toString()
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -205,176 +205,6 @@ module.exports = [
|
|||
return {
|
||||
status: "success",
|
||||
data: DATA
|
||||
/*data: [
|
||||
{
|
||||
"date": "20170112",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "8"
|
||||
},
|
||||
{
|
||||
"date": "20170112",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"date": "20170112",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "5"
|
||||
},
|
||||
{
|
||||
"date": "20170112",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "2"
|
||||
},
|
||||
{
|
||||
"date": "20170111",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "3"
|
||||
},
|
||||
{
|
||||
"date": "20170111",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "8"
|
||||
},
|
||||
{
|
||||
"date": "20170111",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "10"
|
||||
},
|
||||
{
|
||||
"date": "20170111",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "3"
|
||||
},
|
||||
{
|
||||
"date": "20170110",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "3"
|
||||
},
|
||||
{
|
||||
"date": "20170110",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "6"
|
||||
},
|
||||
{
|
||||
"date": "20170110",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "2"
|
||||
},
|
||||
{
|
||||
"date": "20170110",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"date": "20170109",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170109",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "7"
|
||||
},
|
||||
{
|
||||
"date": "20170109",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "4"
|
||||
},
|
||||
{
|
||||
"date": "20170109",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "9"
|
||||
},
|
||||
{
|
||||
"date": "20170108",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "8"
|
||||
},
|
||||
{
|
||||
"date": "20170108",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "4"
|
||||
},
|
||||
{
|
||||
"date": "20170108",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "5"
|
||||
},
|
||||
{
|
||||
"date": "20170108",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "6"
|
||||
},
|
||||
{
|
||||
"date": "20170107",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "4"
|
||||
},
|
||||
{
|
||||
"date": "20170107",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "1"
|
||||
},
|
||||
{
|
||||
"date": "20170107",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170107",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "2"
|
||||
},
|
||||
{
|
||||
"date": "20170106",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "7"
|
||||
},
|
||||
{
|
||||
"date": "20170106",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "4"
|
||||
},
|
||||
{
|
||||
"date": "20170106",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "5"
|
||||
},
|
||||
{
|
||||
"date": "20170106",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "5"
|
||||
}
|
||||
]*/
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue