{% extends 'layouts/master-page' %}
{% block title %}Ivulncheck{% endblock %}
{% block head %}
 <!-- css -->
  <style>

    .arc text {
      font: 15px sans-serif;
      text-color: white;
      text-anchor: middle;
    }

    .arc path {
      stroke: #fff;
    }

  </style>
  <!-- javascript -->

{% endblock %}
{% block content %}
<div id='stats' class="well well-small">
    <h3>Global stats</h3>
    <div class="row">
        <div class="col-sm-6 col-xs-6">
            <h4 class="text-center"><a href="vulns">Vulns</a></h4>
            <svg id="pie1" class="center-block" width="430" height="250"></svg>
            <table id="v_datas" class="table table-hover table-striped">
              <thead>
                <tr class="warning">
                  <td>Total Vulns</td><td>Unknown</td><td>Negligible</td><td>Low</td><td>Medium</td><td>High</td><td>Critical</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{v_stats['nb_unknown'] + v_stats['nb_negligible'] + v_stats['nb_low'] + v_stats['nb_medium'] + v_stats['nb_high'] + v_stats['nb_critical'] }}</td><td>{{ v_stats['nb_unknown'] }}</td><td>{{ v_stats['nb_negligible'] }}</td><td>{{ v_stats['nb_low'] }}</td><td>{{v_stats['nb_medium']}}</td><td>{{v_stats['nb_high']}}</td><td>{{v_stats['nb_critical']}}</td>
                </tr>
              </tbody>
            </table>
        </div>
        <div class="col-sm-6 hidden-xs">
            <h4 class="text-center"><a href="fixes">Fixes</a></h4>
            <svg id="pie2" class="center-block" width="430" height="250"></svg>
            <table id="f_datas" class="table table-hover table-striped">
              <thead>
                <tr class="warning">
                  <td>Total Fixes</td><td>Unknown</td><td>Negligible</td><td>Low</td><td>Medium</td><td>High</td><td>Critical</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{f_stats['nb_unknown'] + f_stats['nb_negligible'] + f_stats['nb_low'] + f_stats['nb_medium'] + f_stats['nb_high'] + f_stats['nb_critical'] }}</td><td>{{ f_stats['nb_unknown'] }}</td><td>{{ f_stats['nb_negligible']}}</td><td>{{ f_stats['nb_low'] }}</td><td>{{f_stats['nb_medium']}}</td><td>{{f_stats['nb_high']}}</td><td>{{f_stats['nb_critical']}}</td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="/static/js/vendors/d3.js"></script>
    <script>
        //~ PIE 1 VULNS
        var svg1 = d3.select("svg#pie1"),
            width1 = +svg1.attr("width"),
            height1 = +svg1.attr("height"),
            radius1 = Math.min(width1, height1) / 2,
            g1 = svg1.append("g").attr("transform", "translate(" + width1 / 2 + "," + height1 / 2 + ")");

        // scaleOrdinal is not available in 3.5.16
        function color(key) {
            if (key == "Unknown") {
                return "#848484";
            }
            else if (key == "Negligible") {
                return "#3B993B";
            }
            else if (key == "Low") {
                return "#E3E34A";
            }
            else if (key == "Medium") {
                return "#FF8C00";
            }
            else if (key == "High") {
                return "#CC3333";
            }
            else if (key == "Critical") {
                return "#000000";
            }
        }
    
        // For retrocompatibility
        if (typeof d3.pie !== "undefined") { 
            var pie1 = d3.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }
        else {
            var pie1 = d3.layout.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }


        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var path1 = d3.arc()
                .outerRadius(radius1 - 10)
                .innerRadius(0);
        }
        else {
            var path1 = d3.svg.arc()
                .outerRadius(radius1 - 10)
                .innerRadius(0);
        }
        
        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var label1 = d3.arc()
                .outerRadius(radius1 - 40)
                .innerRadius(radius1 - 40);
        }
        else {
            var label1 = d3.svg.arc()
                .outerRadius(radius1 - 40)
                .innerRadius(radius1 - 40);
        }
                    
        var data1 = [{type:"Unknown",number:{{v_stats['nb_unknown']}}},
                    {type:"Negligible",number:{{v_stats['nb_negligible']}}},
                    {type:"Low",number:{{v_stats['nb_low']}}},
                    {type:"Medium",number:{{v_stats['nb_medium']}}},
                    {type:"High",number:{{v_stats['nb_high']}}},
                    {type:"Critical",number:{{v_stats['nb_critical']}}}];

          var arc1 = g1.selectAll(".arc")
            .data(pie1(data1))
            .enter().append("g")
              .attr("class", "arc");

          arc1.append("path")
              .attr("d", path1)
              .attr("fill", function(d) { return color(d.data.type); });

          arc1.append("text")
              .attr("transform", function(d) { return "translate(" + label1.centroid(d) + ")"; })
              .attr("dy", "0.35em")
              .text(function(d) { if (d.data.number != 0) return d.data.type; });
        //~ });
        //~ PIE 2 FIXES
        var svg2 = d3.select("svg#pie2"),
            width2 = +svg2.attr("width"),
            height2 = +svg2.attr("height"),
            radius2 = Math.min(width2, height2) / 2,
            g2 = svg2.append("g").attr("transform", "translate(" + width2 / 2 + "," + height2 / 2 + ")");

        // For retrocompatibility
        if (typeof d3.pie !== "undefined") { 
            var pie2 = d3.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }
        else {
            var pie2 = d3.layout.pie()
                .sort(null)
                .value(function(d) { return d.number; });
        }


        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var path2 = d3.arc()
                .outerRadius(radius2 - 10)
                .innerRadius(0);
        }
        else {
            var path2 = d3.svg.arc()
                .outerRadius(radius2 - 10)
                .innerRadius(0);
        }
        
        // For retrocompatibility
        if (typeof d3.arc !== "undefined") { 
            var label2 = d3.arc()
                .outerRadius(radius2 - 40)
                .innerRadius(radius2 - 40);
        }
        else {
            var label2 = d3.svg.arc()
                .outerRadius(radius2 - 40)
                .innerRadius(radius2 - 40);
        }

                    
        var data2 = [{type:"Unknown",number:{{f_stats['nb_unknown']}}},
                    {type:"Negligible",number:{{f_stats['nb_negligible']}}},
                    {type:"Low",number:{{f_stats['nb_low']}}},
                    {type:"Medium",number:{{f_stats['nb_medium']}}},
                    {type:"High",number:{{f_stats['nb_high']}}},
                    {type:"Critical",number:{{f_stats['nb_critical']}}}];


          var arc2 = g2.selectAll(".arc")
            .data(pie2(data2))
            .enter().append("g")
              .attr("class", "arc");

          arc2.append("path")
              .attr("d", path2)
              .attr("fill", function(d) { return color(d.data.type); });

          arc2.append("text")
              .attr("transform", function(d) { return "translate(" + label2.centroid(d) + ")"; })
              .attr("dy", "0.35em")
              .text(function(d) { if (d.data.number != 0) return d.data.type; });

    </script>
  </div>
  <div id='stats' class="well well-small">
      <h4 class="text-center"><a href="hosts">All Hosts</a></h4>
  {% include 'subpages/hosts_table.html' %}
  </div>
  
{% endblock %}
