vulnerability scan summary

dashboard/templates/dashboard/index.html

@@ -9,6 +9,7 @@ Dashboard
 {% block custom_js_css_link %}
 <link href="{% static 'assets/css/dashboard/dash_1.css' %}" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" type="text/css" href="{% static 'assets/css/elements/alert.css' %}">
+<link href="{% static 'plugins/apex/apexcharts.css' %}" rel="stylesheet" type="text/css">
 {% endblock custom_js_css_link %}
 
 {% block breadcrumb_title %}
@@ -95,6 +96,20 @@ Dashboard
             </div>
         </div>
     </div>
+    <div class="row layout-top-spacing">
+
+        <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 layout-spacing">
+            <div class="widget widget-chart-two">
+                <div class="widget-heading">
+                    <h5 class="">Vulnerability Scan Summary</h5>
+                </div>
+
+                <div class="widget-content">
+                    <div id="vulnerability-chart" class=""></div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="row layout-top-spacing">
 
         <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 layout-spacing">
@@ -217,5 +232,113 @@ Dashboard
 
 
 {% block page_level_script %}
+<script src="{% static 'plugins/apex/apexchart.min.js' %}"></script>
+<script type="text/javascript">
+// apex charts for vulnerability summary
+var options = {
+    chart: {
+        type: 'donut',
+        width: 380
+    },
+    colors: ['#D50000', '#F44336', '#FF6D00', '#FFD600', '#2962FF'],
+    dataLabels: {
+        enabled: false
+    },
+    legend: {
+        position: 'bottom',
+        horizontalAlign: 'center',
+        fontSize: '14px',
+        markers: {
+            width: 10,
+            height: 10,
+        },
+        itemMargin: {
+            horizontal: 0,
+            vertical: 8
+        }
+    },
+    plotOptions: {
+        pie: {
+            donut: {
+                size: '65%',
+                background: 'transparent',
+                labels: {
+                    show: true,
+                    name: {
+                        show: true,
+                        fontSize: '29px',
+                        fontFamily: 'Nunito, sans-serif',
+                        color: undefined,
+                        offsetY: -10
+                    },
+                    value: {
+                        show: true,
+                        fontSize: '26px',
+                        fontFamily: 'Nunito, sans-serif',
+                        color: '20',
+                        offsetY: 16,
+                        formatter: function (val) {
+                            return val
+                        }
+                    },
+                    total: {
+                        show: true,
+                        showAlways: true,
+                        label: 'Total',
+                        color: '#888ea8',
+                        formatter: function (w) {
+                            return w.globals.seriesTotals.reduce( function(a, b) {
+                                return a + b
+                            }, 0)
+                        }
+                    }
+                }
+            }
+        }
+    },
+    stroke: {
+        show: true,
+        width: 25,
+    },
+    series: [10,20,40,40,50],
+    labels: ['Critical', 'High', 'Medium', 'Low', 'Info'],
+    responsive: [{
+        breakpoint: 1599,
+        options: {
+            chart: {
+                width: '350px',
+                height: '400px'
+            },
+            legend: {
+                position: 'bottom'
+            }
+        },
 
+        breakpoint: 1439,
+        options: {
+            chart: {
+                width: '250px',
+                height: '390px'
+            },
+            legend: {
+                position: 'bottom'
+            },
+            plotOptions: {
+                pie: {
+                    donut: {
+                        size: '65%',
+                    }
+                }
+            }
+        },
+    }]
+}
+
+var chart = new ApexCharts(
+    document.querySelector("#vulnerability-chart"),
+    options
+);
+
+chart.render();
+</script>
 {% endblock page_level_script %}