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:
parent
97cb8b4432
commit
66392b7af9
GPG key ID:
1BE5172E637709C2
6 changed files with 55 additions and 193 deletions
183
package-lock.json
generated
183
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}`,
|
||||
|
|
|
|||
|
|
@ -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
38
src/static/js/ui/charts/ChartStackedBar.mjs
Normal 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;
|
||||
Loading…
Reference in a new issue