{% extends "base.html" %}
{% comment %}© 2012, Multapplied Networks, Inc.{% endcomment %}
{% load speedtest %}
{% load static from staticfiles %}

{% block base %}<base href="/django/bonds/{{ bond.id }}/speedtests/compare/"/>{% endblock %}

{% block pagescript %}
<!--[if lte IE 8]><script type="text/javascript" src="{% static "js/lib/excanvas.min.js" %}"></script><![endif]-->
<script type="text/javascript">
var throughput = [{% for result in success_results %}[{{ result.speed }}, {{ result.stats.r_mbps }}], {% endfor %}];
var latency = [{% for result in success_results %}[{{ result.speed }}, {{ result.stats.latency_avg }}], {% endfor %}];
var queue = [{% for result in success_results %}[{{ result.speed }}, {{ result.stats.s_queue_size_avg }}], {% endfor %}];
$(function() {
    $.plot(
        $("#comparison-chart"),
        [
            {
                data: throughput,
                label: "Throughput",
                yaxis: 1,
                color: "#05466E"
            },
            {
                data: latency,
                label: "Latency",
                yaxis: 2,
                color: "#24B5EA"
            },
            {
                data: queue,
                label: "Send queue size",
                yaxis: 3,
                color: "#8EA3A8"
            }
        ],
        {
            series: {
                lines: { show: true },
                points: { show: true }
            },
            xaxes: { min: 0 },
            yaxes: [
                { min: 0 },
                { min: 0 },
                { min: 0 }
            ],
            grid: { backgroundColor: "#fff" },
            legend: {
                container: $("#comparison-chart-legend")
            }
        }
    );
});
</script>
{% endblock %}

<!-- PAGE TITLE -->
{% block title %}
    Compare {{ bond.bonder.name | escapejs }} Speed Tests {{ block.super }}
{% endblock %}

{% block breadcrumbs %}
    {{ block.super }}
    <li><a href="{% url 'bonds' %}" target="_parent">Bonds</a></li>
    <li><a href="{% url 'bond-details' bond.id %}" target="_parent">{{ bond.bonder.name }}</a></li>
    <li><a href="{% url 'bond-speed-tests' bond.id %}" target="_parent">Speed Tests</a></li>
    <li>Compare</li>
{% endblock %}

<!-- CONTENT -->
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <h1>Compare Speed Tests</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div id="comparison-chart" style="width: 500px;height: 400px; margin: 2ex;"></div>
            <div id="comparison-chart-legend"></div>
            <p>
                Rate limit in kbps, throughput in Mbps.
            </p>

            <p>
                This chart shows how throughput, latency (also known as round
                trip or ping time), and send queue size change with the rate
                limit. It can be used to determine how high the rate limit for
                a leg can be set while still keeping latency low by avoiding
                queues in the modem or ISP router. Avoiding queues helps
                maintain quality of service and performance of the IDMPQ
                packet distribution algorithm.
            </p>
        </div>
    </div>
{% endblock %}