tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merged in os-146-add-stats-component (pull request #124) 

Os 146 add stats component
This commit is contained in:
Ivan Diaz 2017-01-17 16:54:04 -03:00
parent 585159e84c bce56d7b05
commit d3ecbacf2d
16 changed files with 538 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json
View File

@ -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",

100
client/src/app-components/stats-chart.js Normal file
View File

@ -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 (
<div>
<Line data={this.getChartData()} options={this.getChartOptions()} width={800} height={400} redraw/>
</div>
);
}
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;

197
client/src/app-components/stats.js Normal file
View File

@ -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 (
<div className={this.getClass()}>
<DropDown {...this.getDropDownProps()}/>
<ToggleList {...this.getToggleListProps()} />
<StatsChart {...this.getStatsChartProps()} />
</div>
);
}
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:
<div className="stats__toggle-list-item">
<div className="stats__toggle-list-item-value">{this.state.stats[name]}</div>
<div className="stats__toggle-list-item-name">{i18n('CHART_' + name)}</div>
</div>
}
})
};
}
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;

54
client/src/app-components/stats.scss Normal file
View File

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

2
client/src/app/admin/panel/admin-panel-menu.js
View File

@ -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
},

1
client/src/app/admin/panel/dashboard/admin-panel-my-account.js
View File

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

10
client/src/app/admin/panel/dashboard/admin-panel-stats.js
View File

@ -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 (
<div>
/admin/panel/stats
<div class="admin-panel-stats">
<Header title={i18n('STATISTICS')} description={i18n('STATISTICS_DESCRIPTION')}/>
<Stats type="general"/>
</div>
);
}
}
export default AdminPanelStats;

0
client/src/app/admin/panel/dashboard/admin-panel-stats.scss Normal file
View File

4
client/src/app/admin/panel/staff/staff-editor.js
View File

@ -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 {
</div>
<div className="col-md-8">
<div className="staff-editor__activity">
ACTIVITY
<div className="staff-editor__activity-title">{i18n('ACTIVITY')}</div>
<Stats staffId={this.props.staffId} type="staff"/>
</div>
</div>
</div>

9
client/src/app/admin/panel/staff/staff-editor.scss
View File

@ -156,4 +156,13 @@
color: $dark-grey;
}
}
&__activity {
&-title {
margin-bottom: 10px;
text-align: left;
}
}
}

43
client/src/app/demo/components-demo-page.js
View File

@ -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: (
<InfoTooltip type="warning" text="No staff member is assigned to this department." />
)
},
{
title: 'LineChart',
render: (
<LineChart data={chartData} options={chartOptions} width="600" height="250" />
)
}
],

26
client/src/core-components/toggle-list.js
View File

@ -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 (
<div className="toggle-list">
<div className={this.getClass()}>
{this.props.items.map(this.renderItem.bind(this))}
</div>
);
}
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;

18
client/src/core-components/toggle-list.scss
View File

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

65
client/src/data/fixtures/system-fixtures.js
View File

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

14
client/src/data/languages/en.js
View File

@ -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',

10
client/src/reducers/session-reducer.js
View File

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