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 976d2129..c4450c81 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,11 @@ import React from 'react'; import { connect } from 'react-redux'; -import { Bar, HorizontalBar } from 'react-chartjs-2'; -import date from 'lib-app/date'; import API from 'lib-app/api-call'; import i18n from 'lib-app/i18n'; -import StatCard from 'app-components/stat-card'; +import statsUtils from 'lib-app/stats-utils'; import Header from 'core-components/header'; -import Tooltip from 'core-components/tooltip'; import Form from 'core-components/form'; import FormField from 'core-components/form-field'; import Icon from 'core-components/icon'; @@ -21,7 +18,7 @@ class AdminPanelStats extends React.Component { state = { loading: true, rawForm: { - dateRange: this.getInitialDateRange(), + dateRange: statsUtils.getInitialDateRange(), departments: [], owners: [], tags: [] @@ -29,29 +26,19 @@ class AdminPanelStats extends React.Component { ticketData: {} }; - getInitialDateRange() { - let firstDayOfMonth = new Date(); - firstDayOfMonth.setDate(1); - firstDayOfMonth.setHours(0); - firstDayOfMonth.setMinutes(0); - let todayAtNight = new Date(); - todayAtNight.setHours(23); - todayAtNight.setMinutes(59); - return { - startDate: date.getFullDate(firstDayOfMonth), - endDate: date.getFullDate(todayAtNight) - } - } - componentDidMount() { - this.retrieveStats(); + statsUtils.retrieveStats({ + rawForm: this.state.rawForm, + tags: this.props.tags + }).then(({data}) => { + this.setState({ticketData: data, loading: false}); + }).catch((error) => { + if (showLogs) console.error('ERROR: ', error); + }); } render() { - const { - loading, - rawForm - } = this.state; + const { loading, rawForm, ticketData } = this.state; return (
@@ -90,98 +77,20 @@ class AdminPanelStats extends React.Component {
- {loading ?
: this.renderStatistics()} + { + loading ? +
: + statsUtils.renderStatistics({showStatCards: true, showStatsByHours: true, showStatsByDays: true, ticketData}) + } ) } - - renderStatistics() { - const primaryBlueWithTransparency = (alpha) => `rgba(32, 184, 197, ${alpha})`; - const ticketsByHoursChartData = { - labels: Array.from(Array(24).keys()), - datasets: [ - { - label: 'Created Tickets by Hour', - backgroundColor: primaryBlueWithTransparency(0.2), - borderColor: primaryBlueWithTransparency(1), - borderWidth: 1, - hoverBackgroundColor: primaryBlueWithTransparency(0.4), - hoverBorderColor: primaryBlueWithTransparency(1), - data: this.state.ticketData.created_by_hour - } - ] - }; - - const primaryGreenWithTransparency = (alpha) => `rgba(130, 202, 156, ${alpha})`; - const ticketsByWeekdayChartData = { - labels: [ - i18n('MONDAY'), - i18n('TUESDAY'), - i18n('WEDNESDAY'), - i18n('THURSDAY'), - i18n('FRIDAY'), - i18n('SATURDAY'), - i18n('SUNDAY') - ], - datasets: [ - { - label: 'Created Tickets by Weekday', - backgroundColor: primaryGreenWithTransparency(0.2), - borderColor: primaryGreenWithTransparency(1), - borderWidth: 1, - hoverBackgroundColor: primaryGreenWithTransparency(0.4), - hoverBorderColor: primaryGreenWithTransparency(1), - data: this.state.ticketData.created_by_weekday - } - ] - } - - return ( -
- {this.renderStatCards()} - {/* Weird, but if you only set the legend here, it changes that of the HorizontalBar next too*/} - -
- ); - } - - renderStatCards() { - const {created, open, closed, instant, reopened} = this.state.ticketData; - - return ( -
- - - - - -
- ) - } - - getStatsOptions(axis) { - return { - scales: { - [`${axis}Axes`]: [{ - ticks: { - beginAtZero: true - } - }] - } - } - } clearFormValues(event) { event.preventDefault(); this.setState({ rawForm: { - dateRange: this.getInitialDateRange(), + dateRange: statsUtils.getInitialDateRange(), departments: [], owners: [], tags: [] @@ -199,10 +108,6 @@ class AdminPanelStats extends React.Component { }); } - getSelectedTagIds() { - return this.props.tags.filter(tag => _.includes(this.state.rawForm.tags, tag.name)).map(tag => tag.id); - } - getStaffItems() { const getStaffProfilePic = (staff) => { return staff.profilePic ? API.getFileLink(staff.profilePic) : (API.getURL() + '/images/profile.png'); @@ -252,30 +157,19 @@ class AdminPanelStats extends React.Component { }); } - retrieveStats() { - const { rawForm } = this.state; - const { startDate, endDate } = rawForm.dateRange; - API.call({ - path: '/system/get-stats', - data: { - dateRange: "[" + startDate.toString() + "," + endDate.toString() + "]", - departments: "[" + rawForm.departments.map(department => department.id) + "]", - owners: "[" + rawForm.owners.map(owner => owner.id) + "]", - tags: "[" + this.getSelectedTagIds() + "]" - } - }).then(({data}) => { - this.setState({ticketData: data, loading: false}); - }).catch((error) => { - if (showLogs) console.error('ERROR: ', error); - }) - } - onFormChange(newFormState) { this.setState({rawForm: newFormState}); } onFormSubmit() { - this.retrieveStats(); + statsUtils.retrieveStats({ + rawForm: this.state.rawForm, + tags: this.props.tags + }).then(({data}) => { + this.setState({ticketData: data, loading: false}); + }).catch((error) => { + if (showLogs) console.error('ERROR: ', error); + }); } } diff --git a/client/src/app/admin/panel/staff/staff-editor.js b/client/src/app/admin/panel/staff/staff-editor.js index 3cc0cfa5..09acc304 100644 --- a/client/src/app/admin/panel/staff/staff-editor.js +++ b/client/src/app/admin/panel/staff/staff-editor.js @@ -10,7 +10,6 @@ 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'; @@ -19,6 +18,7 @@ import Message from 'core-components/message'; import Button from 'core-components/button'; import Icon from 'core-components/icon'; import Loading from 'core-components/loading'; +import statsUtils from 'lib-app/stats-utils'; const INITIAL_API_VALUE = { page: 1, @@ -52,30 +52,38 @@ class StaffEditor extends React.Component { department: undefined, departments: this.getUserDepartments(), closedTicketsShown: false, - sendEmailOnNewTicket: this.props.sendEmailOnNewTicket + sendEmailOnNewTicket: this.props.sendEmailOnNewTicket, + rawForm: { + dateRange: statsUtils.getInitialDateRange(), + departments: [], + owners: [], + tags: [] + }, + ticketData: {} }; componentDidMount() { + const departmentsAssigned = SessionStore.getDepartments().filter((_department, index) => this.state.departments.includes(index)); + const departmentsAssignedId = departmentsAssigned.map(department => department.id); + this.retrieveStaffMembers(); this.retrieveTicketsAssigned(INITIAL_API_VALUE); + statsUtils.retrieveStats({ + rawForm: this.state.rawForm, + departments: departmentsAssignedId + }).then(({data}) => { + this.setState({ + ticketData: data, + loading: false + }); + }).catch((error) => { + if (showLogs) console.error('ERROR: ', error); + }); } render() { - const { - name, - level, - profilePic, - myAccount, - staffId, - staffList, - userId - } = this.props; - const { - message, - tickets, - loadingPicture, - email - } = this.state; + const { name, level, profilePic, myAccount, staffId, staffList, userId } = this.props; + const { message, tickets, loadingPicture, email } = this.state; const myData = _.filter(staffList, {id: `${staffId}`})[0]; return ( @@ -231,11 +239,17 @@ class StaffEditor extends React.Component { } renderStaffStats() { - // return ( - // - // ); + const { loading, ticketData } = this.state; - return null; + return ( +
+ { + loading ? +
: + statsUtils.renderStatistics({showStatCards: true, showStatsByHours: true, ticketData}) + } +
+ ) } renderTickets() { @@ -276,16 +290,8 @@ class StaffEditor extends React.Component { } getTicketListProps() { - const { - staffId, - departments - } = this.props; - const { - tickets, - page, - pages, - closedTicketsShown - } = this.state; + const { staffId, departments } = this.props; + const { tickets, page, pages, closedTicketsShown } = this.state; return { type: 'secondary', @@ -344,11 +350,7 @@ class StaffEditor extends React.Component { } onSubmit(eventType, form) { - const { - myAccount, - staffId, - onChange - } = this.props; + const { myAccount, staffId, onChange } = this.props; let departments; if(form.departments) { @@ -372,6 +374,18 @@ class StaffEditor extends React.Component { window.scrollTo(0,0); this.setState({message: eventType}); + const departmentsAssigned = SessionStore.getDepartments().filter((_department, index) => this.state.departments.includes(index)); + const departmentsAssignedId = departmentsAssigned.map(department => department.id); + + statsUtils.retrieveStats({ + rawForm: this.state.rawForm, + departments: departmentsAssignedId + }).then(({data}) => { + this.setState({ticketData: data, loading: false}); + }).catch((error) => { + if (showLogs) console.error('ERROR: ', error); + }); + onChange && onChange(); }).catch(() => { window.scrollTo(0,0); @@ -380,10 +394,8 @@ class StaffEditor extends React.Component { } onDeleteClick() { - const { - staffId, - onDelete - } = this.props; + const { staffId, onDelete } = this.props; + return API.call({ path: '/staff/delete', data: { @@ -396,11 +408,8 @@ class StaffEditor extends React.Component { } onProfilePicChange(event) { - const { - myAcount, - staffId, - onChange - } = this.props; + const { myAcount, staffId, onChange } = this.props; + this.setState({ loadingPicture: true }); @@ -466,10 +475,7 @@ class StaffEditor extends React.Component { } onClosedTicketsShownChange() { - const { - department, - closedTicketsShown - } = this.state; + const { department, closedTicketsShown } = this.state; const newClosedValue = !closedTicketsShown; this.setState({ diff --git a/client/src/lib-app/stats-utils.js b/client/src/lib-app/stats-utils.js new file mode 100644 index 00000000..f72879a1 --- /dev/null +++ b/client/src/lib-app/stats-utils.js @@ -0,0 +1,124 @@ +import API from 'lib-app/api-call'; +import i18n from 'lib-app/i18n'; +import StatCard from 'app-components/stat-card'; +import { Bar, HorizontalBar } from 'react-chartjs-2'; +import date from 'lib-app/date'; + +export default { + renderStatistics({showStatCards, showStatsByHours, showStatsByDays, ticketData}) { + const primaryBlueWithTransparency = (alpha) => `rgba(32, 184, 197, ${alpha})`; + const ticketsByHoursChartData = { + labels: Array.from(Array(24).keys()), + datasets: [ + { + label: 'Created Tickets by Hour', + backgroundColor: primaryBlueWithTransparency(0.2), + borderColor: primaryBlueWithTransparency(1), + borderWidth: 1, + hoverBackgroundColor: primaryBlueWithTransparency(0.4), + hoverBorderColor: primaryBlueWithTransparency(1), + data: ticketData.created_by_hour + } + ] + }; + + const primaryGreenWithTransparency = (alpha) => `rgba(130, 202, 156, ${alpha})`; + const ticketsByWeekdayChartData = { + labels: [ + i18n('MONDAY'), + i18n('TUESDAY'), + i18n('WEDNESDAY'), + i18n('THURSDAY'), + i18n('FRIDAY'), + i18n('SATURDAY'), + i18n('SUNDAY') + ], + datasets: [ + { + label: 'Created Tickets by Weekday', + backgroundColor: primaryGreenWithTransparency(0.2), + borderColor: primaryGreenWithTransparency(1), + borderWidth: 1, + hoverBackgroundColor: primaryGreenWithTransparency(0.4), + hoverBorderColor: primaryGreenWithTransparency(1), + data: ticketData.created_by_weekday + } + ] + }; + + return ( +
+ {showStatCards ? this.renderStatCards(ticketData) : null} + { + showStatsByHours ? + : + null + } + { + showStatsByDays ? + : + null + } +
+ ); + }, + + getInitialDateRange() { + let firstDayOfMonth = new Date(); + firstDayOfMonth.setDate(1); + firstDayOfMonth.setHours(0); + firstDayOfMonth.setMinutes(0); + let todayAtNight = new Date(); + todayAtNight.setHours(23); + todayAtNight.setMinutes(59); + + return { + startDate: date.getFullDate(firstDayOfMonth), + endDate: date.getFullDate(todayAtNight) + }; + } , + + getStatsOptions(axis) { + return { + scales: { + [`${axis}Axes`]: [{ + ticks: { + beginAtZero: true + } + }] + } + }; + }, + + getSelectedTagIds(rawForm, tags) { + return tags.filter(tag => _.includes(rawForm.tags, tag.name)).map(tag => tag.id); + }, + + renderStatCards(ticketData) { + const {created, open, closed, instant, reopened} = ticketData; + + return ( +
+ + + + + +
+ ); + }, + + retrieveStats({ rawForm, tags, departments}) { + const { startDate, endDate } = rawForm.dateRange; + + return API.call({ + path: '/system/get-stats', + data: { + dateRange: "[" + startDate.toString() + "," + endDate.toString() + "]", + departments: departments ? JSON.stringify(departments) : "[" + rawForm.departments.map(department => department.id) + "]", + owners: "[" + rawForm.owners.map(owner => owner.id) + "]", + tags: tags ? "[" + this.getSelectedTagIds(rawForm, tags) + "]" : "[]" + } + }); + } +}