Implement active users chart

Resolve #3904

1 files changed, 30 insertions, 6 deletions

diff --git a/src/client/app/admin/views/charts.vue b/src/client/app/admin/views/charts.vue
index 13e8b3671e..04cf9512cf 100644
--- a/src/client/app/admin/views/charts.vue
+++ b/src/client/app/admin/views/charts.vue
@@ -10,6 +10,7 @@
 			<optgroup :label="$t('users')">
 				<option value="users">{{ $t('charts.users') }}</option>
 				<option value="users-total">{{ $t('charts.users-total') }}</option>
+				<option value="active-users">{{ $t('charts.active-users') }}</option>
 			</optgroup>
 			<optgroup :label="$t('notes')">
 				<option value="notes">{{ $t('charts.notes') }}</option>
@@ -67,6 +68,7 @@ export default Vue.extend({
 				case 'federation-instances-total': return this.federationInstancesChart(true);
 				case 'users': return this.usersChart(false);
 				case 'users-total': return this.usersChart(true);
+				case 'active-users': return this.activeUsersChart();
 				case 'notes': return this.notesChart('combined');
 				case 'local-notes': return this.notesChart('local');
 				case 'remote-notes': return this.notesChart('remote');
@@ -107,12 +109,14 @@ export default Vue.extend({
 		const [perHour, perDay] = await Promise.all([Promise.all([
 			this.$root.api('charts/federation', { limit: limit, span: 'hour' }),
 			this.$root.api('charts/users', { limit: limit, span: 'hour' }),
+			this.$root.api('charts/active-users', { limit: limit, span: 'hour' }),
 			this.$root.api('charts/notes', { limit: limit, span: 'hour' }),
 			this.$root.api('charts/drive', { limit: limit, span: 'hour' }),
 			this.$root.api('charts/network', { limit: limit, span: 'hour' })
 		]), Promise.all([
 			this.$root.api('charts/federation', { limit: limit, span: 'day' }),
 			this.$root.api('charts/users', { limit: limit, span: 'day' }),
+			this.$root.api('charts/active-users', { limit: limit, span: 'day' }),
 			this.$root.api('charts/notes', { limit: limit, span: 'day' }),
 			this.$root.api('charts/drive', { limit: limit, span: 'day' }),
 			this.$root.api('charts/network', { limit: limit, span: 'day' })
@@ -122,16 +126,18 @@ export default Vue.extend({
 			perHour: {
 				federation: perHour[0],
 				users: perHour[1],
-				notes: perHour[2],
-				drive: perHour[3],
-				network: perHour[4]
+				activeUsers: perHour[2],
+				notes: perHour[3],
+				drive: perHour[4],
+				network: perHour[5]
 			},
 			perDay: {
 				federation: perDay[0],
 				users: perDay[1],
-				notes: perDay[2],
-				drive: perDay[3],
-				network: perDay[4]
+				activeUsers: perDay[2],
+				notes: perDay[3],
+				drive: perDay[4],
+				network: perDay[5]
 			}
 		};
 
@@ -321,6 +327,24 @@ export default Vue.extend({
 			};
 		},
 
+		activeUsersChart(): any {
+			return {
+				series: [{
+					name: 'Combined',
+					type: 'line',
+					data: this.format(sum(this.stats.activeUsers.local.count, this.stats.activeUsers.remote.count))
+				}, {
+					name: 'Local',
+					type: 'area',
+					data: this.format(this.stats.activeUsers.local.count)
+				}, {
+					name: 'Remote',
+					type: 'area',
+					data: this.format(this.stats.activeUsers.remote.count)
+				}]
+			};
+		},
+
 		driveChart(): any {
 			return {
 				bytes: true,