auto update script executed

web/components/stats.html

@@ -38,7 +38,6 @@
                         </tbody>
                     </table>
                 </div>
-                
             </div>
         </div>
         <div class="ui divider"></div>
@@ -51,6 +50,15 @@
                     <canvas id="stats_device"></canvas>
                 </div>
             </div>
+            <div class="eight wide column">
+                <h3>Client Browsers</h3>
+                <p>The browsers where your client is using to visit your site</p>
+                <div>
+                    <canvas id="stats_browsers"></canvas>
+                </div>
+            </div>
+        </div>
+        <div class="ui stackable grid">
             <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>
@@ -58,8 +66,24 @@
                     <canvas id="stats_OS"></canvas>
                 </div>
             </div>
+            <div class="eight wide column">
+                <h3>OS Versions</h3>
+                <p>The OS versions most commonly used by your site's visitors.</p>
+                <div style="height: 500px; overflow-y: auto;">
+                    <table class="ui unstackable striped celled table">
+                        <thead>
+                          <tr>
+                            <th>OS Version</th>
+                            <th>Request Counts</th>
+                            <th>Percentage</th>
+                        </tr></thead>
+                        <tbody id="stats_OSVersionList">
+                         
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
-        
     </div>
     <button class="ui icon right floated basic button" onclick="initStatisticSummery();"><i class="green refresh icon"></i> Refresh</button>
     <br><br>
@@ -84,11 +108,19 @@
 
     function renderUserAgentCharts(userAgentsEntries){
         let userAgents = Object.keys(userAgentsEntries);
-        
+        let requestCounts = Object.values(userAgentsEntries);
         let mobileUser = 0;
         let desktopUser = 0;
         let osTypes = {};
-        //Statistics collector
+        let osVersion = {};
+        let browserTypes = {};
+        let totalRequestCounts = 0;
+        
+        requestCounts.forEach(function(rc){
+            totalRequestCounts += rc;
+        })
+
+        //Building a statistic summary
         userAgents.forEach(function(thisUA){
            var uaInfo = parseUserAgent(thisUA);
            if (uaInfo.isMobile){
@@ -98,11 +130,36 @@
            }
 
            let currentNo = osTypes[uaInfo.os];
+           let osVersionKey = uaInfo.os + " " + uaInfo.version.split("_").join(".");
            if (currentNo == undefined){
                 osTypes[uaInfo.os] = userAgentsEntries[thisUA];
            }else{
-                osTypes[uaInfo.os] = currentNo + userAgentsEntries[thisUA]
+                osTypes[uaInfo.os] = currentNo + userAgentsEntries[thisUA];
+           }
+
+           let p = osVersion[osVersionKey];
+           if (p == undefined){
+                osVersion[osVersionKey] = userAgentsEntries[thisUA];
+           }else{
+                osVersion[osVersionKey] = p + userAgentsEntries[thisUA];
+           }
+
+
+           let browserTypeKey = uaInfo.browser;
+           if (browserTypeKey.indexOf("//") >= 0){
+                //This is a uncatergorize browser, mostly a bot
+                browserTypeKey = "Bots";
+           }else if (browserTypeKey == ""){
+                //No information
+                browserTypeKey = "Unknown";
+           }
+           let b = browserTypes[browserTypeKey];
+           if (b == undefined){
+                browserTypes[browserTypeKey] = userAgentsEntries[thisUA];
+           }else{
+                browserTypes[browserTypeKey] = b + userAgentsEntries[thisUA];
            }
+ 
         });
 
         //Create the device chart
@@ -148,7 +205,57 @@
             }
         });
 
-        console.log(osTypes);
+        //Populate the OS version table
+        let sortedOSVersion = Object.entries(osVersion).sort((a, b) => b[1] - a[1]);
+        
+        // Loop through the sorted data and populate the table
+        for (let i = 0; i < sortedOSVersion.length; i++) {
+            let osVersion = sortedOSVersion[i][0];
+            let requestcount = abbreviateNumber(sortedOSVersion[i][1]);
+            let percentage = (sortedOSVersion[i][1] / totalRequestCounts).toFixed(3);
+            
+            // Create a new row in the table
+            let row = $("<tr>");
+            
+            // Add the OS version and percentage as columns in the row
+            $("<td>").text(osVersion).appendTo(row);
+            $("<td>").text(requestcount).appendTo(row);
+            $("<td>").text(percentage + "%").appendTo(row);
+            
+            // Add the row to the table body
+            $("#stats_OSVersionList").append(row);
+        }
+
+        //Create the browser charts
+        let browserNames = [];
+        let broserCounts = [];
+        let browserColors = [];
+        let sortedBrowserTypes = Object.entries(browserTypes).sort((a, b) => b[1] - a[1]);
+        console.log(sortedBrowserTypes);
+        sortedBrowserTypes.forEach(function(entry){
+            browserNames.push(entry[0]);
+            broserCounts.push(entry[1]);
+            browserColors.push(generateColorFromHash(entry[0]));
+        });
+    
+        let browserTypeChart = new Chart(document.getElementById("stats_browsers"), {
+            type: 'pie',
+            data: {
+                labels: browserNames,
+                datasets: [{
+                    data: broserCounts,
+                    backgroundColor: browserColors,
+                    hoverBackgroundColor: browserColors
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+            }
+        });
+
+        console.log(browserTypes);
+
     }
 
     //Generate the IPversion pie chart

web/components/status.html

@@ -164,21 +164,6 @@
         
     }
 
-    function abbreviateNumber(value) {
-        var newValue = value;
-        var suffixes = ["", "k", "m", "b", "t"];
-        var suffixNum = 0;
-        while (newValue >= 1000 && suffixNum < suffixes.length - 1) {
-            newValue /= 1000;
-            suffixNum++;
-        }
-        if (value > 1000){
-            newValue = newValue.toFixed(2);
-        }
-        
-        return newValue + suffixes[suffixNum];
-    }
-
     function getDailySummaryDetails(){
         function sortObjectByValue(obj) {
             // Convert object to array of [key, value] pairs

web/index.html

@@ -14,6 +14,7 @@
         <script src="script/tablesort.js"></script>
         <script src="script/countryCode.js"></script>
         <script src="script/chart.js"></script>
+        <script src="script/utils.js"></script>
         <link rel="stylesheet" href="main.css">
     </head>
     <body>

web/script/utils.js

@@ -0,0 +1,22 @@
+/*
+    Utils.js
+
+    This script holds utilities function that is commonly use
+    across components
+
+*/
+
+function abbreviateNumber(value) {
+    var newValue = value;
+    var suffixes = ["", "k", "m", "b", "t"];
+    var suffixNum = 0;
+    while (newValue >= 1000 && suffixNum < suffixes.length - 1) {
+        newValue /= 1000;
+        suffixNum++;
+    }
+    if (value > 1000){
+        newValue = newValue.toFixed(2);
+    }
+    
+    return newValue + suffixes[suffixNum];
+}