replace apexcharts with 'ye olde divs

This commit is contained in:
Emile Nijssen 2022-06-25 22:39:41 +02:00
parent f364e0775a
commit faf00d46d9
5 changed files with 82 additions and 63 deletions

View File

@ -5,5 +5,6 @@ services:
command: npm run serve command: npm run serve
volumes: volumes:
- ./src/:/app/ - ./src/:/app/
# environment: environment:
# - PASSWORD=p # - PASSWORD=p
- WG_HOST=192.168.1.233

View File

@ -78,9 +78,47 @@
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="width: 100%; height: 30%;"> <div class="absolute z-0 bottom-0 left-0 right-0" style="width: 100%; height: 20%;">
<apexchart width="100%" height="100%" :options="client.chartOptions" :series="client.chartSeries"> <!-- Bar -->
</apexchart> <div v-for="(_, index) in client.transferTxHistory" :style="{
display: 'inline-flex',
alignItems: 'flex-end',
width: '2%', // 1/100th of client.transferTxHistory.length
height: '100%',
padding: '0 3px',
boxSizing: 'border-box',
fontSize: 0,
}">
<!-- TX -->
<div :style="{
minHeight: '0px',
minWidth: '2px',
maxWidth: '4px',
width: '50%',
marginRight: '1px',
height: Math.round((client.transferTxHistory[index]/client.transferMax)*100) + '%',
background: client.hoverTx
? '#992922'
: '#F3F4F6',
transition: 'all 0.2s',
borderRadius: '2px 2px 0 0',
}"></div>
<!-- RX -->
<div :style="{
minHeight: '0px',
minWidth: '2px',
maxWidth: '4px',
width: '50%',
height: Math.round((client.transferRxHistory[index]/client.transferMax)*100) + '%',
background: client.hoverRx
? '#992922'
: '#F0F1F3',
transition: 'all 0.2s',
borderRadius: '2px 2px 0 0',
}"></div>
</div>
</div> </div>
<div class="relative p-5 z-10 flex flex-row"> <div class="relative p-5 z-10 flex flex-row">
@ -155,7 +193,10 @@
</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)"
@mouseover="client.hoverTx = clientsPersist[client.id].hoverTx = true;"
@mouseleave="client.hoverTx = clientsPersist[client.id].hoverTx = false;"
style="cursor: default;">
· ·
<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">
@ -167,7 +208,10 @@
</span> </span>
<!-- Transfer RX --> <!-- Transfer RX -->
<span v-if="client.transferRx" :title="'Total Upload: ' + bytes(client.transferRx)"> <span v-if="client.transferRx" :title="'Total Upload: ' + bytes(client.transferRx)"
@mouseover="client.hoverRx = clientsPersist[client.id].hoverRx = true;"
@mouseleave="client.hoverRx = clientsPersist[client.id].hoverRx = false;"
style="cursor: default;">
· ·
<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">
@ -475,8 +519,6 @@
</div> </div>
<script src="./js/vendor/vue.min.js"></script> <script src="./js/vendor/vue.min.js"></script>
<script src="./js/vendor/apexcharts.min.js"></script>
<script src="./js/vendor/vue-apexcharts.min.js"></script>
<script src="./js/vendor/md5.min.js"></script> <script src="./js/vendor/md5.min.js"></script>
<script src="./js/vendor/timeago.min.js"></script> <script src="./js/vendor/timeago.min.js"></script>
<script src="./js/api.js"></script> <script src="./js/api.js"></script>

View File

@ -25,9 +25,6 @@ function bytes(bytes, decimals, kib, maxunit) {
new Vue({ new Vue({
el: '#app', el: '#app',
components: {
apexchart: VueApexCharts,
},
data: { data: {
authenticated: null, authenticated: null,
authenticating: false, authenticating: false,
@ -124,7 +121,9 @@ new Vue({
minute: 'numeric', minute: 'numeric',
}).format(value); }).format(value);
}, },
async refresh() { async refresh({
updateCharts = false,
} = {}) {
if (!this.authenticated) return; if (!this.authenticated) return;
const clients = await this.api.getClients(); const clients = await this.api.getClients();
@ -135,44 +134,38 @@ 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(100).fill(0); this.clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
this.clientsPersist[client.id].transferRxPrevious = client.transferRx; this.clientsPersist[client.id].transferRxPrevious = client.transferRx;
this.clientsPersist[client.id].transferTxHistory = Array(100).fill(0); this.clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
this.clientsPersist[client.id].transferTxPrevious = client.transferTx; 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; // Debug
this.clientsPersist[client.id].transferRxPrevious = client.transferRx; // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
this.clientsPersist[client.id].transferTxCurrent = client.transferTx - this.clientsPersist[client.id].transferTxPrevious; // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
this.clientsPersist[client.id].transferTxPrevious = client.transferTx;
this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent); if (updateCharts) {
this.clientsPersist[client.id].transferRxHistory.shift(); 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].transferTxHistory.push(this.clientsPersist[client.id].transferTxCurrent); this.clientsPersist[client.id].transferRxHistory.push(this.clientsPersist[client.id].transferRxCurrent);
this.clientsPersist[client.id].transferTxHistory.shift(); this.clientsPersist[client.id].transferRxHistory.shift();
this.clientsPersist[client.id].chartMax = Math.max(...this.clientsPersist[client.id].transferTxHistory, ...this.clientsPersist[client.id].transferRxHistory); 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.transferTxCurrent = this.clientsPersist[client.id].transferTxCurrent;
client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent; client.transferRxCurrent = this.clientsPersist[client.id].transferRxCurrent;
client.chartOptions = this.clientsPersist[client.id].chartOptions; client.transferTxHistory = this.clientsPersist[client.id].transferTxHistory;
client.chartSeries = [{ client.transferRxHistory = this.clientsPersist[client.id].transferRxHistory;
name: 'tx', client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
data: this.clientsPersist[client.id].transferTxHistory,
}, { client.hoverTx = this.clientsPersist[client.id].hoverTx;
name: 'rx', client.hoverRx = this.clientsPersist[client.id].hoverRx;
data: this.clientsPersist[client.id].transferRxHistory,
}];
return client; return client;
}); });
@ -259,7 +252,9 @@ new Vue({
.then(session => { .then(session => {
this.authenticated = session.authenticated; this.authenticated = session.authenticated;
this.requiresPassword = session.requiresPassword; this.requiresPassword = session.requiresPassword;
this.refresh().catch(err => { this.refresh({
updateCharts: true,
}).catch(err => {
alert(err.message || err.toString()); alert(err.message || err.toString());
}); });
}) })
@ -268,7 +263,9 @@ new Vue({
}); });
setInterval(() => { setInterval(() => {
this.refresh().catch(console.error); this.refresh({
updateCharts: true,
}).catch(console.error);
}, 1000); }, 1000);
Promise.resolve().then(async () => { Promise.resolve().then(async () => {

File diff suppressed because one or more lines are too long

View File

@ -1,7 +0,0 @@
/**
* Minified by jsDelivr using Terser v5.7.1.
* Original file: /npm/vue-apexcharts@1.6.2/dist/vue-apexcharts.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!function (t, e) { "object" == typeof exports && "undefined" != typeof module ? module.exports = e(require("apexcharts/dist/apexcharts.min")) : "function" == typeof define && define.amd ? define(["apexcharts/dist/apexcharts.min"], e) : t.VueApexCharts = e(t.ApexCharts) }(this, (function (t) { "use strict"; function e(t) { return (e = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) { return typeof t } : function (t) { return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t })(t) } function n(t, e, n) { return e in t ? Object.defineProperty(t, e, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = n, t } t = t && t.hasOwnProperty("default") ? t.default : t; var i = { props: { options: { type: Object }, type: { type: String }, series: { type: Array, required: !0, default: function () { return [] } }, width: { default: "100%" }, height: { default: "auto" } }, data: function () { return { chart: null } }, beforeMount: function () { window.ApexCharts = t }, mounted: function () { this.init() }, created: function () { var t = this; this.$watch("options", (function (e) { !t.chart && e ? t.init() : t.chart.updateOptions(t.options) })), this.$watch("series", (function (e) { !t.chart && e ? t.init() : t.chart.updateSeries(t.series) }));["type", "width", "height"].forEach((function (e) { t.$watch(e, (function () { t.refresh() })) })) }, beforeDestroy: function () { this.chart && this.destroy() }, render: function (t) { return t("div") }, methods: { init: function () { var e = this, n = { chart: { type: this.type || this.options.chart.type || "line", height: this.height, width: this.width, events: {} }, series: this.series }; Object.keys(this.$listeners).forEach((function (t) { n.chart.events[t] = e.$listeners[t] })); var i = this.extend(this.options, n); return this.chart = new t(this.$el, i), this.chart.render() }, isObject: function (t) { return t && "object" === e(t) && !Array.isArray(t) && null != t }, extend: function (t, e) { var i = this; "function" != typeof Object.assign && (Object.assign = function (t) { if (null == t) throw new TypeError("Cannot convert undefined or null to object"); for (var e = Object(t), n = 1; n < arguments.length; n++) { var i = arguments[n]; if (null != i) for (var r in i) i.hasOwnProperty(r) && (e[r] = i[r]) } return e }); var r = Object.assign({}, t); return this.isObject(t) && this.isObject(e) && Object.keys(e).forEach((function (o) { i.isObject(e[o]) && o in t ? r[o] = i.extend(t[o], e[o]) : Object.assign(r, n({}, o, e[o])) })), r }, refresh: function () { return this.destroy(), this.init() }, destroy: function () { this.chart.destroy() }, updateSeries: function (t, e) { return this.chart.updateSeries(t, e) }, updateOptions: function (t, e, n, i) { return this.chart.updateOptions(t, e, n, i) }, toggleSeries: function (t) { return this.chart.toggleSeries(t) }, showSeries: function (t) { this.chart.showSeries(t) }, hideSeries: function (t) { this.chart.hideSeries(t) }, appendSeries: function (t, e) { return this.chart.appendSeries(t, e) }, resetSeries: function () { this.chart.resetSeries() }, zoomX: function (t, e) { this.chart.zoomX(t, e) }, toggleDataPointSelection: function (t, e) { this.chart.toggleDataPointSelection(t, e) }, appendData: function (t) { return this.chart.appendData(t) }, addText: function (t) { this.chart.addText(t) }, addImage: function (t) { this.chart.addImage(t) }, addShape: function (t) { this.chart.addShape(t) }, dataURI: function () { return this.chart.dataURI() }, setLocale: function (t) { return this.chart.setLocale(t) }, addXaxisAnnotation: function (t, e) { this.chart.addXaxisAnnotation(t, e) }, addYaxisAnnotation: function (t, e) { this.chart.addYaxisAnnotation(t, e) }, addPointAnnotation: function (t, e) { this.chart.addPointAnnotation(t, e) }, removeAnnotation: function (t, e) { this.chart.removeAnnotation(t, e) }, clearAnnotations: function () { this.chart.clearAnnotations() } } }; return window.ApexCharts = t, i.install = function (e) { e.ApexCharts = t, window.ApexCharts = t, Object.defineProperty(e.prototype, "$apexcharts", { get: function () { return t } }) }, i }));