Interactive vital signs selector with clinical notes per age group
Replace static vital signs table with interactive age group dropdown. Each selection shows: HR (awake/sleeping), RR, SBP, DBP, temperature, SpO2 target, weight range, and age-specific clinical notes. 10 age groups: preterm through 18 years. Values from Harriet Lane Handbook 23rd Edition. Includes AAP 2017 BP classification thresholds for ages 13+, ETT sizing formulas, and clinical pearls (orthostatic testing, febrile tachycardia, athletic bradycardia, etc.). Full reference table preserved as collapsible "View All Age Groups".
This commit is contained in:
Daniel
parent
64546a743d
commit
0630e460e8
2 changed files with 244 additions and 27 deletions
|
|
@ -419,36 +419,54 @@
|
|||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="fas fa-heartbeat"></i> Normal Vital Signs by Age</h3>
|
||||
<span style="font-size:11px;color:var(--g500);">Harriet Lane Handbook</span>
|
||||
<span style="font-size:11px;color:var(--g500);">Harriet Lane Handbook, 23rd Edition</span>
|
||||
</div>
|
||||
<div style="padding:16px;">
|
||||
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Reference ranges for heart rate, respiratory rate, and blood pressure by age. Source: Harriet Lane Handbook.</p>
|
||||
<div style="overflow-x:auto;">
|
||||
<table class="admin-table" style="font-size:12px;width:100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Age</th>
|
||||
<th>Heart Rate (bpm)</th>
|
||||
<th>Respiratory Rate</th>
|
||||
<th>Systolic BP (mmHg)</th>
|
||||
<th>Diastolic BP (mmHg)</th>
|
||||
<th>Weight (kg)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Preterm</td><td>120-170</td><td>40-70</td><td>55-75</td><td>35-45</td><td>1-2.5</td></tr>
|
||||
<tr><td>Newborn (0-1mo)</td><td>100-160</td><td>30-60</td><td>60-80</td><td>35-55</td><td>2.5-4.5</td></tr>
|
||||
<tr><td>1-6 months</td><td>100-150</td><td>30-50</td><td>70-90</td><td>40-60</td><td>4-8</td></tr>
|
||||
<tr><td>6-12 months</td><td>90-140</td><td>25-40</td><td>75-95</td><td>45-65</td><td>8-10</td></tr>
|
||||
<tr><td>1-3 years</td><td>80-130</td><td>20-30</td><td>80-100</td><td>50-70</td><td>10-15</td></tr>
|
||||
<tr><td>4-5 years</td><td>80-120</td><td>20-25</td><td>85-105</td><td>50-70</td><td>15-20</td></tr>
|
||||
<tr><td>6-8 years</td><td>70-115</td><td>18-25</td><td>90-110</td><td>55-75</td><td>20-27</td></tr>
|
||||
<tr><td>9-11 years</td><td>70-110</td><td>16-22</td><td>95-115</td><td>58-78</td><td>27-40</td></tr>
|
||||
<tr><td>12-15 years</td><td>60-100</td><td>14-20</td><td>100-125</td><td>60-80</td><td>40-60</td></tr>
|
||||
<tr><td>16-18 years</td><td>55-95</td><td>12-18</td><td>110-130</td><td>65-85</td><td>55-75</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p style="font-size:12px;color:var(--g500);margin:0 0 14px;">Select age group to view normal vital sign ranges. Source: Harriet Lane Handbook, 23rd Ed. (Johns Hopkins).</p>
|
||||
|
||||
<div class="calc-field" style="max-width:300px;margin-bottom:16px;">
|
||||
<label>Age Group</label>
|
||||
<select id="vitals-age-select">
|
||||
<option value="">Select age group</option>
|
||||
<option value="preterm">Preterm (<37 weeks)</option>
|
||||
<option value="newborn">Newborn (0-28 days)</option>
|
||||
<option value="1-6mo">1-6 months</option>
|
||||
<option value="6-12mo">6-12 months</option>
|
||||
<option value="1-3yr">1-3 years</option>
|
||||
<option value="4-5yr">4-5 years</option>
|
||||
<option value="6-9yr">6-9 years</option>
|
||||
<option value="10-12yr">10-12 years</option>
|
||||
<option value="13-15yr">13-15 years</option>
|
||||
<option value="16-18yr">16-18 years</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="vitals-result" class="hidden"></div>
|
||||
|
||||
<!-- All ages reference table (collapsible) -->
|
||||
<details style="margin-top:16px;border:1px solid var(--g200);border-radius:8px;">
|
||||
<summary style="padding:10px 14px;cursor:pointer;font-weight:600;font-size:13px;color:var(--g700);background:var(--g50);border-radius:8px;">View All Age Groups</summary>
|
||||
<div style="padding:12px;overflow-x:auto;">
|
||||
<table class="admin-table" style="font-size:12px;width:100%;">
|
||||
<thead>
|
||||
<tr><th>Age</th><th>HR (bpm)</th><th>RR</th><th>SBP (mmHg)</th><th>DBP (mmHg)</th><th>Temp (C)</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Preterm</td><td>120-170</td><td>40-70</td><td>55-75</td><td>35-45</td><td>36.5-37.5</td></tr>
|
||||
<tr><td>Newborn</td><td>100-165</td><td>30-60</td><td>60-80</td><td>35-55</td><td>36.5-37.5</td></tr>
|
||||
<tr><td>1-6 mo</td><td>100-150</td><td>30-53</td><td>70-90</td><td>40-63</td><td>36.5-37.5</td></tr>
|
||||
<tr><td>6-12 mo</td><td>80-140</td><td>25-40</td><td>72-95</td><td>40-65</td><td>36.0-37.5</td></tr>
|
||||
<tr><td>1-3 yr</td><td>80-130</td><td>20-30</td><td>80-105</td><td>45-70</td><td>36.0-37.5</td></tr>
|
||||
<tr><td>4-5 yr</td><td>75-120</td><td>20-25</td><td>85-108</td><td>48-70</td><td>36.0-37.5</td></tr>
|
||||
<tr><td>6-9 yr</td><td>70-115</td><td>18-24</td><td>88-115</td><td>50-75</td><td>36.0-37.5</td></tr>
|
||||
<tr><td>10-12 yr</td><td>65-110</td><td>16-22</td><td>95-120</td><td>55-78</td><td>36.0-37.5</td></tr>
|
||||
<tr><td>13-15 yr</td><td>60-100</td><td>14-20</td><td>100-128</td><td>58-80</td><td>36.0-37.5</td></tr>
|
||||
<tr><td>16-18 yr</td><td>55-95</td><td>12-18</td><td>105-135</td><td>60-85</td><td>36.0-37.5</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div style="margin-top:16px;">
|
||||
<h4 style="font-size:13px;font-weight:700;color:var(--g700);margin:0 0 8px;">Quick Reference Formulas</h4>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;">
|
||||
|
|
|
|||
|
|
@ -1427,5 +1427,204 @@
|
|||
document.getElementById('bili-result').classList.add('hidden');
|
||||
var bc = document.getElementById('bili-chart-container'); if (bc) bc.classList.add('hidden');
|
||||
});
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// VITAL SIGNS — Interactive age selector
|
||||
// Harriet Lane Handbook 23rd Edition reference values
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
|
||||
var VITALS_DATA = {
|
||||
preterm: {
|
||||
label: 'Preterm (<37 weeks GA)',
|
||||
hr: { awake: '120-170', sleeping: '100-150' },
|
||||
rr: '40-70',
|
||||
sbp: '55-75', dbp: '35-45',
|
||||
temp: '36.5-37.5',
|
||||
weight: '0.5-2.5 kg',
|
||||
spo2: '88-95% (target)',
|
||||
notes: [
|
||||
'HR and RR are highly variable and depend on gestational age',
|
||||
'BP increases with gestational age and postnatal age',
|
||||
'Target SpO2 88-95% to reduce retinopathy of prematurity risk',
|
||||
'Temperature instability is common — use servo-controlled warmers',
|
||||
'Bradycardia (<100 bpm) and apnea are common in premature infants'
|
||||
]
|
||||
},
|
||||
newborn: {
|
||||
label: 'Newborn (0-28 days)',
|
||||
hr: { awake: '100-165', sleeping: '90-145' },
|
||||
rr: '30-60',
|
||||
sbp: '60-80', dbp: '35-55',
|
||||
temp: '36.5-37.5',
|
||||
weight: '2.5-4.5 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'HR normally increases with crying (up to 180-190 bpm) — this is physiologic',
|
||||
'Periodic breathing (pauses <10 sec) is normal in newborns',
|
||||
'Acrocyanosis (blue hands/feet) is normal; central cyanosis is not',
|
||||
'BP is best measured in the right arm (pre-ductal)',
|
||||
'Normal weight loss of 5-7% in first 3-5 days; regain by 10-14 days'
|
||||
]
|
||||
},
|
||||
'1-6mo': {
|
||||
label: '1-6 Months',
|
||||
hr: { awake: '100-150', sleeping: '85-135' },
|
||||
rr: '30-53',
|
||||
sbp: '70-90', dbp: '40-63',
|
||||
temp: '36.5-37.5',
|
||||
weight: '4-8 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'Expected weight gain: 20-30 g/day (150-200 g/week)',
|
||||
'HR gradually decreases as vagal tone matures',
|
||||
'RR >60 at rest may indicate lower respiratory tract disease',
|
||||
'BP should be measured with appropriate cuff size (width 40% of arm circumference)'
|
||||
]
|
||||
},
|
||||
'6-12mo': {
|
||||
label: '6-12 Months',
|
||||
hr: { awake: '80-140', sleeping: '75-130' },
|
||||
rr: '25-40',
|
||||
sbp: '72-95', dbp: '40-65',
|
||||
temp: '36.0-37.5',
|
||||
weight: '8-10 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'Expected weight: triple birth weight by 12 months (~10 kg average)',
|
||||
'Weight gain slows to ~10-15 g/day',
|
||||
'Sinus arrhythmia (HR varies with breathing) is normal',
|
||||
'Febrile tachycardia: HR increases ~10 bpm per 1 degree C above 37'
|
||||
]
|
||||
},
|
||||
'1-3yr': {
|
||||
label: '1-3 Years',
|
||||
hr: { awake: '80-130', sleeping: '70-120' },
|
||||
rr: '20-30',
|
||||
sbp: '80-105', dbp: '45-70',
|
||||
temp: '36.0-37.5',
|
||||
weight: '10-15 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'Expected weight gain: ~200-250 g/month (2-2.5 kg/year)',
|
||||
'Tachycardia: HR >130 at rest warrants evaluation',
|
||||
'Tachypnea: RR >30 at rest may indicate respiratory distress',
|
||||
'BP screening begins at age 3 per AAP 2017 guidelines',
|
||||
'Estimated weight: 2 x (age in years) + 8'
|
||||
]
|
||||
},
|
||||
'4-5yr': {
|
||||
label: '4-5 Years',
|
||||
hr: { awake: '75-120', sleeping: '65-110' },
|
||||
rr: '20-25',
|
||||
sbp: '85-108', dbp: '48-70',
|
||||
temp: '36.0-37.5',
|
||||
weight: '15-20 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'Annual BP screening recommended from age 3',
|
||||
'Normal BP <90th percentile for age, sex, and height',
|
||||
'Elevated BP: 90th to <95th percentile (or 120/80 if lower)',
|
||||
'Estimated weight: 2 x (age in years) + 8',
|
||||
'ETT size (uncuffed): (age/4) + 4 = 5.0-5.25'
|
||||
]
|
||||
},
|
||||
'6-9yr': {
|
||||
label: '6-9 Years',
|
||||
hr: { awake: '70-115', sleeping: '60-105' },
|
||||
rr: '18-24',
|
||||
sbp: '88-115', dbp: '50-75',
|
||||
temp: '36.0-37.5',
|
||||
weight: '20-30 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'Resting HR >115 or <60 warrants evaluation',
|
||||
'BP should be measured at every clinical encounter',
|
||||
'Stage 1 HTN: >=95th percentile on 3 separate occasions',
|
||||
'Estimated weight: 3 x (age in years) + 7',
|
||||
'ETT size (cuffed): (age/4) + 3.5 = 5.0-5.75'
|
||||
]
|
||||
},
|
||||
'10-12yr': {
|
||||
label: '10-12 Years',
|
||||
hr: { awake: '65-110', sleeping: '58-100' },
|
||||
rr: '16-22',
|
||||
sbp: '95-120', dbp: '55-78',
|
||||
temp: '36.0-37.5',
|
||||
weight: '30-45 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'Pre-pubertal and early pubertal changes may affect vitals',
|
||||
'Orthostatic hypotension may emerge during growth spurts',
|
||||
'BP classification uses percentile tables for age <13',
|
||||
'HR may decrease with athletic training',
|
||||
'ETT size (cuffed): (age/4) + 3.5 = 6.0-6.5'
|
||||
]
|
||||
},
|
||||
'13-15yr': {
|
||||
label: '13-15 Years',
|
||||
hr: { awake: '60-100', sleeping: '50-90' },
|
||||
rr: '14-20',
|
||||
sbp: '100-128', dbp: '58-80',
|
||||
temp: '36.0-37.5',
|
||||
weight: '45-65 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'From age 13: use adult BP thresholds (AAP 2017)',
|
||||
'Normal: <120/<80 mmHg',
|
||||
'Elevated: 120-129/<80 mmHg',
|
||||
'Stage 1 HTN: 130-139/80-89 mmHg',
|
||||
'Stage 2 HTN: >=140/>=90 mmHg',
|
||||
'Athletic bradycardia (HR 45-60) may be normal in trained adolescents'
|
||||
]
|
||||
},
|
||||
'16-18yr': {
|
||||
label: '16-18 Years',
|
||||
hr: { awake: '55-95', sleeping: '45-85' },
|
||||
rr: '12-18',
|
||||
sbp: '105-135', dbp: '60-85',
|
||||
temp: '36.0-37.5',
|
||||
weight: '55-80 kg',
|
||||
spo2: '>95%',
|
||||
notes: [
|
||||
'Vital signs approach adult values',
|
||||
'Adult BP thresholds apply (same as age 13+)',
|
||||
'Orthostatic vitals: measure lying, sitting, standing if dizzy',
|
||||
'Positive orthostatic test: SBP drop >20 or DBP drop >10 on standing',
|
||||
'Consider screening for eating disorders if bradycardia + low BMI'
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
var vitalsSelect = document.getElementById('vitals-age-select');
|
||||
if (vitalsSelect) {
|
||||
vitalsSelect.addEventListener('change', function() {
|
||||
var key = vitalsSelect.value;
|
||||
var resultDiv = document.getElementById('vitals-result');
|
||||
if (!key || !VITALS_DATA[key]) { resultDiv.classList.add('hidden'); return; }
|
||||
|
||||
var v = VITALS_DATA[key];
|
||||
resultDiv.classList.remove('hidden');
|
||||
resultDiv.innerHTML =
|
||||
'<div class="calc-result-header" style="background:#eff6ff;border-color:#2563eb;">' +
|
||||
'<div style="font-size:18px;font-weight:700;color:#1d4ed8;">' + v.label + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="calc-result-grid" style="margin-top:12px;">' +
|
||||
'<div class="calc-result-item"><div class="calc-result-label">Heart Rate (awake)</div><div class="calc-result-value" style="font-size:18px;color:#ef4444;">' + v.hr.awake + '</div><div class="calc-result-sub">bpm</div></div>' +
|
||||
'<div class="calc-result-item"><div class="calc-result-label">Heart Rate (sleep)</div><div class="calc-result-value" style="font-size:18px;color:#8b5cf6;">' + v.hr.sleeping + '</div><div class="calc-result-sub">bpm</div></div>' +
|
||||
'<div class="calc-result-item"><div class="calc-result-label">Respiratory Rate</div><div class="calc-result-value" style="font-size:18px;color:#0ea5e9;">' + v.rr + '</div><div class="calc-result-sub">breaths/min</div></div>' +
|
||||
'<div class="calc-result-item"><div class="calc-result-label">Systolic BP</div><div class="calc-result-value" style="font-size:18px;color:#f97316;">' + v.sbp + '</div><div class="calc-result-sub">mmHg</div></div>' +
|
||||
'<div class="calc-result-item"><div class="calc-result-label">Diastolic BP</div><div class="calc-result-value" style="font-size:18px;color:#f59e0b;">' + v.dbp + '</div><div class="calc-result-sub">mmHg</div></div>' +
|
||||
'<div class="calc-result-item"><div class="calc-result-label">Temperature</div><div class="calc-result-value" style="font-size:18px;color:#10b981;">' + v.temp + '</div><div class="calc-result-sub">°C</div></div>' +
|
||||
'<div class="calc-result-item"><div class="calc-result-label">SpO2</div><div class="calc-result-value" style="font-size:18px;color:#06b6d4;">' + v.spo2 + '</div><div class="calc-result-sub"></div></div>' +
|
||||
'<div class="calc-result-item"><div class="calc-result-label">Weight Range</div><div class="calc-result-value" style="font-size:18px;color:#6366f1;">' + v.weight + '</div><div class="calc-result-sub"></div></div>' +
|
||||
'</div>' +
|
||||
'<div style="margin-top:14px;padding:12px;background:var(--g50);border-radius:8px;">' +
|
||||
'<div style="font-size:12px;font-weight:600;color:var(--g600);margin-bottom:6px;">Clinical Notes</div>' +
|
||||
'<ul style="margin:0;padding-left:16px;font-size:12px;color:var(--g700);line-height:1.7;">' +
|
||||
v.notes.map(function(n) { return '<li>' + n + '</li>'; }).join('') +
|
||||
'</ul>' +
|
||||
'</div>';
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue