pinglerr/pinglerr_web/public/static/js/scan_history_details.js

var chartOptions = {
    colors:['#008ffb', '#f08681'],
    series: [
        {
            name: 'Ping',
            data: [null]
        },
        {
            name: 'Pakke Tap',
            type: 'area',
            data: [null]
        }
    ],
    chart: {
        height: '300',
        id: 'chart',
        type: 'area',
        animations: {
            enabled: false,
        },
        toolbar: {
            show: true 
        },
        zoom: {
            enabled: true 
        },
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'straight'
    },
    markers: {
        size: 0
    },
    xaxis: {
        type: 'datetime',
        labels: {
            datetimeUTC: false,
        },
    },
    yaxis: [
        {
            seriesName: 'Ping',
            labels: {
                formatter: function (val) {
                    if (val == null) {
                        return 0;
                    }
                    return val.toFixed(1);
                },
            }
        },
        {
            seriesName: 'Pakke Tap',
            min:0,
            max:100,
            opposite: true,
            
            labels: {
                formatter: function (val) {
                    if (val == null) {
                        return 0 + '%';
                    }
                    return val.toFixed(0) + "%";
                },
            }
        }
    ],
    legend: {
        show: false
    },
};

var brushChartOptions = {
    colors:['#008ffb', '#f08681'],
    series: [
        {
            name: 'Ping',
            data: [1]
        },
        {
            name: 'Pakke Tap',
            type: 'area',
            data: [1]
        }
    ],
    chart: {
        height: '100',
        id: 'brushChart',
        type: 'area',
        brush:{
            target: 'chart',
            enabled: true
        },
        animations: {
            enabled: false,
        },
        toolbar: {
            show: false,
        },
        zoom: {
            enabled: false 
        },
        selection: {
            enabled: true,
        },
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: 'straight'
    },
    markers: {
        size: 0
    },
    xaxis: {
        type: 'datetime',
        labels: {
            datetimeUTC: false,
        },
    },
    yaxis: [
        {
            seriesName: 'Ping',
            labels: {
                formatter: function (val) {
                    if (val == null) {
                        return 0;
                    }
                    return val.toFixed(1);
                },
            }
        },
        {
            seriesName: 'Pakke Tap',
            min:0,
            max:100,
            opposite: true,
            
            labels: {
                formatter: function (val) {
                    if (val == null) {
                        return 0 + '%';
                    }
                    return val.toFixed(0) + "%"
                },
            }
        }
    ],
    legend: {
        show: false
    },
};

const queryParam = new Proxy(new URLSearchParams(window.location.search), {
    get: (searchParams, prop) => searchParams.get(prop),
});

document.body.onload = async function() {
    chartElement = new ApexCharts(document.querySelector("#chartElement"), chartOptions);
    chartElement.render();

    brushChartElement = new ApexCharts(document.querySelector("#brushChartElement"), brushChartOptions);
    brushChartElement.render();

    var statsResponse = await fetch('./?p=api_stats&scan_id=' + queryParam.scan_id);

    if (statsResponse.status != 200) {
        alert('Feil under henting av statistikk');
    }

    let chartResponse = await fetch('./?p=api_chart&limit_length=1000&scan_id=' + queryParam.scan_id);

    if (chartResponse.status != 200) {
        alert('Feil under henting av graf data');
    }

    let jsonResponse = await chartResponse.json();
    let newPingSeries = [];

    jsonResponse.pings.forEach(ping => {
        let newDate = new Date(ping.date_added + ' UTC');
        newPingSeries.push({ x: newDate.toString(), y: ping.ping_avg});
    });

    let chartPacketLossSeries = [];
    jsonResponse.pings.forEach(ping => {
        let newDate = new Date(ping.date_added + ' UTC');
        if (ping.pkt_transmitted != ping.pkt_received) {
            let pktLossPercentage = ping.pkt_received / ping.pkt_transmitted * 100;
            pktLossPercentage = 100 - pktLossPercentage;
            chartPacketLossSeries.push({ x: newDate.toString(), y: pktLossPercentage});
        } else {
            chartPacketLossSeries.push({ x: newDate.toString(), y: 0});
        }
    });

    chartElement.updateSeries([
        {
            name: 'Ping',
            data: newPingSeries
        },
        {
            name: 'Pakke Tap',
            data: chartPacketLossSeries 
        }
    ]);

    brushChartElement.updateSeries([
        {
            name: 'Ping',
            data: newPingSeries
        },
        {
            name: 'Pakke Tap',
            data: chartPacketLossSeries 
        }
    ]);
}