{% extends "base.html" %}
{% load humanize %}
{% load display_tags %}
{% load static from staticfiles %}
{% block add_styles %}
    .graph {min-height: 158px;}
{% endblock %}
{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading tight">
            <div class="clearfix">
              <h3 class="pull-left">
                  Metrics Overview
              </h3>
                <div class="dropdown pull-right">
                  <!--
                    <div class="btn-group">
                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"
                                data-toggle="dropdown" aria-expanded="true">
                            <span class="fa fa-bars"></span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                            {% if user.is_staff %}
                                <li role="presentation">
                                    <a class="" href="{% url 'edit_product' prod.id %}">
                                        <i class="fa fa-pencil-square-o"></i> Edit
                                    </a>
                                </li>
                                <li role="separator" class="divider"></li>
                                <li role="presentation">
                                    <a class="" href="{% url 'ad_hoc_finding' prod.id %}">
                                        <i class="fa fa-list-alt"></i> Add Finding
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a class="" href="{% url 'add_meta_data' prod.id %}">
                                        <i class="fa fa-list-alt"></i> Add Metadata
                                    </a>
                                </li>
                                <li role="presentation">
                                    <a class="" href="{% url 'new_object' prod.id %}">
                                        <i class="fa fa-list-alt"></i> Add Product Tracking Files
                                    </a>
                                </li>
                            <li role="separator" class="divider"></li>
                            <li role="presentation">
                                <a href="{% url 'endpoints' %}?product={{ prod.id }}">
                                    <i class="fa fa-sitemap"></i> View Endpoints
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="{% url 'product_open_findings' prod.id %}?test__engagement__product={{ prod.id }}">
                                    <i class="fa fa-bug"></i> View Open Findings
                                </a>
                            </li>
                            <li role="presentation">
                                <a href="{% url 'view_objects' prod.id %}">
                                    <i class="fa fa-history"></i> View Product Tracking Files
                                </a>
                            </li>
                            {% endif %}
                            <li role="separator" class="divider"></li>
                            {% if prod.endpoint_count > 0 %}
                                <li role="presentation">
                                    <a href="{% url 'product_endpoint_report' prod.id %}">
                                        <i class="fa fa-file-text-o"></i> Endpoint Report
                                    </a>
                                </li>
                            {% endif %}
                            <li role="presentation">
                                <a href="{% url 'product_report' prod.id %}">
                                    <i class="fa fa-file-text-o"></i> Product Report
                                </a>
                            </li>
                            {% if system_settings.enable_benchmark and benchmark_type %}
                            <li role="separator" class="divider"></li>
                            {% for bt in benchmark_type %}
                            <li role="presentation">
                                <a title="{{ bt.name }}" href="{% url 'view_product_benchmark' prod.id bt.id %}">
                                    <span class="fa fa-list"></span> {{ bt.name }} {{ bt.version }}
                                </a>
                            </li>
                            {% endfor %}
                            {% endif %}
                            <li role="separator" class="divider"></li>
                            <li role="presentation">
                                <a href="{% url 'action_history' prod|content_type prod.id %}">
                                    <i class="fa fa-history"></i> View History
                                </a>
                            </li>
                            {% if user.is_staff %}
                                <li role="separator" class="divider"></li>
                                <li role="presentation">
                                    <a class="text-danger" href="{% url 'delete_product' prod.id %}">
                                        <i class="fa fa-trash"></i> Delete
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </div>
                  -->
                </div>
            </div>
        </div>
        <div class="panel-body product-graphs-overview">
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-12">
                                <i class="fa fa-bug fa-2x"></i>

                                <div class="pull-right inline-block text-right">
                                    <span class=" fa-2x">{{ open_findings|length }}</span>
                                    <span><a href="{% url 'product_open_findings' prod.id %}?test__engagement__product={{ prod.id }}">Open
                                        Finding{{ open_findings|length|pluralize }} <i
                                                class="fa fa-arrow-circle-right"></i></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="open_findings" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Accepted since {{ start_date }}"
                           class="text-info fa fa-info-circle"></i>
                        <small>Opened since {{ start_date|date:"D., M. d, Y" }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-12">
                                <i class="fa fa-fire-extinguisher fa-2x"></i>

                                <div class="text-right pull-right">
                                    <span class="fa-2x">{{ closed_findings|length }}</span>
                                    <span><a href="{% url 'closed_findings' %}?test__engagement__product={{ prod.id }}">Closed
                                        Finding{{ closed_findings|length|pluralize }}. <i
                                                class="fa fa-arrow-circle-right"></i></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="closed_findings" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Accepted since {{ start_date }}"
                           class="text-info fa fa-info-circle"></i>
                        <small>Closed since {{ start_date|date:"D., M. d, Y" }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-12">
                                <i class="fa fa-check fa-2x"></i>

                                <div class="pull-right text-right">
                                    <span class="fa-2x">{{ accepted_findings|length }}</span>
                                    <span><a
                                            href="{% url 'accepted_findings' %}?test__engagement__product={{ prod.id }}">Accepted
                                    Findings. <i class="fa fa-arrow-circle-right"></i></a>
                                </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="reported_findings" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Accepted since {{ start_date }}"
                           class="text-info fa fa-info-circle"></i>
                        <small>Accepted since {{ start_date|date:"D., M. d, Y" }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-12">
                                <i class="fa fa-crosshairs fa-2x"></i>

                                <div class="pull-right inline-block text-right">
                                    <span class=" fa-2x">{{ new_findings|length }}</span>
                                    <span><a
                                            href="{% url 'product_open_findings' prod.id %}?test__engagement__product={{ prod.id }}&amp;date=2">New
                                        Finding{{ new_findings|length|pluralize }} <i
                                                class="fa fa-arrow-circle-right"></i></a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="new_findings" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Found in the last 7 days."
                           class="text-info fa fa-info-circle"></i>
                        <small>Found in the last 7 days.</small>
                    </div>
                </div>
            </div>
          </div>
      </div>

    <div class="panel panel-default">
        <div class="panel-heading tight">
            <div class="clearfix">
                <h3 class="pull-left">
                    Detailed Metrics
                </h3>

                <div class="dropdown pull-right">
                    <div class="btn-group">
                      <!--
                        <button class="btn btn-primary clickable panel-collapsed">
                            <span><i class="fa fa-bar-chart"></i></span>
                        </button>
                      -->
                    </div>
                </div>
            </div>
        </div>
      <div class="panel-body product-graphs">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Open, Closed, and Accepted Week to Week
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                    </div>
                    <div class="panel-body">
                        <div id="open_close_weekly" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                        <small>Weeks are only displayed if findings are available.</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Week to Week by Severity
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                    </div>
                    <div class="panel-body">
                        <div id="severity_weekly" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                        <small>Weeks are only displayed if findings are available.</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Critical Week to Week
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                    </div>
                    <div class="panel-body">
                        <div id="severity_critical" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                        <small>Weeks are only displayed if findings are available.</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        High Week to Week
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                    </div>
                    <div class="panel-body">
                        <div id="severity_high" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                        <small>Weeks are only displayed if findings are available.</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Medium Week to Week
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                    </div>
                    <div class="panel-body">
                        <div id="severity_medium" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                        <small>Weeks are only displayed if findings are available.</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Finding Age
                    </div>
                    <div class="panel-body">
                        <div id="finding_age" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                        <small>Finding age of {{ verified_findings|length|apnumber }} verified
                            finding{{ verified_findings|length|pluralize }}</small>
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Weekly activity, displayed by day, of findings reported.<i
                            title="Weeks are only displayed if findings are available."
                            class="text-info fa fa-info-circle"></i>
                    </div>
                    <div class="panel-body">
                        <div class="graph" id="punchcard"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                        <small>Weeks are only displayed if findings are available.</small>
                    </div>
                </div>
            </div>
            <div class="col-md-5">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Findings by Test Type
                        <i title="Test Types shown only if available."
                           class="text-info fa fa-info-circle"></i>
                    </div>
                    <div class="panel-body">
                        <div class="graph" id="test_type"></div>
                    </div>
                    <div class="panel-footer">
                        <i title="Weeks are only displayed if findings are available."
                           class="text-info fa fa-info-circle"></i>
                        <small>Test Types shown only if available.</small>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Open CWE Vulnerabilities
                    </div>
                    <div class="panel-body">
                        <div id="open_vulnerabilities" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i class="text-info fa fa-info-circle"></i>
                        <small>Showing {{ open_vulnerabilities|length|apnumber }}
                            vulnerabilit{{ open_vulnerabilities|length|pluralize:"y,ies"}} from Open findings</small>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Total CWE Vulnerabilities
                    </div>
                    <div class="panel-body">
                        <div id="all_vulnerabilities" class="graph"></div>
                    </div>
                    <div class="panel-footer">
                        <i class="text-info fa fa-info-circle"></i>
                        <small>Showing {{ all_vulnerabilities|length|apnumber }}
                            vulnerabilit{{ all_vulnerabilities|length|pluralize:"y,ies"}} from all findings</small>
                    </div>
                </div>
            </div>

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

{% endblock %}
{% block postscript %}
    <script type="text/javascript" src="{% static "jquery-highlight/jquery.highlight.js" %}"></script>
    <!-- Flot Charts JavaScript -->
    <script src="{% static "flot/excanvas.min.js" %}"></script>
    <script src="{% static "flot/jquery.flot.js" %}"></script>
    <script src="{% static "flot/jquery.flot.pie.js" %}"></script>
    <script src="{% static "flot/jquery.flot.resize.js" %}"></script>
    <script src="{% static "flot/jquery.flot.categories.js" %}"></script>
    <script src="{% static "flot-axis/jquery.flot.axislabels.js" %}"></script>

    {% if punchcard %}
        <script src="{% static "JUMFlot/javascripts/JUMFlot.min.js" %}"></script>
        <script src="{% static "JUMFlot/javascripts/jquery.flot.mouse.js" %}"></script>
        <script src="{% static "JUMFlot/javascripts/jquery.flot.bubbles.js" %}"></script>
    {% endif %}
    <script src="{% static "flot/jquery.flot.time.js" %}"></script>
    <script src="{% static "flot.tooltip/js/jquery.flot.tooltip.min.js" %}"></script>
    <script type="text/javascript">
        var highest_count = {{ highest_count }};
        $(function () {
            if (document.referrer.indexOf('simple_search') > 0) {
                var terms = '';
                if ($.cookie('highlight')) {
                    terms = $.cookie('highlight').split(' ');

                    for (var i = 0; i < terms.length; i++) {
                        $('body').highlight(terms[i]);
                    }
                }

                $('input#simple_search').val(terms);
            }

            $(document).on('click', '.panel-heading button.clickable', function (e) {
                var $this = $(this);
                if (!$this.hasClass('panel-collapsed')) {
                    $this.parents('.panel').find('.panel-body').slideUp();
                    $this.addClass('panel-collapsed');
                    $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
                } else {
                    $this.parents('.panel').find('.panel-body').slideDown();
                    $this.removeClass('panel-collapsed');
                    $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
                }
            });

            accepted_findings();
            open_findings();
            closed_findings();
            new_findings();
            open_close_weekly();
            severity_weekly();
            severity_counts_weekly();
            test_type();
            finding_age();
            open_vulnerabilities();
            all_vulnerabilities();
            //$(".product-graphs").hide();
            $("#meta_accordion").accordion();
        });

        function accepted_findings() {
            var critical = 0;
            var high = 0;
            var medium = 0;
            var low = 0;
            var info = 0;
            var ticks = [
                [0, "Critical"], [1, "High"], [2, "Medium"], [3, "Low"], [4, "Info"]
            ];

            {% for f in accepted_findings %}
                {% if f.severity == 'Critical' %}
                    critical += 1;
                {% elif f.severity == 'High' %}
                    high += 1;
                {% elif f.severity == 'Medium' %}
                    medium += 1;
                {% elif f.severity == 'Low' %}
                    low += 1;
                {% elif f.severity == 'Info' %}
                    info += 1;
                {% endif %}
            {% endfor %}

            var d1 = [
                [0, critical],
            ];
            var d2 = [
                [1, high],
            ];
            var d3 = [
                [2, medium],
            ];
            var d4 = [
                [3, low],
            ];
            var d5 = [
                [4, info],
            ];

            var data = [
                {
                    label: "Critical",
                    data: d1,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 1,
                        fillColor: "#d9534f"
                    },
                    color: "#d9534f"
                },
                {
                    label: "High",
                    data: d2,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 2,
                        fillColor: "#f0ad4e"
                    },
                    color: "#f0ad4e"
                },
                {
                    label: "Medium",
                    data: d3,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 3,
                        fillColor: "#f0de28"
                    },
                    color: "#f0de28"
                },
                {
                    label: "Low",
                    data: d4,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 4,
                        fillColor: "#337ab7"
                    },
                    color: "#337ab7"
                },
                {
                    label: "info",
                    data: d5,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 4,
                        fillColor: "#80699B"
                    },
                    color: "#80699B"
                }
            ];

            $.plot("#reported_findings", data, {
                series: {
                    stack: true,
                    bars: {
                        show: true,
                        barWidth: .9,
                        'align': "center",
                    },

                },
                grid: {
                    hoverable: false,
                    borderWidth: 1,
                    borderColor: '#e7e7e7',

                },
                tooltip: false,
                legend: {
                    show: false,
                    position: "ne"
                },
                xaxis: {
                    ticks: ticks,
                },

            });
        }
        ;
        function open_findings() {
            var critical = 0;
            var high = 0;
            var medium = 0;
            var low = 0;
            var info = 0;
            var ticks = [
                [0, "Critical"], [1, "High"], [2, "Medium"], [3, "Low"], [4, "Info"]
            ];

            {% for f in open_findings %}
                {% if f.severity == 'Critical' %}
                    critical += 1;
                {% elif f.severity == 'High' %}
                    high += 1;
                {% elif f.severity == 'Medium' %}
                    medium += 1;
                {% elif f.severity == 'Low' %}
                    low += 1;
                {% elif f.severity == 'Info' %}
                    info += 1;
                {% endif %}
            {% endfor %}

            var d1 = [
                [0, critical],
            ];
            var d2 = [
                [1, high],
            ];
            var d3 = [
                [2, medium],
            ];
            var d4 = [
                [3, low],
            ];
            var d5 = [
                [4, info],
            ];

            var data = [
                {
                    label: "Critical",
                    data: d1,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 1,
                        fillColor: "#d9534f"
                    },
                    color: "#d9534f"
                },
                {
                    label: "High",
                    data: d2,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 2,
                        fillColor: "#f0ad4e"
                    },
                    color: "#f0ad4e"
                },
                {
                    label: "Medium",
                    data: d3,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 3,
                        fillColor: "#f0de28"
                    },
                    color: "#f0de28"
                },
                {
                    label: "Low",
                    data: d4,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 4,
                        fillColor: "#337ab7"
                    },
                    color: "#337ab7"
                },
                {
                    label: "info",
                    data: d5,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 4,
                        fillColor: "#80699B"
                    },
                    color: "#80699B"
                }
            ];

            $.plot("#open_findings", data, {
                series: {
                    stack: true,
                    bars: {
                        show: true,
                        barWidth: .9,
                        'align': "center",
                    },

                },
                grid: {
                    hoverable: false,
                    borderWidth: 1,
                    borderColor: '#e7e7e7',

                },
                tooltip: false,
                legend: {
                    show: false,
                    position: "ne"
                },
                xaxis: {
                    ticks: ticks,
                },

            });
        }
        ;
        function closed_findings() {
            var critical = 0;
            var high = 0;
            var medium = 0;
            var low = 0;
            var info = 0;
            var ticks = [
                [0, "Critical"], [1, "High"], [2, "Medium"], [3, "Low"], [4, "Info"]
            ];

            {% for f in closed_findings %}
                {% if f.severity == 'Critical' %}
                    critical += 1;
                {% elif f.severity == 'High' %}
                    high += 1;
                {% elif f.severity == 'Medium' %}
                    medium += 1;
                {% elif f.severity == 'Low' %}
                    low += 1;
                {% elif f.severity == 'Info' %}
                    info += 1;
                {% endif %}
            {% endfor %}

            var d1 = [
                [0, critical],
            ];
            var d2 = [
                [1, high],
            ];
            var d3 = [
                [2, medium],
            ];
            var d4 = [
                [3, low],
            ];
            var d5 = [
                [4, info],
            ];

            var data = [
                {
                    label: "Critical",
                    data: d1,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 1,
                        fillColor: "#d9534f"
                    },
                    color: "#d9534f"
                },
                {
                    label: "High",
                    data: d2,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 2,
                        fillColor: "#f0ad4e"
                    },
                    color: "#f0ad4e"
                },
                {
                    label: "Medium",
                    data: d3,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 3,
                        fillColor: "#f0de28"
                    },
                    color: "#f0de28"
                },
                {
                    label: "Low",
                    data: d4,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 4,
                        fillColor: "#337ab7"
                    },
                    color: "#337ab7"
                },
                {
                    label: "info",
                    data: d5,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 4,
                        fillColor: "#80699B"
                    },
                    color: "#80699B"
                }
            ];

            $.plot("#closed_findings", data, {
                series: {
                    stack: true,
                    bars: {
                        show: true,
                        barWidth: .9,
                        'align': "center",
                    },

                },
                grid: {
                    hoverable: false,
                    borderWidth: 1,
                    borderColor: '#e7e7e7',

                },
                tooltip: false,
                legend: {
                    show: false,
                    position: "ne"
                },
                xaxis: {
                    ticks: ticks,
                },

            });
        }
        ;
        function new_findings() {
            var critical = 0;
            var high = 0;
            var medium = 0;
            var low = 0;
            var info = 0;
            var ticks = [
                [0, "Critical"], [1, "High"], [2, "Medium"], [3, "Low"], [4, "Info"]
            ];

            {% for f in new_findings %}
                {% if f.severity == 'Critical' %}
                    critical += 1;
                {% elif f.severity == 'High' %}
                    high += 1;
                {% elif f.severity == 'Medium' %}
                    medium += 1;
                {% elif f.severity == 'Low' %}
                    low += 1;
                {% elif f.severity == 'Info' %}
                    info += 1;
                {% endif %}
            {% endfor %}

            var d1 = [
                [0, critical],
            ];
            var d2 = [
                [1, high],
            ];
            var d3 = [
                [2, medium],
            ];
            var d4 = [
                [3, low],
            ];
            var d5 = [
                [4, info],
            ];

            var data = [
                {
                    label: "Critical",
                    data: d1,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 1,
                        fillColor: "#d9534f"
                    },
                    color: "#d9534f"
                },
                {
                    label: "High",
                    data: d2,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 2,
                        fillColor: "#f0ad4e"
                    },
                    color: "#f0ad4e"
                },
                {
                    label: "Medium",
                    data: d3,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 3,
                        fillColor: "#f0de28"
                    },
                    color: "#f0de28"
                },
                {
                    label: "Low",
                    data: d4,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 4,
                        fillColor: "#337ab7"
                    },
                    color: "#337ab7"
                },
                {
                    label: "info",
                    data: d5,
                    bars: {
                        show: true,
                        fill: true,
                        lineWidth: 1,
                        order: 4,
                        fillColor: "#80699B"
                    },
                    color: "#80699B"
                }
            ];

            $.plot("#new_findings", data, {
                series: {
                    stack: true,
                    bars: {
                        show: true,
                        barWidth: .9,
                        'align': "center",
                    },

                },
                grid: {
                    hoverable: false,
                    borderWidth: 1,
                    borderColor: '#e7e7e7',

                },
                tooltip: false,
                legend: {
                    show: false,
                    position: "ne"
                },
                xaxis: {
                    ticks: ticks,
                },

            });
        }
        ;

        function open_close_weekly() {
            var opened = []
            var closed = []
            var accepted = []
            var ticks = []

            {% for week, values in open_close_weekly.items %}
                ticks.push([{{ forloop.counter0 }}, "{{ values.week|safe }}"])
                opened.push([{{ forloop.counter0 }}, {{ values.open }}])
                closed.push([{{ forloop.counter0 }}, {{ values.closed }}])
                accepted.push([{{ forloop.counter0 }}, {{ values.accepted }}])
            {% endfor %}

            var options = {
                xaxes: [{
                    ticks: ticks,
                }],
                yaxes: [{
                    min: 0
                }],
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    borderWidth: 1,
                    borderColor: '#e7e7e7'

                },
                tooltip: true
            };

            var plotObj = $.plot($("#open_close_weekly"), [{
                        data: opened,
                        label: " Opened",
                        color: "#d9534f"
                    }, {
                        data: closed,
                        label: " Closed",
                        color: '#f0ad4e'
                    }, {
                        data: accepted,
                        label: " Accepted",
                        color: '#80699B'
                    }],
                    options);
        }
        ;

        function severity_weekly() {
            var critical = []
            var high = []
            var medium = []
            var low = []
            var info = []
            var ticks = []

            {% for week, values in severity_weekly.items %}
                ticks.push([{{ forloop.counter0 }}, "{{ values.week|safe }}"]);
                critical.push([{{ forloop.counter0 }}, {{ values.Critical }}]);
                high.push([{{ forloop.counter0 }}, {{ values.High }}]);
                medium.push([{{ forloop.counter0 }}, {{ values.Medium }}]);
                low.push([{{ forloop.counter0 }}, {{ values.Low }}]);
                info.push([{{ forloop.counter0 }}, {{ values.Info }}]);
            {% endfor %}

            var options = {
                xaxes: [{
                    ticks: ticks,
                }],
                yaxes: [{
                    min: 0
                }],
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    borderWidth: 1,
                    borderColor: '#e7e7e7'

                },
                tooltip: true
            };

            var plotObj = $.plot($("#severity_weekly"), [{
                        data: critical,
                        label: " Critical",
                        color: "#d9534f"
                    }, {
                        data: high,
                        label: " High",
                        color: '#f0ad4e'
                    }, {
                        data: medium,
                        label: " Medium",
                        color: '#f0de28'
                    }, {
                        data: low,
                        label: " Low",
                        color: '#337ab7'
                    }, {
                        data: info,
                        label: " Info",
                        color: '#80699B'
                    }],
                    options);

        }
        ;

        function severity_counts_weekly() {
            var critical = []
            var high = []
            var medium = []
            var ticks = []

            {% for week, values in critical_weekly.items %}
                ticks.push([{{ forloop.counter0 }}, "{{ values.week|safe }}"]);
                critical.push([{{ forloop.counter0 }}, {{ values.count }}]);
            {% endfor %}
            {% for week, values in high_weekly.items %}
                ticks.push([{{ forloop.counter0 }}, "{{ values.week|safe }}"]);
                high.push([{{ forloop.counter0 }}, {{ values.count }}]);
            {% endfor %}
            {% for week, values in medium_weekly.items %}
                ticks.push([{{ forloop.counter0 }}, "{{ values.week|safe }}"]);
                medium.push([{{ forloop.counter0 }}, {{ values.count }}]);
            {% endfor %}

            var options = {
                xaxes: [{
                    ticks: ticks,
                }],
                yaxes: [{
                    min: 0
                }],
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    borderWidth: 1,
                    borderColor: '#e7e7e7'

                },
                tooltip: true
            };

            var plotObj = $.plot($("#severity_critical"), [{
                        data: critical,
                        label: " Critical",
                        color: "#d9534f"
                    }],
                    options);
            var plotObj = $.plot($("#severity_high"), [{
                        data: high,
                        label: " High",
                        color: "#f0ad4e"
                    }],
                    options);
            var plotObj = $.plot($("#severity_medium"), [{
                        data: medium,
                        label: " Medium",
                        color: "#f0de28"
                    }],
                    options);

        }
        ;

        function test_type() {

            var data = []
            {% for x, y in test_data.items %}
                {% if y > 0 %}
                    data.push(['{{x}}', {{ y }}]);
                {%  endif %}
            {% endfor %}

            $.plot('#test_type', [data], {
                series: {
                    stack: true,
                    bars: {
                        show: true,
                        barWidth: .7,
                        'align': "center",
                    },

                },
                grid: {
                    hoverable: false,
                    borderWidth: 1,
                    borderColor: '#e7e7e7',

                },
                tooltip: false,
                legend: {
                    show: false,
                    position: "ne"
                },
                xaxis: {
                    mode: "categories",
                    tickLength: 4
                },

            });
        }

        function _draw_vulnerabilities_graph(tag, data) {
            $.plot(tag, [data], {
                series: {
                    stack: true,
                    bars: {
                        show: true,
                        barWidth: .7,
                        'align': "center"
                    }
                },
                grid: {
                    hoverable: false,
                    borderWidth: 1,
                    borderColor: '#e7e7e7'
                },
                tooltip: false,
                legend: {
                    show: false,
                    position: "ne"
                },
                xaxis: {
                    mode: "categories",
                    tickLength: 4
                }
            });
        }

        function open_vulnerabilities() {
            var data = [];
            {% for x in open_vulnerabilities %}
                data.push(['CWE-{{x.cwe}}', {{x.count}}]);
            {% endfor %}

            _draw_vulnerabilities_graph("#open_vulnerabilities", data);
        }

        function all_vulnerabilities() {
            var data = [];
            {% for x in all_vulnerabilities %}
                data.push(['CWE-{{x.cwe}}', {{x.count}}]);
            {% endfor %}

            _draw_vulnerabilities_graph("#all_vulnerabilities", data);
        }

        function finding_age() {
            var data = {};
            var data_1 = []
            var ticks = []
            {% for f in verified_findings %}
                if (data[{{ f.age }}]) {
                    data[{{ f.age }}] += 1
                }
                else {
                    data[{{ f.age }}] = 1
                }
            {% endfor %}
            var i = 0;
            $.each(data, function (index, value) {
                if (value > 0) {
                    data_1.push([i, value]);
                    ticks.push([i, index])
                }
                i++;
            });


            var dataset = [
                {data: data_1, color: "#337ab7", fillColor: "#337ab7"}
            ];

            var options = {
                series: {
                    bars: {
                        show: true,
                        fill: true,
                        fillColor: "#337ab7"
                    }
                },
                bars: {
                    align: "center",
                    barWidth: 0.5
                },
                xaxis: {
                    axisLabel: "Days Open",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial',
                    axisLabelPadding: 10,
                    ticks: ticks,
                },
                yaxis: {
                    axisLabel: "Number of Findings",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial',
                    axisLabelPadding: 3,
                },
                legend: {
                    show: false,
                },
                grid: {
                    borderWidth: 1,
                    borderColor: '#e7e7e7',
                }
            };


            $.plot("#finding_age", dataset, options);
        }

        {%  if punchcard %}

            punchcard("#punchcard", {{ punchcard|safe }}, {{ ticks|safe }});

        {%  endif %}


    </script>
{% endblock %}