finalized overview page
This commit is contained in:
@@ -50,14 +50,9 @@
|
||||
<div class="col-md-3">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
|
||||
<small>Total Cases Reported (Last 7 Days)</small>
|
||||
<small>Total Cases Reported (latest epiweek)</small>
|
||||
<h3 id="totalCases">0</h3>
|
||||
|
||||
<small id="casesChange" class="text-muted">
|
||||
— No change
|
||||
</small>
|
||||
|
||||
<small id="casesChange" class="text-muted">— No change</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,14 +60,9 @@
|
||||
<div class="col-md-3">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
|
||||
<small>Overall Positivity Rate</small>
|
||||
<h3 id="positivityRate">0%</h3>
|
||||
|
||||
<small id="positivityChange" class="text-muted">
|
||||
— No change
|
||||
</small>
|
||||
|
||||
<small id="positivityChange" class="text-muted">— No change</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,139 +70,152 @@
|
||||
<div class="col-md-3">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
|
||||
<small>Influenza Rate</small>
|
||||
<h3 id="influenzaRate">0%</h3>
|
||||
|
||||
<small id="influenzaChange" class="text-muted">
|
||||
— No change
|
||||
</small>
|
||||
|
||||
<small id="influenzaChange" class="text-muted">— No change</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
|
||||
<small>SARS-Cov-2 Rate</small>
|
||||
<small>SARS-CoV-2 Rate</small>
|
||||
<h3 id="covidRate">0%</h3>
|
||||
<small id="covidChange" class="text-muted">— No change</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small id="covidChange" class="text-muted">
|
||||
— No change
|
||||
</small>
|
||||
</div>
|
||||
<!-- TREND CHART (PRIMARY) -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:520px;">
|
||||
|
||||
<h6 class="fw-bold mb-3">
|
||||
Case Trends & Positivity Rate by Epiweek
|
||||
</h6>
|
||||
|
||||
<div style="height:460px; position:relative;">
|
||||
<canvas id="trendChart"></canvas>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PATHOGEN DISTRIBUTION -->
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:520px">
|
||||
|
||||
<h6 class="fw-bold mb-3">Pathogen Distribution</h6>
|
||||
|
||||
<div style="height:460px; position:relative;">
|
||||
<canvas id="pathogenChart"></canvas>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- TREND CHART -->
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-body" style="height:500px;">
|
||||
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<h6 class="fw-bold">Case Trends and Positivity Rate by Epiweek</h6>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas id="trendChart"></canvas>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- PROVINCE + PATHOGEN -->
|
||||
<!-- MAP + SITE+subtype -->
|
||||
<div class="row g-3 mb-4">
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<!-- MAP -->
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:300px">
|
||||
<div class="card-body" style="height:520px">
|
||||
|
||||
<h6 class="fw-bold mb-3">
|
||||
Cases by Province
|
||||
</h6>
|
||||
<h6 class="fw-bold mb-3">Cases by Province</h6>
|
||||
|
||||
<canvas id="provinceChart"></canvas>
|
||||
<div id="provinceMap" style="height:450px;"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:300px">
|
||||
<div class="card-body" style="height:520px">
|
||||
|
||||
<h6 class="fw-bold mb-3">
|
||||
Pathogen Distribution
|
||||
</h6>
|
||||
<h6 class="fw-bold mb-3">Sentinel Sites & Influenza Subtypes</h6>
|
||||
|
||||
<canvas id="pathogenChart"></canvas>
|
||||
<div class="row ">
|
||||
|
||||
<!-- SENTINEL PIE -->
|
||||
<div class="col-md-6 d-flex flex-column">
|
||||
<small class="text-muted mb-2">Cases by Sentinel Site</small>
|
||||
<div style="height: 460px; position:relative;">
|
||||
<canvas id="sentinelChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUBTYPE -->
|
||||
<div class="col-md-6 d-flex flex-column">
|
||||
<small class="text-muted mb-2">Influenza Subtypes</small>
|
||||
<div style="height: 460px; position:relative;">
|
||||
<canvas id="subtypeChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- DEMOGRAPHIC -->
|
||||
<!-- DEMOGRAPHICS -->
|
||||
<div class="row g-3">
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:300px">
|
||||
<div class="card-body" style="height:400px">
|
||||
<div class="row h-100">
|
||||
<div class="col-md-6 d-flex flex-column">
|
||||
<h6 class="fw-bold mb-3">Age Distribution</h6>
|
||||
|
||||
<h6 class="fw-bold mb-3">Age Distribution</h6>
|
||||
|
||||
<canvas id="ageChart"></canvas>
|
||||
<div style="height:360px; position:relative;">
|
||||
<canvas id="ageChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 d-flex flex-column">
|
||||
<h6 class="fw-bold mb-3">Sex Distribution</h6>
|
||||
|
||||
<div style="height:360px; position:relative;">
|
||||
<canvas id="sexChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body" style="height:300px">
|
||||
<div class="card-body" style="height:400px">
|
||||
|
||||
<h6 class="fw-bold mb-3">Sex Distribution</h6>
|
||||
|
||||
<canvas id="sexChart"></canvas>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
|
||||
<script>
|
||||
window.SURVEILLANCE_ID = {{ $selected->id }};
|
||||
window.PROGRAM_CODE = "{{ $selected->code }}";
|
||||
</script>
|
||||
|
||||
<script src="/js/program.js"></script>
|
||||
|
||||
@endsection
|
||||
@@ -51,7 +51,7 @@
|
||||
<div class="mb-3">
|
||||
<h5 class="fw-bold mb-1">Epidemic Trend</h5>
|
||||
<p class="text-muted small mb-0">
|
||||
Weekly reported cases by surveillance program
|
||||
(based on selected epiweek range)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,13 +4,16 @@
|
||||
<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"></script>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
@@ -139,7 +142,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
@yield('scripts')
|
||||
@yield('scripts')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user