diff --git a/client/package.json b/client/package.json index 21e3f053..0033b6df 100644 --- a/client/package.json +++ b/client/package.json @@ -54,6 +54,7 @@ }, "dependencies": { "app-module-path": "^1.0.3", + "chart.js": "^2.4.0", "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-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-components/stats-chart.js b/client/src/app-components/stats-chart.js new file mode 100644 index 00000000..ca1a2d49 --- /dev/null +++ b/client/src/app-components/stats-chart.js @@ -0,0 +1,100 @@ +import React from 'react'; +import {Line} from 'react-chartjs-2'; + +import i18n from 'lib-app/i18n'; + +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.string, + value: React.PropTypes.number + })) + })), + period: React.PropTypes.number + }; + + render() { + return ( +
+ +
+ ); + } + + getChartData() { + let labels = this.getLabels(); + + let color = { + '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 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, + borderWidth: this.getBorderWidth(), + borderColor: color[stroke.name], + pointBorderColor: color[stroke.name], + pointRadius: 0, + pointHoverRadius: 3, + lineTension: 0.2, + pointHoverBackgroundColor: color[stroke.name], + hitRadius: this.hitRadius(index) + } + }); + + return { + labels: labels, + datasets: datasets + }; + } + + getBorderWidth() { + return (this.props.period <= 90) ? 3 : 2; + } + + getLabels() { + let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + let labels = []; + + 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; + } + + hitRadius(index) { + if (this.props.period <= 7) return 20; + if (this.props.period <= 30) return 15; + if (this.props.period <= 90) return 10; + return 3; + } + + getChartOptions() { + return { + legend: { + display: false + } + }; + } +} + + +export default StatsChart; \ No newline at end of file diff --git a/client/src/app-components/stats.js b/client/src/app-components/stats.js new file mode 100644 index 00000000..a93e67dd --- /dev/null +++ b/client/src/app-components/stats.js @@ -0,0 +1,197 @@ +import React from 'react'; +import _ from 'lodash'; +import classNames from 'classnames'; + +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']; +const ID = { + 'CREATE_TICKET': 0, + 'ASSIGN': 0, + 'CLOSE': 1, + 'SIGNUP': 2, + 'COMMENT': 3 +}; + +class Stats extends React.Component { + + static propTypes = { + type: React.PropTypes.string, + staffId: React.PropTypes.number + }; + + state = { + stats: this.getDefaultStats(), + strokes: this.getStrokes().map((name) => { + return { + name: name, + values: [] + } + }), + showed: [0], + period: 0 + }; + + componentDidMount() { + this.retrieve(7); + } + + render() { + return ( +
+ + + +
+ ); + } + + getClass() { + let classes = { + 'stats': true, + 'stats_staff': this.props.type === 'staff' + }; + + return classNames(classes); + } + + getToggleListProps() { + return { + values: this.state.showed, + 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)}
+
+ } + }) + }; + } + + onToggleListChange(event) { + this.setState({ + showed: event.target.value + }); + } + + getDropDownProps() { + return { + items: ['Last 7 days', 'Last 30 days', 'Last 90 days', 'Last 365 days'].map((name) => { + return { + content: name, + icon: '' + }; + }), + onChange: this.onDropDownChange.bind(this), + className: '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]) + }; + } + + 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: this.getApiCallData(periodName) + }).then(this.onRetrieveSuccess.bind(this, period)); + } + + onRetrieveSuccess(period, result) { + let newStats = this.getDefaultStats(); + + let newStrokes = this.getStrokes().map((name) => { + return { + name: name, + values: [] + }; + }); + + let realPeriod = result.data.length / this.getStrokes().length; + + result.data.map((item) => { + newStats[item.type] += item.value * 1; + + newStrokes[ ID[item.type] ].values.push({ + date: item.date, + value: item.value * 1 + }); + }); + + this.setState({stats: newStats, strokes: newStrokes, period: realPeriod}); + } + + getShowedArray() { + let showed = this.getStrokes().map(() => false); + + for (let i = 0; i < showed.length; i++) { + showed[this.state.showed[i]] = true; + } + + 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 + }; + } + + 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/app-components/stats.scss b/client/src/app-components/stats.scss new file mode 100644 index 00000000..c1557e9e --- /dev/null +++ b/client/src/app-components/stats.scss @@ -0,0 +1,54 @@ +@import '../scss/vars'; + +.stats { + + &__dropdown { + margin-left: auto; + margin-bottom: 20px; + } + + &__toggle-list { + margin-bottom: 20px; + user-select: none; + + &-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/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-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/dashboard/admin-panel-stats.js b/client/src/app/admin/panel/dashboard/admin-panel-stats.js index 020264e4..c5452e50 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,20 @@ import React from 'react'; +import i18n from 'lib-app/i18n'; +import Stats from 'app-components/stats'; +import Header from 'core-components/header'; + class AdminPanelStats extends React.Component { render() { return ( -
- /admin/panel/stats +
+
+
); } + } export default AdminPanelStats; \ No newline at end of file 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..e69de29b 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/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index 5244975c..68042fd4 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-2").Line; const _ = require('lodash'); const DocumentTitle = require('react-document-title'); @@ -16,8 +17,42 @@ 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"], + datasets: [ + { + label: "My Second dataset", + fill: false, + pointColor: "rgba(151,187,205,1)", + pointStrokeColor: "#fff", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgba(151,187,205,1)", + borderWidth: 3, + data: rand(32, 100, 6), + pointRadius: 0 + }, + { + label: "My Second dataset", + fill: false, + pointColor: "rgba(151,187,205,1)", + pointStrokeColor: "#fff", + pointHighlightFill: "#fff", + pointHighlightStroke: "rgba(151,187,205,1)", + borderWidth: 3, + data: rand(32, 100, 6) + } + ] +}; +let chartOptions = {}; let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}]; let secondaryMenuItems = [ {content: 'My Tickets', icon: 'file-text'}, @@ -176,6 +211,12 @@ let DemoPage = React.createClass({ render: ( ) + }, + { + title: 'LineChart', + render: ( + + ) } ], diff --git a/client/src/core-components/toggle-list.js b/client/src/core-components/toggle-list.js index 8dba39a7..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 = { @@ -16,12 +17,22 @@ class ToggleList extends React.Component { render() { return ( -
+
{this.props.items.map(this.renderItem.bind(this))}
); } + getClass() { + let classes = { + 'toggle-list': true, + 'toggle-list_small': this.props.type == 'small', + [this.props.className]: (this.props.className) + }; + + return classNames(classes); + } + renderItem(obj, index) { return ( @@ -35,16 +46,17 @@ 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__last-item': (index === this.props.items.length - 1), + '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 +70,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/core-components/toggle-list.scss b/client/src/core-components/toggle-list.scss index 7bf244cb..1ba34f67 100644 --- a/client/src/core-components/toggle-list.scss +++ b/client/src/core-components/toggle-list.scss @@ -8,14 +8,28 @@ width: 180px; height: 120px; display: inline-block; - transition: background-color 0.4s ease; + transition: box-shadow 0.2s ease-in-out; + user-select: none; + cursor: default; } &__selected { - background-color: $light-grey; + box-shadow: inset 0 -5px 40px 10px rgba(0, 0, 0, 0.08); } &__first-item { border: 1px $light-grey solid; + border-radius: 4px 0 0 4px; + } + + &__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 ddff91bd..62878719 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/client/src/data/fixtures/system-fixtures.js @@ -166,6 +166,71 @@ module.exports = [ }; } }, + { + path: '/system/get-stats', + time: 200, + response: function(_data) { + let generalVal = _data.staffId; + + let ID = { + 'WEEK': 7, + 'MONTH': 30, + 'QUARTER': 90, + 'YEAR': 365 + }; + + let k = ID[_data.period]; + let DATA = []; + + for (let i = 0; i < k; i++) { + if(generalVal){ + DATA.push({ + date: '201701' + (i + 103) % 100, + type: 'ASSIGN', + general: generalVal, + value: (Math.floor((Math.random() + 17) * i)).toString() + }); + DATA.push({ + date: '201701' + (i + 109) % 100, + type: 'CLOSE', + general: generalVal, + value: (Math.floor((Math.random() + 12) * i )).toString() + }); + } + else { + DATA.push({ + date: '201701' + (i + 107) % 100, + type: 'COMMENT', + general: generalVal, + value: (Math.floor((Math.random() + 5) * i)).toString() + }); + DATA.push({ + 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 + 103) % 100, + type: 'CLOSE', + general: generalVal, + value: (Math.floor((Math.random() + 12) * i )).toString() + }); + DATA.push({ + date: '201701' + (i + 99) % 100, + type: 'CREATE_TICKET', + general: generalVal, + value: (Math.floor((Math.random() + 7) * i)).toString() + }); + } + } + + return { + status: "success", + data: DATA + }; + } + }, { path: '/system/get-logs', time: 300, diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index a7ec1983..da83ceb7 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,6 +152,15 @@ export default { 'ALL_NOTIFICATIONS': 'All notifications', 'VERIFY_SUCCESS': 'User verified', 'VERIFY_FAILED': 'Could not verify', + 'STATISTICS': 'Statistics', + 'ACTIVITY': 'Activity', + + + 'CHART_CREATE_TICKET': 'Tickets created', + 'CHART_CLOSE': 'Tickets closed', + 'CHART_SIGNUP': 'Signups', + 'CHART_COMMENT': 'Replies', + 'CHART_ASSIGN': 'Assigned', //ACTIVITIES 'ACTIVITY_COMMENT': 'commented ticket', @@ -202,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.', @@ -213,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.', + 'STATISTICS_DESCRIPTION': 'Here you can view statistics related to tickets and signups.', //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 be4323cc..a51d7e67 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 }); } @@ -117,6 +119,7 @@ class SessionReducer extends Reducer { onSessionChecked(state) { let userData = sessionStore.getUserData(); + let userId = sessionStore.getSessionData().userId; return _.extend({}, state, { initDone: true, @@ -127,7 +130,8 @@ class SessionReducer extends Reducer { userProfilePic: userData.profilePic, userLevel: userData.level, userDepartments: userData.departments, - userTickets: userData.tickets + userTickets: userData.tickets, + userId: userId }); }