130 lines
4.8 KiB
HTML
130 lines
4.8 KiB
HTML
{% 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">
|
|
<i class="fas fa-info text-dark"> </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.">
|
|
<i class="fas fa-info"> </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">
|
|
<i class="fas fa-download"> </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 %}
|