From 774834a31fbf621785824d43cc4cc1023cdbe888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= <root@acid-chicken.com> Date: Thu, 23 Aug 2018 16:25:36 +0900 Subject: [PATCH 1/7] Update url-preview.vue --- src/client/app/common/views/components/url-preview.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue index be69012737..4ddc137ed1 100644 --- a/src/client/app/common/views/components/url-preview.vue +++ b/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% From 71a5662195b4b6a8d4d2c2fc357752b9da350b6f Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 23 Aug 2018 16:36:23 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=E4=B8=80=E6=99=82=E9=96=93=E3=81=94?= =?UTF-8?q?=E3=81=A8=E3=81=AE=E3=82=B0=E3=83=A9=E3=83=95=E3=82=82=E8=A6=8B?= =?UTF-8?q?=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/admin/admin.drive-chart.chart.vue | 57 ++++-- .../pages/admin/admin.notes-chart.chart.vue | 101 ++++++---- .../pages/admin/admin.users-chart.chart.vue | 57 ++++-- src/server/api/endpoints/admin/chart.ts | 184 +++++++++++------- 4 files changed, 251 insertions(+), 148 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(' '); + } } } }); diff --git a/src/server/api/endpoints/admin/chart.ts b/src/server/api/endpoints/admin/chart.ts index c351c7167d..1897879d65 100644 --- a/src/server/api/endpoints/admin/chart.ts +++ b/src/server/api/endpoints/admin/chart.ts @@ -8,96 +8,130 @@ export const meta = { }; export default (params: any) => new Promise(async (res, rej) => { + const daysRange = 365; + const hoursRange = 24; + const now = new Date(); const y = now.getFullYear(); const m = now.getMonth(); const d = now.getDate(); + const h = now.getHours(); - const stats = await Stats.find({ - span: 'day', - date: { - $gt: new Date(y - 1, m, d) - } - }, { - sort: { - date: -1 - }, - fields: { - _id: 0 - } - }); + 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 chart: Array<Omit<IStats, '_id'>> = []; + const format = (src: IStats[], span: 'day' | 'hour') => { + const chart: Array<Omit<Omit<IStats, '_id'>, 'span'>> = []; - for (let i = 364; i >= 0; i--) { - const day = new Date(y, m, d - i); + const range = + span == 'day' ? daysRange : + span == 'hour' ? hoursRange : + null; - const stat = stats.find(s => s.date.getTime() == day.getTime()); + 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; - 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 + 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(Object.assign({}, mostRecent, { + date: current + })); + } else { + chart.unshift({ + date: current, + users: { + local: { + total: 0, + diff: 0 + }, + remote: { + total: 0, + diff: 0 } }, - remote: { - total: 0, - diff: 0, - diffs: { - normal: 0, - reply: 0, - renote: 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 } } - }, - 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; + chart.forEach(x => { + delete x.date; + delete (x as any).span; + }); + + return chart; + }; + + res({ + perDay: format(statsPerDay, 'day'), + perHour: format(statsPerHour, 'hour') }); - - res(chart); }); From 31ed8949b951eb5724a9b782f76f5780b385ebee Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Thu, 23 Aug 2018 16:37:32 +0900 Subject: [PATCH 4/7] 8.1.0 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 077d30b96a..e2c9283bf0 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "misskey", "author": "syuilo <i@syuilo.com>", - "version": "8.0.0", - "clientVersion": "1.0.8790", + "version": "8.1.0", + "clientVersion": "1.0.8811", "codename": "nighthike", "main": "./built/index.js", "private": true, From 4dee7d91b17148c5c3ee12c3bee193fccaeb22b6 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Fri, 24 Aug 2018 05:37:19 +0900 Subject: [PATCH 6/7] Better charts --- locales/ja-JP.yml | 28 +-- package.json | 2 + .../views/pages/admin/admin.chart.chart.ts | 40 ++++ .../desktop/views/pages/admin/admin.chart.vue | 195 ++++++++++++++++++ .../pages/admin/admin.drive-chart.chart.vue | 74 ------- .../views/pages/admin/admin.drive-chart.vue | 34 --- .../pages/admin/admin.notes-chart.chart.vue | 99 --------- .../views/pages/admin/admin.notes-chart.vue | 34 --- .../pages/admin/admin.users-chart.chart.vue | 74 ------- .../views/pages/admin/admin.users-chart.vue | 34 --- .../app/desktop/views/pages/admin/admin.vue | 12 +- src/server/api/endpoints/admin/chart.ts | 3 +- 12 files changed, 255 insertions(+), 374 deletions(-) create mode 100644 src/client/app/desktop/views/pages/admin/admin.chart.chart.ts create mode 100644 src/client/app/desktop/views/pages/admin/admin.chart.vue delete mode 100644 src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue delete mode 100644 src/client/app/desktop/views/pages/admin/admin.drive-chart.vue delete mode 100644 src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue delete mode 100644 src/client/app/desktop/views/pages/admin/admin.notes-chart.vue delete mode 100644 src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue delete mode 100644 src/client/app/desktop/views/pages/admin/admin.users-chart.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index dfcdb59e1c..31b81f1d7e 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -939,20 +939,20 @@ desktop/views/pages/admin/admin.unverify-user.vue: unverify: "公式アカウントを解除する" unverified: "公式アカウントを解除しました" -desktop/views/pages/admin/admin.notes-chart.vue: - title: "投稿" - local: "ローカル" - remote: "リモート" - -desktop/views/pages/admin/admin.users-chart.vue: - title: "ユーザー" - local: "ローカル" - remote: "リモート" - -desktop/views/pages/admin/admin.drive-chart.vue: - title: "ドライブ" - local: "ローカル" - remote: "リモート" +desktop/views/pages/admin/admin.chart.vue: + title: "チャート" + local-notes: "ローカルの投稿" + remote-notes: "リモートの投稿" + local-notes-total: "ローカルの投稿 (累計)" + remote-notes-total: "リモートの投稿 (累計)" + local-users: "ローカルのユーザー" + remote-users: "リモートのユーザー" + local-users-total: "ローカルのユーザー (累計)" + remote-users-total: "リモートのユーザー (累計)" + local-drive: "ローカルのドライブ使用量" + remote-drive: "リモートのドライブ使用量" + local-drive-total: "ローカルのドライブ使用量 (累計)" + remote-drive-total: "リモートのドライブ使用量 (累計)" desktop/views/pages/deck/deck.tl-column.vue: is-media-only: "メディア投稿のみ" diff --git a/package.json b/package.json index e2c9283bf0..3c95d05416 100644 --- a/package.json +++ b/package.json @@ -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", @@ -206,6 +207,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", 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 new file mode 100644 index 0000000000..62043b21dc --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.chart.chart.ts @@ -0,0 +1,40 @@ +import Vue from 'vue'; +import { Line } from 'vue-chartjs'; + +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, Object.assign({ + responsive: false, + scales: { + xAxes: [{ + type: 'time', + time: { + displayFormats: { + quarter: 'YYYY/MM/D h:mm' + } + }, + distribution: 'series' + }] + } + }, 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 new file mode 100644 index 0000000000..c92caeb2f0 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.chart.vue @@ -0,0 +1,195 @@ +<template> +<div class="card gkgckalzgidaygcxnugepioremxvxvpt"> + <header> + <b>%i18n:@title%:</b> + <select v-model="chartType"> + <option value="local-users">%i18n:@local-users%</option> + <option value="remote-users">%i18n:@remote-users%</option> + <option value="local-users-total">%i18n:@local-users-total%</option> + <option value="remote-users-total">%i18n:@remote-users-total%</option> + <option value="local-notes">%i18n:@local-notes%</option> + <option value="remote-notes">%i18n:@remote-notes%</option> + <option value="local-notes-total">%i18n:@local-notes-total%</option> + <option value="remote-notes-total">%i18n:@remote-notes-total%</option> + <option value="local-drive">%i18n:@local-drive%</option> + <option value="remote-drive">%i18n:@remote-drive%</option> + <option value="local-drive-total">%i18n:@local-drive-total%</option> + <option value="remote-drive-total">%i18n:@remote-drive-total%</option> + </select> + <div> + <a @click="span = 'day'">Per DAY</a> | <a @click="span = 'hour'">Per HOUR</a> + </div> + </header> + <x-chart v-if="chart" :data="data[0]" :opts="data[1]" :width="720" :height="300"/> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import XChart from './admin.chart.chart.ts'; + +export default Vue.extend({ + components: { + XChart + }, + props: { + chart: { + required: true + } + }, + data() { + return { + chartType: 'local-notes', + span: 'hour' + }; + }, + computed: { + data(): any { + if (this.chart == null) return null; + switch (this.chartType) { + case 'local-users': return this.usersChart(true, false); + case 'remote-users': return this.usersChart(false, false); + case 'local-users-total': return this.usersChart(true, true); + case 'remote-users-total': return this.usersChart(false, true); + case 'local-notes': return this.notesChart(true); + case 'remote-notes': return this.notesChart(false); + case 'local-notes-total': return this.notesTotalChart(true); + case 'remote-notes-total': return this.notesTotalChart(false); + case 'local-drive': return this.driveChart(true, false); + case 'remote-drive': return this.driveChart(false, false); + case 'local-drive-total': return this.driveChart(true, true); + case 'remote-drive-total': return this.driveChart(false, true); + } + }, + stats(): any[] { + return ( + this.span == 'day' ? this.chart.perDay : + this.span == 'hour' ? this.chart.perHour : + null + ); + } + }, + methods: { + notesChart(local: boolean): any { + const data = this.stats.slice().reverse().map(x => ({ + date: new Date(x.date), + normal: local ? x.notes.local.diffs.normal : x.notes.remote.diffs.normal, + reply: local ? x.notes.local.diffs.reply : x.notes.remote.diffs.reply, + renote: local ? x.notes.local.diffs.renote : x.notes.remote.diffs.renote, + total: local ? x.notes.local.diff : x.notes.remote.diff + })); + + return [{ + datasets: [{ + label: 'Normal', + fill: false, + borderColor: '#41ddde', + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.normal })) + }, { + label: 'Replies', + fill: false, + borderColor: '#f7796c', + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.reply })) + }, { + label: 'Renotes', + fill: false, + borderColor: '#a1de41', + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.renote })) + }] + }]; + }, + notesTotalChart(local: boolean): any { + const data = this.stats.slice().reverse().map(x => ({ + date: new Date(x.date), + count: local ? x.notes.local.total : x.notes.remote.total, + })); + + return [{ + datasets: [{ + label: local ? 'Local Notes' : 'Remote Notes', + fill: false, + borderColor: '#f6584f', + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.count })) + }] + }]; + }, + usersChart(local: boolean, total: boolean): any { + const data = this.stats.slice().reverse().map(x => ({ + date: new Date(x.date), + count: local ? + total ? x.users.local.total : x.users.local.diff : + total ? x.users.remote.total : x.users.remote.diff + })); + + return [{ + datasets: [{ + label: local ? 'Local Users' : 'Remote Users', + fill: false, + borderColor: '#f6584f', + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.count })) + }] + }]; + }, + driveChart(local: boolean, total: boolean): any { + const data = this.stats.slice().reverse().map(x => ({ + date: new Date(x.date), + count: local ? + total ? x.drive.local.totalSize : x.drive.local.diffSize : + total ? x.drive.remote.totalSize : x.drive.remote.diffSize + })); + + return [{ + datasets: [{ + label: local ? 'Local Drive Usage' : 'Remote Drive Usage', + fill: false, + borderColor: '#f6584f', + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.count })) + }] + }, { + scales: { + yAxes: [{ + ticks: { + callback: (value) => { + return Vue.filter('bytes')(value); + } + } + }] + } + }]; + } + } +}); +</script> + +<style lang="stylus" scoped> +@import '~const.styl' + +.gkgckalzgidaygcxnugepioremxvxvpt + > header + display flex + + > b + margin-right 8px + + > *:last-child + margin-left auto + +</style> 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 deleted file mode 100644 index 97f05571c3..0000000000 --- a/src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue +++ /dev/null @@ -1,74 +0,0 @@ -<template> -<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"> -import Vue from 'vue'; - -export default Vue.extend({ - props: { - chart: { - required: true - }, - type: { - type: String, - required: true - } - }, - data() { - return { - viewBoxX: 100, - viewBoxY: 30, - points: null, - span: 'day' - }; - }, - 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.stats.slice().reverse().map(x => ({ - size: this.type == 'local' ? x.drive.local.totalSize : x.drive.remote.totalSize - })); - - this.points = data.map((d, i) => `${(this.viewBoxX / data.length) * 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 deleted file mode 100644 index 4f94fd2372..0000000000 --- a/src/client/app/desktop/views/pages/admin/admin.drive-chart.vue +++ /dev/null @@ -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> 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 deleted file mode 100644 index fabb3f1bd1..0000000000 --- a/src/client/app/desktop/views/pages/admin/admin.notes-chart.chart.vue +++ /dev/null @@ -1,99 +0,0 @@ -<template> -<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"> -import Vue from 'vue'; - -export default Vue.extend({ - props: { - chart: { - required: true - }, - type: { - type: String, - required: true - } - }, - data() { - return { - viewBoxX: 100, - viewBoxY: 30, - pointsNote: null, - pointsReply: null, - pointsRenote: null, - pointsTotal: null, - span: 'day' - }; - }, - 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.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) => `${(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(' '); - } - } - } -}); -</script> - -<style lang="stylus" scoped> -svg - display block - padding 10px - width 100% - -</style> diff --git a/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue b/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue deleted file mode 100644 index e4d396d9c6..0000000000 --- a/src/client/app/desktop/views/pages/admin/admin.notes-chart.vue +++ /dev/null @@ -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> 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 deleted file mode 100644 index 45ecc13929..0000000000 --- a/src/client/app/desktop/views/pages/admin/admin.users-chart.chart.vue +++ /dev/null @@ -1,74 +0,0 @@ -<template> -<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"> -import Vue from 'vue'; - -export default Vue.extend({ - props: { - chart: { - required: true - }, - type: { - type: String, - required: true - } - }, - data() { - return { - viewBoxX: 100, - viewBoxY: 30, - points: null, - span: 'day' - }; - }, - 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.stats.slice().reverse().map(x => ({ - count: this.type == 'local' ? x.users.local.diff : x.users.remote.diff - })); - - this.points = data.map((d, i) => `${(this.viewBoxX / data.length) * i},${(1 - (d.count / 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.users-chart.vue b/src/client/app/desktop/views/pages/admin/admin.users-chart.vue deleted file mode 100644 index e620012702..0000000000 --- a/src/client/app/desktop/views/pages/admin/admin.users-chart.vue +++ /dev/null @@ -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> diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue index cbb1890cc3..066c1a4f4f 100644 --- a/src/client/app/desktop/views/pages/admin/admin.vue +++ b/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-notes-chart :chart="chart"/> - <x-drive-chart :chart="chart"/> + <x-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 XNotesChart from "./admin.notes-chart.vue"; -import XDriveChart from "./admin.drive-chart.vue"; +import XChart from "./admin.chart.vue"; export default Vue.extend({ components: { @@ -45,9 +41,7 @@ export default Vue.extend({ XUnsuspendUser, XVerifyUser, XUnverifyUser, - XUsersChart, - XNotesChart, - XDriveChart + XChart }, data() { return { diff --git a/src/server/api/endpoints/admin/chart.ts b/src/server/api/endpoints/admin/chart.ts index 1897879d65..1b88af00bd 100644 --- a/src/server/api/endpoints/admin/chart.ts +++ b/src/server/api/endpoints/admin/chart.ts @@ -8,7 +8,7 @@ export const meta = { }; export default (params: any) => new Promise(async (res, rej) => { - const daysRange = 365; + const daysRange = 90; const hoursRange = 24; const now = new Date(); @@ -123,7 +123,6 @@ export default (params: any) => new Promise(async (res, rej) => { } chart.forEach(x => { - delete x.date; delete (x as any).span; }); From 93b2b82993eaad6b3d3b29f7929389724e19babc Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Fri, 24 Aug 2018 05:37:42 +0900 Subject: [PATCH 7/7] 8.2.0 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 3c95d05416..9b42b71123 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "misskey", "author": "syuilo <i@syuilo.com>", - "version": "8.1.0", - "clientVersion": "1.0.8811", + "version": "8.2.0", + "clientVersion": "1.0.8818", "codename": "nighthike", "main": "./built/index.js", "private": true,