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

refactoring

Browse Source
This commit is contained in:
frankknoll
2023-06-09 22:19:32 +02:00
parent b99be84c47
commit 39d4e47314
6 changed files with 62 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/BarChartDescriptionsProvider.js
View File

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

99
docs/BatchCodeTableInitializer.js
View File

@@ -1,28 +1,32 @@
class BatchCodeTableInitializer {
#batchCodeTableElement;
#batchCodeTable;
#columnSearch;
#barChartDescriptions;
constructor(batchCodeTableElement) {
this.#batchCodeTableElement = batchCodeTableElement;
}
initialize() {
this.#batchCodeTable = this.#createEmptyBatchCodeTable();
this.#columnSearch = new ColumnSearch(this.#batchCodeTable.column(this.#getColumnIndex('Company')));
this.#displayCountry();
BarChartDescriptionsProvider
.getBarChartDescriptions()
initialize({ batchCodeTableElement, showCountries }) {
// FK-TODO: show "Loading.." message or spinning wheel.
this.#loadBarChartDescriptions(showCountries)
.then(barChartDescriptions => {
this.#barChartDescriptions = barChartDescriptions;
const batchCodeTable = this.#createEmptyBatchCodeTable(batchCodeTableElement, showCountries, barChartDescriptions);
this.#setVisibilityOfCountriesColumn(batchCodeTable, showCountries);
fetch('data/batchCodeTables/Global.json')
.then(response => response.json())
.then(json => {
this.#addCountriesColumn(json);
return json;
})
.then(json => {
this.#setTableRows(batchCodeTable, json.data);
this.#makeCompanyColumnFilterable(batchCodeTable);
});
});
}
#createEmptyBatchCodeTable() {
return this.#batchCodeTableElement.DataTable(
#loadBarChartDescriptions(shallLoad) {
return shallLoad ?
fetch('data/barChartDescriptionTable.json').then(response => response.json()) :
Promise.resolve({});
}
#createEmptyBatchCodeTable(batchCodeTableElement, showCountries, barChartDescriptions) {
return batchCodeTableElement.DataTable(
{
language:
{
@@ -63,7 +67,10 @@ class BatchCodeTableInitializer {
const numberInPercent = parseFloat(data);
return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + "%" : '';
},
targets: [this.#getColumnIndex('Severe reports'), this.#getColumnIndex('Lethality')]
targets: [
this.#getColumnIndex('Severe reports'),
this.#getColumnIndex('Lethality')
]
},
{
width: "1000px",
@@ -71,11 +78,11 @@ class BatchCodeTableInitializer {
return null;
},
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);
if (showCountries) {
this.#displayBatchcodeByCountryBarChart(
row[this.#getColumnIndex('Batch')],
barChartDescriptions,
cell);
}
},
className: "dt-head-center",
@@ -85,6 +92,7 @@ class BatchCodeTableInitializer {
});
}
#getColumnIndex(columnName) {
switch (columnName) {
case 'Batch':
@@ -108,35 +116,34 @@ class BatchCodeTableInitializer {
}
}
// FK-TODO: rename
#displayCountry() {
// FK-TODO: show "Loading.." message or spinning wheel.
BarChartDescriptionsProvider
.getBarChartDescriptions()
.then(barChartDescriptions => {
this.#barChartDescriptions = barChartDescriptions;
fetch('data/batchCodeTables/Global.json')
.then(response => response.json())
.then(json => {
this.#_addCountriesColumn(json);
return json;
})
.then(json => {
this.#setTableRows(json.data);
this.#columnSearch.columnContentUpdated();
});
})
#displayBatchcodeByCountryBarChart(batchcode, barChartDescriptions, uiContainer) {
if (batchcode in barChartDescriptions) {
const barChartDescription = barChartDescriptions[batchcode];
barChartDescription['batchcode'] = batchcode;
new BatchcodeByCountryBarChartView(uiContainer).displayBatchcodeByCountryBarChart(barChartDescription);
}
}
#_addCountriesColumn(json) {
#setVisibilityOfCountriesColumn(batchCodeTable, showCountries) {
batchCodeTable
.column(this.#getColumnIndex('Countries'))
.visible(showCountries);
}
#addCountriesColumn(json) {
json.columns.push('Countries');
json.data.forEach(row => row.push(null));
}
#setTableRows(rows) {
this.#batchCodeTable
#setTableRows(batchCodeTable, rows) {
batchCodeTable
.clear()
.rows.add(rows)
.draw();
}
#makeCompanyColumnFilterable(batchCodeTable) {
const companyColumnFilter = new ColumnSearch(batchCodeTable.column(this.#getColumnIndex('Company')));
companyColumnFilter.columnContentUpdated();
}
}

1
docs/ColumnSearch.js
View File

@@ -1,4 +1,5 @@
// adapted from https://datatables.net/examples/api/multi_filter_select.html
// FK-TODO: rename to ColumnFilter
class ColumnSearch {
#column;

6
docs/UIUtils.js
View File

@@ -26,14 +26,14 @@ class UIUtils {
}
static getYLabelWithPercent(context) {
return UIUtils._getLabelWithPercent(context, context.parsed.y);
return UIUtils.#getLabelWithPercent(context, context.parsed.y);
}
static getXLabelWithPercent(context) {
return UIUtils._getLabelWithPercent(context, context.parsed.x);
return UIUtils.#getLabelWithPercent(context, context.parsed.x);
}
static _getLabelWithPercent(context, value) {
static #getLabelWithPercent(context, value) {
let label = context.dataset.label || '';
if (label) {

184
docs/batchCodeTable.js
View File

@@ -1,184 +0,0 @@
class BatchCodeTableInitializer {
#heading;
#countrySelect;
#batchCodeTableElement;
#batchCodeTable;
#columnSearch;
#barChartDescriptions;
constructor({ heading, countrySelect, batchCodeTableElement }) {
this.#heading = heading;
this.#countrySelect = countrySelect;
this.#batchCodeTableElement = batchCodeTableElement;
}
initialize() {
this.#batchCodeTable = this.#createEmptyBatchCodeTable();
this.#columnSearch = new ColumnSearch(this.#batchCodeTable.column(this.#getColumnIndex('Company')));
this.#countrySelect.addEventListener('change', event => this.#displayCountry());
this.#displayCountry();
this.#initializeHistogramView();
}
#getCountry() {
return UIUtils.getSelectedOption(this.#countrySelect).value;
}
#createEmptyBatchCodeTable() {
return this.#batchCodeTableElement.DataTable(
{
initComplete: function () {
$('.dataTables_filter').append(' (press return key)');
},
language:
{
searchPlaceholder: "Enter Batch Code"
},
search:
{
return: true
},
processing: true,
deferRender: true,
order: [[this.#getColumnIndex('Adverse Reaction Reports'), "desc"]],
columnDefs:
[
{
className: 'dt-control',
orderable: false,
data: null,
defaultContent: '',
targets: this.#getColumnIndex('control')
},
{
searchable: false,
targets: [
this.#getColumnIndex('Adverse Reaction Reports'),
this.#getColumnIndex('Deaths'),
this.#getColumnIndex('Disabilities'),
this.#getColumnIndex('Life Threatening Illnesses'),
this.#getColumnIndex('Countries'),
this.#getColumnIndex('Severe reports'),
this.#getColumnIndex('Lethality')
]
},
{
orderable: false,
targets: [this.#getColumnIndex('Countries'), this.#getColumnIndex('Company')]
},
{
render: data => {
const numberInPercent = parseFloat(data);
return !isNaN(numberInPercent) ? numberInPercent.toFixed(2) + "%" : '';
},
targets: [this.#getColumnIndex('Severe reports'), this.#getColumnIndex('Lethality')]
},
{
width: "1000px",
render: function (data, type, row, meta) {
return null;
},
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')]
}
]
});
}
#getColumnIndex(columnName) {
switch (columnName) {
case 'control':
return 0;
case 'Batch':
return 1;
case 'Adverse Reaction Reports':
return 2;
case 'Deaths':
return 3;
case 'Disabilities':
return 4;
case 'Life Threatening Illnesses':
return 5;
case 'Company':
return 6;
case 'Countries':
return 7;
case 'Severe reports':
return 8;
case 'Lethality':
return 9;
}
}
#displayCountry() {
this.#heading.textContent = this.#getCountry() == 'Global' ? 'Global Batch Codes' : `Batch Codes for ${this.#getCountry()}`;
// FK-TODO: show "Loading.." message or spinning wheel.
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();
});
})
}
#_addEmptyControlColumn(json) {
json.columns.unshift('control');
json.data.forEach(row => row.unshift(null));
}
#setTableRows(rows) {
this.#batchCodeTable
.clear()
.rows.add(rows)
.draw();
}
#selectInput() {
const input = document.querySelector(".dataTables_filter input");
input.focus();
input.select();
}
#initializeHistogramView() {
const thisClassInstance = this;
$(`#${this.#batchCodeTableElement[0].id} tbody`)
.on(
'click',
'td.dt-control',
function () {
const tr = $(this).closest('tr');
const row = thisClassInstance.#batchCodeTable.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
} else {
const histogramViewContainer = document.createElement("div");
const batchcodeByCountryBarChartContainer = document.createElement("div");
row.child([histogramViewContainer, batchcodeByCountryBarChartContainer]).show();
tr.addClass('shown');
const batchcode = row.data()[thisClassInstance.#getColumnIndex('Batch')];
new HistogramView(histogramViewContainer).displayHistogramView(thisClassInstance.#getCountry(), batchcode);
new BatchcodeByCountryBarChartView(batchcodeByCountryBarChartContainer).displayBatchcodeByCountryBarChart(batchcode);
}
});
}
}

8
docs/batchCodes.html
View File

@@ -33,13 +33,15 @@
<script src="./UIUtils.js"></script>
<script src="./ColumnSearch.js"></script>
<script src="./BatchCodeTableInitializer.js"></script>
<script src="./BarChartDescriptionsProvider.js"></script>
<script src="./BatchcodeByCountryBarChartView.js"></script>
<script src="./BatchcodeByCountryBarChart.js"></script>
<script>
$(document).ready(function () {
const batchCodeTableInitializer = new BatchCodeTableInitializer($('#batchCodeTable'));
batchCodeTableInitializer.initialize();
new BatchCodeTableInitializer().initialize(
{
batchCodeTableElement: $('#batchCodeTable'),
showCountries: false
});
});
</script>
</head>