datasaur/site/surveyapp/templates/analysis/quickstats.html
2026-01-25 15:56:01 +00:00

77 lines
3.3 KiB
HTML

{% extends "layout.html" %} {% block content %}
<main class="container">
<section class="row mt-4">
<div class="col-3">
<a class="btn btn-secondary" href="{{ url_for('surveys.dashboard', survey_id=survey_id) }}"
title="Return to the survey dashboard page">Back</a>
</div>
<div class="col-6">
<h3 class="mt-2 primary-colour text-center">Quick Stats: {{ survey_title }}</h3>
</div>
</section>
<section class="my-3 d-flex justify-content-center bg-white rounded shadow border p-2">
<h4 class="mx-4 my-0 font-weight-light">Number of rows: {{ rows }}</h4>
<h4 class="mx-4 my-0 font-weight-light">Number of columns: {{ cols }}</h4>
</section>
<section class="stats-grid">
{% for column in column_info %}
<article class="bg-light shadow rounded grid-element">
<div class="text-center">
<h5 class="primary-colour-bg p-2 text-light rounded-top">{{ column["title"] }}</h5>
</div>
<div class="p-3">
<p class="lead">Data type: {{ column["data_type"] }}</p>
{% if column["data_type"] != "true/false" %}
<p class="lead">Unique values: {{ column["num_unique"] }}</p>
{% endif %}
{% if column["quantities"] %}
<section class="bg-white border rounded shadow-sm">
<h5 class="text-light bg-secondary p-2 rounded-top mb-0">Quantities</h5>
<ul class="list-group text-dark">
{% for key in column["quantities"] %}
<li class="list-group-item d-flex justify-content-between">
<p class="m-0">{{ key }}</p>
<p class="m-0">{{ column["quantities"][key] }}</p>
</li>
{% endfor %}
</ul>
</section>
{% endif %}
{% if column["data_type"] == "numerical" %}
<section class="bg-white border rounded shadow-sm">
<h5 class="text-light bg-secondary p-2 rounded-top mb-0">Aggregations</h5>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between">
<p class="m-0">Average</p>
<p class="m-0">{{ column["average"] }}</p>
</li>
<li class="list-group-item d-flex justify-content-between">
<p class="m-0">Standard deviation</p>
<p class="m-0">{{ column["standard_deviation"] }}</p>
</li>
<li class="list-group-item d-flex justify-content-between">
<p class="m-0">Highest value</p>
<p class="m-0">{{ column["max"] }}</p>
</li>
<li class="list-group-item d-flex justify-content-between">
<p class="m-0">Lowest value</p>
<p class="m-0">{{ column["min"] }}</p>
</li>
<li class="list-group-item d-flex justify-content-between">
<p class="m-0">Sum of values</p>
<p class="m-0">{{ column["sum"] }}</p>
</li>
</ul>
</section>
{% endif %}
</div>
</article>
{% endfor %}
</section>
</main>
<!-- Script for masonry - allowing for easy display of variable sized grid elements -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" defer></script>
<script src="{{ url_for('static', filename='statscripts/quickstats.js') }}" defer></script>
{% endblock content %}