{% extends "base.html" %} {% block title %} Home{% endblock %} 
{% block content %}

        <!-- Begin Page Content -->
        <div class="container-fluid">

          <!-- Page Heading -->
          <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Home</h1><hr>
            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm" onclick="window.print();" style="background-color: #faaa3c;color:#262626;"><i class="fas fa-print fa-sm" style="color:#262626;"></i> Print dashboard</a>
          </div>

          <!-- Content Row -->
          <div class="row">

            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
              <div class="card border-bottom-info shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Low</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">{{low}}</div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-info-circle fa-2x text-info-300" style="color:#36b9cc;"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
              <div class="card border-bottom-warning shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Medium</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">{{medium}}</div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-bullhorn fa-2x" style="color:#f6c23e;"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
              <div class="card border-bottom-danger shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">High</div>
                      <div class="row no-gutters align-items-center">
                        <div class="col-auto">
                          <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{high}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-exclamation-triangle fa-2x" style="color:#e74a3b;"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Pending Requests Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
              <div class="card border-bottom-dark shadow h-100 py-2">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-dark text-uppercase mb-1">Critical</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">{{critical}}</div>
                    </div>
                    <div class="col-auto">
                      <i class="fas fa-bomb fa-2x" style="color:#5a5c69;"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
         <div class="row">
            <div class="col-lg-6">
              <div class="card mb-4 py-3 border-left-secondary">
                <div class="card-body">
                  <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-dark text-uppercase mb-1">Referenced products</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">{{product_number}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="card mb-4 py-3 border-left-dark">
                <div class="card-body">
                   <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                      <div class="text-xs font-weight-bold text-dark text-uppercase mb-1">High Risk Products</div>
                      <div class="h5 mb-0 font-weight-bold text-gray-800">{{high_risk_product_number}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
         </div>

        <div class="row">
            <div class="col-xl-4 col-lg-5">
              <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-gray-800">Vulnerabilities management status</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                  <div class="chart-pie pt-4 pb-2">
                    <canvas id="myPieChart"></canvas>
                  </div>
                  <div class="mt-4 text-center small">
                    <span class="mr-2">
                      <i class="fas fa-circle text-warning"></i> Read
                    </span>
                    <span class="mr-2">
                      <i class="fas fa-circle text-danger"></i> Unread
                    </span>
                    <span class="mr-2">
                      <i class="fas fa-circle text-success"></i> Corrected
                    </span>
                    <span class="mr-2">
                      <i class="fas fa-circle text-secondary"></i> False positive
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-8 col-lg-7">
              <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                  <h6 class="m-0 font-weight-bold text-gray-800">Evolution of vulnerability detection</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                  <div class="chart-area">
                    <canvas id="myAreaChart"></canvas>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <!-- /.container-fluid -->

      </div></div>
      <!-- End of Main Content -->

{% endblock %}

{% block js %}
    {{ super() }}
    <!-- Page level plugins -->
    <script src="{{ url_for('static', filename='vendor/chart.js/Chart.min.js')}}"></script>
    <!-- Page level custom scripts -->
    <script>Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Unread ", "Read ", "Corrected ", "False positive "],
    datasets: [{
      data: [{{unread}},{{read}},{{corrected}},{{falsep}}],
      backgroundColor: ['#e74a3b', '#f6c23e', '#1cc88a', '#858796'],
      hoverBackgroundColor: ['#e74a3b', '#f6c23e', '#1cc88a', '#858796'],
      hoverBorderColor: "rgba(234, 236, 244, 1)",
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
    },
    legend: {
      display: false
    },
    cutoutPercentage: 80,
  },
});
// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

function number_format(number, decimals, dec_point, thousands_sep) {
  // *     example: number_format(1234.56, 2, ',', ' ');
  // *     return: '1 234,56'
  number = (number + '').replace(',', '').replace(' ', '');
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
      var k = Math.pow(10, prec);
      return '' + Math.round(n * k) / k;
    };
  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
  }
  return s.join(dec);
}

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["{{months[0]}}","{{months[1]}}","{{months[2]}}","{{months[3]}}","{{months[4]}}","{{months[5]}}"],
    datasets: [{
      label: "CVE : ",
      lineTension: 0.3,
      backgroundColor: "rgba(250, 170, 60, 0.05)",
      borderColor: "rgba(250, 170, 60, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(250, 170, 60, 1)",
      pointBorderColor: "rgba(250, 170, 60, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(250, 170, 60, 1)",
      pointHoverBorderColor: "rgba(250, 170, 60, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
      data: ["{{months_data[0]}}","{{months_data[1]}}","{{months_data[2]}}","{{months_data[3]}}","{{months_data[4]}}","{{months_data[5]}}"],
    }],
  },
  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 10,
        right: 25,
        top: 25,
        bottom: 0
      }
    },
    scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 5,
          padding: 10,
          // Include a dollar sign in the ticks
          callback: function(value, index, values) {
            return number_format(value);
          }
        },
        gridLines: {
          color: "rgb(234, 236, 244)",
          zeroLineColor: "rgb(234, 236, 244)",
          drawBorder: false,
          borderDash: [2],
          zeroLineBorderDash: [2]
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      intersect: false,
      mode: 'index',
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + number_format(tooltipItem.yLabel);
        }
      }
    }
  }
});

</script>
{% endblock %}