{% extends "base.html" %}
{% load humanize %}
{% load url %}
{% load static %}

{% block title %}Statistics{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Statistics</li>
    </ol>
{% endblock %}

{% block content %}

    <h3>Users</h3>

    <div class="embed-responsive embed-responsive-21by9">
        <div class="embed-responsive-item vega-lite-chart">
            {{ countries|json_script:"countries" }}
        </div>
    </div>

    <br>

    <div class="w-100 vega-lite-chart">
        {{ users.chart|json_script:"users" }}
    </div>

    <dl class="inline">

        <dt>Total users</dt>
        <dd>{{ users.totals|intcomma }}</dd>

        <dt>Users logged in (last {{ days }} days)</dt>
        <dd>{{ logged_in_period|intcomma }}</dd>

    </dl>

    <h3>Challenges</h3>

    <div class="w-100 vega-lite-chart">
        {{ challenges.chart|json_script:"challenges" }}
    </div>

    <dl class="inline">
        <dt>Total public challenges</dt>
        <dd>{{ challenges.totals.Public|intcomma }}</dd>

        <dt>Total private challenges</dt>
        <dd>{{ challenges.totals.Private|intcomma }}</dd>

        <dt>Public challenge with the most participants</dt>
        <dd>
            <a href="{{ most_popular_challenge_group.participants_of_challenge.get_absolute_url }}">
                {{ most_popular_challenge_group.participants_of_challenge }}
                ({{ most_popular_challenge_group.num_users|intcomma }}
                Participant{{ most_popular_challenge_group.num_users|pluralize }})
            </a>
        </dd>
    </dl>

    <h4>Registrations to public challenges in the past {{ days }} days
        (top {{ max_num_results }})</h4>

    <div class="w-100 vega-lite-chart">
        {{ challenge_registrations_period|json_script:"challengeRegistrations" }}
    </div>

    <br>

    <h3>Evaluations</h3>

    <div class="w-100 vega-lite-chart">
        {{ submissions.chart|json_script:"submissions" }}
    </div>

    <dl class="inline">
        <dt>Total prediction submissions</dt>
        <dd>{{ submissions.totals.Predictions|intcomma }}</dd>

        <dt>Total algorithm submissions</dt>
        <dd>{{ submissions.totals.Algorithm|intcomma }}</dd>

        <dt>Public challenge with the most submissions</dt>
        <dd>
            <a href="{{ most_popular_challenge_submissions.get_absolute_url }}">
                {{ most_popular_challenge_submissions }}
                ({{ most_popular_challenge_submissions.num_submissions|intcomma }}
                Submission{{ most_popular_challenge_submissions.num_submissions|pluralize }})
            </a>
        </dd>
    </dl>

    <h4>Submissions to public challenges in the past {{ days }} days
        (top {{ max_num_results }})</h4>

    <div class="w-100 vega-lite-chart">
        {{ challenge_submissions_period|json_script:"challengeSubmissions" }}
    </div>

    <br>

    <h3>Algorithms</h3>

    <div class="w-100 vega-lite-chart">
        {{ algorithms.chart|json_script:"algorithms" }}
    </div>

    <dl class="inline">
        <dt>Total public algorithms</dt>
        <dd>{{ algorithms.totals.Public|intcomma }}</dd>

        <dt>Total private algorithms</dt>
        <dd>{{ algorithms.totals.Private|intcomma }}</dd>
    </dl>

    <div class="w-100 vega-lite-chart">
        {{ jobs.chart|json_script:"jobs" }}
    </div>

    <dl class="inline">
        <dt>Total algorithm inference jobs</dt>
        <dd>{{ jobs.totals|intcomma }}</dd>
    </dl>

    <div class="w-100 vega-lite-chart">
        {{ job_durations.chart|json_script:"jobDurations" }}
    </div>

    <dl class="inline">
        <dt>Total algorithm inference hours</dt>
        <dd>{{ job_durations.totals|intcomma }} hours</dd>
    </dl>

    <h3>Archives</h3>

    <div class="w-100 vega-lite-chart">
        {{ archives.chart|json_script:"archives" }}
    </div>

    <dl class="inline">
        <dt>Total public archives</dt>
        <dd>{{ archives.totals.Public|intcomma }}</dd>

        <dt>Total private archives</dt>
        <dd>{{ archives.totals.Private|intcomma }}</dd>
    </dl>

    <div class="w-100 vega-lite-chart">
        {{ images.chart|json_script:"images" }}
    </div>

    <dl class="inline">
        <dt>Total images</dt>
        <dd>{{ images.totals|intcomma }}</dd>
    </dl>

    <h3>Reader Studies</h3>

    <div class="w-100 vega-lite-chart">
        {{ reader_studies.chart|json_script:"readerStudies" }}
    </div>

    <dl class="inline">
        <dt>Total public reader studies</dt>
        <dd>{{ reader_studies.totals.Public|intcomma }}</dd>

        <dt>Total private reader studies</dt>
        <dd>{{ reader_studies.totals.Private|intcomma }}</dd>
    </dl>

    <div class="w-100 vega-lite-chart">
        {{ answers.chart|json_script:"answers" }}
    </div>

    <dl class="inline">
        <dt>Total answers</dt>
        <dd>{{ answers.totals|intcomma }}</dd>
    </dl>

    <h3>Viewers</h3>

    <div class="w-100 vega-lite-chart">
        {{ sessions.chart|json_script:"sessions" }}
    </div>

    <dl class="inline">

        <dt>Total session duration</dt>
        <dd>{{ sessions.totals|intcomma }} hours</dd>

        <dt>Total number of sessions</dt>
        <dd>{{ sessions_total|intcomma }}</dd>

        <dt>Total public viewers</dt>
        <dd>{{ workstations.True|intcomma }}</dd>

        <dt>Total private viewers</dt>
        <dd>{{ workstations.False|intcomma }}</dd>

    </dl>
{% endblock %}

{% block script %}
    {{ block.super }}

    <script src="{% static 'vendored/vega/vega.min.js' %}"></script>
    <script src="{% static 'vendored/vega-lite/vega-lite.min.js' %}"></script>
    <script src="{% static 'vendored/vega-embed/vega-embed.min.js' %}"></script>
    <script type="module" src="{% static "js/charts/render_charts.mjs" %}"></script>
{% endblock %}