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