{% extends "squeleton.html" %}


{% block page_content %}

<div class="row" id="updates-stats">
    <div class="col-md-12">
        <h1 class="page-header"><i class="fa fa-pie-chart fa-fw"></i> OS statistics ({{ last_date|date:"Y-m-d" }})</h1>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>OS repartition</h4>
            </div>
            <div class="panel-body">

                <div class="col-md-5">
                    <div id="os-stat"></div>
                </div>

                <div class="col-md-7">
                    <table id="os-list" class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Distribution</th>
                                <th>Number</th>
                                <th>Percentage</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in os_stat %}
                            <tr>
                                <td>{{ stat.0 }}</td>
                                <td>{{ stat.1 }}</td>
                                <td>{{ stat.2|floatformat:2 }}%</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
</div>

{% endblock %}



{% block scripts %}
{% load static %}
<script src="{% static 'js/plugins/morris/raphael.min.js' %}"></script>
<script src="{% static 'js/plugins/morris/morris.min.js' %}"></script>

<script>
$(function() {
    Morris.Donut({
        element: 'os-stat',
        data: [
            {{ js_data|safe }}
        ],
        {# colors: ['#0066cc', '#6666ff', '#9900cc', '#ff0066', '#ff3300', '#ff9900', '#ccff33', '#99ff66', '#00cc00', '#009999', '#99ffcc', '#ccccff'], #}
        resize: true
    });
});
</script>

<script type="text/javascript" src="{% static 'js/datatables.min.js' %}"></script>
<script>
$(document).ready(function(){
    $('#os-list').DataTable({
        info:      false,
        paging:    false,
        searching: false,
        order:     [[ 2, "desc" ]],
    });
});
</script>
{% endblock %}