From c349df7dc3fab6ae3ae23625041f5f2f07d3dd20 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 25 Aug 2018 15:25:16 +0900 Subject: [PATCH] :art: --- .../app/desktop/views/components/charts.vue | 195 ++++++++++-------- .../app/desktop/views/pages/stats/stats.vue | 2 +- 2 files changed, 108 insertions(+), 89 deletions(-) diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue index ff41639a1..37d95577c 100644 --- a/src/client/app/desktop/views/components/charts.vue +++ b/src/client/app/desktop/views/components/charts.vue @@ -34,10 +34,25 @@ import Vue from 'vue'; import XChart from './charts.chart.ts'; +const colors = { + local: 'rgb(246, 88, 79)', + remote: 'rgb(65, 221, 222)', + + localPlus: 'rgb(52, 178, 118)', + remotePlus: 'rgb(158, 255, 209)', + localMinus: 'rgb(255, 97, 74)', + remoteMinus: 'rgb(255, 149, 134)' +}; + +const rgba = (color: string): string => { + return color.replace('rgb', 'rgba').replace(')', ', 0.1)'); +}; + export default Vue.extend({ components: { XChart }, + data() { return { chart: null, @@ -45,6 +60,7 @@ export default Vue.extend({ span: 'hour' }; }, + computed: { data(): any { if (this.chart == null) return null; @@ -61,6 +77,7 @@ export default Vue.extend({ case 'drive-files-total': return this.driveFilesTotalChart(); } }, + stats(): any[] { return ( this.span == 'day' ? this.chart.perDay : @@ -69,11 +86,13 @@ export default Vue.extend({ ); } }, + created() { (this as any).api('chart').then(chart => { this.chart = chart; }); }, + methods: { notesChart(type: string): any { const data = this.stats.slice().reverse().map(x => ({ @@ -160,24 +179,24 @@ export default Vue.extend({ 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', + backgroundColor: rgba(colors.local), + borderColor: colors.local, borderWidth: 2, pointBackgroundColor: '#fff', lineTension: 0, data: data.map(x => ({ t: x.date, y: x.localCount })) + }, { + label: 'Remote', + fill: true, + backgroundColor: rgba(colors.remote), + borderColor: colors.remote, + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.remoteCount })) }] }, { scales: { @@ -217,24 +236,24 @@ export default Vue.extend({ 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', + backgroundColor: rgba(colors.local), + borderColor: colors.local, borderWidth: 2, pointBackgroundColor: '#fff', lineTension: 0, data: data.map(x => ({ t: x.date, y: x.localCount })) + }, { + label: 'Remote', + fill: true, + backgroundColor: rgba(colors.remote), + borderColor: colors.remote, + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.remoteCount })) }] }, { scales: { @@ -276,29 +295,11 @@ export default Vue.extend({ 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', + backgroundColor: rgba(colors.localPlus), + borderColor: colors.localPlus, borderWidth: 2, pointBackgroundColor: '#fff', lineTension: 0, @@ -306,12 +307,30 @@ export default Vue.extend({ }, { label: 'Local -', fill: true, - backgroundColor: 'rgba(246, 88, 79, 0.1)', - borderColor: '#f6584f', + backgroundColor: rgba(colors.localMinus), + borderColor: colors.localMinus, borderWidth: 2, pointBackgroundColor: '#fff', lineTension: 0, data: data.map(x => ({ t: x.date, y: x.localDec })) + }, { + label: 'Remote +', + fill: true, + backgroundColor: rgba(colors.remotePlus), + borderColor: colors.remotePlus, + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.remoteInc })) + }, { + label: 'Remote -', + fill: true, + backgroundColor: rgba(colors.remoteMinus), + borderColor: colors.remoteMinus, + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.remoteDec })) }] }, { scales: { @@ -351,24 +370,24 @@ export default Vue.extend({ 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', + backgroundColor: rgba(colors.local), + borderColor: colors.local, borderWidth: 2, pointBackgroundColor: '#fff', lineTension: 0, data: data.map(x => ({ t: x.date, y: x.localSize })) + }, { + label: 'Remote', + fill: true, + backgroundColor: rgba(colors.remote), + borderColor: colors.remote, + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.remoteSize })) }] }, { scales: { @@ -410,29 +429,11 @@ export default Vue.extend({ 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', + backgroundColor: rgba(colors.localPlus), + borderColor: colors.localPlus, borderWidth: 2, pointBackgroundColor: '#fff', lineTension: 0, @@ -440,12 +441,30 @@ export default Vue.extend({ }, { label: 'Local -', fill: true, - backgroundColor: 'rgba(246, 88, 79, 0.1)', - borderColor: '#f6584f', + backgroundColor: rgba(colors.localMinus), + borderColor: colors.localMinus, borderWidth: 2, pointBackgroundColor: '#fff', lineTension: 0, data: data.map(x => ({ t: x.date, y: x.localDec })) + }, { + label: 'Remote +', + fill: true, + backgroundColor: rgba(colors.remotePlus), + borderColor: colors.remotePlus, + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.remoteInc })) + }, { + label: 'Remote -', + fill: true, + backgroundColor: rgba(colors.remoteMinus), + borderColor: colors.remoteMinus, + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.remoteDec })) }] }, { scales: { @@ -485,24 +504,24 @@ export default Vue.extend({ 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', + backgroundColor: rgba(colors.local), + borderColor: colors.local, borderWidth: 2, pointBackgroundColor: '#fff', lineTension: 0, data: data.map(x => ({ t: x.date, y: x.localCount })) + }, { + label: 'Remote', + fill: true, + backgroundColor: rgba(colors.remote), + borderColor: colors.remote, + borderWidth: 2, + pointBackgroundColor: '#fff', + lineTension: 0, + data: data.map(x => ({ t: x.date, y: x.remoteCount })) }] }, { scales: { diff --git a/src/client/app/desktop/views/pages/stats/stats.vue b/src/client/app/desktop/views/pages/stats/stats.vue index 77ef8ca45..5b1d780ae 100644 --- a/src/client/app/desktop/views/pages/stats/stats.vue +++ b/src/client/app/desktop/views/pages/stats/stats.vue @@ -38,7 +38,7 @@ export default Vue.extend({ .tcrwdhwpuxrwmcttxjcsehgpagpstqey width 100% - padding 16px 32px + padding 16px > .stats display flex