google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    function getRandomData() {
        var data = [["Element", "All", "Malicious"]];
        for (var i = 0; i < 18; i++) {
            var value1 = Math.floor(Math.random() * 4); // Random value between 5 and 8
            var value2 = Math.floor(Math.random() * 4); // Random value between 5 and 8
            data.push(["192.166.4." + (i + 2), value1, value2]);
        }
        return data;
    }

    function drawDynamicChart() {
        var deviceId = localStorage.getItem('deviceId');
        var data = google.visualization.arrayToDataTable(deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi' ? getRandomData() : getDefaultData());

        var options = {
            title: "Number of all outgoing request",
            // bar: { groupWidth: "95%" },
            bar: { 
                groupWidth: "70%" // Adjust the space between bars
            },
            legend: { position: "none" },
            backgroundColor: '#0c212b',
            tooltip: { trigger: 'none' },
            isStacked: true,
            colors: ['#5589A9', '#54A892'],
            hAxis: {
                   viewWindow: {
                    min: 0,
                    max: 100
                }
            },
        };

        var chart = new google.visualization.BarChart(document.getElementById("chart_div"));
        chart.draw(data, options);
    }

    function getDefaultData() {
        var data = [["Element", "All", "Malicious"]];
        for (var i = 0; i < 14; i++) {
            data.push(["192.166.4." + (i + 2), 0, 0]);
        }
        return data;
    }

    // Initial draw
    drawDynamicChart();

    // Update chart every second
    setInterval(function () {
        drawDynamicChart();
    }, 1000);
    $(document).on('click', function() {
        drawDynamicChart();
    });
}