From 8239c68cf323e4bb20007d2b456336becead273d Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Thu, 25 Feb 2016 12:32:46 -0500 Subject: Refactor and modularize analytics on the client --- .../components/admin_console/admin_controller.jsx | 4 +- web/react/components/admin_console/analytics.jsx | 489 --------------------- .../components/admin_console/doughnut_chart.jsx | 77 ---- web/react/components/admin_console/line_chart.jsx | 50 --- .../components/admin_console/statistic_count.jsx | 33 -- .../components/admin_console/system_analytics.jsx | 216 --------- .../components/admin_console/team_analytics.jsx | 253 ----------- 7 files changed, 2 insertions(+), 1120 deletions(-) delete mode 100644 web/react/components/admin_console/analytics.jsx delete mode 100644 web/react/components/admin_console/doughnut_chart.jsx delete mode 100644 web/react/components/admin_console/line_chart.jsx delete mode 100644 web/react/components/admin_console/statistic_count.jsx delete mode 100644 web/react/components/admin_console/system_analytics.jsx delete mode 100644 web/react/components/admin_console/team_analytics.jsx (limited to 'web/react/components/admin_console') diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index de0b085bc..32ed70a99 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -21,10 +21,10 @@ import TeamSettingsTab from './team_settings.jsx'; import ServiceSettingsTab from './service_settings.jsx'; import LegalAndSupportSettingsTab from './legal_and_support_settings.jsx'; import TeamUsersTab from './team_users.jsx'; -import TeamAnalyticsTab from './team_analytics.jsx'; +import TeamAnalyticsTab from '../analytics/team_analytics.jsx'; import LdapSettingsTab from './ldap_settings.jsx'; import LicenseSettingsTab from './license_settings.jsx'; -import SystemAnalyticsTab from './system_analytics.jsx'; +import SystemAnalyticsTab from '../analytics/system_analytics.jsx'; export default class AdminController extends React.Component { constructor(props) { diff --git a/web/react/components/admin_console/analytics.jsx b/web/react/components/admin_console/analytics.jsx deleted file mode 100644 index ec9ad4da0..000000000 --- a/web/react/components/admin_console/analytics.jsx +++ /dev/null @@ -1,489 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import Constants from '../../utils/constants.jsx'; -import LineChart from './line_chart.jsx'; -import DoughnutChart from './doughnut_chart.jsx'; -import StatisticCount from './statistic_count.jsx'; - -var Tooltip = ReactBootstrap.Tooltip; -var OverlayTrigger = ReactBootstrap.OverlayTrigger; - -import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedDate} from 'mm-intl'; - -const holders = defineMessages({ - analyticsTotalUsers: { - id: 'admin.analytics.totalUsers', - defaultMessage: 'Total Users' - }, - analyticsPublicChannels: { - id: 'admin.analytics.publicChannels', - defaultMessage: 'Public Channels' - }, - analyticsPrivateGroups: { - id: 'admin.analytics.privateGroups', - defaultMessage: 'Private Groups' - }, - analyticsTotalPosts: { - id: 'admin.analytics.totalPosts', - defaultMessage: 'Total Posts' - }, - analyticsFilePosts: { - id: 'admin.analytics.totalFilePosts', - defaultMessage: 'Posts with Files' - }, - analyticsHashtagPosts: { - id: 'admin.analytics.totalHashtagPosts', - defaultMessage: 'Posts with Hashtags' - }, - analyticsIncomingHooks: { - id: 'admin.analytics.totalIncomingWebhooks', - defaultMessage: 'Incoming Webhooks' - }, - analyticsOutgoingHooks: { - id: 'admin.analytics.totalOutgoingWebhooks', - defaultMessage: 'Outgoing Webhooks' - }, - analyticsChannelTypes: { - id: 'admin.analytics.channelTypes', - defaultMessage: 'Channel Types' - }, - analyticsTextPosts: { - id: 'admin.analytics.textPosts', - defaultMessage: 'Posts with Text-only' - }, - analyticsPostTypes: { - id: 'admin.analytics.postTypes', - defaultMessage: 'Posts, Files and Hashtags' - } -}); - -export default class Analytics extends React.Component { - constructor(props) { - super(props); - - this.state = {}; - } - - render() { // in the future, break down these into smaller components - const {formatMessage} = this.props.intl; - - var serverError = ''; - if (this.props.serverError) { - serverError =
; - } - - let loading = ( -
- -
- ); - - let firstRow; - let extraGraphs; - if (this.props.showAdvanced) { - firstRow = ( -
- - - - -
- ); - - const channelTypeData = [ - { - value: this.props.channelOpenCount, - color: '#46BFBD', - highlight: '#5AD3D1', - label: formatMessage(holders.analyticsPublicChannels) - }, - { - value: this.props.channelPrivateCount, - color: '#FDB45C', - highlight: '#FFC870', - label: formatMessage(holders.analyticsPrivateGroups) - } - ]; - - const postTypeData = [ - { - value: this.props.filePostCount, - color: '#46BFBD', - highlight: '#5AD3D1', - label: formatMessage(holders.analyticsFilePosts) - }, - { - value: this.props.filePostCount, - color: '#F7464A', - highlight: '#FF5A5E', - label: formatMessage(holders.analyticsHashtagPosts) - }, - { - value: this.props.postCount - this.props.filePostCount - this.props.hashtagPostCount, - color: '#FDB45C', - highlight: '#FFC870', - label: formatMessage(holders.analyticsTextPosts) - } - ]; - - extraGraphs = ( -
- - -
- ); - } else { - firstRow = ( -
- - - - -
- ); - } - - let postCountsByDay; - if (this.props.postCountsDay == null) { - postCountsByDay = ( -
-
-
- -
-
{loading}
-
-
- ); - } else { - let content; - if (this.props.postCountsDay.labels.length === 0) { - content = ( -
- -
- ); - } else { - content = ( - - ); - } - postCountsByDay = ( -
-
-
- -
-
- {content} -
-
-
- ); - } - - let usersWithPostsByDay; - if (this.props.userCountsWithPostsDay == null) { - usersWithPostsByDay = ( -
-
-
- -
-
{loading}
-
-
- ); - } else { - let content; - if (this.props.userCountsWithPostsDay.labels.length === 0) { - content = ( -
- -
- ); - } else { - content = ( - - ); - } - usersWithPostsByDay = ( -
-
-
- -
-
- {content} -
-
-
- ); - } - - let recentActiveUser; - if (this.props.recentActiveUsers != null) { - let content; - if (this.props.recentActiveUsers.length === 0) { - content = loading; - } else { - content = ( - - - { - this.props.recentActiveUsers.map((user) => { - const tooltip = ( - - {user.email} - - ); - - return ( - - - - - ); - }) - } - -
- - - - - -
- ); - } - recentActiveUser = ( -
-
-
- -
-
- {content} -
-
-
- ); - } - - let newUsers; - if (this.props.newlyCreatedUsers != null) { - let content; - if (this.props.newlyCreatedUsers.length === 0) { - content = loading; - } else { - content = ( - - - { - this.props.newlyCreatedUsers.map((user) => { - const tooltip = ( - - {user.email} - - ); - - return ( - - - - - ); - }) - } - -
- - - - - -
- ); - } - newUsers = ( -
-
-
- -
-
- {content} -
-
-
- ); - } - - return ( -
-

- -

- {serverError} - {firstRow} - {extraGraphs} -
- {postCountsByDay} -
-
- {usersWithPostsByDay} -
-
- {recentActiveUser} - {newUsers} -
-
- ); - } -} - -Analytics.defaultProps = { - title: null, - channelOpenCount: null, - channelPrivateCount: null, - postCount: null, - postCountsDay: null, - userCountsWithPostsDay: null, - recentActiveUsers: null, - newlyCreatedUsers: null, - uniqueUserCount: null, - serverError: null -}; - -Analytics.propTypes = { - intl: intlShape.isRequired, - title: React.PropTypes.string, - channelOpenCount: React.PropTypes.number, - channelPrivateCount: React.PropTypes.number, - postCount: React.PropTypes.number, - showAdvanced: React.PropTypes.bool, - filePostCount: React.PropTypes.number, - hashtagPostCount: React.PropTypes.number, - incomingWebhookCount: React.PropTypes.number, - outgoingWebhookCount: React.PropTypes.number, - postCountsDay: React.PropTypes.object, - userCountsWithPostsDay: React.PropTypes.object, - recentActiveUsers: React.PropTypes.array, - newlyCreatedUsers: React.PropTypes.array, - uniqueUserCount: React.PropTypes.number, - serverError: React.PropTypes.string -}; - -export default injectIntl(Analytics); diff --git a/web/react/components/admin_console/doughnut_chart.jsx b/web/react/components/admin_console/doughnut_chart.jsx deleted file mode 100644 index e2dc01528..000000000 --- a/web/react/components/admin_console/doughnut_chart.jsx +++ /dev/null @@ -1,77 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import {FormattedMessage} from 'mm-intl'; - -export default class DoughnutChart extends React.Component { - constructor(props) { - super(props); - - this.initChart = this.initChart.bind(this); - this.chart = null; - } - - componentDidMount() { - this.initChart(this.props); - } - - componentWillReceiveProps(nextProps) { - if (this.chart) { - this.chart.destroy(); - this.initChart(nextProps); - } - } - - componentWillUnmount() { - if (this.chart) { - this.chart.destroy(); - } - } - - initChart(props) { - var el = ReactDOM.findDOMNode(this.refs.canvas); - var ctx = el.getContext('2d'); - this.chart = new Chart(ctx).Doughnut(props.data, props.options || {}); //eslint-disable-line new-cap - } - - render() { - let content; - if (this.props.data == null) { - content = ( - - ); - } else { - content = ( - - ); - } - - return ( -
-
-
- {this.props.title} -
-
- {content} -
-
-
- ); - } -} - -DoughnutChart.propTypes = { - title: React.PropTypes.string, - width: React.PropTypes.string, - height: React.PropTypes.string, - data: React.PropTypes.array, - options: React.PropTypes.object -}; diff --git a/web/react/components/admin_console/line_chart.jsx b/web/react/components/admin_console/line_chart.jsx deleted file mode 100644 index 7e2f95c84..000000000 --- a/web/react/components/admin_console/line_chart.jsx +++ /dev/null @@ -1,50 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -export default class LineChart extends React.Component { - constructor(props) { - super(props); - - this.initChart = this.initChart.bind(this); - this.chart = null; - } - - componentDidMount() { - this.initChart(this.props); - } - - componentWillReceiveProps(nextProps) { - if (this.chart) { - this.chart.destroy(); - this.initChart(nextProps); - } - } - - componentWillUnmount() { - if (this.chart) { - this.chart.destroy(); - } - } - - initChart(props) { - var el = ReactDOM.findDOMNode(this); - var ctx = el.getContext('2d'); - this.chart = new Chart(ctx).Line(props.data, props.options || {}); //eslint-disable-line new-cap - } - - render() { - return ( - - ); - } -} - -LineChart.propTypes = { - width: React.PropTypes.string, - height: React.PropTypes.string, - data: React.PropTypes.object, - options: React.PropTypes.object -}; diff --git a/web/react/components/admin_console/statistic_count.jsx b/web/react/components/admin_console/statistic_count.jsx deleted file mode 100644 index 118a0ad31..000000000 --- a/web/react/components/admin_console/statistic_count.jsx +++ /dev/null @@ -1,33 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import {FormattedMessage} from 'mm-intl'; - -export default class StatisticCount extends React.Component { - render() { - let loading = ( - - ); - - return ( -
-
-
- {this.props.title} - -
-
{this.props.count == null ? loading : this.props.count}
-
-
- ); - } -} - -StatisticCount.propTypes = { - title: React.PropTypes.string.isRequired, - icon: React.PropTypes.string.isRequired, - count: React.PropTypes.number -}; diff --git a/web/react/components/admin_console/system_analytics.jsx b/web/react/components/admin_console/system_analytics.jsx deleted file mode 100644 index f983db177..000000000 --- a/web/react/components/admin_console/system_analytics.jsx +++ /dev/null @@ -1,216 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import Analytics from './analytics.jsx'; -import * as Client from '../../utils/client.jsx'; - -import {injectIntl, intlShape, defineMessages} from 'mm-intl'; - -const labels = defineMessages({ - totalPosts: { - id: 'admin.system_analytics.totalPosts', - defaultMessage: 'Total Posts' - }, - activeUsers: { - id: 'admin.system_analytics.activeUsers', - defaultMessage: 'Active Users With Posts' - }, - title: { - id: 'admin.system_analytics.title', - defaultMessage: 'the System' - } -}); - -class SystemAnalytics extends React.Component { - constructor(props) { - super(props); - - this.getData = this.getData.bind(this); - - this.state = { // most of this state should be from a store in the future - 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, - newly_created_users: null, - unique_user_count: null - }; - } - - componentDidMount() { - this.getData(); - } - - getData() { // should be moved to an action creator eventually - const {formatMessage} = this.props.intl; - Client.getSystemAnalytics( - 'standard', - (data) => { - for (var index in data) { - if (data[index].name === 'channel_open_count') { - this.setState({channel_open_count: data[index].value}); - } - - if (data[index].name === 'channel_private_count') { - this.setState({channel_private_count: data[index].value}); - } - - if (data[index].name === 'post_count') { - this.setState({post_count: data[index].value}); - } - - if (data[index].name === 'unique_user_count') { - this.setState({unique_user_count: data[index].value}); - } - } - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - - Client.getSystemAnalytics( - 'post_counts_day', - (data) => { - data.reverse(); - - var chartData = { - labels: [], - datasets: [{ - label: formatMessage(labels.totalPosts), - 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.getSystemAnalytics( - 'user_counts_with_posts_day', - (data) => { - data.reverse(); - - var chartData = { - labels: [], - datasets: [{ - label: formatMessage(labels.activeUsers), - 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}); - } - ); - - if (global.window.mm_license.IsLicensed === 'true') { - Client.getSystemAnalytics( - 'extra_counts', - (data) => { - for (var index in data) { - if (data[index].name === 'file_post_count') { - this.setState({file_post_count: data[index].value}); - } - - if (data[index].name === 'hashtag_post_count') { - this.setState({hashtag_post_count: data[index].value}); - } - - if (data[index].name === 'incoming_webhook_count') { - this.setState({incoming_webhook_count: data[index].value}); - } - - if (data[index].name === 'outgoing_webhook_count') { - this.setState({outgoing_webhook_count: data[index].value}); - } - } - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - } - } - - componentWillReceiveProps() { - this.setState({ - serverError: null, - channel_open_count: null, - channel_private_count: null, - post_count: null, - post_counts_day: null, - user_counts_with_posts_day: null, - unique_user_count: null - }); - - this.getData(); - } - - render() { - return ( -
- -
- ); - } -} - -SystemAnalytics.propTypes = { - intl: intlShape.isRequired, - team: React.PropTypes.object -}; - -export default injectIntl(SystemAnalytics); diff --git a/web/react/components/admin_console/team_analytics.jsx b/web/react/components/admin_console/team_analytics.jsx deleted file mode 100644 index 808d8046d..000000000 --- a/web/react/components/admin_console/team_analytics.jsx +++ /dev/null @@ -1,253 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import Analytics from './analytics.jsx'; -import * as Client from '../../utils/client.jsx'; - -import {injectIntl, intlShape, defineMessages} from 'mm-intl'; - -const labels = defineMessages({ - totalPosts: { - id: 'admin.team_analytics.totalPosts', - defaultMessage: 'Total Posts' - }, - activeUsers: { - id: 'admin.team_analytics.activeUsers', - defaultMessage: 'Active Users With Posts' - } -}); - -class TeamAnalytics extends React.Component { - constructor(props) { - super(props); - - this.getData = this.getData.bind(this); - - this.state = { // most of this state should be from a store in the future - 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, - newly_created_users: null, - unique_user_count: null - }; - } - - componentDidMount() { - this.getData(this.props.team.id); - } - - getData(teamId) { // should be moved to an action creator eventually - const {formatMessage} = this.props.intl; - Client.getTeamAnalytics( - teamId, - 'standard', - (data) => { - for (var index in data) { - if (data[index].name === 'channel_open_count') { - this.setState({channel_open_count: data[index].value}); - } - - if (data[index].name === 'channel_private_count') { - this.setState({channel_private_count: data[index].value}); - } - - if (data[index].name === 'post_count') { - this.setState({post_count: data[index].value}); - } - - if (data[index].name === 'unique_user_count') { - this.setState({unique_user_count: data[index].value}); - } - } - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - - Client.getTeamAnalytics( - teamId, - 'post_counts_day', - (data) => { - data.reverse(); - - var chartData = { - labels: [], - datasets: [{ - label: formatMessage(labels.totalPosts), - 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.getTeamAnalytics( - teamId, - 'user_counts_with_posts_day', - (data) => { - data.reverse(); - - var chartData = { - labels: [], - datasets: [{ - label: formatMessage(labels.activeUsers), - 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 usersList = []; - for (var id in users) { - if (users.hasOwnProperty(id)) { - usersList.push(users[id]); - } - } - - usersList.sort((a, b) => { - if (a.last_activity_at < b.last_activity_at) { - return 1; - } - - if (a.last_activity_at > b.last_activity_at) { - return -1; - } - - return 0; - }); - - var recentActive = []; - for (let i = 0; i < usersList.length; i++) { - if (usersList[i].last_activity_at == null) { - continue; - } - - recentActive.push(usersList[i]); - if (i > 19) { - break; - } - } - - this.setState({recent_active_users: recentActive}); - - usersList.sort((a, b) => { - if (a.create_at < b.create_at) { - return 1; - } - - if (a.create_at > b.create_at) { - return -1; - } - - return 0; - }); - - var newlyCreated = []; - for (let i = 0; i < usersList.length; i++) { - newlyCreated.push(usersList[i]); - if (i > 19) { - break; - } - } - - this.setState({newly_created_users: newlyCreated}); - }, - (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, - newly_created_users: null, - unique_user_count: null - }); - - this.getData(newProps.team.id); - } - - render() { - return ( -
- -
- ); - } -} - -TeamAnalytics.propTypes = { - intl: intlShape.isRequired, - team: React.PropTypes.object -}; - -export default injectIntl(TeamAnalytics); -- cgit v1.2.3-1-g7c22