From 90431ff9c5df68dbaed8eed7c3715716b8197675 Mon Sep 17 00:00:00 2001 From: NPM Update Bot Date: Mon, 18 Mar 2024 00:03:46 +0000 Subject: [PATCH 1/9] npm: package updates --- src/package-lock.json | 134 ++++++++++++++++++++++++++++++++++-------- 1 file changed, 109 insertions(+), 25 deletions(-) diff --git a/src/package-lock.json b/src/package-lock.json index ba8d3011..c3862633 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -1261,6 +1261,57 @@ "node": ">=4" } }, + "node_modules/data-view-buffer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz", + "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/data-view-byte-length": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz", + "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/data-view-byte-offset": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz", + "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==", + "dev": true, + "dependencies": { + "call-bind": "^1.0.6", + "es-errors": "^1.3.0", + "is-data-view": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1428,17 +1479,21 @@ } }, "node_modules/es-abstract": { - "version": "1.22.5", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.5.tgz", - "integrity": "sha512-oW69R+4q2wG+Hc3KZePPZxOiisRIqfKBVo/HLx94QcJeWGU/8sZhCvc829rd1kS366vlJbzBfXf9yWwf0+Ko7w==", + "version": "1.23.1", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.1.tgz", + "integrity": "sha512-r+YVn6hTqQb+P5kK0u3KeDqrmhHKm+OhU/Mw4jSL4eQtOxXmp75fXIUUb3sUqFZOlb/YtW5JRaIfEC3UyjYUZQ==", "dev": true, "dependencies": { "array-buffer-byte-length": "^1.0.1", "arraybuffer.prototype.slice": "^1.0.3", "available-typed-arrays": "^1.0.7", "call-bind": "^1.0.7", + "data-view-buffer": "^1.0.1", + "data-view-byte-length": "^1.0.1", + "data-view-byte-offset": "^1.0.0", "es-define-property": "^1.0.0", "es-errors": "^1.3.0", + "es-object-atoms": "^1.0.0", "es-set-tostringtag": "^2.0.3", "es-to-primitive": "^1.2.1", "function.prototype.name": "^1.1.6", @@ -1449,10 +1504,11 @@ "has-property-descriptors": "^1.0.2", "has-proto": "^1.0.3", "has-symbols": "^1.0.3", - "hasown": "^2.0.1", + "hasown": "^2.0.2", "internal-slot": "^1.0.7", "is-array-buffer": "^3.0.4", "is-callable": "^1.2.7", + "is-data-view": "^1.0.1", "is-negative-zero": "^2.0.3", "is-regex": "^1.1.4", "is-shared-array-buffer": "^1.0.3", @@ -1463,7 +1519,7 @@ "object-keys": "^1.1.1", "object.assign": "^4.1.5", "regexp.prototype.flags": "^1.5.2", - "safe-array-concat": "^1.1.0", + "safe-array-concat": "^1.1.2", "safe-regex-test": "^1.0.3", "string.prototype.trim": "^1.2.8", "string.prototype.trimend": "^1.0.7", @@ -1473,7 +1529,7 @@ "typed-array-byte-offset": "^1.0.2", "typed-array-length": "^1.0.5", "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.14" + "which-typed-array": "^1.1.15" }, "engines": { "node": ">= 0.4" @@ -1507,6 +1563,18 @@ "node": ">= 0.4" } }, + "node_modules/es-object-atoms": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", + "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-set-tostringtag": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz", @@ -2884,6 +2952,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-data-view": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz", + "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==", + "dev": true, + "dependencies": { + "is-typed-array": "^1.1.13" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-date-object": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", @@ -3725,9 +3808,9 @@ } }, "node_modules/postcss": { - "version": "8.4.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", - "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "version": "8.4.36", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz", + "integrity": "sha512-/n7eumA6ZjFHAsbX30yhHup/IMkOmlmvtEi7P+6RMYf+bGJSUHc3geH4a0NSZxAz/RJfiS9tooCTs9LAVYUZKw==", "dev": true, "funding": [ { @@ -3746,7 +3829,7 @@ "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.1.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -4400,9 +4483,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.1.0.tgz", + "integrity": "sha512-9vC2SfsJzlej6MAaMPLu8HiBSHGdRAJ9hVFYN1ibZoNkeanmDmLUcIrj6G9DGL7XMJ54AKg/G75akXl1/izTOw==", "dev": true, "engines": { "node": ">=0.10.0" @@ -4452,14 +4535,15 @@ } }, "node_modules/string.prototype.trim": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz", - "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==", + "version": "1.2.9", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz", + "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-abstract": "^1.23.0", + "es-object-atoms": "^1.0.0" }, "engines": { "node": ">= 0.4" @@ -4469,14 +4553,14 @@ } }, "node_modules/string.prototype.trimend": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz", - "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz", + "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.2.0", - "es-abstract": "^1.22.1" + "call-bind": "^1.0.7", + "define-properties": "^1.2.1", + "es-object-atoms": "^1.0.0" }, "funding": { "url": "https://github.com/sponsors/ljharb" From 90bcdd125973ebc85da957d3d128e31125073371 Mon Sep 17 00:00:00 2001 From: Philip H <47042125+pheiduck@users.noreply.github.com> Date: Tue, 12 Mar 2024 19:07:42 +0100 Subject: [PATCH 2/9] deploy.yml: rebuild v11 mistake --- .github/workflows/deploy.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 332b3a76..1d73dcfc 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -17,7 +17,7 @@ jobs: steps: - uses: actions/checkout@v4 with: - ref: production + ref: 80310bfd95cd023db30ed11152bbef5fc7c4436a - name: Set up QEMU uses: docker/setup-qemu-action@v3 From ed0e46788a351d289d2d32df95fbde0d189605a5 Mon Sep 17 00:00:00 2001 From: Philip H <47042125+pheiduck@users.noreply.github.com> Date: Tue, 12 Mar 2024 19:21:25 +0100 Subject: [PATCH 3/9] Update deploy.yml --- .github/workflows/deploy.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 1d73dcfc..332b3a76 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -17,7 +17,7 @@ jobs: steps: - uses: actions/checkout@v4 with: - ref: 80310bfd95cd023db30ed11152bbef5fc7c4436a + ref: production - name: Set up QEMU uses: docker/setup-qemu-action@v3 From aedb691b2bc8c06de7d9e45cdba910024fe25f32 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Wed, 13 Mar 2024 12:15:50 +0300 Subject: [PATCH 4/9] Fix traffic charts. Add chart vars Add UI_TRAFFIC_STATS, UI_CHART_TYPE --- src/.env | 3 ++ src/config.js | 1 + src/lib/Server.js | 4 ++ src/www/index.html | 8 ++-- src/www/js/api.js | 7 +++ src/www/js/app.js | 111 ++++++++++++++++++++++++++++++++++++++------- 6 files changed, 113 insertions(+), 21 deletions(-) create mode 100644 src/.env diff --git a/src/.env b/src/.env new file mode 100644 index 00000000..122fe628 --- /dev/null +++ b/src/.env @@ -0,0 +1,3 @@ +WG_HOST=127.0.0.1 +UI_TRAFFIC_STATS=true +UI_CHART_TYPE=2 \ No newline at end of file diff --git a/src/config.js b/src/config.js index a8fe2c38..1fff4c27 100644 --- a/src/config.js +++ b/src/config.js @@ -35,3 +35,4 @@ iptables -D FORWARD -o wg0 -j ACCEPT; `.split('\n').join(' '); module.exports.LANG = process.env.LANG || 'en'; module.exports.UI_TRAFFIC_STATS = process.env.UI_TRAFFIC_STATS || 'false'; +module.exports.UI_CHART_TYPE = process.env.UI_CHART_TYPE || 0; diff --git a/src/lib/Server.js b/src/lib/Server.js index bf8c50e6..901f1a05 100644 --- a/src/lib/Server.js +++ b/src/lib/Server.js @@ -19,6 +19,7 @@ const { PASSWORD, LANG, UI_TRAFFIC_STATS, + UI_CHART_TYPE, } = require('../config'); module.exports = class Server { @@ -45,6 +46,9 @@ module.exports = class Server { .get('/api/ui-traffic-stats', (Util.promisify(async () => { return UI_TRAFFIC_STATS === 'true'; }))) + .get('/api/ui-chart-type', (Util.promisify(async () => { + return UI_CHART_TYPE || 0; + }))) // Authentication .get('/api/session', Util.promisify(async (req) => { diff --git a/src/www/index.html b/src/www/index.html index 826cf526..25173644 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -77,12 +77,12 @@ class="relative overflow-hidden border-b last:border-b-0 border-gray-100 dark:border-neutral-600 border-solid"> -
- +
+
-
- +
diff --git a/src/www/js/api.js b/src/www/js/api.js index e69e5a3a..356164c5 100644 --- a/src/www/js/api.js +++ b/src/www/js/api.js @@ -50,6 +50,13 @@ class API { }); } + async getChartType() { + return this.call({ + method: 'get', + path: '/ui-chart-type', + }); + } + async getSession() { return this.call({ method: 'get', diff --git a/src/www/js/app.js b/src/www/js/app.js index 22fe3bfc..23252663 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -23,14 +23,33 @@ function bytes(bytes, decimals, kib, maxunit) { return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`; } +const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); +const theme = darkModeMediaQuery.matches ? 'dark' : 'light'; + const i18n = new VueI18n({ locale: localStorage.getItem('lang') || 'en', fallbackLocale: 'en', messages, }); +const UI_CHART_TYPES = [ + { type: false, strokeWidth: 0 }, + { type: 'line', strokeWidth: 3 }, + { type: 'area', strokeWidth: 0 }, + { type: 'bar', strokeWidth: 0 }, +] + +const CHART_COLORS = { + rx: { light: 'rgba(0,0,0,0.2)', dark: 'rgba(255,255,255,0.3)' }, + tx: { light: 'rgba(0,0,0,0.3)', dark: 'rgba(255,255,255,0.5)' }, + gradient: {light: ['rgba(0,0,0,0.1)', 'rgba(0,0,0,0)'], dark: ['rgba(255,255,255,0.1)', 'rgba(255,255,255,0)']}, +} + new Vue({ el: '#app', + components: { + apexchart: VueApexCharts, + }, i18n, data: { authenticated: null, @@ -55,10 +74,11 @@ new Vue({ isDark: null, uiTrafficStats: false, + uiChartType: 0, + chartOptions: { chart: { background: 'transparent', - type: 'bar', stacked: false, toolbar: { show: false, @@ -67,10 +87,23 @@ new Vue({ enabled: false, }, }, - colors: [ - '#DDDDDD', // rx - '#EEEEEE', // tx - ], + colors: [], + stroke: { + curve: 'smooth', + }, + fill: { + type: 'gradient', + gradient: { + shade: 'dark', + type: 'vertical', + shadeIntensity: 1, + gradientToColors: CHART_COLORS.gradient[theme], + inverseColors: true, + opacityFrom: 1, + opacityTo: 1, + stops: [0, 100], + }, + }, dataLabels: { enabled: false, }, @@ -135,7 +168,7 @@ new Vue({ updateCharts = false, } = {}) { if (!this.authenticated) return; - + const clients = await this.api.getClients(); this.clients = clients.map((client) => { if (client.name.includes('@') && client.name.includes('.')) { @@ -154,26 +187,40 @@ new Vue({ // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000; // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000; + 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; + if (updateCharts) { - 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(); + + this.clientsPersist[client.id].transferTxSeries = [{ + name: 'Tx', + data: this.clientsPersist[client.id].transferTxHistory, + }]; + + this.clientsPersist[client.id].transferRxSeries = [{ + name: 'Rx', + data: this.clientsPersist[client.id].transferRxHistory, + }]; + + client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory; + client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory; + client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory); + + client.transferTxSeries = this.clientsPersist[client.id].transferTxSeries; + client.transferRxSeries = this.clientsPersist[client.id].transferRxSeries; } client.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent; client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent; - client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory; - client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory; - client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory); - client.hoverTx = this.clientsPersist[client.id].hoverTx; client.hoverRx = this.clientsPersist[client.id].hoverRx; @@ -278,7 +325,7 @@ new Vue({ this.authenticated = session.authenticated; this.requiresPassword = session.requiresPassword; this.refresh({ - updateCharts: true, + updateCharts: this.updateCharts, }).catch((err) => { alert(err.message || err.toString()); }); @@ -289,7 +336,7 @@ new Vue({ setInterval(() => { this.refresh({ - updateCharts: true, + updateCharts: this.updateCharts, }).catch(console.error); }, 1000); @@ -298,9 +345,16 @@ new Vue({ this.uiTrafficStats = res; }) .catch(() => { - console.log('Failed to get ui-traffic-stats'); this.uiTrafficStats = false; }); + + this.api.getChartType() + .then((res) => { + this.uiChartType = parseInt(res); + }) + .catch(() => { + this.uiChartType = 0; + }); Promise.resolve().then(async () => { const lang = await this.api.getLang(); @@ -333,4 +387,27 @@ new Vue({ this.latestRelease = latestRelease; }).catch((err) => console.error(err)); }, + computed: { + chartOptionsTX() { + const opts = { + ...this.chartOptions, + colors: [CHART_COLORS.tx[theme]], + }; + opts.chart.type = UI_CHART_TYPES[this.uiChartType].type || false; + opts.stroke.width = UI_CHART_TYPES[this.uiChartType].strokeWidth; + return opts; + }, + chartOptionsRX() { + const opts = { + ...this.chartOptions, + colors: [CHART_COLORS.rx[theme]], + }; + opts.chart.type = UI_CHART_TYPES[this.uiChartType].type || false; + opts.stroke.width = UI_CHART_TYPES[this.uiChartType].strokeWidth; + return opts; + }, + updateCharts() { + return this.uiChartType > 0; + } + }, }); From 71c208133de5b33a6e5b41b06136dcad8815e72f Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Wed, 13 Mar 2024 12:28:21 +0300 Subject: [PATCH 5/9] Remove .env from repo --- src/.env | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/.env diff --git a/src/.env b/src/.env deleted file mode 100644 index 122fe628..00000000 --- a/src/.env +++ /dev/null @@ -1,3 +0,0 @@ -WG_HOST=127.0.0.1 -UI_TRAFFIC_STATS=true -UI_CHART_TYPE=2 \ No newline at end of file From 98a5daf4581e0b4fdbf9c548d1b4c4ba63612da5 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Wed, 13 Mar 2024 13:24:24 +0300 Subject: [PATCH 6/9] Fix charts on mobile --- src/www/css/app.css | 10 +++++----- src/www/index.html | 6 +++--- src/www/js/app.js | 13 +++++++++---- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/www/css/app.css b/src/www/css/app.css index 00837d4c..9c6c85fd 100644 --- a/src/www/css/app.css +++ b/src/www/css/app.css @@ -1141,11 +1141,6 @@ video { padding-bottom: 0.75rem; } -.py-5 { - padding-top: 1.25rem; - padding-bottom: 1.25rem; -} - .pb-1 { padding-bottom: 0.25rem; } @@ -1597,6 +1592,11 @@ video { padding-right: 0px; } + .md\:py-5 { + padding-top: 1.25rem; + padding-bottom: 1.25rem; + } + .md\:pb-0 { padding-bottom: 0px; } diff --git a/src/www/index.html b/src/www/index.html index 25173644..2b1b7ba8 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -77,17 +77,17 @@ class="relative overflow-hidden border-b last:border-b-0 border-gray-100 dark:border-neutral-600 border-solid"> -
+
-
+
-
+
diff --git a/src/www/js/app.js b/src/www/js/app.js index 23252663..b0166129 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -86,6 +86,10 @@ new Vue({ animations: { enabled: false, }, + parentHeightOffset: 0, + sparkline: { + enabled: true, + } }, colors: [], stroke: { @@ -117,10 +121,10 @@ new Vue({ show: false, }, axisTicks: { - show: true, + show: false, }, axisBorder: { - show: true, + show: false, }, }, yaxis: { @@ -184,8 +188,9 @@ new Vue({ } // Debug - // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000; - // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000; + client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000; + client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000; + client.latestHandshakeAt = new Date(); this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious; this.clientsPersist[client.id].transferRxPrevious = client.transferRx; From 262318df27f475eb3c706d00e7269cd797c0b2f7 Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Wed, 13 Mar 2024 13:26:27 +0300 Subject: [PATCH 7/9] Disable debug --- src/www/js/app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/www/js/app.js b/src/www/js/app.js index b0166129..61d1ceeb 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -188,9 +188,9 @@ new Vue({ } // Debug - client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000; - client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000; - client.latestHandshakeAt = new Date(); + // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000; + // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000; + // client.latestHandshakeAt = new Date(); this.clientsPersist[client.id].transferRxCurrent = client.transferRx - this.clientsPersist[client.id].transferRxPrevious; this.clientsPersist[client.id].transferRxPrevious = client.transferRx; From ac6a05f9beda81689926b9ed8148290ae328da4e Mon Sep 17 00:00:00 2001 From: Sergei Birukov Date: Wed, 13 Mar 2024 13:51:32 +0300 Subject: [PATCH 8/9] Fix lint errors --- src/www/js/app.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/www/js/app.js b/src/www/js/app.js index 61d1ceeb..a2536ed6 100644 --- a/src/www/js/app.js +++ b/src/www/js/app.js @@ -37,13 +37,13 @@ const UI_CHART_TYPES = [ { type: 'line', strokeWidth: 3 }, { type: 'area', strokeWidth: 0 }, { type: 'bar', strokeWidth: 0 }, -] +]; const CHART_COLORS = { rx: { light: 'rgba(0,0,0,0.2)', dark: 'rgba(255,255,255,0.3)' }, tx: { light: 'rgba(0,0,0,0.3)', dark: 'rgba(255,255,255,0.5)' }, - gradient: {light: ['rgba(0,0,0,0.1)', 'rgba(0,0,0,0)'], dark: ['rgba(255,255,255,0.1)', 'rgba(255,255,255,0)']}, -} + gradient: { light: ['rgba(0,0,0,0.1)', 'rgba(0,0,0,0)'], dark: ['rgba(255,255,255,0.1)', 'rgba(255,255,255,0)'] }, +}; new Vue({ el: '#app', @@ -89,7 +89,7 @@ new Vue({ parentHeightOffset: 0, sparkline: { enabled: true, - } + }, }, colors: [], stroke: { @@ -107,7 +107,7 @@ new Vue({ opacityTo: 1, stops: [0, 100], }, - }, + }, dataLabels: { enabled: false, }, @@ -172,7 +172,7 @@ new Vue({ updateCharts = false, } = {}) { if (!this.authenticated) return; - + const clients = await this.api.getClients(); this.clients = clients.map((client) => { if (client.name.includes('@') && client.name.includes('.')) { @@ -198,7 +198,6 @@ new Vue({ this.clientsPersist[client.id].transferTxPrevious = client.transferTx; if (updateCharts) { - this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent); this.clientsPersist[client.id].transferRxHistory.shift(); @@ -352,10 +351,10 @@ new Vue({ .catch(() => { this.uiTrafficStats = false; }); - + this.api.getChartType() .then((res) => { - this.uiChartType = parseInt(res); + this.uiChartType = parseInt(res, 10); }) .catch(() => { this.uiChartType = 0; @@ -413,6 +412,6 @@ new Vue({ }, updateCharts() { return this.uiChartType > 0; - } + }, }, }); From 88b1b20e48cda96132a1e2ff21c1ea130b1135d5 Mon Sep 17 00:00:00 2001 From: Philip H <47042125+pheiduck@users.noreply.github.com> Date: Fri, 15 Mar 2024 13:43:51 +0100 Subject: [PATCH 9/9] docker-compose.yml: add UI_CHART_TYPE --- docker-compose.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docker-compose.yml b/docker-compose.yml index a489356f..e118115f 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -24,7 +24,8 @@ services: # - WG_POST_UP=echo "Post Up" > /etc/wireguard/post-up.txt # - WG_PRE_DOWN=echo "Pre Down" > /etc/wireguard/pre-down.txt # - WG_POST_DOWN=echo "Post Down" > /etc/wireguard/post-down.txt - # - UI_TRAFFIC_STATS=true + # - UI_TRAFFIC_STATS=true + # - UI_CHART_TYPE=0 (0 # Charts disabled, 1 # Line chart, 2 # Area chart, 3 # Bar chart) image: ghcr.io/wg-easy/wg-easy container_name: wg-easy