forked from mirrors/amnezia-wg-easy
add charts
This commit is contained in:
Emile Nijssen
parent
9a4b0bff2e
commit
7cd677f7ef
6 changed files with 280 additions and 131 deletions
|
|
@ -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);
|
||||
|
|
|
|||
14
src/www/js/vendor/apexcharts.min.js
vendored
Normal file
14
src/www/js/vendor/apexcharts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
src/www/js/vendor/vue-apexcharts.min.js
vendored
Normal file
7
src/www/js/vendor/vue-apexcharts.min.js
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/**
|
||||
* 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 }));
|
||||
Loading…
Add table
Add a link
Reference in a new issue