francois/HowBadIsMyBatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

displaying a bar chart in each table row

Browse Source
This commit is contained in:
frankknoll
2023-06-08 19:04:59 +02:00
parent 36df7a6f84
commit 37c32361ca
11 changed files with 46 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/BarChartDescriptionProvider.js
View File

@@ -1,7 +0,0 @@
class BarChartDescriptionProvider {
static getBarChartDescription(batchcode) {
return fetch(`data/barChartDescriptionTables/${batchcode}.json`)
.then(response => response.json());
}
}

6
docs/BarChartDescriptionsProvider.js Normal file
View File

@@ -0,0 +1,6 @@
class BarChartDescriptionsProvider {
static getBarChartDescriptions() {
return fetch('data/barChartDescriptionTable.json').then(response => response.json());
}
}

26
docs/BatchcodeByCountryBarChartView.js
View File

@@ -6,37 +6,13 @@ class BatchcodeByCountryBarChartView {
this.#uiContainer = uiContainer
}
displayBatchcodeByCountryBarChart(batchcode) {
this
.#loadBarChartDescription(batchcode)
.then(barChartDescription => this.#displayBatchcodeByCountryBarChart(barChartDescription));
}
#loadBarChartDescription(batchcode) {
const loadingText = document.createTextNode('Loading...');
this.#uiContainer.appendChild(loadingText);
return BarChartDescriptionProvider
.getBarChartDescription(batchcode)
.then(barChartDescriptionTable => {
loadingText.remove();
return barChartDescriptionTable;
});
}
#displayBatchcodeByCountryBarChart(barChartDescription) {
this.#displayHeading(barChartDescription.batchcode);
displayBatchcodeByCountryBarChart(barChartDescription) {
const chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider');
const chartView = new BatchcodeByCountryBarChartView2(chartWithSlider.querySelector("canvas"));
this.#uiContainer.appendChild(chartWithSlider);
this.#displayBarChart(barChartDescription, chartView);
}
#displayHeading(batchcode) {
const h1 = document.createElement("h3");
h1.appendChild(document.createTextNode(`Frequencies of reported Symptoms for Batch Code Combinations containing ${batchcode}`));
this.#uiContainer.appendChild(h1);
}
#displayBarChart(barChartDescription, chartView) {
chartView.displayChart(barChartDescription);
}

1
docs/BatchcodeByCountryBarChartView2.js
View File

@@ -16,7 +16,6 @@ class BatchcodeByCountryBarChartView2 {
this.#canvas,
{
type: 'bar',
plugins: [ChartDataLabels],
data: this.#getData(barChartDescription),
options: this.#getOptions()
});

2
docs/batchCodeTable.html
View File

@@ -26,7 +26,7 @@
<script src="./ColumnSearch.js"></script>
<script src="./batchCodeTable.js"></script>
<script src="./HistoDescrsProvider.js"></script>
<script src="./BarChartDescriptionProvider.js"></script>
<script src="./BarChartDescriptionsProvider.js"></script>
<script src="./HistogramChartView.js"></script>
<script src="./BatchcodeByCountryBarChartView2.js"></script>
<script src="./BatchcodeCombinationSelection.js"></script>

48
docs/batchCodeTable.js
View File

@@ -5,6 +5,7 @@ class BatchCodeTableInitializer {
#batchCodeTableElement;
#batchCodeTable;
#columnSearch;
#barChartDescriptions;
constructor({ heading, countrySelect, batchCodeTableElement }) {
this.#heading = heading;
@@ -67,11 +68,27 @@ class BatchCodeTableInitializer {
targets: [this.#getColumnIndex('Countries'), this.#getColumnIndex('Company')]
},
{
render: (data, type, row) => {
render: data => {
const numberInPercent = parseFloat(data);
return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + " %" : '';
return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + "%" : '';
},
targets: [this.#getColumnIndex('Severe reports'), this.#getColumnIndex('Lethality')]
},
{
width: "1000px",
render: function (data, type, row, meta) {
return "";
},
createdCell: (cell, cellData, row, rowIndex, colIndex) => {
const batchcode = row[this.#getColumnIndex('Batch')];
if (batchcode in this.#barChartDescriptions) {
const barChartDescription = this.#barChartDescriptions[batchcode];
barChartDescription['batchcode'] = batchcode;
new BatchcodeByCountryBarChartView(cell).displayBatchcodeByCountryBarChart(barChartDescription);
}
},
className: "dt-head-center",
targets: [this.#getColumnIndex('Countries')]
}
]
});
@@ -105,17 +122,22 @@ class BatchCodeTableInitializer {
#displayCountry() {
this.#heading.textContent = this.#getCountry() == 'Global' ? 'Global Batch Codes' : `Batch Codes for ${this.#getCountry()}`;
// FK-TODO: show "Loading.." message or spinning wheel.
fetch(`data/batchCodeTables/${this.#getCountry()}.json`)
.then(response => response.json())
.then(json => {
this.#_addEmptyControlColumn(json);
return json;
BarChartDescriptionsProvider
.getBarChartDescriptions()
.then(barChartDescriptions => {
this.#barChartDescriptions = barChartDescriptions;
fetch(`data/batchCodeTables/${this.#getCountry()}.json`)
.then(response => response.json())
.then(json => {
this.#_addEmptyControlColumn(json);
return json;
})
.then(json => {
this.#setTableRows(json.data);
this.#columnSearch.columnContentUpdated();
this.#selectInput();
});
})
.then(json => {
this.#setTableRows(json.data);
this.#columnSearch.columnContentUpdated();
this.#selectInput();
});
}
#_addEmptyControlColumn(json) {
@@ -150,7 +172,7 @@ class BatchCodeTableInitializer {
tr.removeClass('shown');
} else {
const histogramViewContainer = document.createElement("div");
const batchcodeByCountryBarChartContainer = document.createElement("div");
const batchcodeByCountryBarChartContainer = document.createElement("div");
row.child([histogramViewContainer, batchcodeByCountryBarChartContainer]).show();
tr.addClass('shown');
const batchcode = row.data()[thisClassInstance.#getColumnIndex('Batch')];

1
docs/data/barChartDescriptionTable.json Normal file
View File

File diff suppressed because one or more lines are too long

10
src/BarChartDescriptionTablePersister.py
View File

@@ -1,10 +0,0 @@
import shutil
from IOUtils import IOUtils
def saveBarChartDescriptionTable(barChartDescriptionTable):
directory = '../docs/data/barChartDescriptionTables'
shutil.rmtree(directory, ignore_errors = True)
for row in barChartDescriptionTable.itertuples():
batchcode = row.BAR_CHART_DESCRIPTION['batchcode']
barChartDescription = row.BAR_CHART_DESCRIPTION
IOUtils.saveDictAsJson(barChartDescription, f'{directory}/{batchcode}.json')

8
src/CountryCountsByBatchcodeTable2BarChartDescriptionTableConverter.py
View File

@@ -12,12 +12,6 @@ class CountryCountsByBatchcodeTable2BarChartDescriptionTableConverter:
'COUNTRY_COUNT_BY_VAX_LOT Before Deletion': 'frequencies before deletion'
})
.groupby('VAX_LOT')
.apply(CountryCountsByBatchcodeTable2BarChartDescriptionTableConverter._convert2BarChartDescription)
.apply(lambda countryCountsTable: countryCountsTable.to_dict('list'))
.rename('BAR_CHART_DESCRIPTION')
.to_frame())
@staticmethod
def _convert2BarChartDescription(countryCountsTable):
barChartDescription = countryCountsTable.to_dict('list')
barChartDescription['batchcode'] = countryCountsTable.index.values[0]
return barChartDescription

2
src/CountryCountsByBatchcodeTable2BarChartDescriptionTableConverterTest.py
View File

@@ -30,7 +30,6 @@ class CountryCountsByBatchcodeTable2BarChartDescriptionTableConverterTest(unitte
data = [
[
{
'batchcode': '!D0181',
'countries': ['Germany', 'Hungary'],
'frequencies guessed': [10, 15],
'frequencies before deletion': [20, 30]
@@ -38,7 +37,6 @@ class CountryCountsByBatchcodeTable2BarChartDescriptionTableConverterTest(unitte
],
[
{
'batchcode': '# 009C01A',
'countries': ['Germany'],
'frequencies guessed': [70],
'frequencies before deletion': [80]

4
src/HowBadIsMyBatch.ipynb
View File

@@ -194,9 +194,7 @@
"metadata": {},
"outputs": [],
"source": [
"from BarChartDescriptionTablePersister import saveBarChartDescriptionTable\n",
"\n",
"saveBarChartDescriptionTable(barChartDescriptionTable)"
"barChartDescriptionTable['BAR_CHART_DESCRIPTION'].to_json('../docs/data/barChartDescriptionTable.json')\n"
]
}
],