|
|
|
@ -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: {
|
|
|
|
|