diff options
Diffstat (limited to 'src')
3 files changed, 89 insertions, 1 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 new file mode 100644 index 0000000000..3c537d8d6d --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.drive-chart.chart.vue @@ -0,0 +1,51 @@ +<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> 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 new file mode 100644 index 0000000000..4f94fd2372 --- /dev/null +++ b/src/client/app/desktop/views/pages/admin/admin.drive-chart.vue @@ -0,0 +1,34 @@ +<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.vue b/src/client/app/desktop/views/pages/admin/admin.vue index add95a1a09..cbb1890cc3 100644 --- a/src/client/app/desktop/views/pages/admin/admin.vue +++ b/src/client/app/desktop/views/pages/admin/admin.vue @@ -13,6 +13,7 @@ <x-dashboard/> <x-users-chart :chart="chart"/> <x-notes-chart :chart="chart"/> + <x-drive-chart :chart="chart"/> </div> <div v-if="page == 'users'"> <x-suspend-user/> @@ -35,6 +36,7 @@ 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"; export default Vue.extend({ components: { @@ -44,7 +46,8 @@ export default Vue.extend({ XVerifyUser, XUnverifyUser, XUsersChart, - XNotesChart + XNotesChart, + XDriveChart }, data() { return { |