// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
var Client = require('../../utils/client.jsx');
var LineChart = require('./line_chart.jsx');
export default class TeamAnalytics extends React.Component {
constructor(props) {
super(props);
this.getData = this.getData.bind(this);
this.state = {
users: null,
serverError: null,
channel_open_count: null,
channel_private_count: null,
post_count: null,
post_counts_day: null,
user_counts_with_posts_day: null,
recent_active_users: null
};
}
componentDidMount() {
this.getData(this.props.team.id);
}
getData(teamId) {
Client.getAnalytics(
teamId,
'standard',
(data) => {
for (var index in data) {
if (data[index].name === 'channel_open_count') {
this.setState({channel_open_count: data[index].value});
this.setState({channel_open_count: 55});
}
if (data[index].name === 'channel_private_count') {
this.setState({channel_private_count: data[index].value});
this.setState({channel_private_count: 12});
}
if (data[index].name === 'post_count') {
this.setState({post_count: data[index].value});
this.setState({post_count: 5332});
}
}
},
(err) => {
this.setState({serverError: err.message});
}
);
Client.getAnalytics(
teamId,
'post_counts_day',
(data) => {
data.push({name: '2015-10-24', value: 73});
data.push({name: '2015-10-25', value: 84});
data.push({name: '2015-10-26', value: 61});
data.push({name: '2015-10-27', value: 97});
data.push({name: '2015-10-28', value: 73});
data.push({name: '2015-10-29', value: 84});
data.push({name: '2015-10-30', value: 61});
data.push({name: '2015-10-31', value: 97});
var chartData = {
labels: [],
datasets: [{
label: 'Total Posts',
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,1)',
data: []
}]
};
for (var index in data) {
if (data[index]) {
var row = data[index];
chartData.labels.push(row.name);
chartData.datasets[0].data.push(row.value);
}
}
this.setState({post_counts_day: chartData});
},
(err) => {
this.setState({serverError: err.message});
}
);
Client.getAnalytics(
teamId,
'user_counts_with_posts_day',
(data) => {
data.push({name: '2015-10-24', value: 22});
data.push({name: '2015-10-25', value: 31});
data.push({name: '2015-10-26', value: 25});
data.push({name: '2015-10-27', value: 12});
data.push({name: '2015-10-28', value: 22});
data.push({name: '2015-10-29', value: 31});
data.push({name: '2015-10-30', value: 25});
data.push({name: '2015-10-31', value: 12});
var chartData = {
labels: [],
datasets: [{
label: 'Active Users With Posts',
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,1)',
data: []
}]
};
for (var index in data) {
if (data[index]) {
var row = data[index];
chartData.labels.push(row.name);
chartData.datasets[0].data.push(row.value);
}
}
this.setState({user_counts_with_posts_day: chartData});
},
(err) => {
this.setState({serverError: err.message});
}
);
Client.getProfilesForTeam(
teamId,
(users) => {
this.setState({users});
var recentActive = [];
recentActive.push({email: 'corey@spinpunch.com', date: '2015-10-23'});
recentActive.push({email: 'bill@spinpunch.com', date: '2015-10-22'});
recentActive.push({email: 'bob@spinpunch.com', date: '2015-10-22'});
recentActive.push({email: 'jones@spinpunch.com', date: '2015-10-21'});
this.setState({recent_active_users: recentActive});
// var memberList = [];
// for (var id in users) {
// if (users.hasOwnProperty(id)) {
// memberList.push(users[id]);
// }
// }
// memberList.sort((a, b) => {
// if (a.username < b.username) {
// return -1;
// }
// if (a.username > b.username) {
// return 1;
// }
// return 0;
// });
},
(err) => {
this.setState({serverError: err.message});
}
);
}
componentWillReceiveProps(newProps) {
this.setState({
users: null,
serverError: null,
channel_open_count: null,
channel_private_count: null,
post_count: null,
post_counts_day: null,
user_counts_with_posts_day: null,
recent_active_users: null
});
this.getData(newProps.team.id);
}
componentWillUnmount() {
}
render() {
var serverError = '';
if (this.state.serverError) {
serverError =
;
}
var totalCount = (
{'Total Users'}
{this.state.users == null ? 'Loading...' : Object.keys(this.state.users).length + 23}
);
var openChannelCount = (
{'Public Groups'}
{this.state.channel_open_count == null ? 'Loading...' : this.state.channel_open_count}
);
var openPrivateCount = (
{'Private Groups'}
{this.state.channel_private_count == null ? 'Loading...' : this.state.channel_private_count}
);
var postCount = (
{'Total Posts'}
{this.state.post_count == null ? 'Loading...' : this.state.post_count}
);
var postCountsByDay = (
{'Total Posts'}
{'Loading...'}
);
if (this.state.post_counts_day != null) {
postCountsByDay = (
);
}
var usersWithPostsByDay = (
{'Total Posts'}
{'Loading...'}
);
if (this.state.user_counts_with_posts_day != null) {
usersWithPostsByDay = (
{'Active Users With Posts'}
);
}
var recentActiveUser = (
{'Recent Active Users'}
{'Loading...'}
);
if (this.state.recent_active_users != null) {
recentActiveUser = (
{'Recent Active Users'}
corey@spinpunch.com | 2015-12-23 |
bob@spinpunch.com | 2015-12-22 |
jimmy@spinpunch.com | 2015-12-22 |
jones@spinpunch.com | 2015-12-21 |
steve@spinpunch.com | 2015-12-20 |
aspen@spinpunch.com | 2015-12-19 |
scott@spinpunch.com | 2015-12-19 |
grant@spinpunch.com | 2015-12-19 |
sienna@spinpunch.com | 2015-12-18 |
jessica@spinpunch.com | 2015-12-18 |
davy@spinpunch.com | 2015-12-16 |
steve@spinpunch.com | 2015-12-11 |
);
}
var newUsers = (
{'Newly Created Users'}
{'Loading...'}
);
if (this.state.recent_active_users != null) {
newUsers = (
{'Newly Created Users'}
bob@spinpunch.com | 2015-12-11 |
corey@spinpunch.com | 2015-12-10 |
jimmy@spinpunch.com | 2015-12-8 |
aspen@spinpunch.com | 2015-12-5 |
jones@spinpunch.com | 2015-12-5 |
steve@spinpunch.com | 2015-12-5 |
);
}
return (
{'Analytics for ' + this.props.team.name}
{serverError}
{totalCount}
{postCount}
{openChannelCount}
{openPrivateCount}
{postCountsByDay}
{usersWithPostsByDay}
{recentActiveUser}
{newUsers}
);
}
}
TeamAnalytics.propTypes = {
team: React.PropTypes.object
};