From e88f7ca7b2c06cac067c54dd18695ab27f303fab Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 3 Nov 2018 16:44:05 +0900
Subject: [PATCH] [Client] Fix some charts

---
 .../views/components/activity.calendar.vue    |  14 ++-
 .../app/desktop/views/components/activity.vue |  12 +-
 .../app/mobile/views/components/activity.vue  | 111 +++++++++++++-----
 3 files changed, 101 insertions(+), 36 deletions(-)

diff --git a/src/client/app/desktop/views/components/activity.calendar.vue b/src/client/app/desktop/views/components/activity.calendar.vue
index 1a88d1a99..4306aa928 100644
--- a/src/client/app/desktop/views/components/activity.calendar.vue
+++ b/src/client/app/desktop/views/components/activity.calendar.vue
@@ -32,9 +32,21 @@ export default Vue.extend({
 		this.data.forEach(d => d.total = d.notes + d.replies + d.renotes);
 		const peak = Math.max.apply(null, this.data.map(d => d.total));
 
+		const now = new Date();
+		const year = now.getFullYear();
+		const month = now.getMonth();
+		const day = now.getDate();
+
 		let x = 0;
-		this.data.slice().reverse().forEach(d => {
+		this.data.slice().reverse().forEach((d, i) => {
 			d.x = x;
+
+			const date = new Date(year, month, day - i);
+			d.date = {
+				year: date.getFullYear(),
+				month: date.getMonth(),
+				day: date.getDate()
+			};
 			d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
 
 			d.v = peak == 0 ? 0 : d.total / (peak / 2);
diff --git a/src/client/app/desktop/views/components/activity.vue b/src/client/app/desktop/views/components/activity.vue
index bd952c39d..e9ed532a3 100644
--- a/src/client/app/desktop/views/components/activity.vue
+++ b/src/client/app/desktop/views/components/activity.vue
@@ -43,11 +43,17 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		(this as any).api('aggregation/users/activity', {
+		(this as any).api('charts/user/notes', {
 			userId: this.user.id,
-			limit: 20 * 7
+			span: 'day',
+			limit: 7 * 20
 		}).then(activity => {
-			this.activity = activity;
+			this.activity = activity.diffs.normal.map((_, i) => ({
+				total: activity.diffs.normal[i] + activity.diffs.reply[i] + activity.diffs.renote[i],
+				notes: activity.diffs.normal[i],
+				replies: activity.diffs.reply[i],
+				renotes: activity.diffs.renote[i]
+			}));
 			this.fetching = false;
 		});
 	},
diff --git a/src/client/app/mobile/views/components/activity.vue b/src/client/app/mobile/views/components/activity.vue
index dcd319cb6..627bebbd3 100644
--- a/src/client/app/mobile/views/components/activity.vue
+++ b/src/client/app/mobile/views/components/activity.vue
@@ -1,23 +1,13 @@
 <template>
 <div class="mk-activity">
-	<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none">
-		<g v-for="(d, i) in data">
-			<rect width="0.8" :height="d.notesH"
-				:x="i + 0.1" :y="1 - d.notesH - d.repliesH - d.renotesH"
-				fill="#41ddde"/>
-			<rect width="0.8" :height="d.repliesH"
-				:x="i + 0.1" :y="1 - d.repliesH - d.renotesH"
-				fill="#f7796c"/>
-			<rect width="0.8" :height="d.renotesH"
-				:x="i + 0.1" :y="1 - d.renotesH"
-				fill="#a1de41"/>
-			</g>
-	</svg>
+	<div ref="chart"></div>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import * as ApexCharts from 'apexcharts';
+
 export default Vue.extend({
 	props: ['user'],
 	data() {
@@ -28,19 +18,84 @@ export default Vue.extend({
 		};
 	},
 	mounted() {
-		(this as any).api('aggregation/users/activity', {
+		(this as any).api('charts/user/notes', {
 			userId: this.user.id,
-			limit: 30
-		}).then(data => {
-			data.forEach(d => d.total = d.notes + d.replies + d.renotes);
-			this.peak = Math.max.apply(null, data.map(d => d.total));
-			data.forEach(d => {
-				d.notesH = d.notes / this.peak;
-				d.repliesH = d.replies / this.peak;
-				d.renotesH = d.renotes / this.peak;
+			span: 'day',
+			limit: 21
+		}).then(stats => {
+			const normal = [];
+			const reply = [];
+			const renote = [];
+
+			const now = new Date();
+			const y = now.getFullYear();
+			const m = now.getMonth();
+			const d = now.getDate();
+
+			for (let i = 0; i < 21; i++) {
+				const x = new Date(y, m, d - i);
+				normal.push([
+					x,
+					stats.diffs.normal[i]
+				]);
+				reply.push([
+					x,
+					stats.diffs.reply[i]
+				]);
+				renote.push([
+					x,
+					stats.diffs.renote[i]
+				]);
+			}
+
+			const chart = new ApexCharts(this.$refs.chart, {
+				chart: {
+					type: 'bar',
+					stacked: true,
+					height: 100,
+					sparkline: {
+						enabled: true
+					},
+				},
+				plotOptions: {
+					bar: {
+						columnWidth: '90%',
+						endingShape: 'rounded'
+					}
+				},
+				grid: {
+					clipMarkers: false,
+					padding: {
+						top: 0,
+						right: 8,
+						bottom: 0,
+						left: 8
+					}
+				},
+				tooltip: {
+					shared: true,
+					intersect: false
+				},
+				series: [{
+					name: 'Normal',
+					data: normal
+				}, {
+					name: 'Reply',
+					data: reply
+				}, {
+					name: 'Renote',
+					data: renote
+				}],
+				xaxis: {
+					type: 'datetime',
+					crosshairs: {
+						width: 1,
+						opacity: 1
+					}
+				}
 			});
-			data.reverse();
-			this.data = data;
+
+			chart.render();
 		});
 	}
 });
@@ -51,12 +106,4 @@ export default Vue.extend({
 	max-width 600px
 	margin 0 auto
 
-	> svg
-		display block
-		width 100%
-		height 80px
-
-		> rect
-			transform-origin center
-
 </style>