Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-08-25 15:25:16 +09:00
parent 65e1d5978a
commit 81969ea8b2
2 changed files with 108 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
src/client/app/desktop/views/components/charts.vue
View file

@ -34,10 +34,25 @@
import Vue from 'vue'; import Vue from 'vue';
import XChart from './charts.chart.ts'; 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({ export default Vue.extend({
components: { components: {
XChart XChart
}, },
data() { data() {
return { return {
chart: null, chart: null,
@ -45,6 +60,7 @@ export default Vue.extend({
span: 'hour' span: 'hour'
}; };
}, },
computed: { computed: {
data(): any { data(): any {
if (this.chart == null) return null; if (this.chart == null) return null;
@ -61,6 +77,7 @@ export default Vue.extend({
case 'drive-files-total': return this.driveFilesTotalChart(); case 'drive-files-total': return this.driveFilesTotalChart();
} }
}, },
stats(): any[] { stats(): any[] {
return ( return (
this.span == 'day' ? this.chart.perDay : this.span == 'day' ? this.chart.perDay :
@ -69,11 +86,13 @@ export default Vue.extend({
); );
} }
}, },
created() { created() {
(this as any).api('chart').then(chart => { (this as any).api('chart').then(chart => {
this.chart = chart; this.chart = chart;
}); });
}, },
methods: { methods: {
notesChart(type: string): any { notesChart(type: string): any {
const data = this.stats.slice().reverse().map(x => ({ const data = this.stats.slice().reverse().map(x => ({
@ -160,24 +179,24 @@ export default Vue.extend({
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.remoteCount + x.localCount })) 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', label: 'Local',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)', backgroundColor: rgba(colors.local),
borderColor: '#f6584f', borderColor: colors.local,
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localCount })) 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: { scales: {
@ -217,24 +236,24 @@ export default Vue.extend({
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.remoteCount + x.localCount })) 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', label: 'Local',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)', backgroundColor: rgba(colors.local),
borderColor: '#f6584f', borderColor: colors.local,
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localCount })) 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: { scales: {
@ -276,29 +295,11 @@ export default Vue.extend({
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localInc + x.localDec + x.remoteInc + x.remoteDec })) 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 +', label: 'Local +',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)', backgroundColor: rgba(colors.localPlus),
borderColor: '#f6584f', borderColor: colors.localPlus,
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
@ -306,12 +307,30 @@ export default Vue.extend({
}, { }, {
label: 'Local -', label: 'Local -',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)', backgroundColor: rgba(colors.localMinus),
borderColor: '#f6584f', borderColor: colors.localMinus,
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localDec })) 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: { scales: {
@ -351,24 +370,24 @@ export default Vue.extend({
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.remoteSize + x.localSize })) 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', label: 'Local',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)', backgroundColor: rgba(colors.local),
borderColor: '#f6584f', borderColor: colors.local,
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localSize })) 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: { scales: {
@ -410,29 +429,11 @@ export default Vue.extend({
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localInc + x.localDec + x.remoteInc + x.remoteDec })) 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 +', label: 'Local +',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)', backgroundColor: rgba(colors.localPlus),
borderColor: '#f6584f', borderColor: colors.localPlus,
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
@ -440,12 +441,30 @@ export default Vue.extend({
}, { }, {
label: 'Local -', label: 'Local -',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)', backgroundColor: rgba(colors.localMinus),
borderColor: '#f6584f', borderColor: colors.localMinus,
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localDec })) 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: { scales: {
@ -485,24 +504,24 @@ export default Vue.extend({
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localCount + x.remoteCount })) 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', label: 'Local',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)', backgroundColor: rgba(colors.local),
borderColor: '#f6584f', borderColor: colors.local,
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
lineTension: 0, lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localCount })) 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: { scales: {

2
src/client/app/desktop/views/pages/stats/stats.vue
View file

@ -38,7 +38,7 @@ export default Vue.extend({
.tcrwdhwpuxrwmcttxjcsehgpagpstqey .tcrwdhwpuxrwmcttxjcsehgpagpstqey
width 100% width 100%
padding 16px 32px padding 16px
> .stats > .stats
display flex display flex