psmattas/covid19-dashboard
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Puranjay Savar Mattas
2021-05-14 14:41:00 +05:30
commit b9f8614ddf
385 changed files with 31180 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
core/templates/index.html Normal file
View File

@@ -0,0 +1,129 @@
{% extends 'layouts/base.html' %}
{% load humanize %}
{% block title %} Home {% endblock title %}
<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}
{% block content %}
{% include "includes/header.html" %}
<div class="container-fluid mt--7 bg-secondary">
<div class="row">
<div class="col-xl-8 mb-5 mb-xl-0"> <!-- Global interactive Plotly Mabpox -->
<div class="card shadow fade-in-bottom">
<div class="card-body plotly worldmap">
<div id="world_map" class="chart" style="height: 100%;"></div>
</div>
<div style="position: absolute; padding:1.25rem 1.5rem;">
<h6 class="text-uppercase text-muted ls-1 mb-1">Global | Cumulative</h6>
<h2 class="text-dark mb-0">Mapbox</h2>
</div>
</div>
</div>
<div class="col-xl-4"> <!-- Growth interactive scatterplot -->
<div class="card bg-dark shadow fade-in-bottom">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-uppercase text-light ls-1 mb-1">Global | Cumulative</h6>
<h2 class="text-white mb-0">Growth</h2>
</div>
<div class="col text-right">
<a class="btn btn-sm btn-light" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="Info"
data-content="Global cumulative growth in cases since collection of data started. Defaulted to logarithmic y-scale">
&nbsp;<i class="fas fa-info text-dark">&nbsp;</i>
</a>
</div>
</div>
</div>
<div class="card-body plotly">
<div id="realtime_growth_chart" class="chart" style="height: 310px;"></div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-xl-8 mb-5 mb-xl-0"> <!-- Global daily growth plot -->
<div class="card shadow">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-uppercase text-muted ls-1 mb-1">Global | Daily</h6>
<h2 class="mb-0">Daily Growth</h2>
</div>
<div class="col text-right">
<a class="btn btn-sm btn-white" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="Info"
data-content="Daily time series of cases. Bars can be stacked for relative adjacent comparison by toggling 'confirmed' cases.">
&nbsp;<i class="fas fa-info">&nbsp;</i>
</a>
</div>
</div>
</div>
<div class="card-body plotly">
<div id="daily_growth_chart" class="chart"style="height: 310px;"></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card shadow">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-uppercase text-muted ls-1 mb-1">Global | Sortable</h6>
<h2 class="mb-0">Cases</h2>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-white">
&nbsp;<i class="fas fa-download">&nbsp;</i>
</a>
</div>
</div>
</div>
<div class="table-responsive">
<!-- cases table -->
<table id="cases_table" class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Country</th>
<th scope="col">Confirmed</th>
<th scope="col">Recovered</th>
<th scope="col">Deaths</th>
<th scope="col">Death Rate %</th>
</tr>
</thead>
<tbody id="cases_table_body"></tbody>
</table>
</div>
</div>
</div>
</div>
{% include "includes/footer.html" %}
</div>
{% endblock content %}
<!-- Specific JS goes HERE -->
{% block javascripts %}
<script>
$('.nav-item a').removeClass('active');
$('.home-item a').addClass('active');
</script>
<!-- Sortable Tables -->
<script defer src="/static/assets/js/sorttable.js"></script>
<!-- Plotly.js CDN -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.54.6/plotly.min.js"></script>
<!-- Load and display data -->
<script defer src="/static/assets/js/fetch-data.js"></script>
{% endblock javascripts %}