mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-12 13:48:28 +09:00
Code

Improve chart

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/app/common/views/filters/bytes.ts
View File

@ -1,8 +1,10 @@
import Vue from 'vue';
Vue.filter('bytes', (v, digits = 0) => {
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (v == 0) return '0Byte';
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
if (v == 0) return '0';
const isMinus = v < 0;
if (isMinus) v = -v;
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];
});

3
src/client/app/desktop/views/pages/admin/admin.chart.chart.ts
View File

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

24
src/client/app/desktop/views/pages/admin/admin.chart.vue
View File

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