Max Red - Added abstraction to the component in order to work in view-staff page [skip ci]

This commit is contained in:
ivan 2017-01-15 18:33:00 -03:00
parent ebb3516df3
commit da928f9b6f
4 changed files with 106 additions and 92 deletions

View File

@ -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 = [];

View File

@ -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;

View File

@ -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:');

View File

@ -159,6 +159,7 @@ export default {
'CHART_CLOSE': 'Tickets closed',
'CHART_SIGNUP': 'Signups',
'CHART_COMMENT': 'Replies',
'CHART_ASSIGN': 'Assigned',
//ACTIVITIES
'ACTIVITY_COMMENT': 'commented ticket',