288 lines
11 KiB
PHP
288 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
|
|
<div class="container-fluid">
|
|
|
|
<!-- PAGE TITLE -->
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
|
|
<h4 class="fw-bold">
|
|
{{ $selected->code }} Detail Page
|
|
</h4>
|
|
|
|
<div class="d-flex align-items-center gap-2">
|
|
|
|
<select id="trend_range" class="form-select w-auto">
|
|
<option value="8" selected>Last 8 weeks</option>
|
|
<option value="12">Last 12 weeks</option>
|
|
<option value="26">Last 26 weeks</option>
|
|
<option value="custom">Custom range</option>
|
|
</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>
|
|
<span class="mx-1">to</span>
|
|
<select id="end_year" class="form-select"></select>
|
|
<select id="end_week" class="form-select"></select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- SUMMARY CARDS -->
|
|
<div class="row g-3 mb-4">
|
|
|
|
<div class="col-md-3">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<small>Total Cases Reported (latest epiweek)</small>
|
|
<h3 id="totalCases">0</h3>
|
|
<small id="casesChange" class="text-muted">— No change</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<small>SARS-CoV-2 Rate</small>
|
|
<h3 id="covidRate">0%</h3>
|
|
<small id="covidChange" class="text-muted">— No change</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- TREND CHART (PRIMARY) -->
|
|
<?php if ($selected->code === 'AFI'): ?>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<h5>Real-Time RT-PCR (NP/OP Sample)</h5>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<!-- Trend -->
|
|
<div style="
|
|
height:260px;
|
|
position:relative;
|
|
margin-bottom:30px;
|
|
">
|
|
<canvas id="afiSection1Trend"></canvas>
|
|
</div>
|
|
<div style="height:460px; position:relative;">
|
|
<canvas id="afiPcrChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<h5>Real-Time Multiplex RT-PCR (Plasma Sample)</h5>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<!-- Trend -->
|
|
<div style="
|
|
height:260px;
|
|
position:relative;
|
|
margin-bottom:30px;
|
|
">
|
|
<canvas id="afiSection2Trend"></canvas>
|
|
</div>
|
|
<div style="height:460px; position:relative;">
|
|
<canvas id="afiMultiplexChart"></canvas>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<h5>Serology ELISA (IgM) (Serum Sample)</h5>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<!-- Trend -->
|
|
<div style="
|
|
height:260px;
|
|
position:relative;
|
|
margin-bottom:30px;
|
|
">
|
|
<canvas id="afiSection3Trend"></canvas>
|
|
</div>
|
|
<div style="height:460px; position:relative;">
|
|
<canvas id="afiElisaChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<?php else: ?>
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-8">
|
|
|
|
<div class="card shadow-sm">
|
|
<div class="card-body" style="height:560px;">
|
|
|
|
<h6 class="fw-bold mb-3">
|
|
Case Trends & Positivity Rate by Epiweek
|
|
</h6>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<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:560px">
|
|
|
|
<h6 class="fw-bold mb-3">Pathogen Distribution</h6>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<div style="height:460px; position:relative;">
|
|
<canvas id="pathogenChart"></canvas>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
<!-- MAP + SITE+subtype -->
|
|
<div class="row g-3 mb-4">
|
|
|
|
<!-- MAP -->
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body" style="height:560px">
|
|
|
|
<h6 class="fw-bold mb-3">Cases by Province</h6>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<div id="provinceMap" style="height:450px;"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body" style="height:560px">
|
|
|
|
<h6 class="fw-bold mb-3">Sentinel Sites & Influenza Subtypes</h6>
|
|
|
|
<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>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<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>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<div style="height: 460px; position:relative;">
|
|
<canvas id="subtypeChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DEMOGRAPHICS -->
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body" style="height:480px">
|
|
<h6 class="fw-bold mb-3">Sex Distribution</h6>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<div style="height:360px; position:relative;">
|
|
<canvas id="sexChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body" style="height:480px">
|
|
<h6 class="fw-bold mb-3">Age Distribution</h6>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<div style="height:360px; position:relative;">
|
|
<canvas id="ageChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
|
|
<script>
|
|
window.SURVEILLANCE_ID = {{ $selected->id }};
|
|
window.PROGRAM_CODE = "{{ $selected->code }}";
|
|
</script>
|
|
|
|
<script type="module" src="/js/program.js"></script>
|
|
|
|
@endsection
|