From 47a5f3bc67adb4e95f027e5aa2d14b5a8bb6c697 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 25 Aug 2018 12:28:05 +0900
Subject: チャートコンポーネントを分離するなど
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |  38 +-
 src/client/app/desktop/script.ts                   |   2 +
 .../app/desktop/views/components/charts.chart.ts   |  42 ++
 src/client/app/desktop/views/components/charts.vue | 566 +++++++++++++++++++++
 .../desktop/views/pages/admin/admin.chart.chart.ts |  42 --
 .../app/desktop/views/pages/admin/admin.chart.vue  | 557 --------------------
 src/client/app/desktop/views/pages/admin/admin.vue |   9 +-
 src/client/app/desktop/views/pages/stats/stats.vue |  29 ++
 8 files changed, 662 insertions(+), 623 deletions(-)
 create mode 100644 src/client/app/desktop/views/components/charts.chart.ts
 create mode 100644 src/client/app/desktop/views/components/charts.vue
 delete mode 100644 src/client/app/desktop/views/pages/admin/admin.chart.chart.ts
 delete mode 100644 src/client/app/desktop/views/pages/admin/admin.chart.vue
 create mode 100644 src/client/app/desktop/views/pages/stats/stats.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c44254439c..fae257480c 100644
--- a/locales/ja-JP.yml
+++ b/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: "メディアビュー"
diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts
index 7f4a2d0b00..f0e8a42662 100644
--- a/src/client/app/desktop/script.ts
+++ b/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 },
diff --git a/src/client/app/desktop/views/components/charts.chart.ts b/src/client/app/desktop/views/components/charts.chart.ts
new file mode 100644
index 0000000000..6a241631e9
--- /dev/null
+++ b/src/client/app/desktop/views/components/charts.chart.ts
@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import { Line } from 'vue-chartjs';
+import * as mergeOptions from 'merge-options';
+
+export default Vue.extend({
+	extends: Line,
+	props: {
+		data: {
+			required: true
+		},
+		opts: {
+			required: false
+		}
+	},
+	watch: {
+		data() {
+			this.render();
+		}
+	},
+	mounted() {
+		this.render();
+	},
+	methods: {
+		render() {
+			this.renderChart(this.data, mergeOptions({
+				responsive: true,
+				maintainAspectRatio: false,
+				scales: {
+					xAxes: [{
+						type: 'time',
+						distribution: 'series'
+					}]
+				},
+				tooltips: {
+					intersect: false,
+					mode: 'x',
+					position: 'nearest'
+				}
+			}, this.opts || {}));
+		}
+	}
+});
diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue
new file mode 100644
index 0000000000..ff41639a10
--- /dev/null
+++ b/src/client/app/desktop/views/components/charts.vue
@@ -0,0 +1,566 @@
+<template>
+<div class="gkgckalzgidaygcxnugepioremxvxvpt">
+	<header>
+		<b>%i18n:@title%:</b>
+		<select v-model="chartType">
+			<optgroup label="%i18n:@users%">
+				<option value="users">%i18n:@charts.users%</option>
+				<option value="users-total">%i18n:@charts.users-total%</option>
+			</optgroup>
+			<optgroup label="%i18n:@notes%">
+				<option value="notes">%i18n:@charts.notes%</option>
+				<option value="local-notes">%i18n:@charts.local-notes%</option>
+				<option value="remote-notes">%i18n:@charts.remote-notes%</option>
+				<option value="notes-total">%i18n:@charts.notes-total%</option>
+			</optgroup>
+			<optgroup label="%i18n:@drive%">
+				<option value="drive-files">%i18n:@charts.drive-files%</option>
+				<option value="drive-files-total">%i18n:@charts.drive-files-total%</option>
+				<option value="drive">%i18n:@charts.drive%</option>
+				<option value="drive-total">%i18n:@charts.drive-total%</option>
+			</optgroup>
+		</select>
+		<div>
+			<span @click="span = 'day'" :class="{ active: span == 'day' }">%i18n:@per-day%</span> | <span @click="span = 'hour'" :class="{ active: span == 'hour' }">%i18n:@per-hour%</span>
+		</div>
+	</header>
+	<div>
+		<x-chart v-if="chart" :data="data[0]" :opts="data[1]"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XChart from './charts.chart.ts';
+
+export default Vue.extend({
+	components: {
+		XChart
+	},
+	data() {
+		return {
+			chart: null,
+			chartType: 'notes',
+			span: 'hour'
+		};
+	},
+	computed: {
+		data(): any {
+			if (this.chart == null) return null;
+			switch (this.chartType) {
+				case 'users': return this.usersChart(false);
+				case 'users-total': return this.usersChart(true);
+				case 'notes': return this.notesChart('combined');
+				case 'local-notes': return this.notesChart('local');
+				case 'remote-notes': return this.notesChart('remote');
+				case 'notes-total': return this.notesTotalChart();
+				case 'drive': return this.driveChart();
+				case 'drive-total': return this.driveTotalChart();
+				case 'drive-files': return this.driveFilesChart();
+				case 'drive-files-total': return this.driveFilesTotalChart();
+			}
+		},
+		stats(): any[] {
+			return (
+				this.span == 'day' ? this.chart.perDay :
+				this.span == 'hour' ? this.chart.perHour :
+				null
+			);
+		}
+	},
+	created() {
+		(this as any).api('chart').then(chart => {
+			this.chart = chart;
+		});
+	},
+	methods: {
+		notesChart(type: string): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				normal: type == 'local' ? x.notes.local.diffs.normal : type == 'remote' ? x.notes.remote.diffs.normal : x.notes.local.diffs.normal + x.notes.remote.diffs.normal,
+				reply: type == 'local' ? x.notes.local.diffs.reply : type == 'remote' ? x.notes.remote.diffs.reply : x.notes.local.diffs.reply + x.notes.remote.diffs.reply,
+				renote: type == 'local' ? x.notes.local.diffs.renote : type == 'remote' ? x.notes.remote.diffs.renote : x.notes.local.diffs.renote + x.notes.remote.diffs.renote,
+				all: type == 'local' ? (x.notes.local.inc + -x.notes.local.dec) : type == 'remote' ? (x.notes.remote.inc + -x.notes.remote.dec) : (x.notes.local.inc + -x.notes.local.dec) + (x.notes.remote.inc + -x.notes.remote.dec)
+			}));
+
+			return [{
+				datasets: [{
+					label: 'All',
+					fill: false,
+					borderColor: '#555',
+					borderWidth: 2,
+					borderDash: [4, 4],
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.all }))
+				}, {
+					label: 'Renotes',
+					fill: true,
+					backgroundColor: 'rgba(161, 222, 65, 0.1)',
+					borderColor: '#a1de41',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.renote }))
+				}, {
+					label: 'Replies',
+					fill: true,
+					backgroundColor: 'rgba(247, 121, 108, 0.1)',
+					borderColor: '#f7796c',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.reply }))
+				}, {
+					label: 'Normal',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.normal }))
+				}]
+			}, {
+				scales: {
+					yAxes: [{
+						ticks: {
+							callback: value => {
+								return Vue.filter('number')(value);
+							}
+						}
+					}]
+				},
+				tooltips: {
+					callbacks: {
+						label: (tooltipItem, data) => {
+							const label = data.datasets[tooltipItem.datasetIndex].label || '';
+							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
+						}
+					}
+				}
+			}];
+		},
+
+		notesTotalChart(): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				localCount: x.notes.local.total,
+				remoteCount: x.notes.remote.total
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Combined',
+					fill: false,
+					borderColor: '#555',
+					borderWidth: 2,
+					borderDash: [4, 4],
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteCount + x.localCount }))
+				}, {
+					label: 'Remote',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteCount }))
+				}, {
+					label: 'Local',
+					fill: true,
+					backgroundColor: 'rgba(246, 88, 79, 0.1)',
+					borderColor: '#f6584f',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localCount }))
+				}]
+			}, {
+				scales: {
+					yAxes: [{
+						ticks: {
+							callback: value => {
+								return Vue.filter('number')(value);
+							}
+						}
+					}]
+				},
+				tooltips: {
+					callbacks: {
+						label: (tooltipItem, data) => {
+							const label = data.datasets[tooltipItem.datasetIndex].label || '';
+							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
+						}
+					}
+				}
+			}];
+		},
+
+		usersChart(total: boolean): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				localCount: total ? x.users.local.total : (x.users.local.inc + -x.users.local.dec),
+				remoteCount: total ? x.users.remote.total : (x.users.remote.inc + -x.users.remote.dec)
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Combined',
+					fill: false,
+					borderColor: '#555',
+					borderWidth: 2,
+					borderDash: [4, 4],
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteCount + x.localCount }))
+				}, {
+					label: 'Remote',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteCount }))
+				}, {
+					label: 'Local',
+					fill: true,
+					backgroundColor: 'rgba(246, 88, 79, 0.1)',
+					borderColor: '#f6584f',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localCount }))
+				}]
+			}, {
+				scales: {
+					yAxes: [{
+						ticks: {
+							callback: value => {
+								return Vue.filter('number')(value);
+							}
+						}
+					}]
+				},
+				tooltips: {
+					callbacks: {
+						label: (tooltipItem, data) => {
+							const label = data.datasets[tooltipItem.datasetIndex].label || '';
+							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
+						}
+					}
+				}
+			}];
+		},
+
+		driveChart(): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				localInc: x.drive.local.incSize,
+				localDec: -x.drive.local.decSize,
+				remoteInc: x.drive.remote.incSize,
+				remoteDec: -x.drive.remote.decSize,
+			}));
+
+			return [{
+				datasets: [{
+					label: 'All',
+					fill: false,
+					borderColor: '#555',
+					borderWidth: 2,
+					borderDash: [4, 4],
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localInc + x.localDec + x.remoteInc + x.remoteDec }))
+				}, {
+					label: 'Remote +',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteInc }))
+				}, {
+					label: 'Remote -',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteDec }))
+				}, {
+					label: 'Local +',
+					fill: true,
+					backgroundColor: 'rgba(246, 88, 79, 0.1)',
+					borderColor: '#f6584f',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localInc }))
+				}, {
+					label: 'Local -',
+					fill: true,
+					backgroundColor: 'rgba(246, 88, 79, 0.1)',
+					borderColor: '#f6584f',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localDec }))
+				}]
+			}, {
+				scales: {
+					yAxes: [{
+						ticks: {
+							callback: value => {
+								return Vue.filter('bytes')(value, 1);
+							}
+						}
+					}]
+				},
+				tooltips: {
+					callbacks: {
+						label: (tooltipItem, data) => {
+							const label = data.datasets[tooltipItem.datasetIndex].label || '';
+							return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel, 1)}`;
+						}
+					}
+				}
+			}];
+		},
+
+		driveTotalChart(): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				localSize: x.drive.local.totalSize,
+				remoteSize: x.drive.remote.totalSize
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Combined',
+					fill: false,
+					borderColor: '#555',
+					borderWidth: 2,
+					borderDash: [4, 4],
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteSize + x.localSize }))
+				}, {
+					label: 'Remote',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteSize }))
+				}, {
+					label: 'Local',
+					fill: true,
+					backgroundColor: 'rgba(246, 88, 79, 0.1)',
+					borderColor: '#f6584f',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localSize }))
+				}]
+			}, {
+				scales: {
+					yAxes: [{
+						ticks: {
+							callback: value => {
+								return Vue.filter('bytes')(value);
+							}
+						}
+					}]
+				},
+				tooltips: {
+					callbacks: {
+						label: (tooltipItem, data) => {
+							const label = data.datasets[tooltipItem.datasetIndex].label || '';
+							return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel)}`;
+						}
+					}
+				}
+			}];
+		},
+
+		driveFilesChart(): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				localInc: x.drive.local.incCount,
+				localDec: -x.drive.local.decCount,
+				remoteInc: x.drive.remote.incCount,
+				remoteDec: -x.drive.remote.decCount
+			}));
+
+			return [{
+				datasets: [{
+					label: 'All',
+					fill: false,
+					borderColor: '#555',
+					borderWidth: 2,
+					borderDash: [4, 4],
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localInc + x.localDec + x.remoteInc + x.remoteDec }))
+				}, {
+					label: 'Remote +',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteInc }))
+				}, {
+					label: 'Remote -',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteDec }))
+				}, {
+					label: 'Local +',
+					fill: true,
+					backgroundColor: 'rgba(246, 88, 79, 0.1)',
+					borderColor: '#f6584f',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localInc }))
+				}, {
+					label: 'Local -',
+					fill: true,
+					backgroundColor: 'rgba(246, 88, 79, 0.1)',
+					borderColor: '#f6584f',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localDec }))
+				}]
+			}, {
+				scales: {
+					yAxes: [{
+						ticks: {
+							callback: value => {
+								return Vue.filter('number')(value);
+							}
+						}
+					}]
+				},
+				tooltips: {
+					callbacks: {
+						label: (tooltipItem, data) => {
+							const label = data.datasets[tooltipItem.datasetIndex].label || '';
+							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
+						}
+					}
+				}
+			}];
+		},
+
+		driveFilesTotalChart(): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				localCount: x.drive.local.totalCount,
+				remoteCount: x.drive.remote.totalCount,
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Combined',
+					fill: false,
+					borderColor: '#555',
+					borderWidth: 2,
+					borderDash: [4, 4],
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localCount + x.remoteCount }))
+				}, {
+					label: 'Remote',
+					fill: true,
+					backgroundColor: 'rgba(65, 221, 222, 0.1)',
+					borderColor: '#41ddde',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.remoteCount }))
+				}, {
+					label: 'Local',
+					fill: true,
+					backgroundColor: 'rgba(246, 88, 79, 0.1)',
+					borderColor: '#f6584f',
+					borderWidth: 2,
+					pointBackgroundColor: '#fff',
+					lineTension: 0,
+					data: data.map(x => ({ t: x.date, y: x.localCount }))
+				}]
+			}, {
+				scales: {
+					yAxes: [{
+						ticks: {
+							callback: value => {
+								return Vue.filter('number')(value);
+							}
+						}
+					}]
+				},
+				tooltips: {
+					callbacks: {
+						label: (tooltipItem, data) => {
+							const label = data.datasets[tooltipItem.datasetIndex].label || '';
+							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
+						}
+					}
+				}
+			}];
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@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
+
+		> *:last-child
+			margin-left auto
+
+			*
+				&:not(.active)
+					color $theme-color
+					cursor pointer
+
+	> div
+		> *
+			display block
+			height 300px
+
+</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts b/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts
deleted file mode 100644
index 6a241631e9..0000000000
--- a/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import Vue from 'vue';
-import { Line } from 'vue-chartjs';
-import * as mergeOptions from 'merge-options';
-
-export default Vue.extend({
-	extends: Line,
-	props: {
-		data: {
-			required: true
-		},
-		opts: {
-			required: false
-		}
-	},
-	watch: {
-		data() {
-			this.render();
-		}
-	},
-	mounted() {
-		this.render();
-	},
-	methods: {
-		render() {
-			this.renderChart(this.data, mergeOptions({
-				responsive: true,
-				maintainAspectRatio: false,
-				scales: {
-					xAxes: [{
-						type: 'time',
-						distribution: 'series'
-					}]
-				},
-				tooltips: {
-					intersect: false,
-					mode: 'x',
-					position: 'nearest'
-				}
-			}, this.opts || {}));
-		}
-	}
-});
diff --git a/src/client/app/desktop/views/pages/admin/admin.chart.vue b/src/client/app/desktop/views/pages/admin/admin.chart.vue
deleted file mode 100644
index cca05fec28..0000000000
--- a/src/client/app/desktop/views/pages/admin/admin.chart.vue
+++ /dev/null
@@ -1,557 +0,0 @@
-<template>
-<div class="card gkgckalzgidaygcxnugepioremxvxvpt">
-	<header>
-		<b>%i18n:@title%:</b>
-		<select v-model="chartType">
-			<optgroup label="%i18n:@users%">
-				<option value="users">%i18n:@charts.users%</option>
-				<option value="users-total">%i18n:@charts.users-total%</option>
-			</optgroup>
-			<optgroup label="%i18n:@notes%">
-				<option value="notes">%i18n:@charts.notes%</option>
-				<option value="local-notes">%i18n:@charts.local-notes%</option>
-				<option value="remote-notes">%i18n:@charts.remote-notes%</option>
-				<option value="notes-total">%i18n:@charts.notes-total%</option>
-			</optgroup>
-			<optgroup label="%i18n:@drive%">
-				<option value="drive-files">%i18n:@charts.drive-files%</option>
-				<option value="drive-files-total">%i18n:@charts.drive-files-total%</option>
-				<option value="drive">%i18n:@charts.drive%</option>
-				<option value="drive-total">%i18n:@charts.drive-total%</option>
-			</optgroup>
-		</select>
-		<div>
-			<span @click="span = 'day'" :class="{ active: span == 'day' }">%i18n:@per-day%</span> | <span @click="span = 'hour'" :class="{ active: span == 'hour' }">%i18n:@per-hour%</span>
-		</div>
-	</header>
-	<div>
-		<x-chart v-if="chart" :data="data[0]" :opts="data[1]"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import XChart from './admin.chart.chart.ts';
-
-export default Vue.extend({
-	components: {
-		XChart
-	},
-	data() {
-		return {
-			chart: null,
-			chartType: 'notes',
-			span: 'hour'
-		};
-	},
-	computed: {
-		data(): any {
-			if (this.chart == null) return null;
-			switch (this.chartType) {
-				case 'users': return this.usersChart(false);
-				case 'users-total': return this.usersChart(true);
-				case 'notes': return this.notesChart('combined');
-				case 'local-notes': return this.notesChart('local');
-				case 'remote-notes': return this.notesChart('remote');
-				case 'notes-total': return this.notesTotalChart();
-				case 'drive': return this.driveChart();
-				case 'drive-total': return this.driveTotalChart();
-				case 'drive-files': return this.driveFilesChart();
-				case 'drive-files-total': return this.driveFilesTotalChart();
-			}
-		},
-		stats(): any[] {
-			return (
-				this.span == 'day' ? this.chart.perDay :
-				this.span == 'hour' ? this.chart.perHour :
-				null
-			);
-		}
-	},
-	created() {
-		(this as any).api('chart').then(chart => {
-			this.chart = chart;
-		});
-	},
-	methods: {
-		notesChart(type: string): any {
-			const data = this.stats.slice().reverse().map(x => ({
-				date: new Date(x.date),
-				normal: type == 'local' ? x.notes.local.diffs.normal : type == 'remote' ? x.notes.remote.diffs.normal : x.notes.local.diffs.normal + x.notes.remote.diffs.normal,
-				reply: type == 'local' ? x.notes.local.diffs.reply : type == 'remote' ? x.notes.remote.diffs.reply : x.notes.local.diffs.reply + x.notes.remote.diffs.reply,
-				renote: type == 'local' ? x.notes.local.diffs.renote : type == 'remote' ? x.notes.remote.diffs.renote : x.notes.local.diffs.renote + x.notes.remote.diffs.renote,
-				all: type == 'local' ? (x.notes.local.inc + -x.notes.local.dec) : type == 'remote' ? (x.notes.remote.inc + -x.notes.remote.dec) : (x.notes.local.inc + -x.notes.local.dec) + (x.notes.remote.inc + -x.notes.remote.dec)
-			}));
-
-			return [{
-				datasets: [{
-					label: 'All',
-					fill: false,
-					borderColor: '#555',
-					borderWidth: 2,
-					borderDash: [4, 4],
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.all }))
-				}, {
-					label: 'Renotes',
-					fill: true,
-					backgroundColor: 'rgba(161, 222, 65, 0.1)',
-					borderColor: '#a1de41',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.renote }))
-				}, {
-					label: 'Replies',
-					fill: true,
-					backgroundColor: 'rgba(247, 121, 108, 0.1)',
-					borderColor: '#f7796c',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.reply }))
-				}, {
-					label: 'Normal',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.normal }))
-				}]
-			}, {
-				scales: {
-					yAxes: [{
-						ticks: {
-							callback: value => {
-								return Vue.filter('number')(value);
-							}
-						}
-					}]
-				},
-				tooltips: {
-					callbacks: {
-						label: (tooltipItem, data) => {
-							const label = data.datasets[tooltipItem.datasetIndex].label || '';
-							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
-						}
-					}
-				}
-			}];
-		},
-
-		notesTotalChart(): any {
-			const data = this.stats.slice().reverse().map(x => ({
-				date: new Date(x.date),
-				localCount: x.notes.local.total,
-				remoteCount: x.notes.remote.total
-			}));
-
-			return [{
-				datasets: [{
-					label: 'Combined',
-					fill: false,
-					borderColor: '#555',
-					borderWidth: 2,
-					borderDash: [4, 4],
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteCount + x.localCount }))
-				}, {
-					label: 'Remote',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteCount }))
-				}, {
-					label: 'Local',
-					fill: true,
-					backgroundColor: 'rgba(246, 88, 79, 0.1)',
-					borderColor: '#f6584f',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localCount }))
-				}]
-			}, {
-				scales: {
-					yAxes: [{
-						ticks: {
-							callback: value => {
-								return Vue.filter('number')(value);
-							}
-						}
-					}]
-				},
-				tooltips: {
-					callbacks: {
-						label: (tooltipItem, data) => {
-							const label = data.datasets[tooltipItem.datasetIndex].label || '';
-							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
-						}
-					}
-				}
-			}];
-		},
-
-		usersChart(total: boolean): any {
-			const data = this.stats.slice().reverse().map(x => ({
-				date: new Date(x.date),
-				localCount: total ? x.users.local.total : (x.users.local.inc + -x.users.local.dec),
-				remoteCount: total ? x.users.remote.total : (x.users.remote.inc + -x.users.remote.dec)
-			}));
-
-			return [{
-				datasets: [{
-					label: 'Combined',
-					fill: false,
-					borderColor: '#555',
-					borderWidth: 2,
-					borderDash: [4, 4],
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteCount + x.localCount }))
-				}, {
-					label: 'Remote',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteCount }))
-				}, {
-					label: 'Local',
-					fill: true,
-					backgroundColor: 'rgba(246, 88, 79, 0.1)',
-					borderColor: '#f6584f',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localCount }))
-				}]
-			}, {
-				scales: {
-					yAxes: [{
-						ticks: {
-							callback: value => {
-								return Vue.filter('number')(value);
-							}
-						}
-					}]
-				},
-				tooltips: {
-					callbacks: {
-						label: (tooltipItem, data) => {
-							const label = data.datasets[tooltipItem.datasetIndex].label || '';
-							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
-						}
-					}
-				}
-			}];
-		},
-
-		driveChart(): any {
-			const data = this.stats.slice().reverse().map(x => ({
-				date: new Date(x.date),
-				localInc: x.drive.local.incSize,
-				localDec: -x.drive.local.decSize,
-				remoteInc: x.drive.remote.incSize,
-				remoteDec: -x.drive.remote.decSize,
-			}));
-
-			return [{
-				datasets: [{
-					label: 'All',
-					fill: false,
-					borderColor: '#555',
-					borderWidth: 2,
-					borderDash: [4, 4],
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localInc + x.localDec + x.remoteInc + x.remoteDec }))
-				}, {
-					label: 'Remote +',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteInc }))
-				}, {
-					label: 'Remote -',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteDec }))
-				}, {
-					label: 'Local +',
-					fill: true,
-					backgroundColor: 'rgba(246, 88, 79, 0.1)',
-					borderColor: '#f6584f',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localInc }))
-				}, {
-					label: 'Local -',
-					fill: true,
-					backgroundColor: 'rgba(246, 88, 79, 0.1)',
-					borderColor: '#f6584f',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localDec }))
-				}]
-			}, {
-				scales: {
-					yAxes: [{
-						ticks: {
-							callback: value => {
-								return Vue.filter('bytes')(value, 1);
-							}
-						}
-					}]
-				},
-				tooltips: {
-					callbacks: {
-						label: (tooltipItem, data) => {
-							const label = data.datasets[tooltipItem.datasetIndex].label || '';
-							return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel, 1)}`;
-						}
-					}
-				}
-			}];
-		},
-
-		driveTotalChart(): any {
-			const data = this.stats.slice().reverse().map(x => ({
-				date: new Date(x.date),
-				localSize: x.drive.local.totalSize,
-				remoteSize: x.drive.remote.totalSize
-			}));
-
-			return [{
-				datasets: [{
-					label: 'Combined',
-					fill: false,
-					borderColor: '#555',
-					borderWidth: 2,
-					borderDash: [4, 4],
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteSize + x.localSize }))
-				}, {
-					label: 'Remote',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteSize }))
-				}, {
-					label: 'Local',
-					fill: true,
-					backgroundColor: 'rgba(246, 88, 79, 0.1)',
-					borderColor: '#f6584f',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localSize }))
-				}]
-			}, {
-				scales: {
-					yAxes: [{
-						ticks: {
-							callback: value => {
-								return Vue.filter('bytes')(value);
-							}
-						}
-					}]
-				},
-				tooltips: {
-					callbacks: {
-						label: (tooltipItem, data) => {
-							const label = data.datasets[tooltipItem.datasetIndex].label || '';
-							return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel)}`;
-						}
-					}
-				}
-			}];
-		},
-
-		driveFilesChart(): any {
-			const data = this.stats.slice().reverse().map(x => ({
-				date: new Date(x.date),
-				localInc: x.drive.local.incCount,
-				localDec: -x.drive.local.decCount,
-				remoteInc: x.drive.remote.incCount,
-				remoteDec: -x.drive.remote.decCount
-			}));
-
-			return [{
-				datasets: [{
-					label: 'All',
-					fill: false,
-					borderColor: '#555',
-					borderWidth: 2,
-					borderDash: [4, 4],
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localInc + x.localDec + x.remoteInc + x.remoteDec }))
-				}, {
-					label: 'Remote +',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteInc }))
-				}, {
-					label: 'Remote -',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteDec }))
-				}, {
-					label: 'Local +',
-					fill: true,
-					backgroundColor: 'rgba(246, 88, 79, 0.1)',
-					borderColor: '#f6584f',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localInc }))
-				}, {
-					label: 'Local -',
-					fill: true,
-					backgroundColor: 'rgba(246, 88, 79, 0.1)',
-					borderColor: '#f6584f',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localDec }))
-				}]
-			}, {
-				scales: {
-					yAxes: [{
-						ticks: {
-							callback: value => {
-								return Vue.filter('number')(value);
-							}
-						}
-					}]
-				},
-				tooltips: {
-					callbacks: {
-						label: (tooltipItem, data) => {
-							const label = data.datasets[tooltipItem.datasetIndex].label || '';
-							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
-						}
-					}
-				}
-			}];
-		},
-
-		driveFilesTotalChart(): any {
-			const data = this.stats.slice().reverse().map(x => ({
-				date: new Date(x.date),
-				localCount: x.drive.local.totalCount,
-				remoteCount: x.drive.remote.totalCount,
-			}));
-
-			return [{
-				datasets: [{
-					label: 'Combined',
-					fill: false,
-					borderColor: '#555',
-					borderWidth: 2,
-					borderDash: [4, 4],
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localCount + x.remoteCount }))
-				}, {
-					label: 'Remote',
-					fill: true,
-					backgroundColor: 'rgba(65, 221, 222, 0.1)',
-					borderColor: '#41ddde',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.remoteCount }))
-				}, {
-					label: 'Local',
-					fill: true,
-					backgroundColor: 'rgba(246, 88, 79, 0.1)',
-					borderColor: '#f6584f',
-					borderWidth: 2,
-					pointBackgroundColor: '#fff',
-					lineTension: 0,
-					data: data.map(x => ({ t: x.date, y: x.localCount }))
-				}]
-			}, {
-				scales: {
-					yAxes: [{
-						ticks: {
-							callback: value => {
-								return Vue.filter('number')(value);
-							}
-						}
-					}]
-				},
-				tooltips: {
-					callbacks: {
-						label: (tooltipItem, data) => {
-							const label = data.datasets[tooltipItem.datasetIndex].label || '';
-							return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`;
-						}
-					}
-				}
-			}];
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-.gkgckalzgidaygcxnugepioremxvxvpt
-	*
-		user-select none
-
-	> header
-		display flex
-
-		> b
-			margin-right 8px
-
-		> *:last-child
-			margin-left auto
-
-			*
-				&:not(.active)
-					color $theme-color
-					cursor pointer
-
-	> div
-		> *
-			display block
-			height 300px
-
-</style>
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index 0bb5ed0a0f..e669b0d2a9 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/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: {
diff --git a/src/client/app/desktop/views/pages/stats/stats.vue b/src/client/app/desktop/views/pages/stats/stats.vue
new file mode 100644
index 0000000000..18dca85f0d
--- /dev/null
+++ b/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>
-- 
cgit v1.2.3-freya