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