From 66392b7af93d571465e2a23b2b25b476297064b9 Mon Sep 17 00:00:00 2001 From: Starbeamrainbowlabs Date: Mon, 4 Apr 2022 03:12:47 +0100 Subject: [PATCH] Start working on our own stacked bar chart system ....but we've only just got the scaffolding in place. Apexcharts is cool, but I'm doubtful that it's gonna cooperate with us, and it keeps throwing random error messages that aren't explained very well - and indeed the docs aren't particularly helpful here either. --- package-lock.json | 183 +------------------- package.json | 4 +- src/static/js/tabledefs/cpu_live.mjs | 12 +- src/static/js/ui/GlobalUI.mjs | 1 - src/static/js/ui/UIGauge.mjs | 10 +- src/static/js/ui/charts/ChartStackedBar.mjs | 38 ++++ 6 files changed, 55 insertions(+), 193 deletions(-) create mode 100644 src/static/js/ui/charts/ChartStackedBar.mjs diff --git a/package-lock.json b/package-lock.json index f39feec..65d7244 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,11 +24,11 @@ "devDependencies": { "@svgdotjs/svg.js": "^3.1.2", "@types/mime": "^2.0.3", - "apexcharts": "^3.35.0", "emel": "^2.5.1", "esbuild": "^0.14.30", "fork-awesome": "^1.2.0", - "nightink": "^1.0.1" + "nightink": "^1.0.1", + "svg.js": "^2.7.1" } }, "node_modules/@emmetio/abbreviation": { @@ -77,20 +77,6 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==" }, - "node_modules/apexcharts": { - "version": "3.35.0", - "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.0.tgz", - "integrity": "sha512-oipJRkaxt8DPGRmn1kur6aPzML1JSpf2M3ecu+gyw+8xiNmT2C0p1uuuqPZrk+Lr2hmDxzNBPR7TvxwRl3ozgw==", - "dev": true, - "dependencies": { - "svg.draggable.js": "^2.2.2", - "svg.easing.js": "^2.0.0", - "svg.filter.js": "^2.0.2", - "svg.pathmorphing.js": "^0.1.3", - "svg.resize.js": "^1.4.3", - "svg.select.js": "^3.0.1" - } - }, "node_modules/applause-cli": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/applause-cli/-/applause-cli-1.8.0.tgz", @@ -627,97 +613,12 @@ "node": ">= 4" } }, - "node_modules/svg.draggable.js": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", - "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", - "dev": true, - "dependencies": { - "svg.js": "^2.0.1" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/svg.easing.js": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", - "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=", - "dev": true, - "dependencies": { - "svg.js": ">=2.3.x" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/svg.filter.js": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", - "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=", - "dev": true, - "dependencies": { - "svg.js": "^2.2.5" - }, - "engines": { - "node": ">= 0.8.0" - } - }, "node_modules/svg.js": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==", "dev": true }, - "node_modules/svg.pathmorphing.js": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", - "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", - "dev": true, - "dependencies": { - "svg.js": "^2.4.0" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/svg.resize.js": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", - "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", - "dev": true, - "dependencies": { - "svg.js": "^2.6.5", - "svg.select.js": "^2.1.2" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/svg.resize.js/node_modules/svg.select.js": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", - "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", - "dev": true, - "dependencies": { - "svg.js": "^2.2.5" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/svg.select.js": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", - "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", - "dev": true, - "dependencies": { - "svg.js": "^2.6.5" - }, - "engines": { - "node": ">= 0.8.0" - } - }, "node_modules/systeminformation": { "version": "5.11.9", "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.11.9.tgz", @@ -792,20 +693,6 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==" }, - "apexcharts": { - "version": "3.35.0", - "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.35.0.tgz", - "integrity": "sha512-oipJRkaxt8DPGRmn1kur6aPzML1JSpf2M3ecu+gyw+8xiNmT2C0p1uuuqPZrk+Lr2hmDxzNBPR7TvxwRl3ozgw==", - "dev": true, - "requires": { - "svg.draggable.js": "^2.2.2", - "svg.easing.js": "^2.0.0", - "svg.filter.js": "^2.0.2", - "svg.pathmorphing.js": "^0.1.3", - "svg.resize.js": "^1.4.3", - "svg.select.js": "^3.0.1" - } - }, "applause-cli": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/applause-cli/-/applause-cli-1.8.0.tgz", @@ -1103,78 +990,12 @@ "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz", "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==" }, - "svg.draggable.js": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", - "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", - "dev": true, - "requires": { - "svg.js": "^2.0.1" - } - }, - "svg.easing.js": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", - "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=", - "dev": true, - "requires": { - "svg.js": ">=2.3.x" - } - }, - "svg.filter.js": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", - "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=", - "dev": true, - "requires": { - "svg.js": "^2.2.5" - } - }, "svg.js": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==", "dev": true }, - "svg.pathmorphing.js": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", - "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", - "dev": true, - "requires": { - "svg.js": "^2.4.0" - } - }, - "svg.resize.js": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", - "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", - "dev": true, - "requires": { - "svg.js": "^2.6.5", - "svg.select.js": "^2.1.2" - }, - "dependencies": { - "svg.select.js": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", - "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", - "dev": true, - "requires": { - "svg.js": "^2.2.5" - } - } - } - }, - "svg.select.js": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", - "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", - "dev": true, - "requires": { - "svg.js": "^2.6.5" - } - }, "systeminformation": { "version": "5.11.9", "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.11.9.tgz", diff --git a/package.json b/package.json index 3ba8073..6377239 100644 --- a/package.json +++ b/package.json @@ -34,11 +34,11 @@ "devDependencies": { "@svgdotjs/svg.js": "^3.1.2", "@types/mime": "^2.0.3", - "apexcharts": "^3.35.0", "emel": "^2.5.1", "esbuild": "^0.14.30", "fork-awesome": "^1.2.0", - "nightink": "^1.0.1" + "nightink": "^1.0.1", + "svg.js": "^2.7.1" }, "___comment": "The browser field is used by esbuild. fs isn't a thing in the browser, ", "browser": { diff --git a/src/static/js/tabledefs/cpu_live.mjs b/src/static/js/tabledefs/cpu_live.mjs index 433a7cb..4e2801b 100644 --- a/src/static/js/tabledefs/cpu_live.mjs +++ b/src/static/js/tabledefs/cpu_live.mjs @@ -14,12 +14,12 @@ export default { "average": "frequency.avg" } }, - { - name: "Frequency per-core (GHz)", - type: "gauge", - gauge: { min: 0, max: 6 }, - content: (table) => table.frequency.cores - }, + // { + // name: "Frequency per-core (GHz)", + // type: "gauge", + // gauge: { min: 0, max: 6 }, + // content: (table) => table.frequency.cores // This is an array, which isn't implemented yet + // }, { name: "Temperature (°C)", type: "gauge", diff --git a/src/static/js/ui/GlobalUI.mjs b/src/static/js/ui/GlobalUI.mjs index e9674ad..06dbca0 100644 --- a/src/static/js/ui/GlobalUI.mjs +++ b/src/static/js/ui/GlobalUI.mjs @@ -43,7 +43,6 @@ class GlobalUI { } const emel_icon = forkawesome_emel(icondef); - console.log(`emel_icon`, emel_icon); result.append(this.emel(`li>a[href="?"]>${emel_icon}+span{?}`, { placeholders: [ `#table/${table_name}`, diff --git a/src/static/js/ui/UIGauge.mjs b/src/static/js/ui/UIGauge.mjs index 6fb3e50..4a97d78 100644 --- a/src/static/js/ui/UIGauge.mjs +++ b/src/static/js/ui/UIGauge.mjs @@ -43,7 +43,7 @@ class UIGauge extends AbstractUIItem { } #__update_chart() { - this.chart.updateOptions(this.chart_options); + this.chart.updateOptions(this.chart_options, true); this.chart.render(); } @@ -70,7 +70,6 @@ class UIGauge extends AbstractUIItem { return; } } - console.log("CHART_LABELS", this.#chart_labels); this.#chart_labels.push(label); this.#chart_data.push(data_item); @@ -109,9 +108,14 @@ class UIGauge extends AbstractUIItem { console.warn(`Warning: Got null when evaluating value for UIGauge.`); return false; } + if(typeof data_item !== "number") { + console.warn(`Warning: Got '${typeof daata_item}' when evaluating value for UIGuage.`); + return false; + } this.#__insert_item(label, data_item); - + console.log(`def ${this.def.name} | chart_labels`, this.#chart_labels); + console.log(`def ${this.def.name} | chart_data`, this.#chart_data); this.#__update_chart(); } } diff --git a/src/static/js/ui/charts/ChartStackedBar.mjs b/src/static/js/ui/charts/ChartStackedBar.mjs new file mode 100644 index 0000000..e563881 --- /dev/null +++ b/src/static/js/ui/charts/ChartStackedBar.mjs @@ -0,0 +1,38 @@ +"use strict"; + +class ChartStackedBar { + constructor(el) { + this.el = el; + + /** + * The category names and their properties. + * @type {Object[]} + */ + this.categories = [ + // { name: "Some category name", colour: "hsl(46, 80%, 50%)" } + // .... + ] + /** + * Whether to normalise all bars to be the same height or not. + * @type {Boolean} + */ + this.percentage = false; + /** + * The bars to render. + * Additional properties can be specified on the objects passed and + * this class will ignore them. It's strongly recommended though that + * any additional properties start with an underscore. + * @type {Object[]} + */ + this.bars = [ + // { name: "bar name 1", values: [ { value: 3, cat: 1 }, .... ] } + // .... + ]; + } + + render() { + + } +} + +export default ChartStackedBar;