一時間ごとのグラフも見れるように

3 files changed, 142 insertions, 73 deletions

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
index 3c537d8d6d..97f05571c3 100644
--- 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
@@ -1,11 +1,14 @@
 <template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-	<polyline
-		:points="points"
-		fill="none"
-		stroke-width="1"
-		stroke="#555"/>
-</svg>
+<div>
+	<a @click="span = 'day'">Per day</a> | <a @click="span = 'hour'">Per hour</a>
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+		<polyline
+			:points="points"
+			fill="none"
+			stroke-width="0.3"
+			stroke="#555"/>
+	</svg>
+</div>
 </template>
 
 <script lang="ts">
@@ -23,20 +26,40 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			viewBoxX: 365,
-			viewBoxY: 70,
-			points: null
+			viewBoxX: 100,
+			viewBoxY: 30,
+			points: null,
+			span: 'day'
 		};
 	},
-	created() {
-		const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.drive.local.totalSize : d.drive.remote.totalSize));
+	computed: {
+		stats(): any[] {
+			return (
+				this.span == 'day' ? this.chart.perDay :
+				this.span == 'hour' ? this.chart.perHour :
+				null
+			);
+		}
+	},
+	watch: {
+		stats() {
+			this.render();
+		}
+	},
+	mounted() {
+		this.render();
+	},
+	methods: {
+		render() {
+			const peak = Math.max.apply(null, this.stats.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
-			}));
+			if (peak != 0) {
+				const data = this.stats.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(' ');
+				this.points = data.map((d, i) => `${(this.viewBoxX / data.length) * i},${(1 - (d.size / peak)) * this.viewBoxY}`).join(' ');
+			}
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue b/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue
index 83c61c1313..fabb3f1bd1 100644
--- a/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue
@@ -1,27 +1,30 @@
 <template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-	<polyline
-		:points="pointsNote"
-		fill="none"
-		stroke-width="1"
-		stroke="#41ddde"/>
-	<polyline
-		:points="pointsReply"
-		fill="none"
-		stroke-width="1"
-		stroke="#f7796c"/>
-	<polyline
-		:points="pointsRenote"
-		fill="none"
-		stroke-width="1"
-		stroke="#a1de41"/>
-	<polyline
-		:points="pointsTotal"
-		fill="none"
-		stroke-width="1"
-		stroke="#555"
-		stroke-dasharray="2 2"/>
-</svg>
+<div>
+	<a @click="span = 'day'">Per day</a> | <a @click="span = 'hour'">Per hour</a>
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+		<polyline
+			:points="pointsNote"
+			fill="none"
+			stroke-width="0.3"
+			stroke="#41ddde"/>
+		<polyline
+			:points="pointsReply"
+			fill="none"
+			stroke-width="0.3"
+			stroke="#f7796c"/>
+		<polyline
+			:points="pointsRenote"
+			fill="none"
+			stroke-width="0.3"
+			stroke="#a1de41"/>
+		<polyline
+			:points="pointsTotal"
+			fill="none"
+			stroke-width="0.3"
+			stroke="#555"
+			stroke-dasharray="1 1"/>
+	</svg>
+</div>
 </template>
 
 <script lang="ts">
@@ -39,29 +42,49 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			viewBoxX: 365,
-			viewBoxY: 70,
+			viewBoxX: 100,
+			viewBoxY: 30,
 			pointsNote: null,
 			pointsReply: null,
 			pointsRenote: null,
-			pointsTotal: null
+			pointsTotal: null,
+			span: 'day'
 		};
 	},
-	created() {
-		const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.notes.local.diff : d.notes.remote.diff));
+	computed: {
+		stats(): any[] {
+			return (
+				this.span == 'day' ? this.chart.perDay :
+				this.span == 'hour' ? this.chart.perHour :
+				null
+			);
+		}
+	},
+	watch: {
+		stats() {
+			this.render();
+		}
+	},
+	mounted() {
+		this.render();
+	},
+	methods: {
+		render() {
+			const peak = Math.max.apply(null, this.stats.map(d => this.type == 'local' ? d.notes.local.diff : d.notes.remote.diff));
 
-		if (peak != 0) {
-			const data = this.chart.slice().reverse().map(x => ({
-				normal: this.type == 'local' ? x.notes.local.diffs.normal : x.notes.remote.diffs.normal,
-				reply: this.type == 'local' ? x.notes.local.diffs.reply : x.notes.remote.diffs.reply,
-				renote: this.type == 'local' ? x.notes.local.diffs.renote : x.notes.remote.diffs.renote,
-				total: this.type == 'local' ? x.notes.local.diff : x.notes.remote.diff
-			}));
+			if (peak != 0) {
+				const data = this.stats.slice().reverse().map(x => ({
+					normal: this.type == 'local' ? x.notes.local.diffs.normal : x.notes.remote.diffs.normal,
+					reply: this.type == 'local' ? x.notes.local.diffs.reply : x.notes.remote.diffs.reply,
+					renote: this.type == 'local' ? x.notes.local.diffs.renote : x.notes.remote.diffs.renote,
+					total: this.type == 'local' ? x.notes.local.diff : x.notes.remote.diff
+				}));
 
-			this.pointsNote = data.map((d, i) => `${i},${(1 - (d.normal / peak)) * this.viewBoxY}`).join(' ');
-			this.pointsReply = data.map((d, i) => `${i},${(1 - (d.reply / peak)) * this.viewBoxY}`).join(' ');
-			this.pointsRenote = data.map((d, i) => `${i},${(1 - (d.renote / peak)) * this.viewBoxY}`).join(' ');
-			this.pointsTotal = data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsNote = data.map((d, i) => `${(this.viewBoxX / data.length) * i},${(1 - (d.normal / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsReply = data.map((d, i) => `${(this.viewBoxX / data.length) * i},${(1 - (d.reply / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsRenote = data.map((d, i) => `${(this.viewBoxX / data.length) * i},${(1 - (d.renote / peak)) * this.viewBoxY}`).join(' ');
+				this.pointsTotal = data.map((d, i) => `${(this.viewBoxX / data.length) * i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
+			}
 		}
 	}
 });
diff --git a/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue b/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue
index c2ab4a78e3..45ecc13929 100644
--- a/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue
@@ -1,11 +1,14 @@
 <template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-	<polyline
-		:points="points"
-		fill="none"
-		stroke-width="1"
-		stroke="#555"/>
-</svg>
+<div>
+	<a @click="span = 'day'">Per day</a> | <a @click="span = 'hour'">Per hour</a>
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+		<polyline
+			:points="points"
+			fill="none"
+			stroke-width="0.3"
+			stroke="#555"/>
+	</svg>
+</div>
 </template>
 
 <script lang="ts">
@@ -23,20 +26,40 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			viewBoxX: 365,
-			viewBoxY: 70,
-			points: null
+			viewBoxX: 100,
+			viewBoxY: 30,
+			points: null,
+			span: 'day'
 		};
 	},
-	created() {
-		const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.users.local.diff : d.users.remote.diff));
+	computed: {
+		stats(): any[] {
+			return (
+				this.span == 'day' ? this.chart.perDay :
+				this.span == 'hour' ? this.chart.perHour :
+				null
+			);
+		}
+	},
+	watch: {
+		stats() {
+			this.render();
+		}
+	},
+	mounted() {
+		this.render();
+	},
+	methods: {
+		render() {
+			const peak = Math.max.apply(null, this.stats.map(d => this.type == 'local' ? d.users.local.diff : d.users.remote.diff));
 
-		if (peak != 0) {
-			const data = this.chart.slice().reverse().map(x => ({
-				count: this.type == 'local' ? x.users.local.diff : x.users.remote.diff
-			}));
+			if (peak != 0) {
+				const data = this.stats.slice().reverse().map(x => ({
+					count: this.type == 'local' ? x.users.local.diff : x.users.remote.diff
+				}));
 
-			this.points = data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ');
+				this.points = data.map((d, i) => `${(this.viewBoxX / data.length) * i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ');
+			}
 		}
 	}
 });