From ebb3516df370135c153b63a31ac2cbaa4170e578 Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 17:20:48 -0300 Subject: [PATCH] Max Red - Starting refactoring of component stats [skip ci] --- .../stats-chart.js} | 2 - client/src/app-components/stats.js | 211 +++++++++++++++++ client/src/app-components/stats.scss | 0 .../panel/dashboard/admin-panel-stats.js | 224 +----------------- client/src/data/fixtures/system-fixtures.js | 174 +------------- 5 files changed, 216 insertions(+), 395 deletions(-) rename client/src/{app/admin/panel/dashboard/admin-panel-stats-chart.js => app-components/stats-chart.js} (96%) create mode 100644 client/src/app-components/stats.js create mode 100644 client/src/app-components/stats.scss diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app-components/stats-chart.js similarity index 96% rename from client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js rename to client/src/app-components/stats-chart.js index 8ff25b1f..18604cae 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app-components/stats-chart.js @@ -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; diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js new file mode 100644 index 00000000..9283e22b --- /dev/null +++ b/client/src/app-components/stats.js @@ -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 ( +
+ + + +
+ ); + } + + 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: +
+
{this.state.stats[name]}
+
{i18n('CHART_' + name)}
+
+ } + }) + }; + } + + 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; \ No newline at end of file diff --git a/client/src/app-components/stats.scss b/client/src/app-components/stats.scss new file mode 100644 index 00000000..e69de29b diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats.js b/client/src/app/admin/panel/dashboard/admin-panel-stats.js index 2252dc37..5e992ffb 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -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 (
- - - +
); } - - 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: -
-
{this.state.stats[name]}
-
{i18n('CHART_' + name)}
-
- } - }) - /*sitems: [ - { - content: -
- {this.state.stats['CREATE_TICKET']} -
{i18n('CHART_CREATE_TICKET')}
-
- }, - { - content: -
- {this.state.stats['CLOSE']} -
{i18n('CHART_CLOSE')}
-
- }, - { - content: -
- {this.state.stats['SIGNUP']} -
{i18n('CHART_SIGNUP')}
-
- }, - { - content: -
- {this.state.stats['COMMENT']} -
{i18n('CHART_COMMENT')}
-
- } - ]*/ - }; - } - - 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; \ 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 38ff3062..797398bd 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -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" - } - ]*/ }; } },