MigrateRepos/wg-easy
1
0
Fork 0
mirror of https://github.com/WeeJeWel/wg-easy.git synced 2024-12-22 17:19:23 +08:00
Code Issues Projects Releases Wiki Activity

improve chart

Browse Source
This commit is contained in:
Emile Nijssen 2022-06-12 22:48:30 +02:00
parent 274aeb2614
commit a72029d7e5
2 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/www/index.html
View File

@ -10,7 +10,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
</head> </head>
<style> <style>
[v-cloak] { [v-cloak] {
display: none; display: none;
@ -78,13 +78,8 @@
class="relative overflow-hidden border-b border-gray-100 border-solid"> class="relative overflow-hidden border-b border-gray-100 border-solid">
<!-- Chart --> <!-- Chart -->
<div class="absolute z-0 bottom-0 left-0 right-0" style="top: 60%;"> <div class="absolute z-0 bottom-0 left-0 right-0" style="width: 100%; height: 30%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferTxSeries"> <apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.chartSeries">
</apexchart>
</div>
<div class="absolute z-0 top-0 left-0 right-0" style="bottom: 60%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.transferRxSeries"
style="transform: scaleY(-1);">
</apexchart> </apexchart>
</div> </div>
@ -160,7 +155,7 @@
</span> </span>
<!-- Transfer TX --> <!-- Transfer TX -->
<span v-if="client.transferTx":title="'Total Download: ' + bytes(client.transferTx)"> <span v-if="client.transferTx" :title="'Total Download: ' + bytes(client.transferTx)">
· ·
<svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="align-middle h-3 inline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor"> fill="currentColor">
@ -488,4 +483,4 @@
<script src="./js/app.js"></script> <script src="./js/app.js"></script>
</body> </body>
</html> </html>

45
src/www/js/app.js
View File

@ -51,31 +51,36 @@ new Vue({
chartOptions: { chartOptions: {
chart: { chart: {
background: 'transparent', background: 'transparent',
type: 'area', type: 'bar',
stacked: false,
toolbar: { toolbar: {
show: false, show: false,
}, },
animations: {
enabled: false,
},
}, },
fill: { colors: [
type: 'gradient', '#DDDDDD', // rx
}, '#EEEEEE', // tx
colors: ['#CCCCCC'], ],
dataLabels: { dataLabels: {
enabled: false, enabled: false,
}, },
stroke: { plotOptions: {
curve: 'smooth', bar: {
width: 0, horizontal: false,
},
}, },
xaxis: { xaxis: {
labels: { labels: {
show: false, show: false,
}, },
axisTicks: { axisTicks: {
show: false, show: true,
}, },
axisBorder: { axisBorder: {
show: false, show: true,
}, },
}, },
yaxis: { yaxis: {
@ -130,9 +135,9 @@ new Vue({
if (!this.clientsPersist[client.id]) { if (!this.clientsPersist[client.id]) {
this.clientsPersist[client.id] = {}; this.clientsPersist[client.id] = {};
this.clientsPersist[client.id].transferRxHistory = Array(20).fill(0); this.clientsPersist[client.id].transferRxHistory = Array(100).fill(0);
this.clientsPersist[client.id].transferRxPrevious = client.transferRx; this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxHistory = Array(20).fill(0); this.clientsPersist[client.id].transferTxHistory = Array(100).fill(0);
this.clientsPersist[client.id].transferTxPrevious = client.transferTx; this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].chartOptions = { this.clientsPersist[client.id].chartOptions = {
@ -155,22 +160,20 @@ new Vue({
this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent); this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
this.clientsPersist[client.id].transferTxHistory.shift(); this.clientsPersist[client.id].transferTxHistory.shift();
this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent; client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
client.transferTxSeries = [{ client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.chartOptions = this.clientsPersist[client.id].chartOptions;
client.chartSeries = [{
name: 'tx', name: 'tx',
data: this.clientsPersist[client.id].transferTxHistory, data: this.clientsPersist[client.id].transferTxHistory,
}]; }, {
client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.transferRxSeries = [{
name: 'rx', name: 'rx',
data: this.clientsPersist[client.id].transferRxHistory, data: this.clientsPersist[client.id].transferRxHistory,
}]; }];
this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory);
client.chartOptions = this.clientsPersist[client.id].chartOptions;
return client; return client;
}); });
}, },