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

starting SymptomVsSymptomChartView

Browse Source
This commit is contained in:
frankknoll
2023-11-08 20:26:39 +01:00
parent 7ee238bd12
commit 9ea037334e
3 changed files with 139 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/SymptomsCausedByCOVIDLots/index.html
View File

@@ -9,14 +9,14 @@
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Safety Signals for COVID Batches</title>
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ERHYDH4P64"></script>
<!-- <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ERHYDH4P64"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-ERHYDH4P64');
</script>
</script> -->
<!-- Bootstrap -->
<link href="../gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
@@ -35,6 +35,7 @@
<script src="./js/PrrByKeyTableView.js"></script>
<script src="./js/PrrByVaccineTableView.js"></script>
<script src="./js/PrrBySymptomTableView.js"></script>
<script src="./js/SymptomVsSymptomChartView.js"></script>
<script>
document.addEventListener(
"DOMContentLoaded",
@@ -50,7 +51,8 @@
vaccineSelectElement: $('#vaccineSelect'),
prrBySymptomTableElement: $('#prrBySymptomTable'),
downloadPrrBySymptomTableButton: document.querySelector("#downloadPrrBySymptomTable")
}
},
symptomVsSymptomChartViewElement: document.querySelector('#symptomVsSymptomChartView')
}
);
});
@@ -13823,6 +13825,20 @@
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="x_panel">
<div class="x_title">
<h3>Worst Batches Bla Bla</h3>
<div class="clearfix"></div>
</div>
<div class="x_content">
<canvas id="symptomVsSymptomChartView"></canvas>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

6
docs/SymptomsCausedByCOVIDLots/js/PageInitializer.js
View File

@@ -1,8 +1,12 @@
class PageInitializer {
static initializePage({ symptom, vaccine }) {
static #symptomVsSymptomChartView;
static initializePage({ symptom, vaccine, symptomVsSymptomChartViewElement }) {
PageInitializer.#configureSymptom(symptom);
PageInitializer.#configureVaccine(vaccine);
PageInitializer.#symptomVsSymptomChartView = new SymptomVsSymptomChartView(symptomVsSymptomChartViewElement);
PageInitializer.#symptomVsSymptomChartView.displayChart('Immunosuppression', 'Immunoglobulin therapy');
}
static #configureSymptom({ symptomSelectElement, prrByVaccineTableElement, downloadPrrByVaccineTableButton }) {

115
docs/SymptomsCausedByCOVIDLots/js/SymptomVsSymptomChartView.js Normal file
View File

@@ -0,0 +1,115 @@
class SymptomVsSymptomChartView {
#canvas;
#chart;
constructor(canvas) {
this.#canvas = canvas;
}
displayChart(symptom1, symptom2) {
if (this.#chart != null) {
this.#chart.destroy();
}
// FK-TODO: fetch multiple files: https://stackoverflow.com/a/31711496 or https://stackoverflow.com/a/53892713
PrrByVaccineProvider.getPrrByVaccine(symptom1)
.then(
prrByKey1 => {
PrrByVaccineProvider.getPrrByVaccine(symptom2)
.then(
prrByKey2 => {
const myData =
Object
.values(prrByKey2)
.map(
val =>
({
x: val,
y: val
}));
const data = {
datasets: [{
label: 'Scatter Dataset',
data: myData,
backgroundColor: 'rgb(255, 99, 132)'
}],
};
const config = {
type: 'scatter',
data: data,
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
};
this.#chart = new Chart(
this.#canvas,
// {
// type: 'bar',
// plugins: [ChartDataLabels],
// data: this.#getData(ADRDescr),
// options: this.#getOptions()
// }
config);
});
});
}
setData(histoDescr) {
const data = this.#getData(histoDescr);
this.#chart.config.data = data;
this.#chart.update();
}
#getData(ADRDescr) {
return {
labels: [
'Deaths',
'Disabilities',
'Life Threatening Illnesses',
'Other Adverse Events'
],
datasets: [{
// FK-TODO: refactor
label: 'Batch ' + ADRDescr['batchcode'],
data: [
ADRDescr['Deaths'],
ADRDescr['Disabilities'],
ADRDescr['Life Threatening Illnesses'],
ADRDescr['Adverse Reaction Reports'] - (ADRDescr['Deaths'] + ADRDescr['Disabilities'] + ADRDescr['Life Threatening Illnesses'])
],
backgroundColor: '#1a73e8'
}]
};
}
#getOptions() {
return {
plugins: {
datalabels: {
anchor: 'end',
align: 'top'
}
},
title: {
display: true,
position: 'top'
},
scales: {
y: {
ticks: {
precision: 0
},
title: {
display: true,
text: 'Frequency'
}
}
}
};
}
}