50 lines
2.0 KiB
JavaScript
50 lines
2.0 KiB
JavaScript
let benignCount = [100, 100, 50, 40];
|
|
let maliciuosCount = [0, 0, 50, 60];
|
|
let benignValue = 100;
|
|
let maliciuosValue = 0;
|
|
|
|
const spans = document.querySelectorAll('.tabNetworkData span');
|
|
const displayDurations = [2000, 1000, 2000, 3000];
|
|
function cycleSpans() {
|
|
spans.forEach(span => span.style.display = 'none');
|
|
let currentIndex = 0;
|
|
google.charts.load('current', { 'packages': ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawChart)
|
|
function drawChart() {
|
|
var data = google.visualization.arrayToDataTable([
|
|
['Task', 'Hours per Day'],
|
|
['Maliciuos', maliciuosValue],
|
|
['Benign', benignValue],
|
|
]);
|
|
var options = {
|
|
title: 'The percentage of Benign and Maliciuos Request in dataset',
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' },
|
|
colors: ['#546DA8', '#54A3A8']
|
|
};
|
|
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
|
|
chart.draw(data, options);
|
|
}
|
|
function showNextSpan() {
|
|
spans.forEach(span => span.style.display = 'none');
|
|
spans[currentIndex].style.display = 'inline';
|
|
setTimeout(() => {
|
|
currentIndex = (currentIndex + 1) % spans.length;
|
|
benignValue = benignCount[currentIndex];
|
|
maliciuosValue = maliciuosCount[currentIndex];
|
|
if (currentIndex == 2 || currentIndex == 3) {
|
|
document.getElementById("firstTab").style.borderColor = '#FF5339';
|
|
document.getElementsByClassName("attackMode")[0].style.display = 'block';
|
|
} else {
|
|
document.getElementById("firstTab").style.borderColor = 'transparent'
|
|
document.getElementsByClassName("attackMode")[0].style.display = 'none';
|
|
}
|
|
drawChart();
|
|
showNextSpan();
|
|
}, displayDurations[currentIndex]);
|
|
}
|
|
showNextSpan();
|
|
}
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
cycleSpans();
|
|
}); |