Improve stats page

locales/ja-JP.yml

@@ -968,6 +968,12 @@ desktop/views/pages/deck/deck.note.vue:
   private: "この投稿は非公開です"
   deleted: "この投稿は削除されました"
 
+desktop/views/pages/stats/stats.vue:
+  all-users: "全てのユーザー"
+  original-users: "このインスタンスのユーザー"
+  all-notes: "全てのノート"
+  original-notes: "このインスタンスのノート"
+
 desktop/views/pages/welcome.vue:
   about: "詳しく..."
   gotit: "わかった"

src/client/app/desktop/views/pages/stats/stats.vue

@@ -1,5 +1,11 @@
 <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>
@@ -13,7 +19,17 @@ 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>
 
@@ -24,6 +40,25 @@ export default Vue.extend({
 	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>