{% extends "jury/base.html.twig" %}

{% block title %}Analysis - Problem {{ problem.externalid }} {{ current_contest.shortname | default('') }} - {{ parent() }}{% endblock %}

{% block extrahead %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('css/nv.d3.min.css') }}">
<script src="{{ asset('js/d3.min.js') }}"></script>
<script src="{{ asset('js/nv.d3.min.js') }}"></script>
<script src="{{ asset('js/FileSaver.min.js') }}"></script>
<style>
.row.equal {
  display: flex;
  flex-wrap: wrap;
}
.card {
  height: 100%;
}
</style>
{% endblock %}

{% block content %}
      <h1>Problem {{ problem.externalid }}: <span style="font-size: 60%;">{{ contest_problem | problemBadge }}</span> {{ problem.name }}</h1>
      {% include 'jury/partials/analysis_filter.html.twig' %}
    </div>
    <div class="col-lg-3 col-sm-6 mt-3">
      <div class="card">
        <div class="card-header">
          Misc Statistics
        </div>
        <div class="card-body">
          <dl class="row">
            <dt class="col-sm-6"># Submissions</dt>
            <dd class="col-sm-6">{{ submissions | length }}</dd>

            <dt class="col-sm-6"># Correct</dt>
            <dd class="col-sm-6">{{ results['correct'] | default(0) }} <span class="text-muted">({{ misc.correct_percentage | number_format(2) }}%)</span></dd>

            <dt class="col-sm-6"># Teams Attempted</dt>
            <dd class="col-sm-6">{{ misc.num_teams_attempted }}</dd>

            <dt class="col-sm-6"># Teams Correct</dt>
            <dd class="col-sm-6">{{ misc.num_teams_correct }} <span class="text-muted">({{  misc.teams_correct_percentage | number_format(2) }}%)</span></dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mt-3" id="judging_results">
      <div class="card">
        <div class="card-header">
          Judging Results
        </div>
        <div class="card-body">
          <svg style="height: 275px"></svg>
        </div>
      </div>
    </div>
    <div class="col-lg-5 col-sm-12 mt-3" id="graph_submissions">
      <div class="card">
        <div class="card-header">
          Submissions over Time
        </div>
        <div class="card-body">
            <svg style="height: 275px"></svg>
        </div>
      </div>
    </div>
  </div>
  <div class="row equal mt-3">
    <div class="col-12" id="maxruntime">
      <div class="card">
        <div class="card-header">
          Max Runtimes
        </div>
        <div class="card-body">
          <svg style="height: 600px"></svg>
        </div>
      </div>
{% endblock %}

{% block extrafooter %}
<script>
{%
set colors = {
  'correct':        '#01df01',
  'wrong-answer':   'red',
  'timelimit':      'orange',
  'run-error':      '#ff3399',
  'compiler-error': 'grey',
  'no-output':      'purple',
  'frozen':         'blue',
  'output-limit':   'black',
}
%}
$(function(){
    var run_max_times = [
      {
        key: "Max Runtimes",
        values: [
          {% for j in judgings %}
            {
              "id"    : {{ j.judgingid }},
              "label" : "j{{ j.judgingid }}",
              "value" : {{ j.maxRuntime() }},
              "team"  : "{{ j.submission.team.name }}",
              "submittime"  : "{{ j.submission.submittime | printtime(null, j.submission.contest) }}",
              "color" : "{{ colors[j.result] }}",
              "firstfile" : "{{ j.submission.files[0].filename }}",
            },
          {% endfor %}
        ]
      }
    ];
    nv.addGraph(function() {
      var chart = nv.models.discreteBarChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value })
          .valueFormat(d3.format('.3f'))
          .staggerLabels(run_max_times[0].values.length > 10)
          .forceY([0, {{ timelimit*1.20 }}])
          .showValues(false)
          .margin({bottom: 90})
          .duration(250)
        ;


      chart.yAxis
        .tickFormat(d3.format('.3f'))
        .axisLabel('Runtime(in s)');
      chart.xAxis
        .ticks(0)
        .tickValues([])
        .axisLabel("Judgings");
      d3.select('#maxruntime svg')
          .datum(run_max_times)
          .call(chart);
      // Clicking on one of the bars takes you to the judgment
      chart.discretebar.dispatch.on('elementClick', function(e) {
        window.location = "{{ path('jury_submission_by_judging', {'jid': '_JUDGING_ID_' }) }}".replace('_JUDGING_ID_', e.data.id);
      });
      // More useful tooltip
      chart.tooltip.contentGenerator(function (obj) {
        var format = d3.format(".3f");
        return '<div style="background: LightCyan;">'
	  + '<b>Team:</b> ' + obj.data.team + '<br/>'
          + '<b>Submitted:</b> ' + obj.data.submittime + '<br/>'
          + '<b>First file:</b> <tt>' + obj.data.firstfile + '</tt><br/>'
          + '<b>max. Runtime:</b> ' + format(obj.data.value) + 's</b><br/>'
          + '<small>click to view judging</small>'
          + '</div>';
      });

      // Create our timelimit line
      d3.select('#maxruntime svg')
        .append('line')
        .attr({id: 'maxline'})
        .style("stroke", "#F00");

      // update the line in case the chart dimensions have changed
      var svgsize = chart.container.clientWidth || chart.container.parentNode.clientWidth;
      updateline = function(){
        line = d3.select('#maxruntime svg #maxline')
        .attr({
          x1: chart.margin().left,
          y1: chart.yAxis.scale()({{ timelimit }})+ chart.margin().top,
          x2: +svgsize - chart.margin().right,
          y2: chart.yAxis.scale()({{ timelimit }}) + chart.margin().top,
        })
      }
      updateline();
      nv.utils.windowResize(function() {
        updateline();
        chart.update()
      });
      return chart;
    });

    //////////////////////////////////////
    // Results by type
    var judging_results = [
      {
        key: "Judging Results",
        values: [
          {% for result,count in results %}
            {
              "label" : "{{ result }}",
              "value" : {{ count }},
              "color" : "{{ colors[result] }}",
            },
          {% endfor %}
        ]
      }
    ];
    nv.addGraph(function() {
      var chart = nv.models.discreteBarChart()
          .x(function(d) { return d.label })
          .y(function(d) { return d.value })
          .valueFormat(d3.format('.0f'))
          .staggerLabels(run_max_times[0].values.length > 2)
          .margin({bottom: 90})
          .duration(250)
          ;
      chart.yAxis
        .tickFormat(d3.format('.0f'))
        .axisLabel('Number of submissions');
      chart.xAxis.axisLabel("Judgement");
      d3.select('#judging_results svg')
          .datum(judging_results)
          .call(chart);
      nv.utils.windowResize(chart.update);
      return chart;
    });

    //////////////////////////////////////
    // Submissions over time

    const submission_stats = [
      {% for result in ['correct', 'wrong-answer', 'timelimit', 'run-error', 'compiler-error', 'no-output'] %}
      {
        key: "{{ result }}",
        color: "{{ colors[result] }}",
        values: []
      },
      {% endfor %}
    ];
    const contest_start_time = {{ current_contest.starttime }};
    const contest_duration_seconds = {{ (current_contest.endtime - current_contest.starttime) | round(0, 'ceil') }};
    const submissions = [
      {% for submission in submissions %}
      {
        result: "{{ submission.result }}",
        submittime: {{ submission.submittime }},
      }{{ loop.last ? '' : ',' }}
      {% endfor %}
    ];
    createSubmissionGraph(submission_stats, contest_start_time, contest_duration_seconds, submissions, minBucketCount = 10, maxBucketCount = 101);
})
</script>
{% include 'jury/analysis/download_graphs.html.twig' %}

{% endblock %}
