Improve chart

This commit is contained in:
syuilo 2018-08-24 08:56:57 +09:00
parent 9cda89ec04
commit 8b37fc4772
3 changed files with 28 additions and 7 deletions

View file

@ -1,8 +1,10 @@
import Vue from 'vue'; import Vue from 'vue';
Vue.filter('bytes', (v, digits = 0) => { Vue.filter('bytes', (v, digits = 0) => {
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
if (v == 0) return '0Byte'; if (v == 0) return '0';
const isMinus = v < 0;
if (isMinus) v = -v;
const i = Math.floor(Math.log(v) / Math.log(1024)); const i = Math.floor(Math.log(v) / Math.log(1024));
return (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i]; return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i];
}); });

View file

@ -30,6 +30,9 @@ export default Vue.extend({
type: 'time', type: 'time',
distribution: 'series' distribution: 'series'
}] }]
},
tooltips: {
intersect: false
} }
}, this.opts || {})); }, this.opts || {}));
} }

View file

@ -107,7 +107,8 @@ export default Vue.extend({
data: data.map(x => ({ t: x.date, y: x.all })) data: data.map(x => ({ t: x.date, y: x.all }))
}, { }, {
label: 'Normal', label: 'Normal',
fill: false, fill: true,
backgroundColor: 'rgba(65, 221, 222, 0.1)',
borderColor: '#41ddde', borderColor: '#41ddde',
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
@ -115,7 +116,8 @@ export default Vue.extend({
data: data.map(x => ({ t: x.date, y: x.normal })) data: data.map(x => ({ t: x.date, y: x.normal }))
}, { }, {
label: 'Replies', label: 'Replies',
fill: false, fill: true,
backgroundColor: 'rgba(247, 121, 108, 0.1)',
borderColor: '#f7796c', borderColor: '#f7796c',
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
@ -123,7 +125,8 @@ export default Vue.extend({
data: data.map(x => ({ t: x.date, y: x.reply })) data: data.map(x => ({ t: x.date, y: x.reply }))
}, { }, {
label: 'Renotes', label: 'Renotes',
fill: false, fill: true,
backgroundColor: 'rgba(161, 222, 65, 0.1)',
borderColor: '#a1de41', borderColor: '#a1de41',
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
@ -143,6 +146,7 @@ export default Vue.extend({
datasets: [{ datasets: [{
label: local ? 'Local Notes' : 'Remote Notes', label: local ? 'Local Notes' : 'Remote Notes',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)',
borderColor: '#f6584f', borderColor: '#f6584f',
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
@ -164,6 +168,7 @@ export default Vue.extend({
datasets: [{ datasets: [{
label: local ? 'Local Users' : 'Remote Users', label: local ? 'Local Users' : 'Remote Users',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)',
borderColor: '#f6584f', borderColor: '#f6584f',
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
@ -185,6 +190,7 @@ export default Vue.extend({
datasets: [{ datasets: [{
label: local ? 'Local Drive Usage' : 'Remote Drive Usage', label: local ? 'Local Drive Usage' : 'Remote Drive Usage',
fill: true, fill: true,
backgroundColor: 'rgba(246, 88, 79, 0.1)',
borderColor: '#f6584f', borderColor: '#f6584f',
borderWidth: 2, borderWidth: 2,
pointBackgroundColor: '#fff', pointBackgroundColor: '#fff',
@ -195,11 +201,18 @@ export default Vue.extend({
scales: { scales: {
yAxes: [{ yAxes: [{
ticks: { ticks: {
callback: (value) => { callback: value => {
return Vue.filter('bytes')(value); return Vue.filter('bytes')(value);
} }
} }
}] }]
},
tooltips: {
callbacks: {
label: tooltipItem => {
return Vue.filter('bytes')(tooltipItem.yLabel);
}
}
} }
}]; }];
}, },
@ -232,6 +245,9 @@ export default Vue.extend({
@import '~const.styl' @import '~const.styl'
.gkgckalzgidaygcxnugepioremxvxvpt .gkgckalzgidaygcxnugepioremxvxvpt
*
user-select none
> header > header
display flex display flex