Merge pull request #2469 from syuilo/develop

8.10.0

5 files changed, 83 insertions, 9 deletions

diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 7f4a2d0b00..f0e8a42662 100644
--- a/src/client/app/desktop/script.ts
+++ b/src/client/app/desktop/script.ts
@@ -25,6 +25,7 @@ import updateBanner from './api/update-banner';
 import MkIndex from './views/pages/index.vue';
 import MkDeck from './views/pages/deck/deck.vue';
 import MkAdmin from './views/pages/admin/admin.vue';
+import MkStats from './views/pages/stats/stats.vue';
 import MkUser from './views/pages/user/user.vue';
 import MkFavorites from './views/pages/favorites.vue';
 import MkSelectDrive from './views/pages/selectdrive.vue';
@@ -57,6 +58,7 @@ init(async (launch) => {
 			{ path: '/', name: 'index', component: MkIndex },
 			{ path: '/deck', name: 'deck', component: MkDeck },
 			{ path: '/admin', name: 'admin', component: MkAdmin },
+			{ path: '/stats', name: 'stats', component: MkStats },
 			{ path: '/i/customize-home', component: MkHomeCustomize },
 			{ path: '/i/favorites', component: MkFavorites },
 			{ path: '/i/messaging/:user', component: MkMessagingRoom },
diff --git a/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts b/src/client/app/desktop/views/components/charts.chart.ts
index 6a241631e9..6a241631e9 100644
--- a/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts
+++ b/src/client/app/desktop/views/components/charts.chart.ts
diff --git a/src/client/app/desktop/views/pages/admin/admin.chart.vue b/src/client/app/desktop/views/components/charts.vue
index 4310ce03d6..ff41639a10 100644
--- a/src/client/app/desktop/views/pages/admin/admin.chart.vue
+++ b/src/client/app/desktop/views/components/charts.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="card gkgckalzgidaygcxnugepioremxvxvpt">
+<div class="gkgckalzgidaygcxnugepioremxvxvpt">
 	<header>
 		<b>%i18n:@title%:</b>
 		<select v-model="chartType">
@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import XChart from './admin.chart.chart.ts';
+import XChart from './charts.chart.ts';
 
 export default Vue.extend({
 	components: {
@@ -318,7 +318,7 @@ export default Vue.extend({
 					yAxes: [{
 						ticks: {
 							callback: value => {
-								return Vue.filter('bytes')(value);
+								return Vue.filter('bytes')(value, 1);
 							}
 						}
 					}]
@@ -327,7 +327,7 @@ export default Vue.extend({
 					callbacks: {
 						label: (tooltipItem, data) => {
 							const label = data.datasets[tooltipItem.datasetIndex].label || '';
-							return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel)}`;
+							return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel, 1)}`;
 						}
 					}
 				}
@@ -532,11 +532,20 @@ export default Vue.extend({
 @import '~const.styl'
 
 .gkgckalzgidaygcxnugepioremxvxvpt
+	padding 32px
+	background #fff
+	box-shadow 0 2px 8px rgba(#000, 0.1)
+
 	*
 		user-select none
 
 	> header
 		display flex
+		margin 0 0 1em 0
+		padding 0 0 8px 0
+		font-size 1em
+		color #555
+		border-bottom solid 1px #eee
 
 		> b
 			margin-right 8px
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index 0bb5ed0a0f..e669b0d2a9 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -11,7 +11,7 @@
 	<main>
 		<div v-show="page == 'dashboard'">
 			<x-dashboard/>
-			<x-chart/>
+			<x-charts/>
 		</div>
 		<div v-if="page == 'users'">
 			<x-suspend-user/>
@@ -32,7 +32,7 @@ import XSuspendUser from "./admin.suspend-user.vue";
 import XUnsuspendUser from "./admin.unsuspend-user.vue";
 import XVerifyUser from "./admin.verify-user.vue";
 import XUnverifyUser from "./admin.unverify-user.vue";
-import XChart from "./admin.chart.vue";
+import XCharts from "../../components/charts.vue";
 
 export default Vue.extend({
 	components: {
@@ -41,12 +41,11 @@ export default Vue.extend({
 		XUnsuspendUser,
 		XVerifyUser,
 		XUnverifyUser,
-		XChart
+		XCharts
 	},
 	data() {
 		return {
-			page: 'dashboard',
-			chart: null
+			page: 'dashboard'
 		};
 	},
 	methods: {
diff --git a/src/client/app/desktop/views/pages/stats/stats.vue b/src/client/app/desktop/views/pages/stats/stats.vue
new file mode 100644
index 0000000000..77ef8ca457
--- /dev/null
+++ b/src/client/app/desktop/views/pages/stats/stats.vue
@@ -0,0 +1,64 @@
+<template>
+<div class="tcrwdhwpuxrwmcttxjcsehgpagpstqey">
+	<div v-if="stats" class="stats">
+		<div><b>%fa:user% {{ stats.originalUsersCount | number }}</b><span>%i18n:@original-users%</span></div>
+		<div><span>%fa:user% {{ stats.usersCount | number }}</span><span>%i18n:@all-users%</span></div>
+		<div><b>%fa:pen% {{ stats.originalNotesCount | number }}</b><span>%i18n:@original-notes%</span></div>
+		<div><span>%fa:pen% {{ stats.notesCount | number }}</span><span>%i18n:@all-notes%</span></div>
+	</div>
+	<div>
+		<x-charts/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import XCharts from "../../components/charts.vue";
+
+export default Vue.extend({
+	components: {
+		XCharts
+	},
+	data() {
+		return {
+			stats: null
+		};
+	},
+	created() {
+		(this as any).api('stats').then(stats => {
+			this.stats = stats;
+		});
+	},
+});
+</script>
+
+<style lang="stylus">
+@import '~const.styl'
+
+.tcrwdhwpuxrwmcttxjcsehgpagpstqey
+	width 100%
+	padding 16px 32px
+
+	> .stats
+		display flex
+		justify-content center
+		margin-bottom 16px
+		padding 32px
+		background #fff
+		box-shadow 0 2px 8px rgba(#000, 0.1)
+
+		> div
+			flex 1
+			text-align center
+
+			> *:first-child
+				display block
+				color $theme-color
+
+			> *:last-child
+				font-size 70%
+
+	> div
+		max-width 800px
+</style>