-
Notifications
You must be signed in to change notification settings - Fork 3
/
dashboard.html
114 lines (106 loc) · 3.92 KB
/
dashboard.html
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>RansomWatch Dashboard</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<style>
body {
font-family: 'Roboto';font-size: 22px;
background-color: #111111;
color:white;
}
.active {
background-color: #4caf50;
color: white;
}
/* Dashboard container */
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
border: 0px solid black;
background-color: #111111;
padding:0px;
}
.grid-item {
background-color: #111111;
border: 0px solid black;
padding: 0px;
text-align: center;
width: 100%;
min-height: 325px;
}
</style>
</head>
<body>
<h3 style="text-align:center;">Ransomware Leak Site Trends</h3>
<div align="center">
<button class="active" id="7day_option">7 Day View</button>
<button id="14day_option">14 Day View</button>
<button id="30day_option">30 Day View</button>
</div>
</h4>
<!-- Dashboard container -->
<div class="grid-container">
<!-- First plot -->
<iframe src="density_heatmap_7.html" id="density" class="grid-item" ></iframe>
<!-- Second plot -->
<iframe src="scatter_plot_7.html" id="scatter" class="grid-item"></iframe>
<!-- Third plot -->
<iframe src="pie_chart_7.html" id="pie" class="grid-item"></iframe>
<!-- Fourth plot -->
<iframe src="bar_chart_7.html" id="bar" class="grid-item"></iframe>
</div>
<!-- JavaScript to change the iframe source on click -->
<script>
// Get the dropdown menu and the iframe
var iframe1 = document.getElementById('density');
var iframe2 = document.getElementById('scatter');
var iframe3 = document.getElementById('pie');
var iframe4 = document.getElementById('bar');
// Get the options in the dropdown menu
var option1 = document.getElementById('7day_option');
var option2 = document.getElementById('14day_option');
var option3 = document.getElementById('30day_option');
// Add an event listener to the first option
option1.addEventListener('click', function() {
// Update the iframe source to the selected value
iframe1.src = "density_heatmap_7.html"
iframe2.src = "scatter_plot_7.html"
iframe3.src = "pie_chart_7.html"
iframe4.src = "bar_chart_7.html"
// Add the "active" class to the button
this.classList.add('active');
// Remove the "active" class from the other buttons
option2.classList.remove('active');
option3.classList.remove('active');
});
// Add an event listener to the second option
option2.addEventListener('click', function() {
// Update the iframe source to the selected value
iframe1.src = "density_heatmap_14.html"
iframe2.src = "scatter_plot_14.html"
iframe3.src = "pie_chart_14.html"
iframe4.src = "bar_chart_14.html"
// Add the "active" class to the button
this.classList.add('active');
// Remove the "active" class from the other buttons
option1.classList.remove('active');
option3.classList.remove('active');
});
// Add an event listener to the third option
option3.addEventListener('click', function() {
// Update the iframe source to the selected value
iframe1.src = "density_heatmap_30.html"
iframe2.src = "scatter_plot_30.html"
iframe3.src = "pie_chart_30.html"
iframe4.src = "bar_chart_30.html"
// Add the "active" class to the button
this.classList.add('active');
// Remove the "active" class from the other buttons
option2.classList.remove('active');
option1.classList.remove('active');
});
</script>
</body>
</html>