Merge pull request #2450 from syuilo/develop

8.8.0

CHANGELOG.md

@@ -5,6 +5,16 @@ ChangeLog
 
 This document describes breaking changes only.
 
+8.0.0
+-----
+
+### Migration
+
+起動する前に、`node cli/migration/8.0.0`してください。
+
+Please run `node cli/migration/8.0.0` before launch.
+
+
 7.0.0
 -----
 

locales/ja-JP.yml

@@ -939,20 +939,24 @@ desktop/views/pages/admin/admin.unverify-user.vue:
   unverify: "公式アカウントを解除する"
   unverified: "公式アカウントを解除しました"
 
-desktop/views/pages/admin/admin.notes-chart.vue:
+desktop/views/pages/admin/admin.chart.vue:
-  title: "投稿"
+  title: "チャート"
-  local: "ローカル"
+  per-day: "1日ごと"
-  remote: "リモート"
+  per-hour: "1時間ごと"
-
+  notes: "投稿"
-desktop/views/pages/admin/admin.users-chart.vue:
+  users: "ユーザー"
-  title: "ユーザー"
+  drive: "ドライブ"
-  local: "ローカル"
+  charts:
-  remote: "リモート"
+    notes: "投稿の増減 (統合)"
-
+    local-notes: "投稿の増減 (ローカル)"
-desktop/views/pages/admin/admin.drive-chart.vue:
+    remote-notes: "投稿の増減 (リモート)"
-  title: "ドライブ"
+    notes-total: "投稿の累計"
-  local: "ローカル"
+    users: "ユーザーの増減"
-  remote: "リモート"
+    users-total: "ユーザーの累計"
+    drive: "ドライブ使用量の増減"
+    drive-total: "ドライブ使用量の累計"
+    drive-files: "ドライブのファイル数の増減"
+    drive-files-total: "ドライブのファイル数の累計"
 
 desktop/views/pages/deck/deck.tl-column.vue:
   is-media-only: "メディア投稿のみ"

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "misskey",
 	"author": "syuilo <i@syuilo.com>",
-	"version": "8.0.0",
+	"version": "8.8.0",
-	"clientVersion": "1.0.8790",
+	"clientVersion": "1.0.8842",
 	"codename": "nighthike",
 	"main": "./built/index.js",
 	"private": true,
@@ -89,6 +89,7 @@
 		"bootstrap-vue": "2.0.0-rc.11",
 		"cafy": "11.3.0",
 		"chalk": "2.4.1",
+		"chart.js": "2.7.2",
 		"commander": "2.17.1",
 		"crc-32": "1.2.0",
 		"css-loader": "1.0.0",
@@ -149,6 +150,7 @@
 		"loader-utils": "1.1.0",
 		"lodash.assign": "4.2.0",
 		"mecab-async": "0.1.2",
+		"merge-options": "1.0.1",
 		"minio": "7.0.0",
 		"mkdirp": "0.5.1",
 		"mocha": "5.2.0",
@@ -206,6 +208,7 @@
 		"uuid": "3.3.2",
 		"v-animate-css": "0.0.2",
 		"vue": "2.5.17",
+		"vue-chartjs": "3.4.0",
 		"vue-cropperjs": "2.2.1",
 		"vue-js-modal": "1.3.18",
 		"vue-json-tree-view": "2.1.4",

src/client/app/common/views/components/url-preview.vue

@@ -176,7 +176,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.twitter
+.player
 	position relative
 	width 100%
 

src/client/app/common/views/filters/bytes.ts

@@ -1,8 +1,10 @@
 import Vue from 'vue';
 
 Vue.filter('bytes', (v, digits = 0) => {
-	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+	const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-	if (v == 0) return '0Byte';
+	if (v == 0) return '0';
+	const isMinus = v < 0;
+	if (isMinus) v = -v;
 	const i = Math.floor(Math.log(v) / Math.log(1024));
-	return (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i];
+	return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i];
 });

src/client/app/desktop/views/pages/admin/admin.chart.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 || {}));
+		}
+	}
+});

src/client/app/desktop/views/pages/admin/admin.chart.vue

@@ -0,0 +1,403 @@
+<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(false);
+				case 'drive-total': return this.driveChart(true);
+				case 'drive-files': return this.driveFilesChart(false);
+				case 'drive-files-total': return this.driveFilesChart(true);
+			}
+		},
+		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.diff : type == 'remote' ? x.notes.remote.diff : x.notes.local.diff + x.notes.remote.diff
+			}));
+
+			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: 'Notes',
+					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 Notes',
+					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 Notes',
+					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.diff,
+				remoteCount: total ? x.users.remote.total : x.users.remote.diff
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Users',
+					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 Users',
+					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 Users',
+					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(total: boolean): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				localSize: total ? x.drive.local.totalSize : x.drive.local.diffSize,
+				remoteSize: total ? x.drive.remote.totalSize : x.drive.remote.diffSize
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Drive Usage',
+					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 Drive Usage',
+					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 Drive Usage',
+					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(total: boolean): any {
+			const data = this.stats.slice().reverse().map(x => ({
+				date: new Date(x.date),
+				localCount: total ? x.drive.local.totalCount : x.drive.local.diffCount,
+				remoteCount: total ? x.drive.remote.totalCount : x.drive.remote.diffCount
+			}));
+
+			return [{
+				datasets: [{
+					label: 'Drive Files',
+					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 Drive Files',
+					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 Drive Files',
+					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>

src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue

@@ -1,51 +0,0 @@
-<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>

src/client/app/desktop/views/pages/admin/admin.drive-chart.vue

@@ -1,34 +0,0 @@
-<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>

src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue

@@ -1,76 +0,0 @@
-<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>
-</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,
-			pointsNote: null,
-			pointsReply: null,
-			pointsRenote: null,
-			pointsTotal: null
-		};
-	},
-	created() {
-		const peak = Math.max.apply(null, this.chart.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
-			}));
-
-			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(' ');
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-svg
-	display block
-	padding 10px
-	width 100%
-
-</style>

src/client/app/desktop/views/pages/admin/admin.notes-chart.vue

@@ -1,34 +0,0 @@
-<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.notes-chart.chart.vue";
-
-export default Vue.extend({
-	components: {
-		XChart
-	},
-	props: {
-		chart: {
-			required: true
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-</style>

src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue

@@ -1,51 +0,0 @@
-<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.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
-			}));
-
-			this.points = data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ');
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-svg
-	display block
-	padding 10px
-	width 100%
-
-</style>

src/client/app/desktop/views/pages/admin/admin.users-chart.vue

@@ -1,34 +0,0 @@
-<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.users-chart.chart.vue";
-
-export default Vue.extend({
-	components: {
-		XChart
-	},
-	props: {
-		chart: {
-			required: true
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-@import '~const.styl'
-
-</style>

src/client/app/desktop/views/pages/admin/admin.vue

@@ -11,9 +11,7 @@
 	<main>
 		<div v-show="page == 'dashboard'">
 			<x-dashboard/>
-			<x-users-chart :chart="chart"/>
+			<x-chart/>
-			<x-notes-chart :chart="chart"/>
-			<x-drive-chart :chart="chart"/>
 		</div>
 		<div v-if="page == 'users'">
 			<x-suspend-user/>
@@ -34,9 +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 XUsersChart from "./admin.users-chart.vue";
+import XChart from "./admin.chart.vue";
-import XNotesChart from "./admin.notes-chart.vue";
-import XDriveChart from "./admin.drive-chart.vue";
 
 export default Vue.extend({
 	components: {
@@ -45,9 +41,7 @@ export default Vue.extend({
 		XUnsuspendUser,
 		XVerifyUser,
 		XUnverifyUser,
-		XUsersChart,
+		XChart
-		XNotesChart,
-		XDriveChart
 	},
 	data() {
 		return {
@@ -55,11 +49,6 @@ export default Vue.extend({
 			chart: null
 		};
 	},
-	created() {
-		(this as any).api('admin/chart').then(chart => {
-			this.chart = chart;
-		});
-	},
 	methods: {
 		nav(page: string) {
 			this.page = page;

src/server/api/endpoints/admin/chart.ts

@@ -1,103 +0,0 @@
-import Stats, { IStats } from '../../../../models/stats';
-
-type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
-export const meta = {
-	requireCredential: true,
-	requireAdmin: true
-};
-
-export default (params: any) => new Promise(async (res, rej) => {
-	const now = new Date();
-	const y = now.getFullYear();
-	const m = now.getMonth();
-	const d = now.getDate();
-
-	const stats = await Stats.find({
-		span: 'day',
-		date: {
-			$gt: new Date(y - 1, m, d)
-		}
-	}, {
-		sort: {
-			date: -1
-		},
-		fields: {
-			_id: 0
-		}
-	});
-
-	const chart: Array<Omit<IStats, '_id'>> = [];
-
-	for (let i = 364; i >= 0; i--) {
-		const day = new Date(y, m, d - i);
-
-		const stat = stats.find(s => s.date.getTime() == day.getTime());
-
-		if (stat) {
-			chart.unshift(stat);
-		} else { // 隙間埋め
-			const mostRecent = stats.find(s => s.date.getTime() < day.getTime());
-			if (mostRecent) {
-				chart.unshift(Object.assign({}, mostRecent, {
-					date: day
-				}));
-			} else {
-				chart.unshift({
-					date: day,
-					span: 'day',
-					users: {
-						local: {
-							total: 0,
-							diff: 0
-						},
-						remote: {
-							total: 0,
-							diff: 0
-						}
-					},
-					notes: {
-						local: {
-							total: 0,
-							diff: 0,
-							diffs: {
-								normal: 0,
-								reply: 0,
-								renote: 0
-							}
-						},
-						remote: {
-							total: 0,
-							diff: 0,
-							diffs: {
-								normal: 0,
-								reply: 0,
-								renote: 0
-							}
-						}
-					},
-					drive: {
-						local: {
-							totalCount: 0,
-							totalSize: 0,
-							diffCount: 0,
-							diffSize: 0
-						},
-						remote: {
-							totalCount: 0,
-							totalSize: 0,
-							diffCount: 0,
-							diffSize: 0
-						}
-					}
-				});
-			}
-		}
-	}
-
-	chart.forEach(x => {
-		delete x.date;
-	});
-
-	res(chart);
-});

src/server/api/endpoints/chart.ts

@@ -0,0 +1,178 @@
+import Stats, { IStats } from '../../../models/stats';
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export const meta = {
+};
+
+export default (params: any) => new Promise(async (res, rej) => {
+	const daysRange = 30;
+	const hoursRange = 30;
+
+	const now = new Date();
+	const y = now.getFullYear();
+	const m = now.getMonth();
+	const d = now.getDate();
+	const h = now.getHours();
+
+	const [statsPerDay, statsPerHour] = await Promise.all([
+		Stats.find({
+			span: 'day',
+			date: {
+				$gt: new Date(y, m, d - daysRange)
+			}
+		}, {
+			sort: {
+				date: -1
+			},
+			fields: {
+				_id: 0
+			}
+		}),
+		Stats.find({
+			span: 'hour',
+			date: {
+				$gt: new Date(y, m, d, h - hoursRange)
+			}
+		}, {
+			sort: {
+				date: -1
+			},
+			fields: {
+				_id: 0
+			}
+		}),
+	]);
+
+	const format = (src: IStats[], span: 'day' | 'hour') => {
+		const chart: Array<Omit<Omit<IStats, '_id'>, 'span'>> = [];
+
+		const range =
+			span == 'day' ? daysRange :
+			span == 'hour' ? hoursRange :
+			null;
+
+		for (let i = (range - 1); i >= 0; i--) {
+			const current =
+				span == 'day' ? new Date(y, m, d - i) :
+				span == 'hour' ? new Date(y, m, d, h - i) :
+				null;
+
+			const stat = src.find(s => s.date.getTime() == current.getTime());
+
+			if (stat) {
+				chart.unshift(stat);
+			} else { // 隙間埋め
+				const mostRecent = src.find(s => s.date.getTime() < current.getTime());
+				if (mostRecent) {
+					chart.unshift({
+						date: current,
+						users: {
+							local: {
+								total: mostRecent.users.local.total,
+								diff: 0
+							},
+							remote: {
+								total: mostRecent.users.remote.total,
+								diff: 0
+							}
+						},
+						notes: {
+							local: {
+								total: mostRecent.notes.local.total,
+								diff: 0,
+								diffs: {
+									normal: 0,
+									reply: 0,
+									renote: 0
+								}
+							},
+							remote: {
+								total: mostRecent.notes.remote.total,
+								diff: 0,
+								diffs: {
+									normal: 0,
+									reply: 0,
+									renote: 0
+								}
+							}
+						},
+						drive: {
+							local: {
+								totalCount: mostRecent.drive.local.totalCount,
+								totalSize: mostRecent.drive.local.totalSize,
+								diffCount: 0,
+								diffSize: 0
+							},
+							remote: {
+								totalCount: mostRecent.drive.remote.totalCount,
+								totalSize: mostRecent.drive.remote.totalSize,
+								diffCount: 0,
+								diffSize: 0
+							}
+						}
+					});
+				} else {
+					chart.unshift({
+						date: current,
+						users: {
+							local: {
+								total: 0,
+								diff: 0
+							},
+							remote: {
+								total: 0,
+								diff: 0
+							}
+						},
+						notes: {
+							local: {
+								total: 0,
+								diff: 0,
+								diffs: {
+									normal: 0,
+									reply: 0,
+									renote: 0
+								}
+							},
+							remote: {
+								total: 0,
+								diff: 0,
+								diffs: {
+									normal: 0,
+									reply: 0,
+									renote: 0
+								}
+							}
+						},
+						drive: {
+							local: {
+								totalCount: 0,
+								totalSize: 0,
+								diffCount: 0,
+								diffSize: 0
+							},
+							remote: {
+								totalCount: 0,
+								totalSize: 0,
+								diffCount: 0,
+								diffSize: 0
+							}
+						}
+					});
+				}
+			}
+		}
+
+		chart.forEach(x => {
+			delete (x as any).span;
+		});
+
+		return chart;
+	};
+
+	res({
+		perDay: format(statsPerDay, 'day'),
+		perHour: format(statsPerHour, 'hour')
+	});
+});

src/server/api/index.ts

@@ -46,6 +46,11 @@ router.post('/signin', require('./private/signin').default);
 router.use(require('./service/github').routes());
 router.use(require('./service/twitter').routes());
 
+// Return 404 for unknown API
+router.all('*', async ctx => {
+	ctx.status = 404;
+});
+
 // Register router
 app.use(router.routes());
 

src/server/web/index.ts

@@ -122,8 +122,7 @@ router.get('/notes/:note', async ctx => {
 router.get('*', async ctx => {
 	await send(ctx, `app/base.html`, {
 		root: client,
-		maxage: ms('3 days'),
+		maxage: ms('5m')
-		immutable: true
 	});
 });
 

src/services/drive/add-file.ts

@@ -40,7 +40,7 @@ async function save(path: string, name: string, type: string, hash: string, size
 		const thumbnailKey = `${config.drive.prefix}/${uuid.v4()}/${name}.thumbnail.jpg`;
 
 		const baseUrl = config.drive.baseUrl
-			|| `${ config.drive.config.secure ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? ':' + config.drive.config.port : '' }/${ config.drive.bucket }`;
+			|| `${ config.drive.config.useSSL ? 'https' : 'http' }://${ config.drive.config.endPoint }${ config.drive.config.port ? ':' + config.drive.config.port : '' }/${ config.drive.bucket }`;
 
 		await minio.putObject(config.drive.bucket, key, fs.createReadStream(path), size, {
 			'Content-Type': type,