58 lines
1.7 KiB
JavaScript
58 lines
1.7 KiB
JavaScript
"use strict";
|
|
|
|
import Emel from 'emel';
|
|
|
|
class ChartStackedBarSet {
|
|
constructor() {
|
|
this.emel = new Emel().emel;
|
|
|
|
this.el = this.emel(`div[class="stacked-bar-set"]>div[class=legend]+div[class=bars]`);
|
|
this.el_legend = this.el.querySelector(`.legend`);
|
|
|
|
this.bars = [];
|
|
}
|
|
|
|
clear() {
|
|
this.el_legend.replaceChildren();
|
|
this.el.querySelector(".bars").replaceChildren();
|
|
this.bars = [];
|
|
}
|
|
|
|
/**
|
|
* Adds a new stacked bar to this set of stacked bars.
|
|
* @param {number} i The index in the list of stacked bars to insert it.
|
|
* @param {ChartStackedBar} bar The new stacked bar instance to add.
|
|
* @return {void}
|
|
*/
|
|
add_bar(i, bar) {
|
|
this.bars.splice(i, 0, bar);
|
|
}
|
|
|
|
#update_cats() {
|
|
const els_legend_items = [...this.el_legend.querySelectorAll(`.legend-item`)];
|
|
|
|
// map → flatten → uniq
|
|
let cats = this.bars.map(bar => bar.categories).flat()
|
|
.filter((cat, i) => cats.find(scat => cat.name === scat.name) === i);
|
|
|
|
for(const cat of cats) {
|
|
const el_legend_item = els_legend_items.find(el => el.dataset.name === cat.name);
|
|
if(typeof el_legend_item === "undefined") {
|
|
// Nope, didn't find it - create it
|
|
el_legend.appendChild(this.#make_legend_item(cat.colour, cat.name));
|
|
}
|
|
else {
|
|
// Yep, we found it - update the names
|
|
el_legend_item.querySelector(".legend-item-spot").style.background = cat.colour;
|
|
el_legend_item.querySelector(".legend-item-text").replaceChildren(document.createTextNode(cat.name));
|
|
}
|
|
}
|
|
}
|
|
|
|
#make_legend_item(colour, name) {
|
|
return this.emel(`span[class="legend-item"]>span[style="background: ${colour};" class="legend-item-spot"]+span[class="legend-item-text"]{${name}}`);
|
|
}
|
|
}
|
|
|
|
export default ChartStackedBarSet;
|