adding bars to table's frequency column

This commit is contained in:
frankknoll
2023-04-18 16:48:25 +02:00
parent 8eb6f8ff9b
commit 71c7f8d261
5 changed files with 39 additions and 6 deletions

View File

@@ -2,6 +2,7 @@ class HistogramTable {
#tableElement;
#table;
#sumFrequencies;
constructor(tableElement) {
this.#tableElement = tableElement;
@@ -12,8 +13,8 @@ class HistogramTable {
}
display(frequencyBySymptom) {
const symptom_frequency_arrays = Object.entries(frequencyBySymptom);
this.#setTableRows(symptom_frequency_arrays);
const symptom_frequency_pairs = Object.entries(frequencyBySymptom);
this.#setTableRows(symptom_frequency_pairs);
}
#createEmptyTable() {
@@ -38,6 +39,18 @@ class HistogramTable {
this.#getColumnIndex('Symptom')
]
},
{
render: (data, type, row, meta) => {
// FK-TODO: refactor
const numberWithBar = UIUtils.instantiateTemplate('template-number-with-bar');
const bar = numberWithBar.querySelector('.bar');
bar.style.width = (data / this.#sumFrequencies * 100).toString() + "%";
const number = numberWithBar.querySelector('.number');
number.textContent = data;
return numberWithBar.outerHTML;
},
targets: [this.#getColumnIndex('Frequency')]
}
]
});
}
@@ -51,10 +64,16 @@ class HistogramTable {
}
}
#setTableRows(rows) {
#setTableRows(symptom_frequency_pairs) {
this.#sumFrequencies = this.#getSumFrequencies(symptom_frequency_pairs);
this.#table
.clear()
.rows.add(rows)
.rows.add(symptom_frequency_pairs)
.draw();
}
#getSumFrequencies(symptom_frequency_pairs) {
const frequencies = symptom_frequency_pairs.map(symptom_frequency_pair => symptom_frequency_pair[1])
return Utils.sum(frequencies);
}
}