309 lines
12 KiB
HTML
309 lines
12 KiB
HTML
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Neonatal jaundice treatment threshold calculator
|
||
|
|
Copyright (C) 2024 Lee Yingtong Li
|
||
|
|
|
||
|
|
This program is free software: you can redistribute it and/or modify
|
||
|
|
it under the terms of the GNU Affero General Public License as published by
|
||
|
|
the Free Software Foundation, either version 3 of the License, or
|
||
|
|
(at your option) any later version.
|
||
|
|
|
||
|
|
This program is distributed in the hope that it will be useful,
|
||
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
|
|
GNU Affero General Public License for more details.
|
||
|
|
|
||
|
|
You should have received a copy of the GNU Affero General Public License
|
||
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||
|
|
-->
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Neonatal jaundice treatment threshold calculator</title>
|
||
|
|
<link href="build/main.css" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
|
|
</head>
|
||
|
|
<body class="w-full">
|
||
|
|
<div class="max-w-2xl mx-auto mt-4">
|
||
|
|
<h1 class="text-gray-900 font-medium text-xl pb-3 mb-4 border-b border-gray-400">Neonatal jaundice treatment thresholds</h1>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<div class="sm:grid sm:grid-cols-3">
|
||
|
|
<label for="gestation" class="text-sm font-medium text-gray-900 pt-1.5">Gestational age:</label>
|
||
|
|
<div class="col-span-2 relative rounded-md shadow-sm">
|
||
|
|
<input id="gestation" type="number" value="38" min="22" onchange="plotGraphData();updateBilirubin()" class="w-full rounded-md border-0 py-1.5 pr-[8.8rem] text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
|
||
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||
|
|
<span class="text-gray-500 text-sm">completed weeks</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sm:grid sm:grid-cols-3">
|
||
|
|
<label for="time_birth" class="text-sm font-medium text-gray-900 pt-1.5">Time of birth:</label>
|
||
|
|
<input id="time_birth" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-sm border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
|
||
|
|
</div>
|
||
|
|
<div class="sm:grid sm:grid-cols-3">
|
||
|
|
<label for="time_measurement" class="text-sm font-medium text-gray-900 pt-1.5">Time of measurement:</label>
|
||
|
|
<input id="time_measurement" type="datetime-local" onchange="updateBilirubin()" class="col-span-2 w-full rounded-md shadow-sm border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
|
||
|
|
</div>
|
||
|
|
<div class="sm:grid sm:grid-cols-3">
|
||
|
|
<label for="bilirubin" class="text-sm font-medium text-gray-900 pt-1.5">Total bilirubin:</label>
|
||
|
|
<div class="col-span-2 relative rounded-md shadow-sm">
|
||
|
|
<input id="bilirubin" type="number" oninput="updateBilirubin()" class="w-full rounded-md border-0 py-1.5 pr-[4.5rem] text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
|
||
|
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||
|
|
<span class="text-gray-500 text-sm">μmol/L</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="result" class="d-none">
|
||
|
|
<p></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="border-t border-gray-400 mt-4 pt-2">
|
||
|
|
<canvas id="bilirubinChart" width="672" height="336"></canvas>
|
||
|
|
</div>
|
||
|
|
<div class="border-t border-gray-400 mt-4 pt-4 text-xs text-gray-600 space-y-2 mb-4">
|
||
|
|
<p>Treatment thresholds as per: National Institute for Health and Clinical Excellence. Neonatal jaundice treatment threshold graphs. In: Jaundice in newborn babies under 28 days. London: National Institute for Health and Clinical Excellence; 2023. (NICE clinical guidelines; CG98). <a href="https://www.nice.org.uk/guidance/cg98" class="text-blue-500 hover:underline hover:text-blue-600">https://www.nice.org.uk/guidance/cg98</a></p>
|
||
|
|
<p>This tool is made available in the hope that it will be useful, but <em>WITHOUT ANY WARRANTY</em>; without even the implied warranty of <em>MERCHANTABILITY</em> or <em>FITNESS FOR A PARTICULAR PURPOSE</em>. Information provided in this tool is intended for reference by medical professionals. Nothing in this tool is intended to constitute medical advice.</p>
|
||
|
|
<p>Lee Yingtong Li, 2024. Source code available at <a href="https://yingtongli.me/git/bilirubin-calculator" class="text-blue-500 hover:underline hover:text-blue-600">https://yingtongli.me/git/bilirubin-calculator</a>.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
// ----------------------
|
||
|
|
// Threshold calculations
|
||
|
|
|
||
|
|
function phototherapy_38wks(d) {
|
||
|
|
if (d <= 0) {
|
||
|
|
return 100;
|
||
|
|
}
|
||
|
|
if (d <= 1) {
|
||
|
|
return d * 100 + 100;
|
||
|
|
}
|
||
|
|
if (d <= 4) {
|
||
|
|
return (d - 1) * 150 / 3 + 200;
|
||
|
|
}
|
||
|
|
return 350;
|
||
|
|
}
|
||
|
|
|
||
|
|
function exchange_38wks(d) {
|
||
|
|
if (d <= 0) {
|
||
|
|
return 100;
|
||
|
|
}
|
||
|
|
if (d <= 1.75) {
|
||
|
|
return d * 350 / 1.75 + 100;
|
||
|
|
}
|
||
|
|
return 450;
|
||
|
|
}
|
||
|
|
|
||
|
|
function phototherapy_thresh(d, gestation) {
|
||
|
|
if (gestation >= 38) {
|
||
|
|
return phototherapy_38wks(d);
|
||
|
|
}
|
||
|
|
if (gestation < 22) {
|
||
|
|
throw new Exception('Invalid gestation');
|
||
|
|
}
|
||
|
|
if (d <= 0) {
|
||
|
|
return 40;
|
||
|
|
}
|
||
|
|
let thresh_at_3days = gestation * 10 - 100;
|
||
|
|
if (d <= 3) {
|
||
|
|
return d * (thresh_at_3days - 40) / 3 + 40;
|
||
|
|
}
|
||
|
|
return thresh_at_3days;
|
||
|
|
}
|
||
|
|
|
||
|
|
function exchange_thresh(d, gestation) {
|
||
|
|
if (gestation >= 38) {
|
||
|
|
return exchange_38wks(d);
|
||
|
|
}
|
||
|
|
if (gestation < 22) {
|
||
|
|
throw new Exception('Invalid gestation');
|
||
|
|
}
|
||
|
|
if (d <= 0) {
|
||
|
|
return 80;
|
||
|
|
}
|
||
|
|
let thresh_at_3days = gestation * 10;
|
||
|
|
if (d <= 3) {
|
||
|
|
return d * (thresh_at_3days - 80) / 3 + 80;
|
||
|
|
}
|
||
|
|
return thresh_at_3days;
|
||
|
|
}
|
||
|
|
|
||
|
|
// --------------
|
||
|
|
// Graph plotting
|
||
|
|
|
||
|
|
function plotGraphData() {
|
||
|
|
let gestation = document.getElementById('gestation').valueAsNumber;
|
||
|
|
chart.data.datasets[0].data = [...Array(14*24).keys()].map((i) => i / 24).map((d) => ({x: d, y: phototherapy_thresh(d, gestation)}));
|
||
|
|
chart.data.datasets[1].data = [...Array(14*24).keys()].map((i) => i / 24).map((d) => ({x: d, y: exchange_thresh(d, gestation)}));
|
||
|
|
chart.update();
|
||
|
|
}
|
||
|
|
|
||
|
|
function prettyPrintDays(d) {
|
||
|
|
if (d < 1) {
|
||
|
|
return (d * 24).toFixed(0) + ' hours';
|
||
|
|
}
|
||
|
|
if (d < 2) {
|
||
|
|
return '1 day, ' + ((d % 1) * 24).toFixed(0) + ' hours';
|
||
|
|
}
|
||
|
|
return Math.floor(d) + ' days, ' + ((d % 1) * 24).toFixed(0) + ' hours';
|
||
|
|
}
|
||
|
|
|
||
|
|
Chart.defaults.color = '#111827'; // gray-900
|
||
|
|
Chart.defaults.font.family = 'Manrope, Helvetica, Arial, sans-serif';
|
||
|
|
|
||
|
|
const chart = new Chart(document.getElementById('bilirubinChart'), {
|
||
|
|
type: 'scatter',
|
||
|
|
data: {
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
label: 'Phototherapy',
|
||
|
|
data: [],
|
||
|
|
showLine: true,
|
||
|
|
pointStyle: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Exchange transfusion',
|
||
|
|
data: [],
|
||
|
|
showLine: true,
|
||
|
|
pointStyle: false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Measurement',
|
||
|
|
data: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
title: {
|
||
|
|
display: true,
|
||
|
|
text: 'Chronological age (days)'
|
||
|
|
},
|
||
|
|
min: 0,
|
||
|
|
max: 14,
|
||
|
|
ticks: {
|
||
|
|
stepSize: 0.25,
|
||
|
|
callback: (value) => value % 1 == 0 ? value : '',
|
||
|
|
autoSkip: false,
|
||
|
|
maxRotation: 0
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
color: (context) => context.tick.value % 1 == 0 ? '#9ca3af' : '#e5e7eb' // gray-400 / gray-200
|
||
|
|
}
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
title: {
|
||
|
|
display: true,
|
||
|
|
text: 'Total bilirubin (μmol/L)'
|
||
|
|
},
|
||
|
|
min: 0,
|
||
|
|
max: 550,
|
||
|
|
ticks: {
|
||
|
|
stepSize: 10,
|
||
|
|
callback: (value) => value % 50 == 0 ? value : '',
|
||
|
|
autoSkip: false
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
color: (context) => context.tick.value % 50 == 0 ? '#9ca3af' : '#e5e7eb' // gray-400 / gray-200
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
interaction: {
|
||
|
|
mode: 'index',
|
||
|
|
intersect: false
|
||
|
|
},
|
||
|
|
plugins: {
|
||
|
|
tooltip: {
|
||
|
|
callbacks: {
|
||
|
|
title: (context) => prettyPrintDays(context[0].parsed.x),
|
||
|
|
label: (context) => context.dataset.label + ': ' + Math.round(context.parsed.y)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
maintainAspectRatio: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
plotGraphData();
|
||
|
|
|
||
|
|
// ------------
|
||
|
|
// Prefill form
|
||
|
|
|
||
|
|
let dateNow = new Date();
|
||
|
|
dateNow.setSeconds(0);
|
||
|
|
dateNow.setMilliseconds(0);
|
||
|
|
|
||
|
|
if (document.getElementById('time_birth').value === '') {
|
||
|
|
document.getElementById('time_birth').valueAsDate = dateNow;
|
||
|
|
}
|
||
|
|
if (document.getElementById('time_measurement').value === '') {
|
||
|
|
document.getElementById('time_measurement').valueAsDate = dateNow;
|
||
|
|
}
|
||
|
|
|
||
|
|
// --------------------------
|
||
|
|
// Plot bilirubin measurement
|
||
|
|
|
||
|
|
function prettyPrintBilirubin(b) {
|
||
|
|
if (b < 10) {
|
||
|
|
return b.toFixed(1);
|
||
|
|
} else {
|
||
|
|
return Math.round(b).toFixed(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateBilirubin() {
|
||
|
|
if (document.getElementById('time_birth').valueAsDate === null) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (document.getElementById('time_measurement').valueAsDate === null) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (document.getElementById('bilirubin').value === '') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Chronological age in days
|
||
|
|
let d = (document.getElementById('time_measurement').valueAsDate.getTime() - document.getElementById('time_birth').valueAsDate.getTime()) / 1000 / 60 / 60 / 24;
|
||
|
|
|
||
|
|
let bilirubin = document.getElementById('bilirubin').valueAsNumber;
|
||
|
|
let gestation = document.getElementById('gestation').valueAsNumber;
|
||
|
|
let phototherapy_thresh_value = phototherapy_thresh(d, gestation);
|
||
|
|
let exchange_thresh_value = exchange_thresh(d, gestation);
|
||
|
|
|
||
|
|
chart.data.datasets[2].data = [{x: d, y: bilirubin}];
|
||
|
|
chart.update();
|
||
|
|
|
||
|
|
let resultDiv = document.getElementById('result');
|
||
|
|
let resultP = resultDiv.querySelector('p');
|
||
|
|
|
||
|
|
if (bilirubin < phototherapy_thresh_value) {
|
||
|
|
if (bilirubin < phototherapy_thresh_value - 50) {
|
||
|
|
resultDiv.className = 'border-l-4 border-sky-400 bg-sky-50 py-2 px-4';
|
||
|
|
resultP.className = 'text-sm text-sky-800';
|
||
|
|
} else {
|
||
|
|
resultDiv.className = 'border-l-4 border-yellow-400 bg-yellow-50 py-2 px-4';
|
||
|
|
resultP.className = 'text-sm text-yellow-800';
|
||
|
|
}
|
||
|
|
|
||
|
|
resultP.innerHTML = 'Bilirubin of ' + bilirubin + ' at ' + prettyPrintDays(d) + ' is <span class="font-bold">' + prettyPrintBilirubin(phototherapy_thresh_value - bilirubin) + ' below</span> the phototherapy threshold.';
|
||
|
|
} else if (bilirubin < exchange_thresh_value) {
|
||
|
|
resultDiv.className = 'border-l-4 border-orange-400 bg-orange-50 py-2 px-4';
|
||
|
|
resultP.className = 'text-sm text-orange-800';
|
||
|
|
|
||
|
|
resultP.innerHTML = 'Bilirubin of ' + bilirubin + ' at ' + prettyPrintDays(d) + ' is <span class="font-bold">' + prettyPrintBilirubin(bilirubin - phototherapy_thresh_value) + ' above</span> the phototherapy threshold, ' + prettyPrintBilirubin(exchange_thresh_value - bilirubin) + ' below the exchange transfusion threshold.';
|
||
|
|
} else {
|
||
|
|
resultDiv.className = 'border-l-4 border-red-400 bg-red-50 py-2 px-4';
|
||
|
|
resultP.className = 'text-sm text-red-800';
|
||
|
|
|
||
|
|
resultP.innerHTML = 'Bilirubin of ' + bilirubin + ' at ' + prettyPrintDays(d) + ' is ' + prettyPrintBilirubin(bilirubin - exchange_thresh_value) + ' above the <span class="font-bold">exchange transfusion</span> threshold.';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
updateBilirubin();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|