From 6a22ba711ecc9cbb24dc615231cfd36705a35549 Mon Sep 17 00:00:00 2001 From: ivan Date: Fri, 13 Jan 2017 15:17:43 -0300 Subject: [PATCH 01/25] Max Red - WIP first layout [skip ci] --- client/package.json | 2 + .../dashboard/admin-panel-stats-chart.js | 18 ++++++++ .../panel/dashboard/admin-panel-stats.js | 33 ++++++++++++++- client/src/app/demo/components-demo-page.js | 42 ++++++++++++++++++- client/src/data/fixtures/system-fixtures.js | 9 ++++ client/src/data/languages/en.js | 1 + 6 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js diff --git a/client/package.json b/client/package.json index 21e3f053..3caab38d 100644 --- a/client/package.json +++ b/client/package.json @@ -54,6 +54,7 @@ }, "dependencies": { "app-module-path": "^1.0.3", + "chart.js": "^1.1.1", "classnames": "^2.1.3", "draft-js": "^0.8.1", "draft-js-export-html": "^0.4.0", @@ -63,6 +64,7 @@ "lodash": "^3.10.0", "messageformat": "^0.2.2", "react": "^15.0.1", + "react-chartjs": "^0.8.0", "react-document-title": "^1.0.2", "react-dom": "^15.0.1", "react-google-recaptcha": "^0.5.2", diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js new file mode 100644 index 00000000..d4dfabfa --- /dev/null +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -0,0 +1,18 @@ +import React from 'react'; + +class StatsChart extends React.Component { + + static propTypes = { + strokes: React.PropTypes.arrayOf(React.PropTypes.shape({ + + })) + }; + + render() { + return ( +
Shit go home!
+ ); + } +} + +export default StatsChart; \ No newline at end of file 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 020264e4..76fd68d6 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -1,14 +1,45 @@ import React from 'react'; +import i18n from 'lib-app/i18n'; + +import Header from 'core-components/header'; +import DropDown from 'core-components/drop-down'; +import StatsChart from 'app/admin/panel/dashboard/admin-panel-stats-chart'; + class AdminPanelStats extends React.Component { render() { return (
- /admin/panel/stats +
+ +
); } + + getDropDownProps() { + return { + items: [ + { + content: 'Last 7 days', + icon: '' + }, + { + content: 'Last 30 days', + icon: '' + }, + { + content: 'Last 90 days', + icon: '' + }, + { + content: 'Last 365 days', + icon: '' + } + ] + } + } } export default AdminPanelStats; \ No newline at end of file diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index 5244975c..4a69a807 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/client/src/app/demo/components-demo-page.js @@ -1,6 +1,7 @@ 'use strict'; const React = require('react'); +const LineChart = require("react-chartjs").Line; const _ = require('lodash'); const DocumentTitle = require('react-document-title'); @@ -16,8 +17,41 @@ const Menu = require('core-components/menu'); const Tooltip = require('core-components/tooltip'); const Table = require('core-components/table'); const InfoTooltip = require('core-components/info-tooltip'); -const ToggleButton = require('app-components/toggle-button'); +function rand(min, max, num) { + var rtn = []; + while (rtn.length < num) { + rtn.push((Math.random() * (max - min)) + min); + } + return rtn; +} + +let chartData = { + labels: ["January", "February", "March", "April", "", "May", "June", "July"], + datasets: [ + { + label: "My First dataset", + fillColor: "rgba(0,0,0,0)", + strokeColor: "rgba(1,2,3,1)", + pointColor: "rgba(3,2,1,1)", + pointStrokeColor: "#333", + pointHighlightFill: "#999", + pointHighlightStroke: "rgba(220,220,220,1)", + data: rand(32, 100, 8) + }, + { + label: "My Second dataset", + fillColor: "rgba(0,0,0,0)", + strokeColor: "rgba(151,187,205,1)", + pointColor: "rgba(151,187,205,1)", + pointStrokeColor: "#fff", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgba(151,187,205,1)", + data: rand(32, 100, 8) + } + ] +}; +let chartOptions = {}; let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}]; let secondaryMenuItems = [ {content: 'My Tickets', icon: 'file-text'}, @@ -176,6 +210,12 @@ let DemoPage = React.createClass({ render: ( ) + }, + { + title: 'LineChart', + render: ( + + ) } ], diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index b67d450f..8626a24b 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -157,6 +157,15 @@ module.exports = [ }; } }, + { + path: '/system/get-stats', + time: 200, + response: function() { + return { + + }; + } + }, { path: '/system/get-logs', time: 300, diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 67a36e64..98b136a9 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -150,6 +150,7 @@ export default { 'LOAD_MORE': 'Load More', 'MY_NOTIFICATIONS': 'My notifications', 'ALL_NOTIFICATIONS': 'All notifications', + 'TICKET_ACTIVITY': 'Ticket Activity', //ACTIVITIES 'ACTIVITY_COMMENT': 'commented ticket', From 8221a06048174f02523aa44399fd088301aaa88f Mon Sep 17 00:00:00 2001 From: ivan Date: Fri, 13 Jan 2017 17:06:52 -0300 Subject: [PATCH 02/25] Max Red - WIP second layout [skip ci] --- .../dashboard/admin-panel-stats-chart.js | 68 ++++++- .../panel/dashboard/admin-panel-stats.js | 76 +++++++- client/src/data/fixtures/system-fixtures.js | 172 +++++++++++++++++- 3 files changed, 311 insertions(+), 5 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index d4dfabfa..21758266 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -1,18 +1,80 @@ import React from 'react'; +import {Line} from 'react-chartjs'; class StatsChart extends React.Component { static propTypes = { strokes: React.PropTypes.arrayOf(React.PropTypes.shape({ - - })) + name: React.PropTypes.string, + values: React.PropTypes.arrayOf(React.PropTypes.shape({ + date: React.PropTypes.number, + value: React.PropTypes.number + })) + })), + display: React.PropTypes.number }; render() { return ( -
Shit go home!
+
+ +
); } + + shouldBeDeleted(min, max, num) { + var rtn = []; + while (rtn.length < num) { + rtn.push((Math.random() * (max - min)) + min + ((Math.random() > 0.95) ? 1 : 0)); + } + return rtn; + } + + getChartData() { + let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + + let labels = [], i; + for (i = 0; i < this.props.display; i++) { + console.log(this.props.strokes[0].values[i].date); + let idx = this.props.strokes[0].values[i].date.slice(4, 6) - 1; + labels.push( this.props.strokes[0].values[i].date.slice(6, 8) + ' ' + months[idx]); + } + console.log(labels); + + return { + labels: labels, + datasets: [ + { + label: "My First dataset", + fillColor: "rgba(0,0,0,0)", + strokeColor: "rgba(1,2,3,1)", + pointColor: "rgba(3,2,1,1)", + pointStrokeColor: "#333", + pointHighlightFill: "#999", + pointHighlightStroke: "rgba(220,220,220,1)", + data: this.shouldBeDeleted(32, 36, 365) + }, + { + label: "My Second dataset", + fillColor: "rgba(0,0,0,0)", + strokeColor: "rgba(151,187,205,1)", + pointColor: "rgba(151,187,205,1)", + pointStrokeColor: "#fff", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgba(151,187,205,1)", + data: this.shouldBeDeleted(32, 36, 365) + } + ] + }; + } + + getChartOptions() { + return { + + }; + } + } + export default StatsChart; \ No newline at end of file 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 76fd68d6..e861e6fd 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -13,7 +13,7 @@ class AdminPanelStats extends React.Component {
- +
); } @@ -40,6 +40,80 @@ class AdminPanelStats extends React.Component { ] } } + + getStatsChartProps() { + return { + display: 7, + strokes: [ + { + name: 'new-tickets', + values: [ + { + date: "20160420", + value: 17 + }, + { + date: "20160421", + value: 15 + }, + { + date: "20160422", + value: 12 + }, + { + date: "20160423", + value: 19 + }, + { + date: "20160424", + value: 14 + }, + { + date: "20160425", + value: 13 + }, + { + date: "20160426", + value: 19 + } + ] + }, + { + name: 'closed-tickets', + values: [ + { + date: "20160420", + value: 20 + }, + { + date: "20160421", + value: 15 + }, + { + date: "20160422", + value: 13 + }, + { + date: "20160423", + value: 15 + }, + { + date: "20160424", + value: 12 + }, + { + date: "20160425", + value: 19 + }, + { + date: "20160426", + value: 23 + } + ] + } + ] + } + } } 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 8626a24b..57db8e0a 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -162,7 +162,177 @@ module.exports = [ time: 200, response: function() { return { - + status: "success", + 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": "0" + }, + { + "date": "20170109", + "type": "CLOSE", + "general": "1", + "value": "0" + }, + { + "date": "20170109", + "type": "CREATE_TICKET", + "general": "1", + "value": "0" + }, + { + "date": "20170108", + "type": "COMMENT", + "general": "1", + "value": "0" + }, + { + "date": "20170108", + "type": "SIGNUP", + "general": "1", + "value": "0" + }, + { + "date": "20170108", + "type": "CLOSE", + "general": "1", + "value": "0" + }, + { + "date": "20170108", + "type": "CREATE_TICKET", + "general": "1", + "value": "0" + }, + { + "date": "20170107", + "type": "COMMENT", + "general": "1", + "value": "0" + }, + { + "date": "20170107", + "type": "SIGNUP", + "general": "1", + "value": "0" + }, + { + "date": "20170107", + "type": "CLOSE", + "general": "1", + "value": "0" + }, + { + "date": "20170107", + "type": "CREATE_TICKET", + "general": "1", + "value": "0" + }, + { + "date": "20170106", + "type": "COMMENT", + "general": "1", + "value": "0" + }, + { + "date": "20170106", + "type": "SIGNUP", + "general": "1", + "value": "0" + }, + { + "date": "20170106", + "type": "CLOSE", + "general": "1", + "value": "0" + }, + { + "date": "20170106", + "type": "CREATE_TICKET", + "general": "1", + "value": "0" + } + ] }; } }, From 4f7118c2e5bff0df05b6935d97ee5931ac2ddcde Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 14 Jan 2017 01:45:21 -0300 Subject: [PATCH 03/25] Max Red - Abstracting StatsChart, modified demo page [skip ci] --- client/package.json | 4 +- .../dashboard/admin-panel-stats-chart.js | 92 ++++++++++++------- .../panel/dashboard/admin-panel-stats.js | 51 ++++++++-- client/src/app/demo/components-demo-page.js | 31 ++++--- 4 files changed, 120 insertions(+), 58 deletions(-) diff --git a/client/package.json b/client/package.json index 3caab38d..0033b6df 100644 --- a/client/package.json +++ b/client/package.json @@ -54,7 +54,7 @@ }, "dependencies": { "app-module-path": "^1.0.3", - "chart.js": "^1.1.1", + "chart.js": "^2.4.0", "classnames": "^2.1.3", "draft-js": "^0.8.1", "draft-js-export-html": "^0.4.0", @@ -64,7 +64,7 @@ "lodash": "^3.10.0", "messageformat": "^0.2.2", "react": "^15.0.1", - "react-chartjs": "^0.8.0", + "react-chartjs-2": "^2.0.0", "react-document-title": "^1.0.2", "react-dom": "^15.0.1", "react-google-recaptcha": "^0.5.2", diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index 21758266..2ff937b3 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Line} from 'react-chartjs'; +import {Line} from 'react-chartjs-2'; class StatsChart extends React.Component { @@ -7,7 +7,7 @@ class StatsChart extends React.Component { strokes: React.PropTypes.arrayOf(React.PropTypes.shape({ name: React.PropTypes.string, values: React.PropTypes.arrayOf(React.PropTypes.shape({ - date: React.PropTypes.number, + date: React.PropTypes.string, value: React.PropTypes.number })) })), @@ -22,10 +22,10 @@ class StatsChart extends React.Component { ); } - shouldBeDeleted(min, max, num) { + shouldBeDeleted(min, max, num, type) { var rtn = []; while (rtn.length < num) { - rtn.push((Math.random() * (max - min)) + min + ((Math.random() > 0.95) ? 1 : 0)); + rtn.push(Math.floor((Math.random() * (max - min)) + min + ((Math.random() > 0.1) ? type * 3 : 0))); } return rtn; } @@ -33,44 +33,70 @@ class StatsChart extends React.Component { getChartData() { let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; - let labels = [], i; - for (i = 0; i < this.props.display; i++) { - console.log(this.props.strokes[0].values[i].date); - let idx = this.props.strokes[0].values[i].date.slice(4, 6) - 1; - labels.push( this.props.strokes[0].values[i].date.slice(6, 8) + ' ' + months[idx]); + let labels = []; + for (let i = 0; i < this.props.display; i++) { + if(i % 2 == 0 && this.props.display > 20){ + labels.push(''); + continue; + } + let firstList = this.props.strokes[0]; + let idx = firstList.values[i].date.slice(4, 6) - 1; + labels.push( firstList.values[i].date.slice(6, 8) + ' ' + months[idx]); + } + + let color = { + 'CREATE_TICKET': 'rgba(150, 20, 20)', + 'CLOSE': 'rgba(20, 150, 20)', + 'SIGNUP': 'rgba(20, 20, 150)', + 'COMMENT': 'rgba(150, 150, 20)' + }; + + let datasets = []; + + for (let i = 0; i < this.props.strokes.length; i++) { + let stroke = this.props.strokes[i]; + + let dataset = {}; + dataset.label = stroke.name; + dataset.data = []; + dataset.fill = false; + + console.log('FUCK THIS PITCH BEF ' + stroke.values.length); + for (let j = 0; j < stroke.values.length; j++) { + console.log('OH YEAH: ' + stroke.values[j].value); + dataset.data.push(stroke.values[j].value); + console.log('OH YEAH x2'); + } + console.log('FUCK THIS PITCH AFT'); + + dataset.borderWidth = 4; + dataset.borderColor = color[stroke.name]; + dataset.pointRadius = 0; + dataset.lineTension = 0.2; + dataset.hitRadius = this.hitRadius(); + + datasets.push(dataset); } - console.log(labels); return { labels: labels, - datasets: [ - { - label: "My First dataset", - fillColor: "rgba(0,0,0,0)", - strokeColor: "rgba(1,2,3,1)", - pointColor: "rgba(3,2,1,1)", - pointStrokeColor: "#333", - pointHighlightFill: "#999", - pointHighlightStroke: "rgba(220,220,220,1)", - data: this.shouldBeDeleted(32, 36, 365) - }, - { - label: "My Second dataset", - fillColor: "rgba(0,0,0,0)", - strokeColor: "rgba(151,187,205,1)", - pointColor: "rgba(151,187,205,1)", - pointStrokeColor: "#fff", - pointHighlightFill: "#fff", - pointHighlightStroke: "rgba(151,187,205,1)", - data: this.shouldBeDeleted(32, 36, 365) - } - ] + datasets: datasets }; } + hitRadius(name) { + /// SHOULD AJUSTAR THIS VALUES + if (this.props.display === 7) return 20; + if (this.props.display === 30) return 15; + if (this.props.display === 90) return 10; + return 3; + } + getChartOptions() { return { - + legend: { + display: false + } }; } 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 e861e6fd..992fda02 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -46,40 +46,40 @@ class AdminPanelStats extends React.Component { display: 7, strokes: [ { - name: 'new-tickets', + name: 'CREATE_TICKET', values: [ { date: "20160420", - value: 17 + value: 71 }, { date: "20160421", - value: 15 + value: 21 }, { date: "20160422", - value: 12 + value: 4 }, { date: "20160423", - value: 19 + value: 9 }, { date: "20160424", - value: 14 + value: 12 }, { date: "20160425", - value: 13 + value: 14 }, { date: "20160426", - value: 19 + value: 22 } ] }, { - name: 'closed-tickets', + name: 'CLOSE', values: [ { date: "20160420", @@ -110,6 +110,39 @@ class AdminPanelStats extends React.Component { value: 23 } ] + }, + { + name: 'SIGNUP', + values: [ + { + date: "20160420", + value: 3 + }, + { + date: "20160421", + value: 5 + }, + { + date: "20160422", + value: 3 + }, + { + date: "20160423", + value: 4 + }, + { + date: "20160424", + value: 5 + }, + { + date: "20160425", + value: 5 + }, + { + date: "20160426", + value: 6 + } + ] } ] } diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index 4a69a807..0a367022 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/client/src/app/demo/components-demo-page.js @@ -1,7 +1,7 @@ 'use strict'; const React = require('react'); -const LineChart = require("react-chartjs").Line; +const LineChart = require("react-chartjs-2").Line; const _ = require('lodash'); const DocumentTitle = require('react-document-title'); @@ -27,27 +27,30 @@ function rand(min, max, num) { } let chartData = { - labels: ["January", "February", "March", "April", "", "May", "June", "July"], + labels: ["January", "February", "March", "April", "May", "June"], datasets: [ - { - label: "My First dataset", - fillColor: "rgba(0,0,0,0)", - strokeColor: "rgba(1,2,3,1)", - pointColor: "rgba(3,2,1,1)", - pointStrokeColor: "#333", - pointHighlightFill: "#999", - pointHighlightStroke: "rgba(220,220,220,1)", - data: rand(32, 100, 8) - }, { label: "My Second dataset", - fillColor: "rgba(0,0,0,0)", + fill: false, strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", - data: rand(32, 100, 8) + borderWidth: 3, + data: rand(32, 100, 6), + pointRadius: 0 + }, + { + label: "My Second dataset", + fill: false, + strokeColor: "rgba(151,187,205,1)", + pointColor: "rgba(151,187,205,1)", + pointStrokeColor: "#fff", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgba(151,187,205,1)", + borderWidth: 3, + data: rand(32, 100, 6) } ] }; From d12194cd34ece2a1df3510d57c39b0f9a3458dbe Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 14 Jan 2017 14:00:02 -0300 Subject: [PATCH 04/25] Max Red - beautify code and add functionality [skip ci] --- .../dashboard/admin-panel-stats-chart.js | 85 ++++++++++--------- .../panel/dashboard/admin-panel-stats.js | 3 + client/src/app/demo/components-demo-page.js | 2 - client/src/data/languages/en.js | 5 ++ 4 files changed, 53 insertions(+), 42 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index 2ff937b3..6f36e39c 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -1,6 +1,8 @@ import React from 'react'; import {Line} from 'react-chartjs-2'; +import i18n from 'lib-app/i18n'; + class StatsChart extends React.Component { static propTypes = { @@ -8,6 +10,7 @@ class StatsChart extends React.Component { name: React.PropTypes.string, values: React.PropTypes.arrayOf(React.PropTypes.shape({ date: React.PropTypes.string, + show: React.PropTypes.bool, value: React.PropTypes.number })) })), @@ -17,7 +20,7 @@ class StatsChart extends React.Component { render() { return (
- +
); } @@ -31,9 +34,48 @@ class StatsChart extends React.Component { } getChartData() { - let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + let labels = this.getLabels(); + let color = { + 'CREATE_TICKET': 'rgba(150, 20, 20, 0.8)', + 'CLOSE': 'rgba(20, 150, 20, 0.8)', + 'SIGNUP': 'rgba(20, 20, 150, 0.8)', + 'COMMENT': 'rgba(150, 150, 20, 0.8)' + }; + + let datasets = []; + + for (let i = 0; i < this.props.strokes.length; i++) { + let stroke = this.props.strokes[i]; + console.log(color[stroke.name]); + + let dataset = { + label: i18n('CHART_' + stroke.name), + data: stroke.values.map((val) => val.value), + fill: false, + borderWidth: 4, + borderColor: color[stroke.name], + pointBorderColor: color[stroke.name], + pointRadius: 0, + lineTension: 0.2, + pointHoverBackgroundColor: color[stroke.name], + hitRadius: this.hitRadius(), + showLine: stroke.show + }; + + datasets.push(dataset); + } + + return { + labels: labels, + datasets: datasets + }; + } + + getLabels() { + let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; let labels = []; + for (let i = 0; i < this.props.display; i++) { if(i % 2 == 0 && this.props.display > 20){ labels.push(''); @@ -44,44 +86,7 @@ class StatsChart extends React.Component { labels.push( firstList.values[i].date.slice(6, 8) + ' ' + months[idx]); } - let color = { - 'CREATE_TICKET': 'rgba(150, 20, 20)', - 'CLOSE': 'rgba(20, 150, 20)', - 'SIGNUP': 'rgba(20, 20, 150)', - 'COMMENT': 'rgba(150, 150, 20)' - }; - - let datasets = []; - - for (let i = 0; i < this.props.strokes.length; i++) { - let stroke = this.props.strokes[i]; - - let dataset = {}; - dataset.label = stroke.name; - dataset.data = []; - dataset.fill = false; - - console.log('FUCK THIS PITCH BEF ' + stroke.values.length); - for (let j = 0; j < stroke.values.length; j++) { - console.log('OH YEAH: ' + stroke.values[j].value); - dataset.data.push(stroke.values[j].value); - console.log('OH YEAH x2'); - } - console.log('FUCK THIS PITCH AFT'); - - dataset.borderWidth = 4; - dataset.borderColor = color[stroke.name]; - dataset.pointRadius = 0; - dataset.lineTension = 0.2; - dataset.hitRadius = this.hitRadius(); - - datasets.push(dataset); - } - - return { - labels: labels, - datasets: datasets - }; + return labels; } hitRadius(name) { 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 992fda02..2feb50f7 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -47,6 +47,7 @@ class AdminPanelStats extends React.Component { strokes: [ { name: 'CREATE_TICKET', + show: true, values: [ { date: "20160420", @@ -80,6 +81,7 @@ class AdminPanelStats extends React.Component { }, { name: 'CLOSE', + show: true, values: [ { date: "20160420", @@ -113,6 +115,7 @@ class AdminPanelStats extends React.Component { }, { name: 'SIGNUP', + show: true, values: [ { date: "20160420", diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index 0a367022..68042fd4 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/client/src/app/demo/components-demo-page.js @@ -32,7 +32,6 @@ let chartData = { { label: "My Second dataset", fill: false, - strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", @@ -44,7 +43,6 @@ let chartData = { { label: "My Second dataset", fill: false, - strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 61e8ec37..ceda9f35 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -154,6 +154,11 @@ export default { 'VERIFY_FAILED': 'Could not verify', 'TICKET_ACTIVITY': 'Ticket Activity', + 'CHART_CREATE_TICKET': 'Tickets created', + 'CHART_CLOSE': 'Tickets closed', + 'CHART_SIGNUP': 'Signups', + 'CHART_COMMENT': 'Replies', + //ACTIVITIES 'ACTIVITY_COMMENT': 'commented ticket', 'ACTIVITY_ASSIGN': 'assigned ticket', From 1e69e6f4f85e3ee9ff21b7f8b414024463ec258a Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 14 Jan 2017 14:17:35 -0300 Subject: [PATCH 05/25] Max Red - Finished StatsChart component, started full component [skip ci] --- .../dashboard/admin-panel-stats-chart.js | 16 +-- .../panel/dashboard/admin-panel-stats.js | 102 +++++++++++------- 2 files changed, 63 insertions(+), 55 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index 6f36e39c..b5582017 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -25,14 +25,6 @@ class StatsChart extends React.Component { ); } - shouldBeDeleted(min, max, num, type) { - var rtn = []; - while (rtn.length < num) { - rtn.push(Math.floor((Math.random() * (max - min)) + min + ((Math.random() > 0.1) ? type * 3 : 0))); - } - return rtn; - } - getChartData() { let labels = this.getLabels(); @@ -47,7 +39,6 @@ class StatsChart extends React.Component { for (let i = 0; i < this.props.strokes.length; i++) { let stroke = this.props.strokes[i]; - console.log(color[stroke.name]); let dataset = { label: i18n('CHART_' + stroke.name), @@ -77,10 +68,6 @@ class StatsChart extends React.Component { let labels = []; for (let i = 0; i < this.props.display; i++) { - if(i % 2 == 0 && this.props.display > 20){ - labels.push(''); - continue; - } let firstList = this.props.strokes[0]; let idx = firstList.values[i].date.slice(4, 6) - 1; labels.push( firstList.values[i].date.slice(6, 8) + ' ' + months[idx]); @@ -89,8 +76,7 @@ class StatsChart extends React.Component { return labels; } - hitRadius(name) { - /// SHOULD AJUSTAR THIS VALUES + hitRadius() { if (this.props.display === 7) return 20; if (this.props.display === 30) return 15; if (this.props.display === 90) return 10; 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 2feb50f7..a7ae93dc 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -4,6 +4,8 @@ import i18n from 'lib-app/i18n'; 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 { @@ -13,11 +15,31 @@ class AdminPanelStats extends React.Component {
+
); } + getToggleListProps() { + return { + items: [ + { + content:
+ }, + { + content:
+ }, + { + content:
+ }, + { + content:
+ } + ] + }; + } + getDropDownProps() { return { items: [ @@ -51,15 +73,15 @@ class AdminPanelStats extends React.Component { values: [ { date: "20160420", - value: 71 + value: 17 }, { date: "20160421", - value: 21 + value: 15 }, { date: "20160422", - value: 4 + value: 12 }, { date: "20160423", @@ -67,49 +89,15 @@ class AdminPanelStats extends React.Component { }, { date: "20160424", - value: 12 + value: 10 }, { date: "20160425", - value: 14 + value: 7 }, { date: "20160426", - value: 22 - } - ] - }, - { - name: 'CLOSE', - show: true, - values: [ - { - date: "20160420", - value: 20 - }, - { - date: "20160421", - value: 15 - }, - { - date: "20160422", - value: 13 - }, - { - date: "20160423", - value: 15 - }, - { - date: "20160424", - value: 12 - }, - { - date: "20160425", - value: 19 - }, - { - date: "20160426", - value: 23 + value: 5 } ] }, @@ -146,6 +134,40 @@ class AdminPanelStats extends React.Component { value: 6 } ] + }, + { + name: 'CLOSE', + show: true, + values: [ + { + date: "20160420", + value: 4 + }, + { + date: "20160421", + value: 7 + }, + { + date: "20160422", + value: 4 + }, + { + date: "20160423", + value: 7 + }, + { + date: "20160424", + value: 9 + }, + { + date: "20160425", + value: 11 + }, + { + date: "20160426", + value: 13 + } + ] } ] } From 8c50cc97c91f04ba3fee33d00fed15388e9d78b9 Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 14 Jan 2017 15:15:26 -0300 Subject: [PATCH 06/25] Max Red - Create stats state, and display correct values in the toggle list [skip ci] --- .../dashboard/admin-panel-stats-chart.js | 6 +- .../panel/dashboard/admin-panel-stats.js | 61 +++++++++++++++++-- client/src/data/languages/en.js | 1 + 3 files changed, 60 insertions(+), 8 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index b5582017..d62cc729 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -29,10 +29,10 @@ class StatsChart extends React.Component { let labels = this.getLabels(); let color = { - 'CREATE_TICKET': 'rgba(150, 20, 20, 0.8)', - 'CLOSE': 'rgba(20, 150, 20, 0.8)', + 'CLOSE': 'rgba(150, 20, 20, 0.8)', + 'CREATE_TICKET': 'rgba(20, 150, 20, 0.8)', 'SIGNUP': 'rgba(20, 20, 150, 0.8)', - 'COMMENT': 'rgba(150, 150, 20, 0.8)' + 'COMMENT': 'rgba(20, 200, 200, 0.8)' }; let datasets = []; 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 a7ae93dc..5b24047a 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -1,6 +1,7 @@ import React from 'react'; import i18n from 'lib-app/i18n'; +import API from 'lib-app/api-call'; import Header from 'core-components/header'; import DropDown from 'core-components/drop-down'; @@ -10,6 +11,19 @@ import StatsChart from 'app/admin/panel/dashboard/admin-panel-stats-chart'; class AdminPanelStats extends React.Component { + state = { + stats: { + 'CLOSE': 0, + 'CREATE_TICKET': 0, + 'SIGNUP': 0, + 'COMMENT': 0 + } + }; + + componentDidMount() { + this.retrieve(); + } + render() { return (
@@ -22,19 +36,36 @@ class AdminPanelStats extends React.Component { } getToggleListProps() { + console.log('LALA: ' + this.state.stats); return { items: [ { - content:
+ content: +
+ {this.state.stats['CREATE_TICKET']} +
{i18n('CHART_CREATE_TICKET')}
+
}, { - content:
+ content: +
+ {this.state.stats['CLOSE']} +
{i18n('CHART_CLOSE')}
+
}, { - content:
+ content: +
+ {this.state.stats['SIGNUP']} +
{i18n('CHART_SIGNUP')}
+
}, { - content:
+ content: +
+ {this.state.stats['COMMENT']} +
{i18n('CHART_COMMENT')}
+
} ] }; @@ -68,7 +99,7 @@ class AdminPanelStats extends React.Component { display: 7, strokes: [ { - name: 'CREATE_TICKET', + name: 'COMMENT', show: true, values: [ { @@ -172,6 +203,26 @@ class AdminPanelStats extends React.Component { ] } } + + retrieve() { + API.call({ + path: '/system/get-stats', + data: {} + }).then(this.onRetrieveSuccess.bind(this)); + } + + onRetrieveSuccess(result) { + let newState = { + 'CLOSE': 0, + 'CREATE_TICKET': 0, + 'SIGNUP': 0, + 'COMMENT': 0 + }; + for (let i = 0; i < result.data.length; i++) { + newState[result.data[i].type] += result.data[i].value * 1; + } + this.setState({stats: newState}); + } } export default AdminPanelStats; \ No newline at end of file diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index ceda9f35..cb576806 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -154,6 +154,7 @@ export default { 'VERIFY_FAILED': 'Could not verify', 'TICKET_ACTIVITY': 'Ticket Activity', + 'CHART_CREATE_TICKET': 'Tickets created', 'CHART_CLOSE': 'Tickets closed', 'CHART_SIGNUP': 'Signups', From 7022dfeabfa0eabe1995cf0c28e4326e26964e12 Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 14 Jan 2017 17:20:04 -0300 Subject: [PATCH 07/25] Max Red - Showing real data in graph taken from fixtures [skip ci] --- .../dashboard/admin-panel-stats-chart.js | 14 ++-- .../panel/dashboard/admin-panel-stats.js | 78 +++++++++++++++++-- client/src/data/fixtures/system-fixtures.js | 28 +++---- 3 files changed, 93 insertions(+), 27 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index d62cc729..3e6c582b 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -8,13 +8,13 @@ class StatsChart extends React.Component { static propTypes = { strokes: React.PropTypes.arrayOf(React.PropTypes.shape({ name: React.PropTypes.string, + show: React.PropTypes.bool, values: React.PropTypes.arrayOf(React.PropTypes.shape({ date: React.PropTypes.string, - show: React.PropTypes.bool, value: React.PropTypes.number })) })), - display: React.PropTypes.number + period: React.PropTypes.number }; render() { @@ -56,7 +56,7 @@ class StatsChart extends React.Component { datasets.push(dataset); } - + return { labels: labels, datasets: datasets @@ -67,7 +67,7 @@ class StatsChart extends React.Component { let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; let labels = []; - for (let i = 0; i < this.props.display; i++) { + for (let i = 0; i < this.props.period; i++) { let firstList = this.props.strokes[0]; let idx = firstList.values[i].date.slice(4, 6) - 1; labels.push( firstList.values[i].date.slice(6, 8) + ' ' + months[idx]); @@ -77,9 +77,9 @@ class StatsChart extends React.Component { } hitRadius() { - if (this.props.display === 7) return 20; - if (this.props.display === 30) return 15; - if (this.props.display === 90) return 10; + if (this.props.period === 7) return 20; + if (this.props.period === 30) return 15; + if (this.props.period === 90) return 10; return 3; } 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 5b24047a..74843f6a 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -1,4 +1,5 @@ import React from 'react'; +import _ from 'lodash'; import i18n from 'lib-app/i18n'; import API from 'lib-app/api-call'; @@ -17,7 +18,30 @@ class AdminPanelStats extends React.Component { 'CREATE_TICKET': 0, 'SIGNUP': 0, 'COMMENT': 0 - } + }, + strokes: [ + { + name: 'CLOSE', + show: true, + values: [] + }, + { + name: 'CREATE_TICKET', + show: true, + values: [] + }, + { + name: 'SIGNUP', + show: true, + values: [] + }, + { + name: 'COMMENT', + show: true, + values: [] + } + ], + period: 0 }; componentDidMount() { @@ -36,7 +60,6 @@ class AdminPanelStats extends React.Component { } getToggleListProps() { - console.log('LALA: ' + this.state.stats); return { items: [ { @@ -95,9 +118,14 @@ class AdminPanelStats extends React.Component { } getStatsChartProps() { + + console.log('This is the shit'); + console.log(this.state.strokes); + return { - display: 7, - strokes: [ + period: this.state.period, + strokes: this.state.strokes + /*strokes: [ { name: 'COMMENT', show: true, @@ -200,7 +228,7 @@ class AdminPanelStats extends React.Component { } ] } - ] + ]*/ } } @@ -212,16 +240,54 @@ class AdminPanelStats extends React.Component { } onRetrieveSuccess(result) { + let newState = { 'CLOSE': 0, 'CREATE_TICKET': 0, 'SIGNUP': 0, 'COMMENT': 0 }; + + let ID = { + 'CLOSE': 0, + 'CREATE_TICKET': 1, + 'SIGNUP': 2, + 'COMMENT': 3 + }; + + let newStrokes = [ + { + name: 'CLOSE', + show: true, + values: [] + }, + { + name: 'CREATE_TICKET', + show: true, + values: [] + }, + { + name: 'SIGNUP', + show: true, + values: [] + }, + { + name: 'COMMENT', + show: true, + values: [] + } + ]; + 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}); + + this.setState({stats: newState, strokes: newStrokes, period: 7}); } } diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index 57db8e0a..76200c6c 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -246,55 +246,55 @@ module.exports = [ "date": "20170109", "type": "SIGNUP", "general": "1", - "value": "0" + "value": "7" }, { "date": "20170109", "type": "CLOSE", "general": "1", - "value": "0" + "value": "4" }, { "date": "20170109", "type": "CREATE_TICKET", "general": "1", - "value": "0" + "value": "9" }, { "date": "20170108", "type": "COMMENT", "general": "1", - "value": "0" + "value": "8" }, { "date": "20170108", "type": "SIGNUP", "general": "1", - "value": "0" + "value": "4" }, { "date": "20170108", "type": "CLOSE", "general": "1", - "value": "0" + "value": "5" }, { "date": "20170108", "type": "CREATE_TICKET", "general": "1", - "value": "0" + "value": "6" }, { "date": "20170107", "type": "COMMENT", "general": "1", - "value": "0" + "value": "4" }, { "date": "20170107", "type": "SIGNUP", "general": "1", - "value": "0" + "value": "1" }, { "date": "20170107", @@ -306,31 +306,31 @@ module.exports = [ "date": "20170107", "type": "CREATE_TICKET", "general": "1", - "value": "0" + "value": "2" }, { "date": "20170106", "type": "COMMENT", "general": "1", - "value": "0" + "value": "7" }, { "date": "20170106", "type": "SIGNUP", "general": "1", - "value": "0" + "value": "4" }, { "date": "20170106", "type": "CLOSE", "general": "1", - "value": "0" + "value": "5" }, { "date": "20170106", "type": "CREATE_TICKET", "general": "1", - "value": "0" + "value": "5" } ] }; From 9861bfb0234f1b74ebfa22d35ac765228667158a Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 14 Jan 2017 18:41:19 -0300 Subject: [PATCH 08/25] Max Red - Added functionality to dropdown [skip ci] --- .../dashboard/admin-panel-stats-chart.js | 4 +- .../panel/dashboard/admin-panel-stats.js | 162 +++++------------- client/src/data/fixtures/system-fixtures.js | 48 +++++- 3 files changed, 93 insertions(+), 121 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index 3e6c582b..52d25748 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -44,7 +44,7 @@ class StatsChart extends React.Component { label: i18n('CHART_' + stroke.name), data: stroke.values.map((val) => val.value), fill: false, - borderWidth: 4, + borderWidth: 4, // ESTO PODRIA CAMBIAR DEPENDIENDO DEL PERIOD, MIENTRA MAS HALLA, DEBERIA SER MAS FINO borderColor: color[stroke.name], pointBorderColor: color[stroke.name], pointRadius: 0, @@ -80,7 +80,7 @@ class StatsChart extends React.Component { if (this.props.period === 7) return 20; if (this.props.period === 30) return 15; if (this.props.period === 90) return 10; - return 3; + return 1; } getChartOptions() { 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 74843f6a..f84956a2 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -45,7 +45,7 @@ class AdminPanelStats extends React.Component { }; componentDidMount() { - this.retrieve(); + this.retrieve(7); } render() { @@ -90,10 +90,15 @@ class AdminPanelStats extends React.Component {
{i18n('CHART_COMMENT')}
} - ] + ], + onChange: this.onToggleListChange.bind(this) }; } + onToggleListChange(data) { + + } + getDropDownProps() { return { items: [ @@ -113,133 +118,58 @@ class AdminPanelStats extends React.Component { content: 'Last 365 days', icon: '' } - ] + ], + onChange: this.onDropDownChange.bind(this) } } + onDropDownChange(event) { + console.log('DROP DOWN HAS CHANGED'); + let val = [7, 30, 90, 365]; + + this.retrieve(val[event.index]); + } + getStatsChartProps() { - - console.log('This is the shit'); - console.log(this.state.strokes); - return { period: this.state.period, strokes: this.state.strokes - /*strokes: [ - { - name: 'COMMENT', - show: true, - values: [ - { - date: "20160420", - value: 17 - }, - { - date: "20160421", - value: 15 - }, - { - date: "20160422", - value: 12 - }, - { - date: "20160423", - value: 9 - }, - { - date: "20160424", - value: 10 - }, - { - date: "20160425", - value: 7 - }, - { - date: "20160426", - value: 5 - } - ] - }, - { - name: 'SIGNUP', - show: true, - values: [ - { - date: "20160420", - value: 3 - }, - { - date: "20160421", - value: 5 - }, - { - date: "20160422", - value: 3 - }, - { - date: "20160423", - value: 4 - }, - { - date: "20160424", - value: 5 - }, - { - date: "20160425", - value: 5 - }, - { - date: "20160426", - value: 6 - } - ] - }, - { - name: 'CLOSE', - show: true, - values: [ - { - date: "20160420", - value: 4 - }, - { - date: "20160421", - value: 7 - }, - { - date: "20160422", - value: 4 - }, - { - date: "20160423", - value: 7 - }, - { - date: "20160424", - value: 9 - }, - { - date: "20160425", - value: 11 - }, - { - date: "20160426", - value: 13 - } - ] - } - ]*/ } } - retrieve() { + retrieve(period) { + console.log('THIS SHOULD NOT BE DISPLAYED'); + + let periodName; + switch (period) { + case 30: + periodName = 'MONTH'; + break; + case 90: + periodName = 'QUARTER'; + break; + case 365: + periodName = 'YEAR'; + break; + default: + periodName = 'WEEK'; + } + + console.log('--------------------------------------------period: ' + this.state.period); + console.log('--------------------------------------------PERIOD NAME: ' + periodName); + API.call({ path: '/system/get-stats', - data: {} - }).then(this.onRetrieveSuccess.bind(this)); + data: { + period: periodName + } + }).then(this.onRetrieveSuccess.bind(this, period)); } - onRetrieveSuccess(result) { + onRetrieveSuccess(period, result) { + + console.log('This is the shit you SHOULD look at!'); + console.log(result); let newState = { 'CLOSE': 0, @@ -287,7 +217,7 @@ class AdminPanelStats extends React.Component { }); } - this.setState({stats: newState, strokes: newStrokes, period: 7}); + this.setState({stats: newState, strokes: newStrokes, period: period}); } } diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index 76200c6c..06b087fd 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -160,10 +160,52 @@ module.exports = [ { path: '/system/get-stats', time: 200, - response: function() { + response: function(_data) { + let ID = { + 'WEEK': 7, + 'MONTH': 30, + 'QUARTER': 90, + 'YEAR': 365 + }; + + let k = ID[_data.period]; + let DATA = []; + + for (let i = 0; i < k; i++) { + DATA.push({ + date: '201701' + (i + 10) % 100, + type: 'COMMENT', + general: 1, + value: (4 + i + Math.floor(Math.random() * 2)).toString() + }); + DATA.push({ + date: '201701' + (i + 10) % 100, + type: 'SIGNUP', + general: 1, + value: (9 + i + Math.floor(Math.random() * (i / 15))).toString() + }); + DATA.push({ + date: '201701' + (i + 10) % 100, + type: 'CLOSE', + general: 1, + value: (8 + i + Math.floor(Math.random() * i)).toString() + }); + DATA.push({ + date: '201701' + (i + 10) % 100, + type: 'CREATE_TICKET', + general: 1, + value: (10 + Math.floor(Math.random() * 4)).toString() + }); + } + + console.log('DATA:'); + console.log(DATA); + console.log(k); + return { status: "success", - data: [ + data: DATA + /*data: [ { "date": "20170112", "type": "COMMENT", @@ -332,7 +374,7 @@ module.exports = [ "general": "1", "value": "5" } - ] + ]*/ }; } }, From 19f25657ef324ea6b85f43d32103ba7a859f930b Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 14 Jan 2017 18:47:04 -0300 Subject: [PATCH 09/25] Max Red - Corrected to work even if the response of system/get-stats is not the full week/month/year etc.. [skip ci] --- .../admin/panel/dashboard/admin-panel-stats-chart.js | 12 ++++++++---- .../app/admin/panel/dashboard/admin-panel-stats.js | 4 +++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index 52d25748..64b0df74 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -44,7 +44,7 @@ class StatsChart extends React.Component { label: i18n('CHART_' + stroke.name), data: stroke.values.map((val) => val.value), fill: false, - borderWidth: 4, // ESTO PODRIA CAMBIAR DEPENDIENDO DEL PERIOD, MIENTRA MAS HALLA, DEBERIA SER MAS FINO + borderWidth: this.getBorderWidth(), borderColor: color[stroke.name], pointBorderColor: color[stroke.name], pointRadius: 0, @@ -63,6 +63,10 @@ class StatsChart extends React.Component { }; } + getBorderWidth() { + return (this.props.period <= 90) ? 4 : 2; + } + getLabels() { let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; let labels = []; @@ -77,9 +81,9 @@ class StatsChart extends React.Component { } hitRadius() { - if (this.props.period === 7) return 20; - if (this.props.period === 30) return 15; - if (this.props.period === 90) return 10; + if (this.props.period <= 7) return 20; + if (this.props.period <= 30) return 15; + if (this.props.period <= 90) return 10; return 1; } 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 f84956a2..ab5d1d5f 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -208,6 +208,8 @@ class AdminPanelStats extends React.Component { } ]; + 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; @@ -217,7 +219,7 @@ class AdminPanelStats extends React.Component { }); } - this.setState({stats: newState, strokes: newStrokes, period: period}); + this.setState({stats: newState, strokes: newStrokes, period: realPeriod}); } } From fd2c20ac9fccbbaf3c9403141e6d1672b0de9b90 Mon Sep 17 00:00:00 2001 From: ivan Date: Sat, 14 Jan 2017 21:31:02 -0300 Subject: [PATCH 10/25] Max Red - Added all functionality to the component [skip ci] --- .../dashboard/admin-panel-stats-chart.js | 17 ++++-- .../panel/dashboard/admin-panel-stats.js | 59 ++++++++++--------- client/src/core-components/toggle-list.js | 10 +++- client/src/data/fixtures/system-fixtures.js | 4 +- 4 files changed, 50 insertions(+), 40 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index 64b0df74..8ff25b1f 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js @@ -8,19 +8,19 @@ class StatsChart extends React.Component { static propTypes = { strokes: React.PropTypes.arrayOf(React.PropTypes.shape({ name: React.PropTypes.string, - show: React.PropTypes.bool, values: React.PropTypes.arrayOf(React.PropTypes.shape({ date: React.PropTypes.string, value: React.PropTypes.number })) })), + //showed: React.PropTypes.arrayOf(React.PropTypes.bool), period: React.PropTypes.number }; render() { return (
- +
); } @@ -48,10 +48,10 @@ class StatsChart extends React.Component { borderColor: color[stroke.name], pointBorderColor: color[stroke.name], pointRadius: 0, + pointHoverRadius: 3, lineTension: 0.2, pointHoverBackgroundColor: color[stroke.name], - hitRadius: this.hitRadius(), - showLine: stroke.show + hitRadius: this.hitRadius(i) }; datasets.push(dataset); @@ -72,6 +72,10 @@ class StatsChart extends React.Component { let labels = []; for (let i = 0; i < this.props.period; i++) { + if (!this.props.strokes.length){ + labels.push(''); + continue; + } let firstList = this.props.strokes[0]; let idx = firstList.values[i].date.slice(4, 6) - 1; labels.push( firstList.values[i].date.slice(6, 8) + ' ' + months[idx]); @@ -80,11 +84,12 @@ class StatsChart extends React.Component { return labels; } - hitRadius() { + 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; - return 1; + return 3; } getChartOptions() { 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 ab5d1d5f..16a97c5b 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -14,33 +14,30 @@ class AdminPanelStats extends React.Component { state = { stats: { - 'CLOSE': 0, 'CREATE_TICKET': 0, + 'CLOSE': 0, 'SIGNUP': 0, 'COMMENT': 0 }, strokes: [ { - name: 'CLOSE', - show: true, + name: 'CREATE_TICKET', values: [] }, { - name: 'CREATE_TICKET', - show: true, + name: 'CLOSE', values: [] }, { name: 'SIGNUP', - show: true, values: [] }, { name: 'COMMENT', - show: true, values: [] } ], + showed: [0], period: 0 }; @@ -61,6 +58,7 @@ class AdminPanelStats extends React.Component { getToggleListProps() { return { + values: this.state.showed, items: [ { content: @@ -95,8 +93,10 @@ class AdminPanelStats extends React.Component { }; } - onToggleListChange(data) { - + onToggleListChange(event) { + this.setState({ + showed: event.target.value + }); } getDropDownProps() { @@ -124,22 +124,23 @@ class AdminPanelStats extends React.Component { } onDropDownChange(event) { - console.log('DROP DOWN HAS CHANGED'); let val = [7, 30, 90, 365]; this.retrieve(val[event.index]); } getStatsChartProps() { + let showed = this.getShowedArray(); + return { period: this.state.period, - strokes: this.state.strokes - } + strokes: _.filter(this.state.strokes, (s, i) => showed[i]) + //strokes: this.state.strokes, + //showed: this.getShowedArray() + }; } retrieve(period) { - console.log('THIS SHOULD NOT BE DISPLAYED'); - let periodName; switch (period) { case 30: @@ -155,9 +156,6 @@ class AdminPanelStats extends React.Component { periodName = 'WEEK'; } - console.log('--------------------------------------------period: ' + this.state.period); - console.log('--------------------------------------------PERIOD NAME: ' + periodName); - API.call({ path: '/system/get-stats', data: { @@ -168,42 +166,35 @@ class AdminPanelStats extends React.Component { onRetrieveSuccess(period, result) { - console.log('This is the shit you SHOULD look at!'); - console.log(result); - let newState = { - 'CLOSE': 0, 'CREATE_TICKET': 0, + 'CLOSE': 0, 'SIGNUP': 0, 'COMMENT': 0 }; let ID = { - 'CLOSE': 0, - 'CREATE_TICKET': 1, + 'CREATE_TICKET': 0, + 'CLOSE': 1, 'SIGNUP': 2, 'COMMENT': 3 }; let newStrokes = [ { - name: 'CLOSE', - show: true, + name: 'CREATE_TICKET', values: [] }, { - name: 'CREATE_TICKET', - show: true, + name: 'CLOSE', values: [] }, { name: 'SIGNUP', - show: true, values: [] }, { name: 'COMMENT', - show: true, values: [] } ]; @@ -221,6 +212,16 @@ class AdminPanelStats extends React.Component { 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/core-components/toggle-list.js b/client/src/core-components/toggle-list.js index 8dba39a7..b38defe0 100644 --- a/client/src/core-components/toggle-list.js +++ b/client/src/core-components/toggle-list.js @@ -35,16 +35,16 @@ class ToggleList extends React.Component { let classes = { 'toggle-list__item': true, 'toggle-list__first-item': (index === 0), - 'toggle-list__selected': _.includes(this.state.selected, index) + 'toggle-list__selected': _.includes(this.getSelectedList(), index) }; return classNames(classes); } selectItem(index) { - let newSelected = _.clone(this.state.selected); + let newSelected = _.clone(this.getSelectedList()); - _.includes(this.state.selected, index) ? _.remove(newSelected, _index => _index == index) : newSelected.push(index); + _.includes(this.getSelectedList(), index) ? _.remove(newSelected, _index => _index == index) : newSelected.push(index); this.setState({ selected: newSelected @@ -58,6 +58,10 @@ class ToggleList extends React.Component { }); } } + + getSelectedList() { + return (this.props.values === undefined) ? this.state.selected : this.props.values; + } } export default ToggleList; diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index 06b087fd..9d329319 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -182,13 +182,13 @@ module.exports = [ date: '201701' + (i + 10) % 100, type: 'SIGNUP', general: 1, - value: (9 + i + Math.floor(Math.random() * (i / 15))).toString() + value: (9 + i + Math.floor(Math.random() * (i * 15))).toString() }); DATA.push({ date: '201701' + (i + 10) % 100, type: 'CLOSE', general: 1, - value: (8 + i + Math.floor(Math.random() * i)).toString() + value: (8 + i + Math.floor(Math.random() * i * i * i * i)).toString() }); DATA.push({ date: '201701' + (i + 10) % 100, From 1f6e3ae0286a02a84529bc84e86703c02072c462 Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 00:07:02 -0300 Subject: [PATCH 11/25] Max Red - Added basic scss [skip ci] --- .../app/admin/panel/dashboard/admin-panel-stats.js | 10 ++++++---- .../app/admin/panel/dashboard/admin-panel-stats.scss | 11 +++++++++++ client/src/core-components/toggle-list.js | 11 ++++++++++- client/src/data/fixtures/system-fixtures.js | 8 ++++---- 4 files changed, 31 insertions(+), 9 deletions(-) create mode 100644 client/src/app/admin/panel/dashboard/admin-panel-stats.scss 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 16a97c5b..84790d04 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -47,7 +47,7 @@ class AdminPanelStats extends React.Component { render() { return ( -
+
@@ -59,6 +59,8 @@ class AdminPanelStats extends React.Component { getToggleListProps() { return { values: this.state.showed, + className: 'admin-panel-stats__toggle-list', + onChange: this.onToggleListChange.bind(this), items: [ { content: @@ -88,8 +90,7 @@ class AdminPanelStats extends React.Component {
{i18n('CHART_COMMENT')}
} - ], - onChange: this.onToggleListChange.bind(this) + ] }; } @@ -119,7 +120,8 @@ class AdminPanelStats extends React.Component { icon: '' } ], - onChange: this.onDropDownChange.bind(this) + onChange: this.onDropDownChange.bind(this), + className: 'admin-panel-stats__dropdown' } } diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats.scss b/client/src/app/admin/panel/dashboard/admin-panel-stats.scss new file mode 100644 index 00000000..d020a3a5 --- /dev/null +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.scss @@ -0,0 +1,11 @@ +.admin-panel-stats { + + &__dropdown { + margin-left: auto; + margin-bottom: 20px; + } + + &__toggle-list { + margin-bottom: 20px; + } +} \ No newline at end of file diff --git a/client/src/core-components/toggle-list.js b/client/src/core-components/toggle-list.js index b38defe0..e5e70fbc 100644 --- a/client/src/core-components/toggle-list.js +++ b/client/src/core-components/toggle-list.js @@ -16,12 +16,21 @@ class ToggleList extends React.Component { render() { return ( -
+
{this.props.items.map(this.renderItem.bind(this))}
); } + getClass() { + let classes = { + 'toggle-list': true, + [this.props.className]: (this.props.className) + }; + + return classNames(classes); + } + renderItem(obj, index) { return ( diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index 9d329319..38ff3062 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -176,25 +176,25 @@ module.exports = [ date: '201701' + (i + 10) % 100, type: 'COMMENT', general: 1, - value: (4 + i + Math.floor(Math.random() * 2)).toString() + value: (Math.floor(Math.random() * i)).toString() }); DATA.push({ date: '201701' + (i + 10) % 100, type: 'SIGNUP', general: 1, - value: (9 + i + Math.floor(Math.random() * (i * 15))).toString() + value: (Math.floor(Math.random() * i * i / 365)).toString() }); DATA.push({ date: '201701' + (i + 10) % 100, type: 'CLOSE', general: 1, - value: (8 + i + Math.floor(Math.random() * i * i * i * i)).toString() + value: (Math.floor(Math.random() * i * i * i / 365 / 365)).toString() }); DATA.push({ date: '201701' + (i + 10) % 100, type: 'CREATE_TICKET', general: 1, - value: (10 + Math.floor(Math.random() * 4)).toString() + value: (Math.floor(Math.random()*Math.random()*Math.random()*Math.random()*Math.random()*1.05**i)).toString() }); } From 0500666174a4a30f6111a5fd3810f5492941121e Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 15:07:07 -0300 Subject: [PATCH 12/25] Max Red - Added even more basic scss [skip ci] --- .../admin/panel/dashboard/admin-panel-stats.js | 13 +++++++++++-- .../admin/panel/dashboard/admin-panel-stats.scss | 16 ++++++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) 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 84790d04..2252dc37 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -61,7 +61,16 @@ class AdminPanelStats extends React.Component { values: this.state.showed, className: 'admin-panel-stats__toggle-list', onChange: this.onToggleListChange.bind(this), - items: [ + items: ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'].map((name) => { + return { + content: +
+
{this.state.stats[name]}
+
{i18n('CHART_' + name)}
+
+ } + }) + /*sitems: [ { content:
@@ -90,7 +99,7 @@ class AdminPanelStats extends React.Component {
{i18n('CHART_COMMENT')}
} - ] + ]*/ }; } diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats.scss b/client/src/app/admin/panel/dashboard/admin-panel-stats.scss index d020a3a5..2a20db81 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.scss +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.scss @@ -1,3 +1,5 @@ +@import "../../../../scss/vars"; + .admin-panel-stats { &__dropdown { @@ -7,5 +9,19 @@ &__toggle-list { margin-bottom: 20px; + + &-item { + + &-value { + font-size: $font-size--lg; + line-height: 80px; + } + + &-name { + font-size: $font-size--md; + line-height: 20px; + } + } } + } \ No newline at end of file From 30f1526f1ccb4e53406b96739e26a0f627ba40cf Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 15:47:13 -0300 Subject: [PATCH 13/25] Max Red - Added even even more more basic scss [skip ci] --- client/src/core-components/toggle-list.js | 1 + client/src/core-components/toggle-list.scss | 9 +++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/client/src/core-components/toggle-list.js b/client/src/core-components/toggle-list.js index e5e70fbc..d057a6f1 100644 --- a/client/src/core-components/toggle-list.js +++ b/client/src/core-components/toggle-list.js @@ -44,6 +44,7 @@ class ToggleList extends React.Component { let classes = { 'toggle-list__item': true, 'toggle-list__first-item': (index === 0), + 'toggle-list__last-item': (index === this.props.items.length - 1), 'toggle-list__selected': _.includes(this.getSelectedList(), index) }; diff --git a/client/src/core-components/toggle-list.scss b/client/src/core-components/toggle-list.scss index 7bf244cb..a016f8a3 100644 --- a/client/src/core-components/toggle-list.scss +++ b/client/src/core-components/toggle-list.scss @@ -8,14 +8,19 @@ width: 180px; height: 120px; display: inline-block; - transition: background-color 0.4s ease; + transition: box-shadow 0.2s ease-in-out; } &__selected { - background-color: $light-grey; + box-shadow: inset 0 -5px 40px 10px rgba(0, 0, 0, 0.05); } &__first-item { border: 1px $light-grey solid; + border-radius: 4px 0 0 4px; + } + + &__last-item { + border-radius: 0 4px 4px 0; } } From ebb3516df370135c153b63a31ac2cbaa4170e578 Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 17:20:48 -0300 Subject: [PATCH 14/25] 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" - } - ]*/ }; } }, From da928f9b6f022a46521191047c6454bd696eca76 Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 18:33:00 -0300 Subject: [PATCH 15/25] 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', From 371b7973b21fc1ea9b90d4d668c56919f138d367 Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 19:46:08 -0300 Subject: [PATCH 16/25] Max Red - Ivan changed some things (problems with userId in my-account) and I kept abstacting the component, and applied it to staff-editor [skip ci] --- client/src/app-components/stats-chart.js | 2 +- client/src/app-components/stats.js | 27 ++++++---- client/src/app-components/stats.scss | 53 +++++++++++++++++++ .../panel/dashboard/admin-panel-my-account.js | 1 + .../src/app/admin/panel/staff/staff-editor.js | 4 +- .../app/admin/panel/staff/staff-editor.scss | 9 ++++ client/src/core-components/toggle-list.js | 4 +- client/src/core-components/toggle-list.scss | 9 +++- client/src/data/fixtures/system-fixtures.js | 12 ++--- client/src/data/languages/en.js | 1 + client/src/reducers/session-reducer.js | 6 ++- 11 files changed, 106 insertions(+), 22 deletions(-) diff --git a/client/src/app-components/stats-chart.js b/client/src/app-components/stats-chart.js index ca6ddb1c..9b0d9111 100644 --- a/client/src/app-components/stats-chart.js +++ b/client/src/app-components/stats-chart.js @@ -64,7 +64,7 @@ class StatsChart extends React.Component { } getBorderWidth() { - return (this.props.period <= 90) ? 4 : 2; + return (this.props.period <= 90) ? 3 : 2; } getLabels() { diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js index 408376a1..c112cd7f 100644 --- a/client/src/app-components/stats.js +++ b/client/src/app-components/stats.js @@ -1,5 +1,6 @@ import React from 'react'; import _ from 'lodash'; +import classNames from 'classnames'; import i18n from 'lib-app/i18n'; import API from 'lib-app/api-call'; @@ -44,7 +45,7 @@ class Stats extends React.Component { render() { return ( -
+
@@ -52,17 +53,27 @@ class Stats extends React.Component { ); } + getClass() { + let classes = { + 'stats': true, + 'stats_staff': this.props.type === 'staff' + }; + + return classNames(classes); + } + getToggleListProps() { return { values: this.state.showed, - className: this.getClassPrefix() + '__toggle-list', + className: 'stats__toggle-list', onChange: this.onToggleListChange.bind(this), + type: this.props.type === 'general' ? 'default' : 'small', items: this.getStrokes().map((name) => { return { content: -
-
{this.state.stats[name]}
-
{i18n('CHART_' + name)}
+
+
{this.state.stats[name]}
+
{i18n('CHART_' + name)}
} }) @@ -96,7 +107,7 @@ class Stats extends React.Component { } ], onChange: this.onDropDownChange.bind(this), - className: this.getClassPrefix() + '__dropdown' + className: 'stats__dropdown' } } @@ -193,10 +204,6 @@ class Stats extends React.Component { }; } - 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}; } diff --git a/client/src/app-components/stats.scss b/client/src/app-components/stats.scss index e69de29b..f7539577 100644 --- a/client/src/app-components/stats.scss +++ b/client/src/app-components/stats.scss @@ -0,0 +1,53 @@ +@import '../scss/vars'; + +.stats { + + &__dropdown { + margin-left: auto; + margin-bottom: 20px; + } + + &__toggle-list { + margin-bottom: 20px; + + &-item { + + &-value { + font-size: $font-size--lg; + line-height: 80px; + } + + &-name { + font-size: $font-size--md; + line-height: 20px; + } + } + } + + &_staff { + .stats__dropdown { + margin-left: auto; + margin-bottom: 20px; + float: left; + } + + .stats__toggle-list { + margin-bottom: 20px; + float: right; + + &-item { + + &-value { + font-size: $font-size--md; + line-height: 40px; + } + + &-name { + font-size: $font-size--sm; + line-height: 20px; + } + } + } + } + +} \ No newline at end of file diff --git a/client/src/app/admin/panel/dashboard/admin-panel-my-account.js b/client/src/app/admin/panel/dashboard/admin-panel-my-account.js index 0cd165e3..165db779 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-my-account.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-my-account.js @@ -23,6 +23,7 @@ class AdminPanelMyAccount extends React.Component { getEditorProps() { return { myAccount: true, + staffId: this.props.userId, name: this.props.userName, email: this.props.userEmail, profilePic: this.props.userProfilePic, diff --git a/client/src/app/admin/panel/staff/staff-editor.js b/client/src/app/admin/panel/staff/staff-editor.js index fdca49f0..1581698f 100644 --- a/client/src/app/admin/panel/staff/staff-editor.js +++ b/client/src/app/admin/panel/staff/staff-editor.js @@ -6,6 +6,7 @@ import API from 'lib-app/api-call'; import SessionStore from 'lib-app/session-store'; import TicketList from 'app-components/ticket-list'; import AreYouSure from 'app-components/are-you-sure'; +import Stats from 'app-components/stats'; import Form from 'core-components/form'; import FormField from 'core-components/form-field'; @@ -97,7 +98,8 @@ class StaffEditor extends React.Component {
- ACTIVITY +
{i18n('ACTIVITY')}
+
diff --git a/client/src/app/admin/panel/staff/staff-editor.scss b/client/src/app/admin/panel/staff/staff-editor.scss index 8e29ab3c..2f601ddd 100644 --- a/client/src/app/admin/panel/staff/staff-editor.scss +++ b/client/src/app/admin/panel/staff/staff-editor.scss @@ -156,4 +156,13 @@ color: $dark-grey; } } + + &__activity { + + &-title { + margin-bottom: 10px; + text-align: left; + } + } + } \ No newline at end of file diff --git a/client/src/core-components/toggle-list.js b/client/src/core-components/toggle-list.js index d057a6f1..edf16ada 100644 --- a/client/src/core-components/toggle-list.js +++ b/client/src/core-components/toggle-list.js @@ -7,7 +7,8 @@ class ToggleList extends React.Component { items: React.PropTypes.arrayOf(React.PropTypes.shape({ content: React.PropTypes.node })), - onChange: React.PropTypes.func + onChange: React.PropTypes.func, + type: React.PropTypes.oneOf(['default', 'small']) }; state = { @@ -25,6 +26,7 @@ class ToggleList extends React.Component { getClass() { let classes = { 'toggle-list': true, + 'toggle-list_small': this.props.type == 'small', [this.props.className]: (this.props.className) }; diff --git a/client/src/core-components/toggle-list.scss b/client/src/core-components/toggle-list.scss index a016f8a3..1fdd82e5 100644 --- a/client/src/core-components/toggle-list.scss +++ b/client/src/core-components/toggle-list.scss @@ -12,7 +12,7 @@ } &__selected { - box-shadow: inset 0 -5px 40px 10px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 -5px 40px 10px rgba(0, 0, 0, 0.08); } &__first-item { @@ -23,4 +23,11 @@ &__last-item { border-radius: 0 4px 4px 0; } + + &_small { + .toggle-list__item { + height: 80px; + width: 120px; + } + } } diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index bf5b7c3d..658e4ad7 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -176,13 +176,13 @@ module.exports = [ for (let i = 0; i < k; i++) { if(generalVal){ DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 103) % 100, type: 'ASSIGN', general: generalVal, value: (Math.floor((Math.random() + 17) * i)).toString() }); DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 109) % 100, type: 'CLOSE', general: generalVal, value: (Math.floor((Math.random() + 12) * i )).toString() @@ -190,25 +190,25 @@ module.exports = [ } else { DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 107) % 100, type: 'COMMENT', general: generalVal, value: (Math.floor((Math.random() + 5) * i)).toString() }); DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 104) % 100, type: 'SIGNUP', general: generalVal, value: (Math.floor(Math.random() * (i - 180) * (i - 185) / 400)).toString() }); DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 103) % 100, type: 'CLOSE', general: generalVal, value: (Math.floor((Math.random() + 12) * i )).toString() }); DATA.push({ - date: '201701' + (i + 10) % 100, + date: '201701' + (i + 99) % 100, type: 'CREATE_TICKET', general: generalVal, value: (Math.floor((Math.random() + 7) * i)).toString() diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 94a18a34..c79a2ae8 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -153,6 +153,7 @@ export default { 'VERIFY_SUCCESS': 'User verified', 'VERIFY_FAILED': 'Could not verify', 'TICKET_ACTIVITY': 'Ticket Activity', + 'ACTIVITY': 'Activity', 'CHART_CREATE_TICKET': 'Tickets created', diff --git a/client/src/reducers/session-reducer.js b/client/src/reducers/session-reducer.js index be4323cc..c1eca34f 100644 --- a/client/src/reducers/session-reducer.js +++ b/client/src/reducers/session-reducer.js @@ -44,7 +44,8 @@ class SessionReducer extends Reducer { logged: true, pending: false, failed: false, - staff: payload.data.staff + staff: payload.data.staff, + userId: payload.data.userId }); } @@ -75,7 +76,8 @@ class SessionReducer extends Reducer { initDone: true, logged: true, pending: false, - failed: false + failed: false, + userId: payload.data.userId }); } From 8584be092441b6d16460f8e95c82d5f4fa228a0f Mon Sep 17 00:00:00 2001 From: ivan Date: Sun, 15 Jan 2017 20:10:02 -0300 Subject: [PATCH 17/25] Max Red - Changed colors [skip ci] --- client/src/app-components/stats-chart.js | 10 +++++----- client/src/app-components/stats.js | 3 --- client/src/app-components/stats.scss | 1 + 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/client/src/app-components/stats-chart.js b/client/src/app-components/stats-chart.js index 9b0d9111..f50d2d71 100644 --- a/client/src/app-components/stats-chart.js +++ b/client/src/app-components/stats-chart.js @@ -28,11 +28,11 @@ class StatsChart extends React.Component { let labels = this.getLabels(); let color = { - '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)', - 'ASSIGN': 'rgba(200, 200, 20, 0.8)' + 'CLOSE': 'rgba(150, 20, 20, 0.6)', + 'CREATE_TICKET': 'rgba(20, 150, 20, 0.6)', + 'SIGNUP': 'rgba(20, 20, 150, 0.6)', + 'COMMENT': 'rgba(20, 200, 200, 0.6)', + 'ASSIGN': 'rgba(20, 150, 20, 0.6)' }; let datasets = []; diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js index c112cd7f..e0b84f42 100644 --- a/client/src/app-components/stats.js +++ b/client/src/app-components/stats.js @@ -146,9 +146,6 @@ class Stats extends React.Component { API.call({ path: '/system/get-stats', data: this.getApiCallData(periodName) - /*data: { - period: periodName - }*/ }).then(this.onRetrieveSuccess.bind(this, period)); } diff --git a/client/src/app-components/stats.scss b/client/src/app-components/stats.scss index f7539577..c1557e9e 100644 --- a/client/src/app-components/stats.scss +++ b/client/src/app-components/stats.scss @@ -9,6 +9,7 @@ &__toggle-list { margin-bottom: 20px; + user-select: none; &-item { From 7c19ef17165adcef939220f835a819271546fd77 Mon Sep 17 00:00:00 2001 From: ivan Date: Mon, 16 Jan 2017 12:04:47 -0300 Subject: [PATCH 18/25] Max Red - Beautify code, replacing a for using .map [skip ci] --- client/src/app-components/stats-chart.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/client/src/app-components/stats-chart.js b/client/src/app-components/stats-chart.js index f50d2d71..5e4704b7 100644 --- a/client/src/app-components/stats-chart.js +++ b/client/src/app-components/stats-chart.js @@ -35,12 +35,9 @@ class StatsChart extends React.Component { 'ASSIGN': 'rgba(20, 150, 20, 0.6)' }; - let datasets = []; - - for (let i = 0; i < this.props.strokes.length; i++) { - let stroke = this.props.strokes[i]; - - let dataset = { + let strokes = this.props.strokes.slice(); + let datasets = strokes.map((stroke, index) => { + return { label: i18n('CHART_' + stroke.name), data: stroke.values.map((val) => val.value), fill: false, @@ -51,12 +48,10 @@ class StatsChart extends React.Component { pointHoverRadius: 3, lineTension: 0.2, pointHoverBackgroundColor: color[stroke.name], - hitRadius: this.hitRadius(i) - }; + hitRadius: this.hitRadius(index) + } + }); - datasets.push(dataset); - } - return { labels: labels, datasets: datasets From 9fbf53d586f2c36a6ff4f1dc52793a95fa8f4fba Mon Sep 17 00:00:00 2001 From: ivan Date: Mon, 16 Jan 2017 12:20:22 -0300 Subject: [PATCH 19/25] Max Red - Beautify code, replacing another for using .map [skip ci] --- client/src/app-components/stats.js | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js index e0b84f42..337bf446 100644 --- a/client/src/app-components/stats.js +++ b/client/src/app-components/stats.js @@ -88,24 +88,12 @@ class Stats extends React.Component { getDropDownProps() { return { - items: [ - { - content: 'Last 7 days', + items: ['Last 7 days', 'Last 30 days', 'Last 90 days', 'Last 365 days'].map((name) => { + return { + content: name, icon: '' - }, - { - content: 'Last 30 days', - icon: '' - }, - { - content: 'Last 90 days', - icon: '' - }, - { - content: 'Last 365 days', - icon: '' - } - ], + }; + }), onChange: this.onDropDownChange.bind(this), className: 'stats__dropdown' } From 1019b4ff967ec8477611d2a7ad567617b2c41dc1 Mon Sep 17 00:00:00 2001 From: ivan Date: Mon, 16 Jan 2017 12:39:07 -0300 Subject: [PATCH 20/25] Max Red - Delete redundant css [skip ci] --- .../panel/dashboard/admin-panel-stats.scss | 27 ------------------- 1 file changed, 27 deletions(-) diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats.scss b/client/src/app/admin/panel/dashboard/admin-panel-stats.scss index 2a20db81..e69de29b 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.scss +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.scss @@ -1,27 +0,0 @@ -@import "../../../../scss/vars"; - -.admin-panel-stats { - - &__dropdown { - margin-left: auto; - margin-bottom: 20px; - } - - &__toggle-list { - margin-bottom: 20px; - - &-item { - - &-value { - font-size: $font-size--lg; - line-height: 80px; - } - - &-name { - font-size: $font-size--md; - line-height: 20px; - } - } - } - -} \ No newline at end of file From 4fb1c32cbca114f2c515c340efdb49abaa0c4a86 Mon Sep 17 00:00:00 2001 From: ivan Date: Tue, 17 Jan 2017 15:09:00 -0300 Subject: [PATCH 21/25] Max Red - beautified code by replacing a for for a map (: [skip ci] --- client/src/app-components/stats-chart.js | 1 - client/src/app-components/stats.js | 12 ++++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/client/src/app-components/stats-chart.js b/client/src/app-components/stats-chart.js index 5e4704b7..1ed7480e 100644 --- a/client/src/app-components/stats-chart.js +++ b/client/src/app-components/stats-chart.js @@ -93,7 +93,6 @@ class StatsChart extends React.Component { } }; } - } diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js index 337bf446..a93e67dd 100644 --- a/client/src/app-components/stats.js +++ b/client/src/app-components/stats.js @@ -149,14 +149,14 @@ class Stats extends React.Component { 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; + result.data.map((item) => { + newStats[item.type] += item.value * 1; - newStrokes[ ID[result.data[i].type] ].values.push({ - date: result.data[i].date, - value: result.data[i].value * 1 + newStrokes[ ID[item.type] ].values.push({ + date: item.date, + value: item.value * 1 }); - } + }); this.setState({stats: newStats, strokes: newStrokes, period: realPeriod}); } From fda6e798a027682d93a6e6e7f541edfd7487386b Mon Sep 17 00:00:00 2001 From: ivan Date: Tue, 17 Jan 2017 15:26:18 -0300 Subject: [PATCH 22/25] Max Red - problems with displaying stats in admin-panel-my-account view, Ivan fixed it [skip ci] --- client/src/app/admin/panel/dashboard/admin-panel-stats.js | 2 +- client/src/data/languages/en.js | 1 + client/src/reducers/session-reducer.js | 4 +++- 3 files changed, 5 insertions(+), 2 deletions(-) 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 5e992ffb..fbbd9f7e 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -9,7 +9,7 @@ class AdminPanelStats extends React.Component { render() { return (
-
+
); diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index c79a2ae8..3c086c8a 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -222,6 +222,7 @@ export default { 'SYSTEM_PREFERENCES_DESCRIPTION': 'Here you can edit the preferences of the system.', 'VERIFY_SUCCESS_DESCRIPTION': 'You user has been verified correctly. You can log in now.', 'VERIFY_FAILED_DESCRIPTION': 'The verification could not be done.', + 'TICKET_ACTIVITY_DESCRIPTION': 'Here you can view ', //ERRORS 'EMAIL_OR_PASSWORD': 'Email or password invalid', diff --git a/client/src/reducers/session-reducer.js b/client/src/reducers/session-reducer.js index c1eca34f..a51d7e67 100644 --- a/client/src/reducers/session-reducer.js +++ b/client/src/reducers/session-reducer.js @@ -119,6 +119,7 @@ class SessionReducer extends Reducer { onSessionChecked(state) { let userData = sessionStore.getUserData(); + let userId = sessionStore.getSessionData().userId; return _.extend({}, state, { initDone: true, @@ -129,7 +130,8 @@ class SessionReducer extends Reducer { userProfilePic: userData.profilePic, userLevel: userData.level, userDepartments: userData.departments, - userTickets: userData.tickets + userTickets: userData.tickets, + userId: userId }); } From f1c82dc38445915b1bd17c168376453959ead179 Mon Sep 17 00:00:00 2001 From: ivan Date: Tue, 17 Jan 2017 15:50:33 -0300 Subject: [PATCH 23/25] Max Red - beautified code a little bit more replacing another for for another map [skip ci] --- client/src/app-components/stats-chart.js | 17 +++++++++-------- client/src/app/admin/panel/admin-panel-menu.js | 2 +- .../admin/panel/dashboard/admin-panel-stats.js | 2 +- client/src/data/languages/en.js | 8 ++++---- 4 files changed, 15 insertions(+), 14 deletions(-) diff --git a/client/src/app-components/stats-chart.js b/client/src/app-components/stats-chart.js index 1ed7480e..ca1a2d49 100644 --- a/client/src/app-components/stats-chart.js +++ b/client/src/app-components/stats-chart.js @@ -66,14 +66,15 @@ class StatsChart extends React.Component { let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; let labels = []; - for (let i = 0; i < this.props.period; i++) { - if (!this.props.strokes.length){ - labels.push(''); - continue; - } - let firstList = this.props.strokes[0]; - let idx = firstList.values[i].date.slice(4, 6) - 1; - labels.push( firstList.values[i].date.slice(6, 8) + ' ' + months[idx]); + if (!this.props.strokes.length) { + labels = Array.from('x'.repeat(this.props.period)); + } + else { + labels = this.props.strokes[0].values.map((item) => { + let idx = item.date.slice(4, 6) - 1; + + return item.date.slice(6, 8) + ' ' + months[idx]; + }); } return labels; diff --git a/client/src/app/admin/panel/admin-panel-menu.js b/client/src/app/admin/panel/admin-panel-menu.js index 7112320d..976d7c96 100644 --- a/client/src/app/admin/panel/admin-panel-menu.js +++ b/client/src/app/admin/panel/admin-panel-menu.js @@ -99,7 +99,7 @@ class AdminPanelMenu extends React.Component { level: 1, items: this.getItemsByFilteredByLevel([ { - name: i18n('TICKET_STATS'), + name: i18n('STATISTICS'), path: '/admin/panel/stats', level: 1 }, 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 fbbd9f7e..c5452e50 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/client/src/app/admin/panel/dashboard/admin-panel-stats.js @@ -9,7 +9,7 @@ class AdminPanelStats extends React.Component { render() { return (
-
+
); diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 3c086c8a..b72a8e69 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -36,7 +36,7 @@ export default { 'DASHBOARD': 'Dashboard', 'USERS': 'Users', 'SETTINGS': 'Settings', - 'TICKET_STATS': 'Ticket Stats', + 'STATISTICS': 'Statistics', 'LAST_ACTIVITY': 'Last Activity', 'MY_TICKETS': 'My Tickets', 'NEW_TICKETS': 'New Tickets', @@ -152,7 +152,7 @@ export default { 'ALL_NOTIFICATIONS': 'All notifications', 'VERIFY_SUCCESS': 'User verified', 'VERIFY_FAILED': 'Could not verify', - 'TICKET_ACTIVITY': 'Ticket Activity', + 'STATISTICS': 'Statistics', 'ACTIVITY': 'Activity', @@ -211,7 +211,7 @@ export default { 'ADD_ARTICLE_DESCRIPTION': 'Here you can add an article that will be available for every user. It will be added inside the category {category}.', 'LIST_ARTICLES_DESCRIPTION': 'This is a list of articles that includes information about our services.', 'ADD_TOPIC_DESCRIPTION': 'Here you can add a topic that works as a category for articles.', - 'DELETE_ARTICLE_DESCRIPTION': 'You\'re going to delete this article for ever.', + 'DELETE_ARTICLE_DESCRIPTION': 'You\'re going to delete this article forever.', 'STAFF_MEMBERS_DESCRIPTION': 'Here you can see who are your staff members.', 'ADD_STAFF_DESCRIPTION': 'Here you can add staff members to your teams.', 'EDIT_STAFF_DESCRIPTION': 'Here you can edit information about a staff member.', @@ -222,7 +222,7 @@ export default { 'SYSTEM_PREFERENCES_DESCRIPTION': 'Here you can edit the preferences of the system.', 'VERIFY_SUCCESS_DESCRIPTION': 'You user has been verified correctly. You can log in now.', 'VERIFY_FAILED_DESCRIPTION': 'The verification could not be done.', - 'TICKET_ACTIVITY_DESCRIPTION': 'Here you can view ', + 'STATISTICS_DESCRIPTION': 'Here you can view statistics related to tickets and signups.', //ERRORS 'EMAIL_OR_PASSWORD': 'Email or password invalid', From 26d26320c927a26b426caf2c0bbd2c36069d8c8c Mon Sep 17 00:00:00 2001 From: ivan Date: Tue, 17 Jan 2017 15:52:12 -0300 Subject: [PATCH 24/25] Max Red - deleted console.logs from system-fixtures [skip ci] --- client/src/data/fixtures/system-fixtures.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index 658e4ad7..51f64179 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -216,10 +216,6 @@ module.exports = [ } } - console.log('DATA:'); - console.log(DATA); - console.log(k); - return { status: "success", data: DATA From bce56d7b0503c6df80804b7993dc7818b1dff467 Mon Sep 17 00:00:00 2001 From: ivan Date: Tue, 17 Jan 2017 15:53:43 -0300 Subject: [PATCH 25/25] Max Red - make toggle list unselectable and not able to change cursor view [skip ci] --- client/src/core-components/toggle-list.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/src/core-components/toggle-list.scss b/client/src/core-components/toggle-list.scss index 1fdd82e5..1ba34f67 100644 --- a/client/src/core-components/toggle-list.scss +++ b/client/src/core-components/toggle-list.scss @@ -9,6 +9,8 @@ height: 120px; display: inline-block; transition: box-shadow 0.2s ease-in-out; + user-select: none; + cursor: default; } &__selected {