Show some charts in control panel

7 files changed, 240 insertions, 35 deletions

diff --git a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
index d0f11e73b6..182d974601 100644
--- a/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.dashboard.vue
@@ -1,11 +1,11 @@
 <template>
-<div>
-	<h1>%i18n:@dashboard%</h1>
-	<div v-if="stats">
-		<p><b>%i18n:@all-users%</b>: <span>{{ stats.usersCount | number }}</span></p>
-		<p><b>%i18n:@original-users%</b>: <span>{{ stats.originalUsersCount | number }}</span></p>
-		<p><b>%i18n:@all-notes%</b>: <span>{{ stats.notesCount | number }}</span></p>
-		<p><b>%i18n:@original-notes%</b>: <span>{{ stats.originalNotesCount | number }}</span></p>
+<div class="obdskegsannmntldydackcpzezagxqfy">
+	<header>%i18n:@dashboard%</header>
+	<div v-if="stats" class="stats">
+		<div><b>%fa:user% {{ stats.originalUsersCount | number }}</b><span>%i18n:@original-users%</span></div>
+		<div><b>%fa:user% {{ stats.usersCount | number }}</b><span>%i18n:@all-users%</span></div>
+		<div><b>%fa:pen% {{ stats.originalNotesCount | number }}</b><span>%i18n:@original-notes%</span></div>
+		<div><b>%fa:pen% {{ stats.notesCount | number }}</b><span>%i18n:@all-notes%</span></div>
 	</div>
 	<div>
 		<button class="ui" @click="invite">%i18n:@invite%</button>
@@ -40,10 +40,23 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-h1
-	margin 0 0 1em 0
-	padding 0 0 8px 0
-	font-size 1em
-	color #555
-	border-bottom solid 1px #eee
+@import '~const.styl'
+
+.obdskegsannmntldydackcpzezagxqfy
+	> .stats
+		display flex
+		justify-content center
+		margin-bottom 16px
+
+		> div
+			flex 1
+			text-align center
+
+			> b
+				display block
+				color $theme-color
+
+			> span
+				font-size 70%
+
 </style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue b/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue
new file mode 100644
index 0000000000..52bd8e7c77
--- /dev/null
+++ b/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue
@@ -0,0 +1,81 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+	<polyline
+		:points="pointsNote"
+		fill="none"
+		stroke-width="1"
+		stroke="#41ddde"/>
+	<polyline
+		:points="pointsReply"
+		fill="none"
+		stroke-width="1"
+		stroke="#f7796c"/>
+	<polyline
+		:points="pointsRenote"
+		fill="none"
+		stroke-width="1"
+		stroke="#a1de41"/>
+	<polyline
+		:points="pointsTotal"
+		fill="none"
+		stroke-width="1"
+		stroke="#555"
+		stroke-dasharray="2 2"/>
+</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		data: {
+			required: true
+		},
+		type: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			chart: this.data,
+			viewBoxX: 365,
+			viewBoxY: 70,
+			pointsNote: null,
+			pointsReply: null,
+			pointsRenote: null,
+			pointsTotal: null
+		};
+	},
+	created() {
+		this.chart.forEach(d => {
+			d.notes = this.type == 'local' ? d.localNotes : d.remoteNotes;
+			d.replies = this.type == 'local' ? d.localReplies : d.remoteReplies;
+			d.renotes = this.type == 'local' ? d.localRenotes : d.remoteRenotes;
+		});
+
+		this.chart.forEach(d => {
+			d.total = d.notes + d.replies + d.renotes;
+		});
+
+		const peak = Math.max.apply(null, this.chart.map(d => d.total));
+
+		if (peak != 0) {
+			const data = this.chart.slice().reverse();
+			this.pointsNote = data.map((d, i) => `${i},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' ');
+			this.pointsReply = data.map((d, i) => `${i},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' ');
+			this.pointsRenote = data.map((d, i) => `${i},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' ');
+			this.pointsTotal = data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+svg
+	display block
+	padding 10px
+	width 100%
+
+</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue b/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue
new file mode 100644
index 0000000000..1f36d6b26a
--- /dev/null
+++ b/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue
@@ -0,0 +1,33 @@
+<template>
+<div>
+	<header>%i18n:@title%</header>
+	<x-chart v-if="data" :data="data" type="local"/>
+	<x-chart v-if="data" :data="data" type="remote"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import XChart from "./admin.notes-chart.chart.vue";
+
+export default Vue.extend({
+	components: {
+		XChart
+	},
+	data() {
+		return {
+			data: null
+		};
+	},
+	created() {
+		(this as any).api('aggregation/notes').then(res => {
+			this.data = res;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
index 6eb82f0a51..6d21bdb564 100644
--- a/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.suspend-user.vue
@@ -37,15 +37,3 @@ export default Vue.extend({
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-header
-	margin 10px 0
-
-
-button
-	margin 16px 0
-
-</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue b/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue
new file mode 100644
index 0000000000..10eab85279
--- /dev/null
+++ b/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue
@@ -0,0 +1,53 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+	<polyline
+		:points="points"
+		fill="none"
+		stroke-width="1"
+		stroke="#555"/>
+</svg>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		data: {
+			required: true
+		},
+		type: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			chart: this.data,
+			viewBoxX: 365,
+			viewBoxY: 70,
+			points: null
+		};
+	},
+	created() {
+		this.chart.forEach(d => {
+			d.count = this.type == 'local' ? d.local : d.remote;
+		});
+
+		const peak = Math.max.apply(null, this.chart.map(d => d.count));
+
+		if (peak != 0) {
+			const data = this.chart.slice().reverse();
+			this.points = data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ');
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+svg
+	display block
+	padding 10px
+	width 100%
+
+</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.users-chart.vue b/src/client/app/desktop/views/pages/admin/admin.users-chart.vue
new file mode 100644
index 0000000000..15c01fc59e
--- /dev/null
+++ b/src/client/app/desktop/views/pages/admin/admin.users-chart.vue
@@ -0,0 +1,33 @@
+<template>
+<div>
+	<header>%i18n:@title%</header>
+	<x-chart v-if="data" :data="data" type="local"/>
+	<x-chart v-if="data" :data="data" type="remote"/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import XChart from "./admin.users-chart.chart.vue";
+
+export default Vue.extend({
+	components: {
+		XChart
+	},
+	data() {
+		return {
+			data: null
+		};
+	},
+	created() {
+		(this as any).api('aggregation/users').then(res => {
+			this.data = res;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index 2a524bb269..f719ccfda7 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -11,6 +11,8 @@
 	<main>
 		<div v-if="page == 'dashboard'">
 			<x-dashboard/>
+			<x-users-chart/>
+			<x-notes-chart/>
 		</div>
 		<div v-if="page == 'users'">
 			<x-suspend-user/>
@@ -29,13 +31,17 @@ import XDashboard from "./admin.dashboard.vue";
 import XSuspendUser from "./admin.suspend-user.vue";
 import XUnsuspendUser from "./admin.unsuspend-user.vue";
 import XVerifyUser from "./admin.verify-user.vue";
+import XUsersChart from "./admin.users-chart.vue";
+import XNotesChart from "./admin.notes-chart.vue";
 
 export default Vue.extend({
 	components: {
 		XDashboard,
 		XSuspendUser,
 		XUnsuspendUser,
-		XVerifyUser
+		XVerifyUser,
+		XUsersChart,
+		XNotesChart
 	},
 	data() {
 		return {
@@ -50,7 +56,7 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
 @import '~const.styl'
 
 .mk-admin
@@ -101,13 +107,11 @@ export default Vue.extend({
 				background #fff
 				box-shadow 0 2px 8px rgba(#000, 0.1)
 
-header
-	margin 10px 0
-
-
-button
-	margin 16px 0
-	position absolute
-	right 0
+				> header
+					margin 0 0 1em 0
+					padding 0 0 8px 0
+					font-size 1em
+					color #555
+					border-bottom solid 1px #eee
 
 </style>