layerindex-web/templates/rrs/rrs_stats.html

{% extends "rrs/base_toplevel.html" %}
{% load i18n %}
{% load staticfiles %}

{% comment %}

  rrs-web - recipe maintenance stats template

  Copyright (C) 2013, 2018 Intel Corporation
  Licensed under the MIT license, see COPYING.MIT for details

{% endcomment %}


<!--
{% block title_append %} - recipe maintenance statistics - {{ maintplan_name }} {{ release_name }} {{ milestone_name }}{% endblock %}
-->


{% block content_inner %}
{% autoescape on %}

        <div class="row">

            <h2>Maintenance statistics - {{ maintplan_name }} {{ release_name }} {{ milestone_name }}</h2>

            <h3>Upstream status (milestone)</h3>
            <div style="width: 75%;">
                <canvas id="chart_upstream_status">
                </canvas>
            </div>

            <h3>Patch status (current)</h3>
            <div style="width: 75%;">
                <canvas id="chart_patch_status">
                </canvas>
            </div>

        </div>

{% endautoescape %}

{% endblock %}

{% block scripts %}

    <script src="{% static "js/Chart.js" %}"></script>
    <script>
        $(document).ready(function() {
            chartColors = {
                red: 'rgb(255, 99, 132)',
                yellow: 'rgb(255, 205, 86)',
                green: 'rgb(75, 192, 192)',
                green2: 'rgb(51, 204, 51)',
                blue: 'rgb(54, 162, 235)',
                purple: 'rgb(153, 102, 255)',
                pink: 'rgb(255, 51, 153)',
                grey: 'rgb(201, 203, 207)',
            };
            chartColorsArray = Object.values(chartColors);

            // --- Status chart ---
            var config = {
                type: 'bar',
                data: {
                    datasets: [{
                        data: {{ chart_upstream_status_values }},
                        backgroundColor: chartColorsArray,
                    }],
                    labels: {{ chart_upstream_status_labels|safe }}
                },
                options: {
                    responsive: true,
                    legend: {
                        display: false,
                    },
                }
            };

            var ctx = document.getElementById('chart_upstream_status').getContext('2d');
            window.myPie = new Chart(ctx, config);

            // --- Patch status chart ---
            var config = {
                type: 'bar',
                data: {
                    datasets: [{
                        data: {{ chart_patch_status_values }},
                        backgroundColor: chartColorsArray,
                    }],
                    labels: {{ chart_patch_status_labels|safe }}
                },
                options: {
                    responsive: true,
                    legend: {
                        display: false,
                    },
                }
            };

            var ctx = document.getElementById('chart_patch_status').getContext('2d');
            new Chart(ctx, config);
        });
    </script>
{% endblock %}