export charts

2026-04-15 15:45:34 +07:00
parent f0a5079b15
commit 840b93a651
5 changed files with 426 additions and 44 deletions
--- a/dashboard/public/js/dashboard/charts.js
+++ b/dashboard/public/js/dashboard/charts.js
@@ -32,11 +32,16 @@ Chart.register({
        if (chart.config.type !== 'doughnut') return;
        if (chart.$noData) return;

-        const { ctx, width, height } = chart;
+        const { ctx, chartArea } = chart;

        const data = chart.data.datasets[0].data;
        const total = data.reduce((a, b) => a + b, 0);

+        if (!chartArea) return;
+
+        const centerX = (chartArea.left + chartArea.right) / 2;
+        const centerY = (chartArea.top + chartArea.bottom) / 2;
+
        ctx.save();

        ctx.textAlign = 'center';
@@ -44,11 +49,11 @@ Chart.register({

        ctx.font = 'bold 18px sans-serif';
        ctx.fillStyle = '#111827';
-        ctx.fillText(total, width / 2, height / 2 - 8);
+        ctx.fillText(total, centerX, centerY - 8);

        ctx.font = '12px sans-serif';
        ctx.fillStyle = '#6b7280';
-        ctx.fillText('Total cases', width / 2, height / 2 + 12);
+        ctx.fillText('Total cases', centerX, centerY + 12);

        ctx.restore();
    }
@@ -247,7 +252,7 @@ function buildChart(id, type, labels, data) {
    }
    if (type === 'doughnut') {
        options.cutout = '70%';
-
+        options.maintainAspectRatio = false;
        options.elements = {
            arc: {
                borderWidth: (ctx) => ctx.chart.$noData ? 0 : 1
--- a/dashboard/public/js/dashboard/export.js
+++ b/dashboard/public/js/dashboard/export.js
@@ -0,0 +1,300 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+    const toggle = document.getElementById("exportToggle");
+    const items = document.getElementById("exportItems");
+    const close = document.getElementById("exportClose");
+
+    if (!toggle || !items) return;
+
+    toggle.addEventListener("click", () => {
+        items.classList.toggle("show");
+
+        toggle.innerText = items.classList.contains("show")
+            ? "Export ▾"
+            : "Export ▸";
+    });
+
+    if (close) {
+        close.addEventListener("click", () => {
+            items.classList.remove("show");
+            toggle.innerText = "Export ▸";
+        });
+    }
+
+});
+
+function openChartSelector() {
+
+    if (typeof charts === "undefined" || Object.keys(charts).length === 0) {
+        alert("Charts are still loading. Please try again.");
+        return;
+    }
+
+    const modal = document.getElementById("chartModal");
+    const list = document.getElementById("chartList");
+
+    list.innerHTML = "";
+
+    Object.keys(charts).forEach(id => {
+        list.innerHTML += `
+            <label style="display:block;margin-bottom:6px;">
+                <input type="checkbox" value="${id}" checked>
+                ${formatChartName(id)}
+            </label>
+        `;
+    });
+    list.innerHTML += `
+        <label>
+            <input type="checkbox" value="provinceMap" checked>
+            Geographic Distribution
+        </label>
+    `;
+
+    modal.style.display = "block";
+}
+
+function closeChartSelector() {
+    document.getElementById("chartModal").style.display = "none";
+}
+
+function formatChartName(id) {
+    const map = {
+        trendChart: "Case Trend & Positivity",
+        pathogenChart: "Pathogen Distribution",
+        provinceMap: "Geographic Distribution",
+        ageChart: "Age Distribution",
+        sexChart: "Sex Distribution",
+        subtypeChart: "Influenza Subtypes",
+        sentinelChart: "Sentinel Site Distribution"
+    };
+
+    return map[id] || id;
+}
+
+async function exportSelectedCharts() {
+
+    const { jsPDF } = window.jspdf;
+    const pdf = new jsPDF("p", "mm", "a4");
+
+    const selected = document.querySelectorAll("#chartList input:checked");
+
+    const margin = 10;
+    const pageWidth = 210;
+    const usableWidth = pageWidth - margin * 2;
+
+    const gap = 5;
+    const chartWidth = (usableWidth - gap) / 2;
+
+    let y = 35;
+
+    // ===== HEADER =====
+    pdf.setFontSize(18);
+    pdf.setFont(undefined, "bold");
+    pdf.text(getReportTitle(), margin, 15);
+
+    pdf.setFontSize(10);
+    pdf.setFont(undefined, "normal");
+    pdf.text(`Generated: ${new Date().toLocaleString()}`, margin, 22);
+
+    pdf.setDrawColor(200);
+    pdf.line(margin, 25, pageWidth - margin, 25);
+
+    // ===== PREPARE ITEMS =====
+    const items = [];
+
+    for (const cb of selected) {
+
+        if (cb.value === "provinceMap") {
+            const mapImg = await getMapImage();
+
+            if (mapImg) {
+                items.push({
+                    id: "provinceMap",
+                    type: "map",
+                    img: mapImg
+                });
+            }
+
+            continue;
+        }
+
+        const chart = charts[cb.value];
+        if (!chart) continue;
+
+        items.push({
+            id: cb.value,
+            type: "chart",
+            chart
+        });
+    }
+
+    let i = 0;
+
+    const FIXED_HEIGHT = 70;
+    const FIXED_WIDTH = chartWidth;
+
+    while (i < items.length) {
+
+        const left = items[i];
+        const right = items[i + 1] || null;
+
+        let leftHeight = FIXED_HEIGHT;
+        let rightHeight = 0;
+
+        const xLeft = margin;
+
+        pdf.setFontSize(11);
+        pdf.setFont(undefined, "bold");
+        pdf.text(formatChartName(left.id), xLeft, y - 3);
+
+        let leftWidth = FIXED_WIDTH;
+        let leftImg;
+
+        if (left.type === "map") {
+            leftWidth = FIXED_WIDTH;
+            leftHeight = 60;
+            leftImg = left.img;
+        } else {
+            leftImg = left.chart.toBase64Image();
+
+            if (["doughnut", "pie"].includes(left.chart.config.type)) {
+                const size = Math.min(FIXED_WIDTH, FIXED_HEIGHT);
+                leftWidth = size;
+                leftHeight = size;
+            } else {
+                leftHeight = FIXED_HEIGHT;
+            }
+        }
+
+        const xLeftAdjusted = xLeft + (FIXED_WIDTH - leftWidth) / 2;
+
+        pdf.addImage(
+            leftImg,
+            "PNG",
+            xLeftAdjusted,
+            y,
+            leftWidth,
+            leftHeight
+        );
+
+        if (right) {
+
+            const xRight = margin + chartWidth + gap;
+
+            pdf.setFontSize(11);
+            pdf.setFont(undefined, "bold");
+            pdf.text(formatChartName(right.id), xRight, y - 3);
+
+            let rightWidth = FIXED_WIDTH;
+            let rightImg;
+
+            if (right.type === "map") {
+                rightWidth = FIXED_WIDTH;
+                rightHeight = 60;
+                rightImg = right.img;
+            } else {
+                rightImg = right.chart.toBase64Image();
+
+                if (["doughnut", "pie"].includes(right.chart.config.type)) {
+                    const size = Math.min(FIXED_WIDTH, FIXED_HEIGHT);
+                    rightWidth = size;
+                    rightHeight = size;
+                } else {
+                    rightHeight = FIXED_HEIGHT;
+                }
+            }
+
+            const xRightAdjusted = xRight + (FIXED_WIDTH - rightWidth) / 2;
+
+            pdf.addImage(
+                rightImg,
+                "PNG",
+                xRightAdjusted,
+                y,
+                rightWidth,
+                rightHeight
+            );
+
+            i += 2;
+        } else {
+            i += 1;
+        }
+
+        // ===== ROW HEIGHT =====
+        const rowHeight = Math.max(leftHeight, rightHeight);
+        y += rowHeight + 12;
+
+        // ===== PAGE BREAK =====
+        if (y > 260) {
+            pdf.addPage();
+            y = 30;
+        }
+    }
+
+    pdf.save("dashboard_report.pdf");
+    closeChartSelector();
+}
+function prepareMapForExport() {
+    if (!window.map) return;
+
+    const bounds = L.featureGroup(Object.values(map._layers)).getBounds();
+
+    if (bounds.isValid()) {
+        map.setView([12.5, 104.9], 6);
+    }
+}
+function exportFullDashboard() {
+
+    const el = document.querySelector(".content-area");
+
+    html2canvas(el, { scale: 2 }).then(canvas => {
+
+        const img = canvas.toDataURL("image/png");
+
+        const { jsPDF } = window.jspdf;
+        const pdf = new jsPDF("p", "mm", "a4");
+
+        const width = 210;
+        const height = (canvas.height * width) / canvas.width;
+
+        pdf.addImage(img, "PNG", 0, 0, width, height);
+
+        pdf.save("full_dashboard.pdf");
+
+    });
+
+    closeChartSelector();
+}
+async function getMapImage() {
+
+    const mapEl = document.getElementById("provinceMap");
+    if (!mapEl) return null;
+
+    prepareMapForExport();
+
+    // wait for map tiles to re-render
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    const canvas = await html2canvas(mapEl, {
+        useCORS: true,
+        scale: 2
+    });
+
+    return canvas.toDataURL("image/png");
+}
+function getReportTitle() {
+    const program = window.PROGRAM_CODE || "Overview";
+
+    const rangeType = document.getElementById("trend_range")?.value;
+
+    if (rangeType === "custom") {
+        const sy = document.getElementById("start_year")?.value;
+        const sw = document.getElementById("start_week")?.value;
+        const ey = document.getElementById("end_year")?.value;
+        const ew = document.getElementById("end_week")?.value;
+
+        return `${program} Report (W${sw}/${sy} – W${ew}/${ey})`;
+    }
+
+    return `${program} Report (Last ${rangeType} weeks)`;
+}
--- a/dashboard/public/js/dashboard/filter.js
+++ b/dashboard/public/js/dashboard/filter.js
@@ -75,7 +75,7 @@ class DashboardFilter {

        const year = new Date().getFullYear();

-        for (let y = year-10; y <= year; y++) {
+        for (let y = year-20; y <= year; y++) {

            this.startYear.innerHTML += `<option value="${y}">${y}</option>`;
            this.endYear.innerHTML += `<option value="${y}">${y}</option>`;
--- a/dashboard/public/js/program.js
+++ b/dashboard/public/js/program.js
@@ -2,7 +2,20 @@ const standardPrograms = ['SARI', 'ILI', 'LBM', 'AFI'];
 const programCode = (window.PROGRAM_CODE || '').trim().toUpperCase();
 let map;
 let provinceLayer;
+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(programCode === 'AFI' ? renderAFIDashboard : renderDashboard)
+            .catch(err => console.error("Dashboard API error:", err));
+
+    });
+
+});
 function normalizeProvince(name, validSet) {
    if (!name || !validSet) return null;

@@ -33,22 +46,6 @@ function normalizeProvince(name, validSet) {

    return match || null;
 }
-
-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(programCode === 'AFI' ? renderAFIDashboard : renderDashboard)
-            .catch(err => console.error("Dashboard API error:", err));
-
-    });
-
-});
-
 function renderAFIDashboard(data) {
    const pathogenRows = (data.pathogen_distribution || [])
        .sort((a, b) => b.total - a.total);
@@ -100,11 +97,9 @@ function renderProvinceHeatmap(rows) {

            rows.forEach(r => {

-                // ✅ FIX: use patient_province + validSet
                const province = normalizeProvince(r.patient_province, validProvinces);
                if (!province) return;

-                // ✅ FIX: accumulate instead of overwrite
                if (!totals[province]) {
                    totals[province] = { total: 0, positive: 0 };
                }
@@ -140,7 +135,6 @@ function renderProvinceHeatmap(rows) {
                    const total = totals[province]?.total || 0;
                    const positive = totals[province]?.positive || 0;

-                    // ✅ positivity kept
                    const percent = total
                        ? ((positive / total) * 100).toFixed(1)
                        : 0;
@@ -323,8 +317,6 @@ function renderDashboard(data) {
        '#8b5cf6', '#14b8a6', '#f97316', '#84cc16', '#e11dba', '#f6f63b'
    ];

-
-
    buildChart(
        'pathogenChart',
        'doughnut',
@@ -439,7 +431,6 @@ function getColorForPathogen(name) {

    if (colors[name]) return colors[name];

-    // fallback random color (for future pathogens)
    return `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`;
 }
 function renderPathogenChart(rows) {
@@ -482,4 +473,4 @@ function renderSubtypeChart(rows) {
    );
 }

-//Seq
+
--- a/dashboard/resources/views/layouts/app.blade.php
+++ b/dashboard/resources/views/layouts/app.blade.php
@@ -7,12 +7,14 @@
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
-
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <script src="/js/dashboard/filter.js"></script>
    <script src="/js/dashboard/charts.js"></script>
+    <script src="/js/dashboard/export.js"></script>


    <style>
@@ -20,7 +22,6 @@
            margin: 0;
        }

-        /* HEADER */
        .top-navbar {
            height: 60px;
            background: #0B8F3C;
@@ -35,7 +36,6 @@
            font-size: 18px;
        }

-        /* NAV BAR */
        .nav-bar {
            display: flex;
            background: white;
@@ -48,7 +48,6 @@
            border-bottom: 1px solid #dcdcdc;
        }

-        /* NAV ITEMS */
        .btn-theme-outline {
            background-color: #fff;
            color: #0B8F3C;
@@ -110,12 +109,65 @@
        .card h3 {
            color: #0B8F3C;
        }
+
+        .export-control {
+            position: relative;
+        }
+
+        #exportItems {
+            display: flex;
+            gap: 8px;
+            opacity: 0;
+            transform: translateX(-10px);
+            pointer-events: none;
+            width: 0;
+            overflow: hidden;
+            transition: all 0.2s ease;
+        }
+
+        #exportItems.show {
+            opacity: 1;
+            transform: translateX(0);
+            pointer-events: auto;
+            width: auto;
+        }
+
+
+        .export-modal {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.4);
+            z-index: 10000;
+        }
+
+        .export-content {
+            background: white;
+            padding: 20px;
+            width: 400px;
+            margin: 10% auto;
+            border-radius: 10px;
+        }
+
+        @media print {
+            #floatingExport {
+                display: none !important;
+            }
+
+            .nav-bar,
+            .top-navbar {
+                display: none !important;
+            }
+
+            .card {
+                page-break-inside: avoid;
+            }
+        }
    </style>
 </head>

 <body>

-    <!-- TOP HEADER -->
    <div class="top-navbar">

        <div class="brand-title">
@@ -128,7 +180,6 @@

    </div>

-    <!-- NAVIGATION BAR -->
    <div class="nav-bar">

        <a href="/dashboard" class="nav-item {{ request()->is('dashboard') ? 'active-tab' : '' }}">
@@ -141,12 +192,11 @@
                {{ $program->code }}
            </a>
        @endforeach -->
-        @foreach($programs->where('code', '!=', 'NDS') as $program)
+        @foreach($programs as $program)

            @if($program->code === 'SEQ')

-                <a href="/dashboard/seq"
-                    class="nav-item {{ request()->is('dashboard/seq') ? 'active-tab' : '' }}">
+                <a href="/dashboard/seq" class="nav-item {{ request()->is('dashboard/seq') ? 'active-tab' : '' }}">
                    SEQ
                </a>
            @else
@@ -158,33 +208,69 @@

        @endforeach

-        <div class="ms-auto d-flex align-items-center gap-4 pe-3">
+        <div class="ms-auto d-flex align-items-center gap-2 pe-3">
+
            <button type="button" onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline">
                Refresh Data
            </button>
+
+            <div id="exportControl" class="d-flex align-items-center gap-2">
+
+                <button id="exportToggle" class="btn btn-sm btn-theme-outline">
+                    Export ▸
+                </button>
+
+                <div id="exportItems" class="align-items-center gap-2">
+
+                    <button class="btn btn-sm btn-light" onclick="openChartSelector()">Charts</button>
+                    <button class="btn btn-sm btn-light" onclick="exportFullDashboard()">Screen</button>
+                    <button class="btn btn-sm btn-light" onclick="window.print()">Print</button>
+
+                    <button class="btn btn-sm btn-outline-secondary" id="exportClose">✕</button>
+
+                </div>
+                <div id="chartModal" class="export-modal">
+                    <div class="export-content">
+                        <h5>Select Charts</h5>
+                        <div id="chartList"></div>
+
+                        <div class="mt-3 d-flex justify-content-end gap-2">
+                            <button onclick="closeChartSelector()">Cancel</button>
+                            <button onclick="exportSelectedCharts()">Download PDF</button>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
        </div>

    </div>

-    <!-- Main Wrapper -->
    <div class="main-wrapper">

-        <!-- Page Content -->
        <div class="content-area">
            @yield('content')
        </div>

    </div>

+
+
    @yield('scripts')

    <script>
+        window.addEventListener("click", (e) => {
+            const modal = document.getElementById("chartModal");
+
+            if (e.target === modal) {
+                modal.style.display = "none";
+            }
+        });
        function reloadDataSource() {
            fetch(`/api/dashboard/reload`)
                .then(res => res.json())
-                .then(data => {
-                    location.reload()
-                });
+                .then(() => location.reload());
        }
    </script>