From da928f9b6f022a46521191047c6454bd696eca76 Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 18:33:00 -0300 Subject: [PATCH] Max Red - Added abstraction to the component in order to work in view-staff page [skip ci] --- client/src/app-components/stats-chart.js | 3 +- client/src/app-components/stats.js | 128 ++++++++++---------- client/src/data/fixtures/system-fixtures.js | 66 ++++++---- client/src/data/languages/en.js | 1 + 4 files changed, 106 insertions(+), 92 deletions(-) diff --git a/client/src/app-components/stats-chart.js b/client/src/app-components/stats-chart.js index 18604cae..ca6ddb1c 100644 --- a/client/src/app-components/stats-chart.js +++ b/client/src/app-components/stats-chart.js @@ -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 = []; diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js index 9283e22b..408376a1 100644 --- a/client/src/app-components/stats.js +++ b/client/src/app-components/stats.js @@ -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: -
-
{this.state.stats[name]}
-
{i18n('CHART_' + name)}
+
+
{this.state.stats[name]}
+
{i18n('CHART_' + name)}
} }) @@ -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; \ No newline at end of file diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index 797398bd..bf5b7c3d 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -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:'); diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index cb576806..94a18a34 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -159,6 +159,7 @@ export default { 'CHART_CLOSE': 'Tickets closed', 'CHART_SIGNUP': 'Signups', 'CHART_COMMENT': 'Replies', + 'CHART_ASSIGN': 'Assigned', //ACTIVITIES 'ACTIVITY_COMMENT': 'commented ticket',