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

{% block title %}Analysis - Team {{ team.effectiveName }} {{ 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%;
}

/* Don't show x-axis ticks/ticklines for max runtimes chart*/
#maxruntime .nv-x.nv-axis .tick {
  display: none;
}
</style>
{% endblock %}

{% block content %}
      <h1>Team {{ team.teamid }}: {{ team.effectiveName }}</h1>
    </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>
          </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="submission_times">
      <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">
  {% for problem in problems %}
      <div class="col-3 mt-3" id="maxruntime_{{problem.probid}}">
        <div class="card">
          <div class="card-header">
            Max Runtimes for problem {{ problem.name }}
          </div>
          <div class="card-body">
            <svg style="height: 200px"></svg>
          </div>
        </div>
      </div>
  {% endfor %}
{% 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',
  'aborted':        'maroon',
}
%}
$(function(){

    {% for problem in problems %}
      var run_max_times_{{problem.probid}} = [
        {
          key: "Max Runtimes",
          values: [
            {% for j in judgings | filter(j => j.result and j.submission.problem == problem) %}
              {
                "id"    : {{ j.judgingid }},
                "label" : "j{{ j.judgingid }}",
                "value" : {{ j.maxRuntime() }},
                "valid" : {{ j.valid ? "true":"false" }},
                "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_{{problem.probid}}[0].values.length > 10)
            .showValues(false)
            .forceY([0, {{ problem.timelimit*1.20 }}])
            .margin({bottom: 90})
            .duration(250)
          ;


        chart.yAxis
          .tickFormat(d3.format('.3f'))
          .axisLabel('Runtime(in s)');
        chart.xAxis.axisLabel("Judgings");
        d3.select('#maxruntime_{{problem.probid}} svg')
            .datum(run_max_times_{{problem.probid}})
            .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");
          var prepend = "";
          if (!obj.data.valid) {
            prepend = "<b>(INVALID)</b><br>"
          }
        return prepend
          + '<div style="background: LightCyan;">'
          + '<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_{{problem.probid}} svg')
          .append('line')
          .attr({id: 'maxline'})
          .style("stroke", "#F00");

        var svgsize = chart.container.clientWidth || chart.container.parentNode.clientWidth;
        updateline_{{problem.probid}} = function(){
          line = d3.select('#maxruntime_{{problem.probid}} svg #maxline')
          .attr({
            x1: chart.margin().left,
            y1: chart.yAxis.scale()({{problem.timelimit}})+ chart.margin().top,
            x2: +svgsize - chart.margin().right,
            y2: chart.yAxis.scale()({{problem.timelimit}}) + chart.margin().top,
          })
        }
        updateline_{{problem.probid}}();
        nv.utils.windowResize(function() {
          updateline_{{problem.probid}}();
          chart.update()
        });
        return chart;
      });
    {% endfor %}


    //////////////////////////////////////
    // 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(judging_results[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
    // stacked graph of correct, runtime-error, wrong-answer, compiler-error, timelimit, etc
    // x-axis is contest time
    // y axis is # of submissions

    var submission_stats = [
      {% for result in ['correct', 'wrong-answer', 'timelimit', 'run-error', 'compiler-error', 'no-output'] %}
      {
        key: "{{result}}",
        color: "{{colors[result]}}",
        values: [
          {# TODO: make sure these are actually ordered by submittime #}
          {# TODO: also make sure these submissions are in the same contest #}
          [0,0],
          {% set count = 0 %}
          {% for submission in submissions | filter(submission => submission.result) %}
            {% if submission.result == result %}{% set count = count +1 %}{% endif %}
            [ {{ (submission.submittime - current_contest.starttime)/60.0 }},
              {{ count }}
            ],
            {% endfor %}
        ]
      },
      {% endfor %}
    ];
    nv.addGraph(function() {
      var chart = nv.models.stackedAreaChart()
          // .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
          // .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
          // .transitionDuration(350)  //how fast do you want the lines to transition?
          // .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
          .showControls(false)
          .x(function(d) { return d[0] })   //We can modify the data accessor functions...
          .y(function(d) { return d[1] })   //...in case your data is formatted differently.
          .showYAxis(true)        //Show the y-axis
          .showXAxis(true)        //Show the x-axis
          .forceX([0, {{ (current_contest.endtime - current_contest.starttime) / 60 }}])
          .forceY([0, {{ submissions|length *1.10 }}])
          ;
      chart.xAxis     //Chart x-axis settings
          .axisLabel('Contest Time(minutes)')
          .tickFormat(d3.format('d'));

      chart.yAxis     //Chart y-axis settings
          .axisLabel('Total Submissions')
          .tickFormat(d3.format('d'));

      d3.select('#submission_times svg')
          .datum(submission_stats)
          .call(chart);
      nv.utils.windowResize(chart.update);
      return chart;
    });

})
</script>
{% include 'jury/analysis/download_graphs.html.twig' %}

{% endblock %}