🎨
This commit is contained in:
parent
65e1d5978a
commit
81969ea8b2
@ -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: {
|
||||
|
@ -38,7 +38,7 @@ export default Vue.extend({
|
||||
|
||||
.tcrwdhwpuxrwmcttxjcsehgpagpstqey
|
||||
width 100%
|
||||
padding 16px 32px
|
||||
padding 16px
|
||||
|
||||
> .stats
|
||||
display flex
|
||||
|
Loading…
Reference in New Issue
Block a user