Max Red - Added abstraction to the component in order to work in view-staff page [skip ci]
This commit is contained in:
parent
ebb3516df3
commit
da928f9b6f
|
@ -31,7 +31,8 @@ class StatsChart extends React.Component {
|
|||
'CLOSE': 'rgba(150, 20, 20, 0.8)',
|
||||
'CREATE_TICKET': 'rgba(20, 150, 20, 0.8)',
|
||||
'SIGNUP': 'rgba(20, 20, 150, 0.8)',
|
||||
'COMMENT': 'rgba(20, 200, 200, 0.8)'
|
||||
'COMMENT': 'rgba(20, 200, 200, 0.8)',
|
||||
'ASSIGN': 'rgba(200, 200, 20, 0.8)'
|
||||
};
|
||||
|
||||
let datasets = [];
|
||||
|
|
|
@ -11,38 +11,29 @@ import StatsChart from 'app-components/stats-chart';
|
|||
|
||||
const generalStrokes = ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'];
|
||||
const staffStrokes = ['ASSIGN', 'CLOSE'];
|
||||
const ID = {
|
||||
'CREATE_TICKET': 0,
|
||||
'ASSIGN': 0,
|
||||
'CLOSE': 1,
|
||||
'SIGNUP': 2,
|
||||
'COMMENT': 3
|
||||
};
|
||||
|
||||
class Stats extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
type: React.PropTypes.string
|
||||
type: React.PropTypes.string,
|
||||
staffId: React.PropTypes.number
|
||||
};
|
||||
|
||||
state = {
|
||||
stats: {
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 0,
|
||||
'SIGNUP': 0,
|
||||
'COMMENT': 0
|
||||
},
|
||||
strokes: [
|
||||
{
|
||||
name: 'CREATE_TICKET',
|
||||
stats: this.getDefaultStats(),
|
||||
strokes: this.getStrokes().map((name) => {
|
||||
return {
|
||||
name: name,
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'CLOSE',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'SIGNUP',
|
||||
values: []
|
||||
},
|
||||
{
|
||||
name: 'COMMENT',
|
||||
values: []
|
||||
}
|
||||
],
|
||||
}
|
||||
}),
|
||||
showed: [0],
|
||||
period: 0
|
||||
};
|
||||
|
@ -64,14 +55,14 @@ class Stats extends React.Component {
|
|||
getToggleListProps() {
|
||||
return {
|
||||
values: this.state.showed,
|
||||
className: 'admin-panel-stats__toggle-list',
|
||||
className: this.getClassPrefix() + '__toggle-list',
|
||||
onChange: this.onToggleListChange.bind(this),
|
||||
items: ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'].map((name) => {
|
||||
items: this.getStrokes().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 className={this.getClassPrefix() + '__toggle-list-item'}>
|
||||
<div className={this.getClassPrefix() + '__toggle-list-item-value'}>{this.state.stats[name]}</div>
|
||||
<div className={this.getClassPrefix() + '__toggle-list-item-name'}>{i18n('CHART_' + name)}</div>
|
||||
</div>
|
||||
}
|
||||
})
|
||||
|
@ -105,12 +96,12 @@ class Stats extends React.Component {
|
|||
}
|
||||
],
|
||||
onChange: this.onDropDownChange.bind(this),
|
||||
className: 'admin-panel-stats__dropdown'
|
||||
className: this.getClassPrefix() + '__dropdown'
|
||||
}
|
||||
}
|
||||
|
||||
onDropDownChange(event) {
|
||||
let val = [7, 30, 90, 3 65];
|
||||
let val = [7, 30, 90, 365];
|
||||
|
||||
this.retrieve(val[event.index]);
|
||||
}
|
||||
|
@ -126,6 +117,7 @@ class Stats extends React.Component {
|
|||
|
||||
retrieve(period) {
|
||||
let periodName;
|
||||
|
||||
switch (period) {
|
||||
case 30:
|
||||
periodName = 'MONTH';
|
||||
|
@ -142,48 +134,24 @@ class Stats extends React.Component {
|
|||
|
||||
API.call({
|
||||
path: '/system/get-stats',
|
||||
data: {
|
||||
data: this.getApiCallData(periodName)
|
||||
/*data: {
|
||||
period: periodName
|
||||
}
|
||||
}*/
|
||||
}).then(this.onRetrieveSuccess.bind(this, period));
|
||||
}
|
||||
|
||||
onRetrieveSuccess(period, result) {
|
||||
let newStats = this.getDefaultStats();
|
||||
|
||||
let newStats = {
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 0,
|
||||
'SIGNUP': 0,
|
||||
'COMMENT': 0
|
||||
};
|
||||
let newStrokes = this.getStrokes().map((name) => {
|
||||
return {
|
||||
name: name,
|
||||
values: []
|
||||
};
|
||||
});
|
||||
|
||||
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;
|
||||
let realPeriod = result.data.length / this.getStrokes().length;
|
||||
|
||||
for (let i = 0; i < result.data.length; i++) {
|
||||
newStats[result.data[i].type] += result.data[i].value * 1;
|
||||
|
@ -198,7 +166,7 @@ class Stats extends React.Component {
|
|||
}
|
||||
|
||||
getShowedArray() {
|
||||
let showed = [false, false, false, false];
|
||||
let showed = this.getStrokes().map(() => false);
|
||||
|
||||
for (let i = 0; i < showed.length; i++) {
|
||||
showed[this.state.showed[i]] = true;
|
||||
|
@ -206,6 +174,32 @@ class Stats extends React.Component {
|
|||
|
||||
return showed;
|
||||
}
|
||||
|
||||
getStrokes() {
|
||||
return this.props.type === 'general' ? generalStrokes : staffStrokes;
|
||||
}
|
||||
|
||||
getDefaultStats() {
|
||||
return this.props.type === 'general' ?
|
||||
{
|
||||
'CREATE_TICKET': 0,
|
||||
'CLOSE': 0,
|
||||
'SIGNUP': 0,
|
||||
'COMMENT': 0
|
||||
} :
|
||||
{
|
||||
'ASSIGN': 0,
|
||||
'CLOSE': 0
|
||||
};
|
||||
}
|
||||
|
||||
getClassPrefix() {
|
||||
return this.props.type === 'general' ? 'admin-panel-stats' : 'ANOTHER_ONE'; /// IMPORTANTE...
|
||||
}
|
||||
|
||||
getApiCallData(periodName) {
|
||||
return this.props.type === 'general' ? {period: periodName} : {period: periodName, staffId: this.props.staffId};
|
||||
}
|
||||
}
|
||||
|
||||
export default Stats;
|
|
@ -161,6 +161,8 @@ module.exports = [
|
|||
path: '/system/get-stats',
|
||||
time: 200,
|
||||
response: function(_data) {
|
||||
let generalVal = _data.staffId;
|
||||
|
||||
let ID = {
|
||||
'WEEK': 7,
|
||||
'MONTH': 30,
|
||||
|
@ -172,30 +174,46 @@ module.exports = [
|
|||
let DATA = [];
|
||||
|
||||
for (let i = 0; i < k; i++) {
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'COMMENT',
|
||||
general: 1,
|
||||
value: (Math.floor(Math.random() * i)).toString()
|
||||
});
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'SIGNUP',
|
||||
general: 1,
|
||||
value: (Math.floor(Math.random() * (i - 180) * (i - 185) / (1.027**i) )).toString()
|
||||
});
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'CLOSE',
|
||||
general: 1,
|
||||
value: (Math.floor(Math.random() * i * i * i / 365 / 365)).toString()
|
||||
});
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'CREATE_TICKET',
|
||||
general: 1,
|
||||
value: (Math.floor(Math.random()*Math.random()*Math.random()*Math.random()*Math.random()*1.027**i)).toString()
|
||||
});
|
||||
if(generalVal){
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'ASSIGN',
|
||||
general: generalVal,
|
||||
value: (Math.floor((Math.random() + 17) * i)).toString()
|
||||
});
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'CLOSE',
|
||||
general: generalVal,
|
||||
value: (Math.floor((Math.random() + 12) * i )).toString()
|
||||
});
|
||||
}
|
||||
else {
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'COMMENT',
|
||||
general: generalVal,
|
||||
value: (Math.floor((Math.random() + 5) * i)).toString()
|
||||
});
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'SIGNUP',
|
||||
general: generalVal,
|
||||
value: (Math.floor(Math.random() * (i - 180) * (i - 185) / 400)).toString()
|
||||
});
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'CLOSE',
|
||||
general: generalVal,
|
||||
value: (Math.floor((Math.random() + 12) * i )).toString()
|
||||
});
|
||||
DATA.push({
|
||||
date: '201701' + (i + 10) % 100,
|
||||
type: 'CREATE_TICKET',
|
||||
general: generalVal,
|
||||
value: (Math.floor((Math.random() + 7) * i)).toString()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
console.log('DATA:');
|
||||
|
|
|
@ -159,6 +159,7 @@ export default {
|
|||
'CHART_CLOSE': 'Tickets closed',
|
||||
'CHART_SIGNUP': 'Signups',
|
||||
'CHART_COMMENT': 'Replies',
|
||||
'CHART_ASSIGN': 'Assigned',
|
||||
|
||||
//ACTIVITIES
|
||||
'ACTIVITY_COMMENT': 'commented ticket',
|
||||
|
|
Loading…
Reference in New Issue