113 lines
4.3 KiB
PHP
113 lines
4.3 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="d-flex justify-content-between mb-3">
|
|
|
|
<h4 class="fw-bold">Sequencing Analysis</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>
|
|
|
|
<div class="row mt-3">
|
|
|
|
<div class="col-md-5">
|
|
<div class="card">
|
|
<div class="card-body" style="height:500px;">
|
|
<h5 class="fw-bold">Total Sequenced Samples Over Time</h5>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
<canvas id="sequencingTotalChart" style=" flex:1; max-height:40vh; float: left;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-7">
|
|
<div class="card">
|
|
<div class="card-body" style="height:500px;">
|
|
<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: 85%; max-height:40vh; float: left;"></canvas>
|
|
<div id="legendContainerInfluenzaSubtypeFrequency" style="
|
|
width:15%;
|
|
margin-left:20px;
|
|
max-height:375px;
|
|
overflow-y:auto;
|
|
padding:8px;
|
|
"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row mt-3">
|
|
|
|
<!-- Counts -->
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-body" style="height:500px;">
|
|
<h6 class="fw-bold">SARS-CoV-2 Lineage/Sublineage Relative Frequencies Over Time</h6>
|
|
<p class="text-muted small report-period">
|
|
(based on selected epiweek range)
|
|
</p>
|
|
{{-- <canvas id="sequencingCountChart"></canvas>--}}
|
|
<canvas id="covidLineageFrequency" style=" flex:1; max-width: 90%; max-height:40vh; float: left;"></canvas>
|
|
<div id="legendContainer" style="
|
|
width:10%;
|
|
margin-left:20px;
|
|
max-height:360px;
|
|
overflow-y:auto;
|
|
padding:8px;
|
|
|
|
"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- <div class="col-md-4">--}}
|
|
{{-- <div class="card">--}}
|
|
{{-- <div class="card-body" style="height:500px;">--}}
|
|
{{-- <canvas id="sequencingChart"></canvas>--}}
|
|
{{-- <canvas id="sequencingCountChart"></canvas>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
{{-- </div>--}}
|
|
|
|
<!-- Distribution -->
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
window.SURVEILLANCE_ID = 6;
|
|
</script>
|
|
|
|
<script src="/js/sequencing.js"></script>
|
|
@endsection
|