From 8ecf3db608bf488c13695b62f691e4c269f46361 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 19 Aug 2018 00:45:54 +0900
Subject: [PATCH] Add drive chart

---
 locales/ja.yml                                |  5 ++
 .../pages/admin/admin.drive-chart.chart.vue   | 51 +++++++++++++++++++
 .../views/pages/admin/admin.drive-chart.vue   | 34 +++++++++++++
 .../app/desktop/views/pages/admin/admin.vue   |  5 +-
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue
 create mode 100644 src/client/app/desktop/views/pages/admin/admin.drive-chart.vue

diff --git a/locales/ja.yml b/locales/ja.yml
index 55c37fab67..5d5ef76ea8 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -946,6 +946,11 @@ desktop/views/pages/admin/admin.users-chart.vue:
   local: "ローカル"
   remote: "リモート"
 
+desktop/views/pages/admin/admin.drive-chart.vue:
+  title: "ドライブ"
+  local: "ローカル"
+  remote: "リモート"
+
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"
   is-media-view: "メディアビュー"
diff --git a/src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue b/src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue
new file mode 100644
index 0000000000..3c537d8d6d
--- /dev/null
+++ b/src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue
@@ -0,0 +1,51 @@
+<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: {
+		chart: {
+			required: true
+		},
+		type: {
+			type: String,
+			required: true
+		}
+	},
+	data() {
+		return {
+			viewBoxX: 365,
+			viewBoxY: 70,
+			points: null
+		};
+	},
+	created() {
+		const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.drive.local.totalSize : d.drive.remote.totalSize));
+
+		if (peak != 0) {
+			const data = this.chart.slice().reverse().map(x => ({
+				size: this.type == 'local' ? x.drive.local.totalSize : x.drive.remote.totalSize
+			}));
+
+			this.points = data.map((d, i) => `${i},${(1 - (d.size / 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.drive-chart.vue b/src/client/app/desktop/views/pages/admin/admin.drive-chart.vue
new file mode 100644
index 0000000000..4f94fd2372
--- /dev/null
+++ b/src/client/app/desktop/views/pages/admin/admin.drive-chart.vue
@@ -0,0 +1,34 @@
+<template>
+<div class="card">
+	<header>%i18n:@title%</header>
+	<div class="card">
+		<header>%i18n:@local%</header>
+		<x-chart v-if="chart" :chart="chart" type="local"/>
+	</div>
+	<div class="card">
+		<header>%i18n:@remote%</header>
+		<x-chart v-if="chart" :chart="chart" type="remote"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import XChart from "./admin.drive-chart.chart.vue";
+
+export default Vue.extend({
+	components: {
+		XChart
+	},
+	props: {
+		chart: {
+			required: true
+		}
+	}
+});
+</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 add95a1a09..cbb1890cc3 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -13,6 +13,7 @@
 			<x-dashboard/>
 			<x-users-chart :chart="chart"/>
 			<x-notes-chart :chart="chart"/>
+			<x-drive-chart :chart="chart"/>
 		</div>
 		<div v-if="page == 'users'">
 			<x-suspend-user/>
@@ -35,6 +36,7 @@ import XVerifyUser from "./admin.verify-user.vue";
 import XUnverifyUser from "./admin.unverify-user.vue";
 import XUsersChart from "./admin.users-chart.vue";
 import XNotesChart from "./admin.notes-chart.vue";
+import XDriveChart from "./admin.drive-chart.vue";
 
 export default Vue.extend({
 	components: {
@@ -44,7 +46,8 @@ export default Vue.extend({
 		XVerifyUser,
 		XUnverifyUser,
 		XUsersChart,
-		XNotesChart
+		XNotesChart,
+		XDriveChart
 	},
 	data() {
 		return {