vulnerablecode-insights-dashboard/dashboard.html at main · AjayKumar0403/vulnerablecode-insights-dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>

<head>
    <title>Vulnerability Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>

    <h2 style="text-align:center;">Vulnerabilities Per Year</h2>

    <div style="width:400px; height:300px; margin:auto;">
        <canvas id="yearChart"></canvas>
    </div>

    <h2 style="text-align:center;">Severity Distribution</h2>

    <div style="width:400px; height:300px; margin:auto;">
        <canvas id="severityChart"></canvas>
    </div>

    <script>
        // 📊 Chart 1: Vulnerabilities per year
        fetch('/api/insights/vulnerabilities-per-year/')
            .then(res => res.json())
            .then(data => {
                const labels = Object.keys(data);
                const values = Object.values(data);

                new Chart(document.getElementById('yearChart'), {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Vulnerabilities',
                            data: values
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
            });


        // 📊 Chart 2: Severity distribution
        fetch('/api/insights/severity/')
            .then(res => res.json())
            .then(data => {
                const labels = Object.keys(data);
                const values = Object.values(data);

                new Chart(document.getElementById('severityChart'), {
                    type: 'pie',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Severity',
                            data: values
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
            });

    </script>

</body>

</html>