modify dashboard and services fetch source data
This commit is contained in:
pcalengratha
@@ -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
|
||||
|
||||
@@ -92,7 +92,8 @@
|
||||
.content-area {
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
min-height: calc(100vh - 60px);
|
||||
/*min-height: calc(100vh - 60px);*/
|
||||
min-height: calc(100vh - 110px);
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
@@ -107,9 +108,65 @@
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.form-select{
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.shadow-sm{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
color: #0B8F3C;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.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);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -135,31 +192,31 @@
|
||||
Overview
|
||||
</a>
|
||||
|
||||
<!-- @foreach($programs as $program)
|
||||
<a href="/dashboard/{{ strtolower($program->code) }}"
|
||||
@foreach($programs as $program)
|
||||
<a href="/dashboard/{{ strtolower($program->code) }}" title="{{$program->name_en}}"
|
||||
class="nav-item {{ request()->is('dashboard/' . strtolower($program->code)) ? 'active-tab' : '' }}">
|
||||
{{ $program->code }}
|
||||
</a>
|
||||
@endforeach -->
|
||||
@foreach($programs->where('code', '!=', 'NDS') 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' : '' }}">
|
||||
{{ $program->code }}
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@endforeach
|
||||
{{-- @foreach($programs->where('code', '!=', 'NDS') 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' : '' }}">--}}
|
||||
{{-- {{ $program->code }}--}}
|
||||
{{-- </a>--}}
|
||||
{{-- @endif--}}
|
||||
|
||||
{{-- @endforeach--}}
|
||||
|
||||
<div class="ms-auto d-flex align-items-center gap-4 pe-3">
|
||||
<button type="button" onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline">
|
||||
<button type="button" onclick="reloadDataSource()" class="btn btn-sm btn-theme-outline" style="border-radius: 0px !important;">
|
||||
Refresh Data
|
||||
</button>
|
||||
</div>
|
||||
@@ -190,4 +247,4 @@
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user