チャートコンポーネントを分離するなど

locales/ja-JP.yml

@@ -473,6 +473,25 @@ desktop/views/components/calendar.vue:
   next: "次の月"
   go: "クリックして時間遡行"
 
+desktop/views/components/charts.vue:
+  title: "チャート"
+  per-day: "1日ごと"
+  per-hour: "1時間ごと"
+  notes: "投稿"
+  users: "ユーザー"
+  drive: "ドライブ"
+  charts:
+    notes: "投稿の増減 (統合)"
+    local-notes: "投稿の増減 (ローカル)"
+    remote-notes: "投稿の増減 (リモート)"
+    notes-total: "投稿の累計"
+    users: "ユーザーの増減"
+    users-total: "ユーザーの累計"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の累計"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の累計"
+
 desktop/views/components/choose-file-from-drive-window.vue:
   choose-file: "ファイル選択中"
   upload: "PCからドライブにファイルをアップロード"
@@ -939,25 +958,6 @@ desktop/views/pages/admin/admin.unverify-user.vue:
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
 
-desktop/views/pages/admin/admin.chart.vue:
-  title: "チャート"
-  per-day: "1日ごと"
-  per-hour: "1時間ごと"
-  notes: "投稿"
-  users: "ユーザー"
-  drive: "ドライブ"
-  charts:
-    notes: "投稿の増減 (統合)"
-    local-notes: "投稿の増減 (ローカル)"
-    remote-notes: "投稿の増減 (リモート)"
-    notes-total: "投稿の累計"
-    users: "ユーザーの増減"
-    users-total: "ユーザーの累計"
-    drive: "ドライブ使用量の増減"
-    drive-total: "ドライブ使用量の累計"
-    drive-files: "ドライブのファイル数の増減"
-    drive-files-total: "ドライブのファイル数の累計"
-
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
   is-media-view: "メディアビュー"

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 },

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: {
@@ -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

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',
+			page: 'dashboard'
-			chart: null
 		};
 	},
 	methods: {

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

@@ -0,0 +1,29 @@
+<template>
+<div class="tcrwdhwpuxrwmcttxjcsehgpagpstqey">
+	<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
+	}
+});
+</script>
+
+<style lang="stylus">
+@import '~const.styl'
+
+.tcrwdhwpuxrwmcttxjcsehgpagpstqey
+	width 100%
+	padding 16px 32px
+
+	> div
+		max-width 800px
+</style>