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

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