Merge branch 'master' of github.com:khantey1998/nrml-dashboard
This commit is contained in:
@@ -20,7 +20,6 @@
|
||||
</select>
|
||||
|
||||
<div id="custom_range_container" style="display:none;" class="align-items-center gap-1">
|
||||
|
||||
<select id="start_year" class="form-select"></select>
|
||||
<select id="start_week" class="form-select"></select>
|
||||
|
||||
@@ -28,87 +27,154 @@
|
||||
|
||||
<select id="end_year" class="form-select"></select>
|
||||
<select id="end_week" class="form-select"></select>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="row flex-grow-1" id="summary_cards"></div>
|
||||
<div class="row flex-grow-1 mb-2" id="summary_cards"></div>
|
||||
|
||||
<!-- SLIDESHOW -->
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
|
||||
<div class="row flex-grow-1">
|
||||
<div class="slide-wrapper">
|
||||
|
||||
<!-- LEFT COLUMN -->
|
||||
<div class="col-lg-8 d-flex flex-column">
|
||||
<!-- SLIDE 1 -->
|
||||
<div class="slide active">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 d-flex flex-column">
|
||||
|
||||
<!-- Trend Chart -->
|
||||
<div class="card shadow-sm mb-3 flex-grow-1">
|
||||
<div class="card-body">
|
||||
<div class="card shadow-sm mb-3" style="height:60vh;">
|
||||
<div class="card-body" >
|
||||
|
||||
<div class="mb-3">
|
||||
<h5 class="fw-bold mb-1">Epidemic Trend</h5>
|
||||
<p class="text-muted small mb-0">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<h5 class="fw-bold">Epidemic Trend</h5>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<canvas id="trendChart" height="90"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="trendChart" height="90"></canvas>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts -->
|
||||
<div class="card shadow-sm flex-grow-1">
|
||||
<div class="card-body">
|
||||
<!-- SLIDE 2 -->
|
||||
<div class="slide">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 d-flex flex-column">
|
||||
<div class="card shadow-sm" style="height:60vh;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold">Influenza Subtypes Distribution</h5>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
|
||||
<h5 class="fw-bold">Recent Alerts & Notifications</h5>
|
||||
<canvas id="influenzaSubtypeDistribution" style="max-width: 100%; max-height:40vh; float: left;"></canvas>
|
||||
|
||||
<ul id="alertsList" class="list-group list-group-flush mt-3"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SLIDE 3 -->
|
||||
<div class="slide">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 d-flex flex-column">
|
||||
<div class="card shadow-sm" style="height:60vh;">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold">SARS-CoV-2 Detected Distribute by Age Group</h5>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<canvas id="covidDistributedByAgeGroup" style="max-width: 100%; max-height:40vh; float: left;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SLIDE 3 -->
|
||||
<div class="slide">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 d-flex flex-column">
|
||||
<div class="card shadow-sm" style="height:60vh; display: flex">
|
||||
<div class="card-body" >
|
||||
<h5 class="fw-bold">SARS-CoV-2 Lineage Relative Frequencies Over Time</h5>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<canvas id="covidLineageFrequency" style=" flex:1; max-width: 90%; max-height:45vh; float: left;"></canvas>
|
||||
<div id="legendContainer" style="
|
||||
width:10%;
|
||||
margin-left:20px;
|
||||
max-height:375px;
|
||||
overflow-y:auto;
|
||||
padding:8px;
|
||||
|
||||
"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SLIDE 3 -->
|
||||
<div class="slide">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 d-flex flex-column">
|
||||
<div class="card shadow-sm" style="height:60vh; display: flex">
|
||||
<div class="card-body" >
|
||||
<h5 class="fw-bold">Influenza Subtypes Relative Frequencies Over Time</h5>
|
||||
<p class="text-muted small report-period">
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
<canvas id="influenzaSubtypeFrequency" style=" flex:1; max-width: 90%; max-height:45vh; float: left;"></canvas>
|
||||
<div id="legendContainerInfluenzaSubtypeFrequency" style="
|
||||
width:10%;
|
||||
margin-left:20px;
|
||||
max-height:375px;
|
||||
overflow-y:auto;
|
||||
padding:8px;
|
||||
|
||||
"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTROLS -->
|
||||
<button class="slide-btn prev-btn">❮</button>
|
||||
<button class="slide-btn next-btn">❯</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 d-flex flex-column">
|
||||
|
||||
<!-- RIGHT COLUMN -->
|
||||
<div class="col-lg-4 d-flex flex-column">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold">Influenza Subtypes Detected by Province</h5>
|
||||
<p class="text-muted small report-period">(based on selected epiweek range)</p>
|
||||
|
||||
<h5 class="fw-bold">Total Cases by Provinces</h5>
|
||||
<p class="text-muted small">(based on selected epiweek range)</p>
|
||||
|
||||
<div id="provinceMap" style="height:50vh;"></div>
|
||||
|
||||
<div class="d-flex justify-content-center align-items-center gap-4 mt-4 small">
|
||||
|
||||
<span>
|
||||
<span
|
||||
style="display:inline-block;width:10px;height:10px;background:#2563eb;border-radius:50%;margin-right:6px;"></span>
|
||||
SARI
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<span
|
||||
style="display:inline-block;width:10px;height:10px;background:#10b981;border-radius:50%;margin-right:6px;"></span>
|
||||
ILI
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<span
|
||||
style="display:inline-block;width:10px;height:10px;background:#9333ea;border-radius:50%;margin-right:6px;"></span>
|
||||
LBM
|
||||
</span>
|
||||
<div id="provinceMap" style="height:40vh;"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -117,4 +183,4 @@
|
||||
|
||||
<script src="/js/overview.js"></script>
|
||||
|
||||
@endsection
|
||||
@endsection
|
||||
|
||||
@@ -4,11 +4,14 @@
|
||||
<head>
|
||||
<title>NRML Dashboard</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<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>
|
||||
|
||||
@@ -16,11 +19,8 @@
|
||||
<script src="/js/dashboard/charts.js"></script>
|
||||
<script src="/js/dashboard/export.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
body { margin: 0; }
|
||||
|
||||
.top-navbar {
|
||||
height: 60px;
|
||||
@@ -34,6 +34,7 @@
|
||||
.brand-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
@@ -44,8 +45,6 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
}
|
||||
|
||||
.btn-theme-outline {
|
||||
@@ -56,7 +55,6 @@
|
||||
|
||||
.btn-theme-outline:hover {
|
||||
background-color: #cce0d4;
|
||||
color: #0B8F3C;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@@ -68,9 +66,7 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #cce0d4;
|
||||
}
|
||||
.nav-item:hover { background: #cce0d4; }
|
||||
|
||||
.active-tab {
|
||||
color: #0B8F3C;
|
||||
@@ -78,27 +74,10 @@
|
||||
background: #e5efe8;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #f8f9fa;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
min-height: calc(100vh - 60px);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
margin-right: 10px;
|
||||
min-height: calc(100vh - 110px);
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -106,13 +85,13 @@
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
color: #0B8F3C;
|
||||
}
|
||||
.form-select { border-radius: 0px !important; }
|
||||
.shadow-sm { box-shadow: none !important; }
|
||||
|
||||
.export-control {
|
||||
position: relative;
|
||||
}
|
||||
.card h3 { color: #0B8F3C; }
|
||||
|
||||
/* EXPORT */
|
||||
.export-control { position: relative; }
|
||||
|
||||
#exportItems {
|
||||
display: flex;
|
||||
@@ -132,12 +111,11 @@
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.export-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
@@ -149,131 +127,140 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* SLIDE FEATURE (from master) */
|
||||
.slide-wrapper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.slide.active { left: 0; opacity: 1; z-index: 2; }
|
||||
.slide.prev { left: -100%; opacity: 0; }
|
||||
|
||||
.slide-btn {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0,128,0,0.43);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.prev-btn { right: 75px; }
|
||||
.next-btn { right: 25px; }
|
||||
|
||||
.slide-btn:hover {
|
||||
background: rgba(7,120,24,0.8);
|
||||
}
|
||||
|
||||
@media print {
|
||||
#floatingExport {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nav-bar,
|
||||
.top-navbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
#floatingExport { display: none !important; }
|
||||
.nav-bar, .top-navbar { display: none !important; }
|
||||
.card { page-break-inside: avoid; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="top-navbar">
|
||||
|
||||
<div class="brand-title">
|
||||
National Reference Medical Laboratory Surveillance Dashboard
|
||||
</div>
|
||||
|
||||
<div class="ms-auto small">
|
||||
Last update: 12:05 | 2026-03-15
|
||||
</div>
|
||||
|
||||
<div class="top-navbar">
|
||||
<div class="brand-title">
|
||||
National Reference Medical Laboratory Surveillance Dashboard
|
||||
</div>
|
||||
<div class="ms-auto small">
|
||||
Last update: 12:05 | 2026-03-15
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<div class="nav-bar">
|
||||
|
||||
<a href="/dashboard" class="nav-item {{ request()->is('dashboard') ? 'active-tab' : '' }}">
|
||||
Overview
|
||||
</a>
|
||||
<a href="/dashboard" class="nav-item {{ request()->is('dashboard') ? 'active-tab' : '' }}">
|
||||
Overview
|
||||
</a>
|
||||
|
||||
<!-- @foreach($programs as $program)
|
||||
@foreach($programs as $program)
|
||||
@if($program->code === 'SEQ')
|
||||
<a href="/dashboard/seq" class="nav-item {{ request()->is('dashboard/seq') ? 'active-tab' : '' }}">
|
||||
SEQ
|
||||
</a>
|
||||
@else
|
||||
<a href="/dashboard/{{ strtolower($program->code) }}"
|
||||
class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">
|
||||
class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">
|
||||
{{ $program->code }}
|
||||
</a>
|
||||
@endforeach -->
|
||||
@foreach($programs as $program)
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
@if($program->code === 'SEQ')
|
||||
<div class="ms-auto d-flex align-items-center gap-2 pe-3">
|
||||
|
||||
<a href="/dashboard/seq" class="nav-item {{ request()->is('dashboard/seq') ? 'active-tab' : '' }}">
|
||||
SEQ
|
||||
</a>
|
||||
@else
|
||||
<a href="/dashboard/{{ strtolower($program->code) }}"
|
||||
class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">
|
||||
{{ $program->code }}
|
||||
</a>
|
||||
@endif
|
||||
<button onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline">
|
||||
Refresh Data
|
||||
</button>
|
||||
|
||||
@endforeach
|
||||
<div id="exportControl" class="d-flex align-items-center gap-2">
|
||||
|
||||
<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 id="exportToggle" class="btn btn-sm btn-theme-outline">
|
||||
Export ▸
|
||||
</button>
|
||||
|
||||
<div id="exportControl" class="d-flex align-items-center gap-2">
|
||||
<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>
|
||||
|
||||
<button id="exportToggle" class="btn btn-sm btn-theme-outline">
|
||||
Export ▸
|
||||
</button>
|
||||
<div id="chartModal" class="export-modal">
|
||||
<div class="export-content">
|
||||
<h5>Select Charts</h5>
|
||||
<div id="chartList"></div>
|
||||
|
||||
<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 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 class="main-wrapper">
|
||||
|
||||
<div class="content-area">
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<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";
|
||||
});
|
||||
|
||||
@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(() => location.reload());
|
||||
}
|
||||
</script>
|
||||
function reloadDataSource() {
|
||||
fetch(`/api/dashboard/reload`)
|
||||
.then(res => res.json())
|
||||
.then(() => location.reload());
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user