[DEV-153] Fix activity (#1080)
* fix spanish translations * fix activity * fix activity * improve coding * improve coding * improve coding * improve coding
This commit is contained in:
Joel Elias Méndez
GitHub
parent
edddc8d2c5
commit
b9f935df5f
|
|
@ -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 (
|
||||
<div className="admin-panel-stats">
|
||||
|
|
@ -90,98 +77,20 @@ class AdminPanelStats extends React.Component {
|
|||
<span className="separator" />
|
||||
</div>
|
||||
</div>
|
||||
{loading ? <div className="admin-panel-stats__loading"><Loading backgrounded size="large" /></div> : this.renderStatistics()}
|
||||
{
|
||||
loading ?
|
||||
<div className="admin-panel-stats__loading"><Loading backgrounded size="large" /></div> :
|
||||
statsUtils.renderStatistics({showStatCards: true, showStatsByHours: true, showStatsByDays: true, ticketData})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 (
|
||||
<div>
|
||||
{this.renderStatCards()}
|
||||
<Bar
|
||||
options={this.getStatsOptions('y')}
|
||||
data={ticketsByHoursChartData}
|
||||
legend={{onClick: null}} /> {/* Weird, but if you only set the legend here, it changes that of the HorizontalBar next too*/}
|
||||
<HorizontalBar
|
||||
options={this.getStatsOptions('x')}
|
||||
data={ticketsByWeekdayChartData}
|
||||
legend={{onClick: null}} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderStatCards() {
|
||||
const {created, open, closed, instant, reopened} = this.state.ticketData;
|
||||
|
||||
return (
|
||||
<div className="admin-panel-stats__card-list">
|
||||
<StatCard label={i18n('CREATED')} description={i18n('CREATED_DESCRIPTION')} value={created} isPercentage={false} />
|
||||
<StatCard label={i18n('OPEN')} description={i18n('OPEN_DESCRIPTION')} value={open} isPercentage={false} />
|
||||
<StatCard label={i18n('CLOSED')} description={i18n('CLOSED_DESCRIPTION')} value={closed} isPercentage={false} />
|
||||
<StatCard label={i18n('INSTANT')} description={i18n('INSTANT_DESCRIPTION')} value={100*instant / closed} isPercentage={true} />
|
||||
<StatCard label={i18n('REOPENED')} description={i18n('REOPENED_DESCRIPTION')} value={100*reopened / created} isPercentage={true} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
// <Stats staffId={this.props.staffId} type="staff" />
|
||||
// );
|
||||
const { loading, ticketData } = this.state;
|
||||
|
||||
return null;
|
||||
return (
|
||||
<div className="admin-panel-stats">
|
||||
{
|
||||
loading ?
|
||||
<div className="admin-panel-stats__loading"><Loading backgrounded size="large" /></div> :
|
||||
statsUtils.renderStatistics({showStatCards: true, showStatsByHours: true, ticketData})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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({
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div>
|
||||
{showStatCards ? this.renderStatCards(ticketData) : null}
|
||||
{
|
||||
showStatsByHours ?
|
||||
<Bar options={this.getStatsOptions('y')} data={ticketsByHoursChartData} legend={{onClick: null}} /> :
|
||||
null
|
||||
}
|
||||
{
|
||||
showStatsByDays ?
|
||||
<HorizontalBar options={this.getStatsOptions('x')} data={ticketsByWeekdayChartData} legend={{onClick: null}} /> :
|
||||
null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
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 (
|
||||
<div className="admin-panel-stats__card-list">
|
||||
<StatCard label={i18n('CREATED')} description={i18n('CREATED_DESCRIPTION')} value={created} isPercentage={false} />
|
||||
<StatCard label={i18n('OPEN')} description={i18n('OPEN_DESCRIPTION')} value={open} isPercentage={false} />
|
||||
<StatCard label={i18n('CLOSED')} description={i18n('CLOSED_DESCRIPTION')} value={closed} isPercentage={false} />
|
||||
<StatCard label={i18n('INSTANT')} description={i18n('INSTANT_DESCRIPTION')} value={100*instant / closed} isPercentage={true} />
|
||||
<StatCard label={i18n('REOPENED')} description={i18n('REOPENED_DESCRIPTION')} value={100*reopened / created} isPercentage={true} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
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) + "]" : "[]"
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue