Skip to content

Commit 42417e8

Browse files
0xJacky0xJacky
committed
Clean up analytic code, update Simplified Chinese translations.
1 parent 46e86d2 commit 42417e8

File tree

17 files changed

+638
-286
lines changed

17 files changed

+638
-286
lines changed

‎frontend/src/components/Chart/CPUChart.vue‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import Vue from 'vue'
88
99
Vue.use(VueApexCharts)
1010
Vue.component('apexchart', VueApexCharts)
11+
const fontColor = () => {
12+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? '#b4b4b4' : undefined
13+
}
1114
export default {
1215
name: 'CPUChart',
1316
props: {
@@ -21,6 +24,47 @@ export default {
2124
}
2225
}
2326
},
27+
mounted() {
28+
let media = window.matchMedia('(prefers-color-scheme: dark)')
29+
let callback = () => {
30+
this.chartOptions.xaxis = {
31+
type: 'datetime',
32+
labels: {
33+
datetimeUTC: false,
34+
style: {
35+
colors: fontColor()
36+
}
37+
}
38+
}
39+
this.chartOptions.yaxis = {
40+
max: 100,
41+
tickAmount: 4,
42+
min: 0,
43+
labels: {
44+
style: {
45+
colors: fontColor()
46+
}
47+
}
48+
}
49+
this.chartOptions.legend = {
50+
labels: {
51+
colors: fontColor()
52+
},
53+
onItemClick: {
54+
toggleDataSeries: false
55+
},
56+
onItemHover: {
57+
highlightDataSeries: false
58+
},
59+
}
60+
this.$refs.chart.updateOptions(this.chartOptions)
61+
}
62+
if (typeof media.addEventListener === 'function') {
63+
media.addEventListener('change', callback)
64+
} else if (typeof media.addListener === 'function') {
65+
media.addListener(callback)
66+
}
67+
},
2468
data() {
2569
return {
2670
chartOptions: {
@@ -54,7 +98,12 @@ export default {
5498
},
5599
xaxis: {
56100
type: 'datetime',
57-
labels: {datetimeUTC: false},
101+
labels: {
102+
datetimeUTC: false,
103+
style: {
104+
colors: fontColor()
105+
}
106+
}
58107
},
59108
tooltip: {
60109
enabled: false
@@ -63,8 +112,16 @@ export default {
63112
max: 100,
64113
tickAmount: 4,
65114
min: 0,
115+
labels: {
116+
style: {
117+
colors: fontColor()
118+
}
119+
}
66120
},
67121
legend: {
122+
labels: {
123+
colors: fontColor()
124+
},
68125
onItemClick: {
69126
toggleDataSeries: false
70127
},

‎frontend/src/components/Chart/DiskChart.vue‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import Vue from 'vue'
88
99
Vue.use(VueApexCharts)
1010
Vue.component('apexchart', VueApexCharts)
11+
12+
const fontColor = () => {
13+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? '#b4b4b4' : null
14+
}
1115
export default {
1216
name: 'DiskChart',
1317
props: {
@@ -19,6 +23,46 @@ export default {
1923
handler() {
2024
this.$refs.chart.updateSeries(this.series)
2125
}
26+
},
27+
},
28+
mounted() {
29+
let media = window.matchMedia('(prefers-color-scheme: dark)')
30+
let callback = () => {
31+
this.chartOptions.xaxis = {
32+
type: 'datetime',
33+
labels: {
34+
datetimeUTC: false,
35+
style: {
36+
colors: fontColor()
37+
}
38+
}
39+
}
40+
this.chartOptions.yaxis = {
41+
tickAmount: 3,
42+
min: 0,
43+
labels: {
44+
style: {
45+
colors: fontColor()
46+
}
47+
}
48+
}
49+
this.chartOptions.legend = {
50+
labels: {
51+
colors: fontColor()
52+
},
53+
onItemClick: {
54+
toggleDataSeries: false
55+
},
56+
onItemHover: {
57+
highlightDataSeries: false
58+
},
59+
}
60+
this.$refs.chart.updateOptions(this.chartOptions)
61+
}
62+
if (typeof media.addEventListener === 'function') {
63+
media.addEventListener('change', callback)
64+
} else if (typeof media.addListener === 'function') {
65+
media.addListener(callback)
2266
}
2367
},
2468
data() {
@@ -54,16 +98,29 @@ export default {
5498
},
5599
xaxis: {
56100
type: 'datetime',
57-
labels: {datetimeUTC: false},
101+
labels: {
102+
datetimeUTC: false,
103+
style: {
104+
colors: fontColor()
105+
}
106+
}
58107
},
59108
tooltip: {
60109
enabled: false
61110
},
62111
yaxis: {
63112
tickAmount: 3,
64113
min: 0,
114+
labels: {
115+
style: {
116+
colors: fontColor()
117+
}
118+
}
65119
},
66120
legend: {
121+
labels: {
122+
colors: fontColor()
123+
},
67124
onItemClick: {
68125
toggleDataSeries: false
69126
},

‎frontend/src/components/Chart/NetChart.vue‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import Vue from 'vue'
88
99
Vue.use(VueApexCharts)
1010
Vue.component('apexchart', VueApexCharts)
11+
const fontColor = () => {
12+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? '#b4b4b4' : undefined
13+
}
1114
export default {
1215
name: 'NetChart',
1316
props: {
@@ -21,6 +24,49 @@ export default {
2124
}
2225
}
2326
},
27+
mounted() {
28+
let media = window.matchMedia('(prefers-color-scheme: dark)')
29+
let callback = () => {
30+
this.chartOptions.xaxis = {
31+
type: 'datetime',
32+
labels: {
33+
datetimeUTC: false,
34+
style: {
35+
colors: fontColor()
36+
}
37+
}
38+
}
39+
this.chartOptions.yaxis = {
40+
tickAmount: 3,
41+
min: 0,
42+
labels: {
43+
style: {
44+
colors: fontColor()
45+
},
46+
formatter: (bytes) => {
47+
return this.bytesToSize(bytes) + '/s'
48+
}
49+
}
50+
}
51+
this.chartOptions.legend = {
52+
labels: {
53+
colors: fontColor()
54+
},
55+
onItemClick: {
56+
toggleDataSeries: false
57+
},
58+
onItemHover: {
59+
highlightDataSeries: false
60+
},
61+
}
62+
this.$refs.chart.updateOptions(this.chartOptions)
63+
}
64+
if (typeof media.addEventListener === 'function') {
65+
media.addEventListener('change', callback)
66+
} else if (typeof media.addListener === 'function') {
67+
media.addListener(callback)
68+
}
69+
},
2470
data() {
2571
return {
2672
chartOptions: {
@@ -54,7 +100,12 @@ export default {
54100
},
55101
xaxis: {
56102
type: 'datetime',
57-
labels: {datetimeUTC: false},
103+
labels: {
104+
datetimeUTC: false,
105+
style: {
106+
colors: fontColor()
107+
}
108+
}
58109
},
59110
tooltip: {
60111
enabled: false
@@ -63,12 +114,18 @@ export default {
63114
tickAmount: 3,
64115
min: 0,
65116
labels: {
117+
style: {
118+
colors: fontColor()
119+
},
66120
formatter: (bytes) => {
67121
return this.bytesToSize(bytes) + '/s'
68122
}
69123
}
70124
},
71125
legend: {
126+
labels: {
127+
colors: fontColor()
128+
},
72129
onItemClick: {
73130
toggleDataSeries: false
74131
},

‎frontend/src/components/Chart/RadialBarChart.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="container">
33
<p class="text">{{ centerText }}</p>
4+
<p class="bottom_text">{{ bottomText }}</p>
45
<apexchart type="radialBar" height="205" :options="chartOptions" :series="series" ref="chart"/>
56
</div>
67
</template>
@@ -18,6 +19,7 @@ export default {
1819
centerText: String,
1920
colors: String,
2021
name: String,
22+
bottomText: String,
2123
},
2224
watch: {
2325
series: {
@@ -49,9 +51,7 @@ export default {
4951
offsetY: 60,
5052
fontSize: '14px',
5153
color: undefined,
52-
formatter: function (val) {
53-
return val + "%";
54-
}
54+
formatter: () => {return ''}
5555
}
5656
}
5757
}
@@ -87,7 +87,13 @@ export default {
8787
top: calc(72px);
8888
width: 100%;
8989
text-align: center;
90-
90+
}
91+
.bottom_text {
92+
position: absolute;
93+
top: calc(142px);
94+
font-weight: 600;
95+
width: 100%;
96+
text-align: center;
9197
}
9298
}
9399
</style>

0 commit comments

Comments
 (0)