summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorsyuilo <syuilotan@yahoo.co.jp>2018-08-25 15:25:16 +0900
committersyuilo <syuilotan@yahoo.co.jp>2018-08-25 15:25:16 +0900
commit81969ea8b2ed0037ab8840359879447fcde45eb8 (patch)
tree07920425cf165ac8246f068d0417cf779d2212db /src
parentMerge branch 'develop' of https://github.com/syuilo/misskey into develop (diff)
downloadmisskey-81969ea8b2ed0037ab8840359879447fcde45eb8.tar.gz
misskey-81969ea8b2ed0037ab8840359879447fcde45eb8.tar.bz2
misskey-81969ea8b2ed0037ab8840359879447fcde45eb8.zip
:art:
Diffstat (limited to 'src')
-rw-r--r--src/client/app/desktop/views/components/charts.vue147
-rw-r--r--src/client/app/desktop/views/pages/stats/stats.vue2
2 files changed, 84 insertions, 65 deletions
diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue
index ff41639a10..37d95577cd 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 => ({
@@ -161,23 +180,23 @@ export default Vue.extend({
lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.remoteCount + x.localCount }))
}, {
- label: 'Remote',
+ label: 'Local',
fill: true,
- backgroundColor: 'rgba(65, 221, 222, 0.1)',
- borderColor: '#41ddde',
+ backgroundColor: rgba(colors.local),
+ borderColor: colors.local,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.remoteCount }))
+ data: data.map(x => ({ t: x.date, y: x.localCount }))
}, {
- label: 'Local',
+ label: 'Remote',
fill: true,
- backgroundColor: 'rgba(246, 88, 79, 0.1)',
- borderColor: '#f6584f',
+ backgroundColor: rgba(colors.remote),
+ borderColor: colors.remote,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.localCount }))
+ data: data.map(x => ({ t: x.date, y: x.remoteCount }))
}]
}, {
scales: {
@@ -218,23 +237,23 @@ export default Vue.extend({
lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.remoteCount + x.localCount }))
}, {
- label: 'Remote',
+ label: 'Local',
fill: true,
- backgroundColor: 'rgba(65, 221, 222, 0.1)',
- borderColor: '#41ddde',
+ backgroundColor: rgba(colors.local),
+ borderColor: colors.local,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.remoteCount }))
+ data: data.map(x => ({ t: x.date, y: x.localCount }))
}, {
- label: 'Local',
+ label: 'Remote',
fill: true,
- backgroundColor: 'rgba(246, 88, 79, 0.1)',
- borderColor: '#f6584f',
+ backgroundColor: rgba(colors.remote),
+ borderColor: colors.remote,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.localCount }))
+ data: data.map(x => ({ t: x.date, y: x.remoteCount }))
}]
}, {
scales: {
@@ -277,41 +296,41 @@ export default Vue.extend({
lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localInc + x.localDec + x.remoteInc + x.remoteDec }))
}, {
- label: 'Remote +',
+ label: 'Local +',
fill: true,
- backgroundColor: 'rgba(65, 221, 222, 0.1)',
- borderColor: '#41ddde',
+ backgroundColor: rgba(colors.localPlus),
+ borderColor: colors.localPlus,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.remoteInc }))
+ data: data.map(x => ({ t: x.date, y: x.localInc }))
}, {
- label: 'Remote -',
+ label: 'Local -',
fill: true,
- backgroundColor: 'rgba(65, 221, 222, 0.1)',
- borderColor: '#41ddde',
+ backgroundColor: rgba(colors.localMinus),
+ borderColor: colors.localMinus,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.remoteDec }))
+ data: data.map(x => ({ t: x.date, y: x.localDec }))
}, {
- label: 'Local +',
+ label: 'Remote +',
fill: true,
- backgroundColor: 'rgba(246, 88, 79, 0.1)',
- borderColor: '#f6584f',
+ backgroundColor: rgba(colors.remotePlus),
+ borderColor: colors.remotePlus,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.localInc }))
+ data: data.map(x => ({ t: x.date, y: x.remoteInc }))
}, {
- label: 'Local -',
+ label: 'Remote -',
fill: true,
- backgroundColor: 'rgba(246, 88, 79, 0.1)',
- borderColor: '#f6584f',
+ backgroundColor: rgba(colors.remoteMinus),
+ borderColor: colors.remoteMinus,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.localDec }))
+ data: data.map(x => ({ t: x.date, y: x.remoteDec }))
}]
}, {
scales: {
@@ -352,23 +371,23 @@ export default Vue.extend({
lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.remoteSize + x.localSize }))
}, {
- label: 'Remote',
+ label: 'Local',
fill: true,
- backgroundColor: 'rgba(65, 221, 222, 0.1)',
- borderColor: '#41ddde',
+ backgroundColor: rgba(colors.local),
+ borderColor: colors.local,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.remoteSize }))
+ data: data.map(x => ({ t: x.date, y: x.localSize }))
}, {
- label: 'Local',
+ label: 'Remote',
fill: true,
- backgroundColor: 'rgba(246, 88, 79, 0.1)',
- borderColor: '#f6584f',
+ backgroundColor: rgba(colors.remote),
+ borderColor: colors.remote,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.localSize }))
+ data: data.map(x => ({ t: x.date, y: x.remoteSize }))
}]
}, {
scales: {
@@ -411,41 +430,41 @@ export default Vue.extend({
lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localInc + x.localDec + x.remoteInc + x.remoteDec }))
}, {
- label: 'Remote +',
+ label: 'Local +',
fill: true,
- backgroundColor: 'rgba(65, 221, 222, 0.1)',
- borderColor: '#41ddde',
+ backgroundColor: rgba(colors.localPlus),
+ borderColor: colors.localPlus,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.remoteInc }))
+ data: data.map(x => ({ t: x.date, y: x.localInc }))
}, {
- label: 'Remote -',
+ label: 'Local -',
fill: true,
- backgroundColor: 'rgba(65, 221, 222, 0.1)',
- borderColor: '#41ddde',
+ backgroundColor: rgba(colors.localMinus),
+ borderColor: colors.localMinus,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.remoteDec }))
+ data: data.map(x => ({ t: x.date, y: x.localDec }))
}, {
- label: 'Local +',
+ label: 'Remote +',
fill: true,
- backgroundColor: 'rgba(246, 88, 79, 0.1)',
- borderColor: '#f6584f',
+ backgroundColor: rgba(colors.remotePlus),
+ borderColor: colors.remotePlus,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.localInc }))
+ data: data.map(x => ({ t: x.date, y: x.remoteInc }))
}, {
- label: 'Local -',
+ label: 'Remote -',
fill: true,
- backgroundColor: 'rgba(246, 88, 79, 0.1)',
- borderColor: '#f6584f',
+ backgroundColor: rgba(colors.remoteMinus),
+ borderColor: colors.remoteMinus,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.localDec }))
+ data: data.map(x => ({ t: x.date, y: x.remoteDec }))
}]
}, {
scales: {
@@ -486,23 +505,23 @@ export default Vue.extend({
lineTension: 0,
data: data.map(x => ({ t: x.date, y: x.localCount + x.remoteCount }))
}, {
- label: 'Remote',
+ label: 'Local',
fill: true,
- backgroundColor: 'rgba(65, 221, 222, 0.1)',
- borderColor: '#41ddde',
+ backgroundColor: rgba(colors.local),
+ borderColor: colors.local,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.remoteCount }))
+ data: data.map(x => ({ t: x.date, y: x.localCount }))
}, {
- label: 'Local',
+ label: 'Remote',
fill: true,
- backgroundColor: 'rgba(246, 88, 79, 0.1)',
- borderColor: '#f6584f',
+ backgroundColor: rgba(colors.remote),
+ borderColor: colors.remote,
borderWidth: 2,
pointBackgroundColor: '#fff',
lineTension: 0,
- data: data.map(x => ({ t: x.date, y: x.localCount }))
+ 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 77ef8ca457..5b1d780ae6 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
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-10 20:19:30 +0000