sbrl
/
systemquery
1
0
Fork 0
Code Issues Pull Requests Releases Activity

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.
This commit is contained in:
Starbeamrainbowlabs 2022-04-04 03:12:47 +01:00
parent 97cb8b4432
commit 66392b7af9
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
6 changed files with 55 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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": {

12
src/static/js/tabledefs/cpu_live.mjs
View File

@ -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",

1
src/static/js/ui/GlobalUI.mjs
View File

@ -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}`,

10
src/static/js/ui/UIGauge.mjs
View File

@ -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();
}
}

38
src/static/js/ui/charts/ChartStackedBar.mjs Normal file
View File

@ -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;