Zoraxy/web/components/stats.html

<script src="./script/useragent.js"></script>
<div class="standardContainer">
    <div class="ui basic segment">
        <h2>Statistical Analysis</h2>
        <p>Statistic of your server in every aspects</p>
    </div>
    <div class="ui divider"></div>
    <div class="ui basic segment">
        <!-- Client Geolocation Analysis-->
        <h3>Visitors Countries</h3>
        <p>Distributions of visitors by country code. Access origin are estimated using open source GeoIP database and might not be accurate.</p>
        <div style="min-height: 400px;">
            <canvas id="stats_visitors"></canvas>
        </div>
        <div class="ui divider"></div>
        <!-- Client IP Analysis -->
        <div class="ui stackable grid">
            <div class="eight wide column">
                <h3>Request Client IP Versions</h3>
                <p>The version of Internet Protocol that the client is using. If the request client is pass through a DNS proxy like CloudFlare, 
                    the CloudFlare proxy server address will be filtered and only the first value in the RemoteAddress field will be analysised.</p>
                <div>
                    <canvas id="stats_ipver"></canvas>
                </div>
            </div>
            <div class="eight wide column">
                <h3>Request Origin Counts</h3>
                <p>Top 25 request origin sorted by request count</p>
                <div style="height: 500px; overflow-y: auto;">
                    <table class="ui unstackable striped celled table">
                        <thead>
                          <tr>
                            <th>Request Origin</th>
                            <th>No of Requests</th>
                        </tr></thead>
                        <tbody id="stats_requestCountlist">
                         
                        </tbody>
                    </table>
                </div>
                
            </div>
        </div>
        <div class="ui divider"></div>
        <!-- Client Device Analysis -->
        <div class="ui stackable grid">
            <div class="eight wide column">
                <h3>Client Devices</h3>
                <p>Device type analysis by its request interactions.The number of iteration count does not means the number unique device, as no cookie is used to track the devices identify.</p>
                <div>
                    <canvas id="stats_device"></canvas>
                </div>
            </div>
            <div class="eight wide column">
                <h3>Client OS</h3>
                <p>The OS where your client is using. Estimated using the UserAgent header sent by the client browser while requesting a resources from one of your host.</p>
                <div>
                    <canvas id="stats_OS"></canvas>
                </div>
            </div>
        </div>
        
    </div>
    <button class="ui icon right floated basic button" onclick="initStatisticSummery();"><i class="green refresh icon"></i> Refresh</button>
    <br><br>
</div>
<script>
   function initStatisticSummery(){
        $.getJSON("./example.json", function(data){
            //Render visitor data
            renderVisitorChart(data.RequestOrigin);

            //Render IP versions
            renderIPVersionChart(data.RequestClientIp);

            //Render user agent analysis
            renderUserAgentCharts(data.UserAgent);
        });
   }
   initStatisticSummery();


  

    function renderUserAgentCharts(userAgentsEntries){
        let userAgents = Object.keys(userAgentsEntries);
        
        let mobileUser = 0;
        let desktopUser = 0;
        let osTypes = {};
        //Statistics collector
        userAgents.forEach(function(thisUA){
           var uaInfo = parseUserAgent(thisUA);
           if (uaInfo.isMobile){
                mobileUser+=userAgentsEntries[thisUA];
           }else{
                desktopUser+=userAgentsEntries[thisUA];
           }

           let currentNo = osTypes[uaInfo.os];
           if (currentNo == undefined){
                osTypes[uaInfo.os] = userAgentsEntries[thisUA];
           }else{
                osTypes[uaInfo.os] = currentNo + userAgentsEntries[thisUA]
           }
        });

        //Create the device chart
        let deviceTypeChart = new Chart(document.getElementById("stats_device"), {
            type: 'pie',
            data: {
                labels: ['Desktop', 'Mobile'],
                datasets: [{
                    data: [desktopUser, mobileUser],
                    backgroundColor: ['#e56b5e', '#6eb9c1'],
                    hoverBackgroundColor: ['#e56b5e', '#6eb9c1']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
            }
        });

        //Create the OS chart
        let OSnames = [];
        let OSCounts = [];
        let OSColors = [];
        for (const [key, value] of Object.entries(osTypes)) {
            OSnames.push(key);
            OSCounts.push(value);
            OSColors.push(getOSColorCode(key));
        }
    
        let osTypeChart = new Chart(document.getElementById("stats_OS"), {
            type: 'pie',
            data: {
                labels: OSnames,
                datasets: [{
                    data: OSCounts,
                    backgroundColor: OSColors,
                    hoverBackgroundColor: OSColors
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
            }
        });

        console.log(osTypes);
    }

    //Generate the IPversion pie chart
    function renderIPVersionChart(RequestClientIp){
        let ipv4Count = Object.keys(RequestClientIp).filter(ip => ip.includes('.')).length;
        let ipv6Count = Object.keys(RequestClientIp).filter(ip => ip.includes(':')).length;
        let totalCount = ipv4Count + ipv6Count;
        let ipv4Percent = ((ipv4Count / totalCount) * 100).toFixed(2);
        let ipv6Percent = ((ipv6Count / totalCount) * 100).toFixed(2);

        // Create the chart data object
        let chartData = {
            labels: ['IPv4', 'IPv6'],
            datasets: [{
                data: [ipv4Percent, ipv6Percent],
                backgroundColor: ['#9295f0', '#bff092'],
                hoverBackgroundColor: ['#9295f0', '#bff092']
            }]
        };

        // Create the chart options object
        let ipvChartOption = {
            responsive: true,
            maintainAspectRatio: false,
        };

        // Create the pie chart
        let ipTypeChart = new Chart(document.getElementById("stats_ipver"), {
            type: 'pie',
            data: chartData,
            options: ipvChartOption
        });

        //Populate the request count table
        let requestCounts = Object.entries(RequestClientIp);

        // Sort the array by the value (count)
        requestCounts.sort((a, b) => b[1] - a[1]);

        // Select the table body and empty it
        let tableBody = $('#stats_requestCountlist');
        tableBody.empty();

        // Loop through the sorted array and add the top 25 requested IPs to the table
        for (let i = 0; i < 25 && i < requestCounts.length; i++) {
            let [ip, count] = requestCounts[i];
            let row = $('<tr>').appendTo(tableBody);
            $('<td style="word-break: break-all;">').text(ip).appendTo(row);
            $('<td>').text(count).appendTo(row);
        }
    }

    //Generate a fixed color code from string hash
    function generateColorFromHash(stringToHash){
        let hash = 0;
        for (let i = 0; i < stringToHash.length; i++) {
            hash = stringToHash.charCodeAt(i) + ((hash << 5) - hash);
        }
        const hue = hash % 300;
        const saturation = Math.floor(Math.random() * 20) + 70;
        const lightness = Math.floor(Math.random() * 20) + 60;
        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
    }

    //Generate the visitor country pie chart    
   function renderVisitorChart(visitorData){
        // Extract the labels and data from the visitor data object
        let labels = [];
        let data = Object.values(visitorData);

        Object.keys(visitorData).forEach(function(cc){
            if (cc == ""){
                labels.push("Local / Unknown")
            }else{
                labels.push(`${getCountryName(cc)} [${cc.toUpperCase()}]` );
            }
        });

        // Define the colors to be used in the pie chart
        let colors = [];
        labels.forEach(function(cc){
            colors.push(generateColorFromHash(cc));
        });

        // Create the chart data object
        let CCchartData = {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: colors
            }]
        };

        // Create the chart options object
        let CCchartOptions = {
            responsive: true,
            maintainAspectRatio: false,
        };

        // Create the pie chart
        const visitorsChart = new Chart(document.getElementById("stats_visitors"), {
            type: 'pie',
            data: CCchartData,
            options: CCchartOptions
        });
   }
</script>