mirrors/amnezia-wg-easy
1
0
Fork 1
mirror of https://github.com/w0rng/amnezia-wg-easy.git synced 2025-04-26 13:20:11 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

add charts

Browse source
This commit is contained in:
Emile Nijssen 2021-11-22 22:15:09 +01:00
parent 9a4b0bff2e
commit 7cd677f7ef
6 changed files with 280 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/www/js/app.js
View file

@ -7,6 +7,9 @@
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
authenticated: null,
authenticating: false,
@ -14,6 +17,7 @@ new Vue({
requiresPassword: null,
clients: null,
clientsPersist: {},
clientDelete: null,
clientCreate: null,
clientCreateName: '',
@ -25,6 +29,67 @@ new Vue({
currentRelease: null,
latestRelease: null,
chartOptions: {
chart: {
background: 'transparent',
type: 'area',
toolbar: {
show: false,
},
},
fill: {
type: 'gradient',
},
colors: ['#CCCCCC'],
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
width: 0,
},
xaxis: {
labels: {
show: false,
},
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
},
yaxis: {
labels: {
show: false,
},
min: 0,
},
tooltip: {
enabled: false,
},
legend: {
show: false,
},
grid: {
show: false,
padding: {
left: -10,
right: 0,
bottom: -15,
top: -15,
},
column: {
opacity: 0,
},
xaxis: {
lines: {
show: false,
},
},
},
},
},
methods: {
dateTime: value => {
@ -45,6 +110,49 @@ new Vue({
client.avatar = `https://www.gravatar.com/avatar/${md5(client.name)}?d=blank`;
}
if (!this.clientsPersist[client.id]) {
this.clientsPersist[client.id] = {};
this.clientsPersist[client.id].transferRxHistory = Array(20).fill(0);
this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxHistory = Array(20).fill(0);
this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].chartOptions = {
...this.chartOptions,
yaxis: {
...this.chartOptions.yaxis,
max: () => this.clientsPersist[client.id].chartMax,
},
};
}
this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious;
this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxCurrent = client.transferTx - this.clientsPersist[client.id].transferTxPrevious;
this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent);
this.clientsPersist[client.id].transferRxHistory.shift();
this.clientsPersist[client.id].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent);
this.clientsPersist[client.id].transferTxHistory.shift();
client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
client.transferTxSeries = [{
name: 'tx',
data: this.clientsPersist[client.id].transferTxHistory,
}];
client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.transferRxSeries = [{
name: 'rx',
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;
});
},
@ -124,13 +232,13 @@ new Vue({
},
bytes: (bytes, decimals, kib, maxunit) => {
kib = kib || false;
if (bytes === 0) return '0 Bytes';
if (Number.isNaN(parseFloat(bytes)) && !Number.isFinite(bytes)) return 'Not an number';
if (bytes === 0) return '0 B';
if (Number.isNaN(parseFloat(bytes)) && !Number.isFinite(bytes)) return 'NaN';
const k = kib ? 1024 : 1000;
const dm = decimals != null && !Number.isNaN(decimals) && decimals >= 0 ? decimals : 2;
const sizes = kib
? ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
: ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB'];
? ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB', 'BiB']
: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB', 'BB'];
let i = Math.floor(Math.log(bytes) / Math.log(k));
if (maxunit !== undefined) {
const index = sizes.indexOf(maxunit);