working on detail page for sari, lil, amd lbm

2026-03-13 15:49:01 +07:00
parent 519d0924c8
commit c2b820fc6d
14 changed files with 1627 additions and 956 deletions
--- a/dashboard/public/js/program.js
+++ b/dashboard/public/js/program.js
@@ -0,0 +1,155 @@
+const standardPrograms = ['SARI', 'ILI', 'LBM'];
+const programCode = (window.PROGRAM_CODE || '').trim().toUpperCase();
+
+document.addEventListener("DOMContentLoaded", () => {
+
+
+    if (!standardPrograms.includes(programCode)) return;
+    new DashboardFilter((startYear, startWeek, endYear, endWeek) => {
+
+        fetch(`/api/dashboard/program?surveillance_id=${window.SURVEILLANCE_ID}&start_year=${startYear}&start_week=${startWeek}&end_year=${endYear}&end_week=${endWeek}`)
+            .then(res => res.json())
+            .then(renderDashboard)
+            .catch(err => console.error("Dashboard API error:", err));
+
+    });
+
+});
+function renderTrend(valueId, changeId, current, previous, suffix = '') {
+
+    const valueEl = document.getElementById(valueId);
+    const changeEl = document.getElementById(changeId);
+
+    if (!valueEl || !changeEl) return;
+
+    valueEl.textContent = current + suffix;
+
+    if (!previous) {
+        changeEl.innerHTML = "— No previous data";
+        changeEl.className = "text-muted";
+        return;
+    }
+
+    const diff = current - previous;
+    const percent = ((diff / previous) * 100).toFixed(1);
+
+    if (diff > 0) {
+        changeEl.innerHTML = `↑ +${percent}% from previous week`;
+        changeEl.className = "text-success";
+    }
+    else if (diff < 0) {
+        changeEl.innerHTML = `↓ ${percent}% from previous week`;
+        changeEl.className = "text-danger";
+    }
+    else {
+        changeEl.innerHTML = "— No significant change";
+        changeEl.className = "text-muted";
+    }
+}
+function renderProgramTrend(rows) {
+
+    rows = rows || [];
+
+    const labels = rows.map(r => `W${r.period}`);
+    const samples = rows.map(r => r.total_samples || 0);
+    const positivity = rows.map(r => r.positivity_rate || 0);
+
+    buildMixedTrendChart(
+        'trendChart',
+        labels,
+        samples,
+        positivity
+    );
+}
+function renderSummary(summary) {
+
+    summary = summary || {};
+
+    const cases = summary.cases || {};
+    const hospital = summary.hospital_rate || {};
+    const icu = summary.icu_rate || {};
+    const positivity = summary.positivity_rate || {};
+
+    renderTrend(
+        "totalCases",
+        "casesChange",
+        cases.current || 0,
+        cases.previous || 0
+    );
+    renderTrend(
+        "influenzaRate",
+        "influenzaChange",
+        summary.influenza_rate.current,
+        summary.influenza_rate.previous,
+        "%"
+    );
+
+    renderTrend(
+        "covidRate",
+        "covidChange",
+        summary.covid_rate.current,
+        summary.covid_rate.previous,
+        "%"
+    );
+
+    renderTrend(
+        "hospitalRate",
+        "hospitalChange",
+        hospital.current || 0,
+        hospital.previous || 0,
+        "%"
+    );
+
+    renderTrend(
+        "icuRate",
+        "icuChange",
+        icu.current || 0,
+        icu.previous || 0,
+        "%"
+    );
+
+    renderTrend(
+        "positivityRate",
+        "positivityChange",
+        positivity.current || 0,
+        positivity.previous || 0,
+        "%"
+    );
+}
+function renderDashboard(data) {
+    console.log("SUMMARY:", data.summary);
+    data = data || {};
+
+
+    renderProgramTrend(data.trend || []);
+    renderSummary(data.summary || {});
+    buildChart(
+        'provinceChart',
+        'bar',
+        (data.province_distribution || []).map(r => r.site_province_name),
+        (data.province_distribution || []).map(r => r.total)
+    );
+
+    buildChart(
+        'pathogenChart',
+        'bar',
+        (data.pathogen_distribution || []).map(r => r.pathogen_name),
+        (data.pathogen_distribution || []).map(r => r.total),
+        'Positive'
+    );
+
+    buildChart(
+        'ageChart',
+        'doughnut',
+        (data.age_distribution || []).map(r => r.age_group),
+        (data.age_distribution || []).map(r => r.total)
+    );
+
+    buildChart(
+        'sexChart',
+        'bar',
+        (data.sex_distribution || []).map(r => r.patient_sex),
+        (data.sex_distribution || []).map(r => r.total)
+    );
+
+}