layerindex-web/templates/layerindex/classicstats.html

{% extends "layerindex/classic_base.html" %}
{% load i18n %}
{% load staticfiles %}

{% comment %}

  layerindex-web - OE-Classic recipe migration stats template

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

{% endcomment %}


<!--
{% block title_append %} - {% if branch.name == 'oe-classic' %}OE-Classic{% else %}{{ branch.short_description }}{% endif %} recipe statistics{% endblock %}
-->

{% block navs %}
{% autoescape on %}
                            <li><a href="{% url 'comparison_recipe_search' branch.name %}">Recipes</a></li>
                            <li class="active"><a href="{% url 'comparison_recipe_stats' branch.name %}">Stats</a></li>
{% endautoescape %}
{% endblock %}



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

        <div class="row">

            {% if branch.name == 'oe-classic' %}
            <h2>OE-Classic statistics</h2>
            {% else %}
            <h2>{{ branch.short_description }} statistics</h2>
            {% endif %}

            <h3>Comparison status</h3>
            <div>
                <canvas id="chart_status">
                </canvas>
            </div>

            <h3>Unavailable recipes by category</h3>
            <div>
                <canvas id="chart_category">
                </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: 'pie',
                data: {
                    datasets: [{
                        data: {{ chart_status_values }},
                        backgroundColor: chartColorsArray,
                    }],
                    labels: {{ chart_status_labels|safe }}
                },
                options: {
                    responsive: true
                }
            };

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

            // --- Categories chart ---
            var config = {
                type: 'pie',
                data: {
                    datasets: [{
                        data: {{ chart_category_values }},
                        backgroundColor: chartColorsArray,
                    }],
                    labels: {{ chart_category_labels|safe }}
                },
                options: {
                    responsive: true
                }
            };

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