{% set timelimit = submission.problem.timelimit * submission.language.timeFactor %}
<div>
    {% if selectedJudging is not null %}
        <div class="card" style="display: inline-block" id="testcaseruntime">
            <div class="card-header">
                <span id="graphs" style="font-weight: bold;">testcase CPU times
                    <span style="font-weight: normal;">
                            {%- if selectedJudging.result != 'compiler-error' -%}
                                | max:
                                {{ selectedJudging.maxRuntime | number_format(3, '.', '') }}s
                                | sum: {{ selectedJudging.sumRuntime | number_format(3, '.', '') }}s
                            {% endif %}
                    </span>
                </span>
            </div>
            <div class="card-body">
            <svg style="width:500px; height:250px;"></svg>
            </div>
        </div>
    {% endif %}
    {% if externalJudgement is not null and externalJudgement.result is not null %}
        <div class="card" style="display: inline-block" id="externalruntime">
            <div class="card-header">
                <span id="graphs" style="font-weight: bold;">External Testcase CPU times
                    <span style="font-weight: normal;">
                            {%- if externalJudging.result != 'compiler-error' -%}
                                | max:
                                {{ externalJudging.maxRuntime | number_format(3, '.', '') }}s
                                | sum: {{ externalJudging.sumRuntime | number_format(3, '.', '') }}s
                            {% endif %}
                    </span>
	        </span>
            </div>
            <div class="card-body">
                <svg style="width:500px; height:250px;"></svg>
            </div>
        </div>
    {% endif %}
    {% if judgings|length > 1 %}
        <div class="card" style="display: inline-block" id="maxruntime">
            <div class="card" style="display: inline-block" id="externalruntime">
                <div class="card-header">
                    <span id="graphs" style="font-weight: bold;">Max. CPU times</span>
                </div>
                <div class="card-body">
                    <svg style="width:500px; height:250px;"></svg>
                </div>
            </div>
        </div>
    {% endif %}
</div>

<script>
    {% set colors = {
        'correct':        '#28a745',
        'wrong-answer':   '#dc3545',
        'timelimit':      'orange',
        'run-error':      '#ff3399',
        'compiler-error': 'grey',
        'no-output':      'purple',
        'frozen':         'blue',
        'output-limit':   'black',
    } %}
    function create_chart(data, maxY) {
        var tickStep = Math.floor(maxY/5);
        if (maxY <= 2) {
            tickStep = 0.2;
        } else if (maxY <= 5) {
            tickStep = 0.5;
        }
        maxY += tickStep;
        maxY = Math.floor(maxY/tickStep) * tickStep;
        var chart = nv.models.multiBarChart()
            .x(function (d) {
                return d.label
            })
            .y(function (d) {
                return d.value
            })
            .showControls(false)
            .reduceXTicks(true)
            .forceY([0, maxY])
            .duration(250)
            .showLegend(false)
        ;
        var tickValues = [];
        for (i = 0; i <= maxY; i += tickStep) {
            tickValues.push(i);
        }
        chart.yAxis
            .tickValues(tickValues)
            .axisLabel('CPU time');
        if (tickStep >= 1) {
            chart.yAxis.tickFormat(function(d) { return d3.format(',f')(d) + 's' });
        } else {
            chart.yAxis.tickFormat(function(d) { return d3.format(',.1f')(d) + 's' });
        }
        return chart;
    }

    $(function () {
        var maxY = {{ timelimit }};
        {% for judging in judgings %}
        maxY = Math.max(maxY, {{ maxRunTimes[judging.judgingId]|default(0) }});
        {% endfor %}
        {% if judgings|length > 1 %}
        var run_max_times = [
            {
                key: "Max Runtime",
                values: [
                    {% for judging in judgings | filter(judging => judging.result and judging.result != 'aborted') %}
                    {
                        "label": "j{{ judging.judgingid }} ({{ judging.result }})",
                        "value": {{ maxRunTimes[judging.judgingId]|default(0) }},
                        "color": "{{ colors[judging.result] }}",
                    },
                    {% endfor %}
                ]
            }
        ];
        nv.addGraph(function () {
            var chart = create_chart(run_max_times, maxY);
            chart.tooltip.contentGenerator(function (obj) {
                var format = d3.format(".3f");
                return "<b>" + obj.data.label + "</b><br><b>max runtime:</b> " + format(obj.data.value) + "s";
            });
            chart.xAxis.axisLabel("Judging");
            d3.select('#maxruntime svg')
                .datum(run_max_times)
                .call(chart);
            var svgsize = chart.container.clientWidth || chart.container.parentNode.clientWidth;
            var chartStart = chart.margin().left;
            var chartEnd = +svgsize - chart.margin().right;
            var chartWidth = chartEnd - chartStart;
            var barWidth = chartWidth / {{ judgings | filter(judging => judging.result and judging.result != 'aborted') | length }};
            {% for judging in judgings | filter(judging => judging.result and judging.result != 'aborted') %}
            d3.select('#maxruntime svg')
                .append('line')
                .attr({
                    x1: chartStart + {{ loop.index0 }} * barWidth,
                    y1: chart.yAxis.scale()({{ timelimits[judging.judgingid] }}) + chart.margin().top,
                    x2: chartStart + (1 + {{ loop.index0 }}) * barWidth,
                    y2: chart.yAxis.scale()({{ timelimits[judging.judgingid] }}) + chart.margin().top,
                })
                .style("stroke", "#F00")
            {% if timelimits[judging.judgingid] != timelimit %}
                .style("stroke-dasharray", "3 3")
            {% endif %}
                .style("stroke-width", "2px");
            {% endfor %}
            nv.utils.windowResize(chart.update);
            return chart;
        });
        {% endif %}

        {% if selectedJudging is not null %}
        var testcase_times = [
            {
                key: "Runtime",
                values: [
                    {% for run in runs %}
                    {
                        "label": "{{ run.rank }}",
                        "value": {% if run.firstJudgingRun %}{{ run.firstJudgingRun.runtime|default(0) }}{% else %}0{% endif %},
                        "color": "{% if run.firstJudgingRun %}{{ colors[run.firstJudgingRun.runresult]|default('grey') }}{% else %}grey{% endif %}",
                        "description": "{{ run.description(true)|default(run.rank)|escape("js") }}",
                    },
                    {% endfor %}
                ]
            }
        ];
        nv.addGraph(function () {
            var chart = create_chart(testcase_times, maxY);
            chart.tooltip.contentGenerator(function (obj) {
                var format = d3.format(".3f");
                return "<b>Testcase " + obj.data.description + "</b><br><b>Runtime:</b> " + format(obj.data.value) + "s";
            });
            chart.xAxis.axisLabel("testcase rank");
            d3.select('#testcaseruntime svg')
                .datum(testcase_times)
                .call(chart);
            var svgsize = chart.container.clientWidth || chart.container.parentNode.clientWidth;
            var line = d3.select('#testcaseruntime svg')
                .append('line')
                .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,
                })
                .style("stroke", "#F00")
                .style("stroke-width", "2px");
            nv.utils.windowResize(chart.update);
            return chart;
        });
        {% endif %}

        {# TODO: merge this in the above graph? #}
        {% if externalJudgement is not null and externalJudgement.result is not null %}
        var external_times = [
            {
                key: "Runtime",
                values: [
                    {% for run in externalRuns %}
                    {
                        "label": "{{ run.rank }}",
                        "value": {% if run.firstExternalRun %}{{ run.firstExternalRun.runtime|default(0) }}{% else %}0{% endif %},
                        "color": "{% if run.firstExternalRun %}{{ colors[run.firstExternalRun.result]|default('grey') }}{% else %}grey{% endif %}",
                        "description": "{{ run.description|default(run.rank) }}",
                    },
                    {% endfor %}
                ]
            }
        ];
        nv.addGraph(function () {
            var chart = create_chart(external_times, maxY);
            chart.tooltip.contentGenerator(function (obj) {
                var format = d3.format(".3f");
                return "<b>Testcase " + obj.data.description + "</b><br><b>Runtime:</b> " + format(obj.data.value) + "s";
            });
            chart.xAxis.axisLabel("Testcase Rank");
            d3.select('#externalruntime svg')
                .datum(external_times)
                .call(chart);
            var svgsize = chart.container.clientWidth || chart.container.parentNode.clientWidth;
            var line = d3.select('#externalruntime svg')
                .append('line')
                .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,
                })
                .style("stroke", "#F00")
                .style("stroke-width", "2px");
            nv.utils.windowResize(chart.update);
            return chart;
        });
        {% endif %}
    })
</script>

{% include 'jury/analysis/download_graphs.html.twig' %}