Functional stats page.

www-admin/css/stats.css

@@ -0,0 +1,5 @@
+div.pie_chart{
+    display: inline-block;
+    vertical-align: top;
+    margin: 0.5em;
+}

www-admin/script/stats.js

@@ -29,7 +29,7 @@ function BarGraph(context) {
 
         // Width of each bar
         barW = graph.width / values.length - graph.margin * 2;
-        maxH = graph.height - 25;
+        maxH = graph.height - 30;
 
         // Reference height
         var max = 0;
@@ -50,7 +50,7 @@ function BarGraph(context) {
             context.fillStyle = "#003300";
             context.font = "bold 12px sans-serif";
             context.textAlign = "center";
-            context.fillText(parseInt(values[i], 10), i * graph.width / values.length + (graph.width / values.length) / 2, graph.height - barH - 3);
+            context.fillText(parseInt(values[i], 10), i * graph.width / values.length + (graph.width / values.length) / 2, graph.height - barH - 2);
 
             // Bar background (border)
             context.fillStyle = "#003300";
@@ -74,3 +74,154 @@ function BarGraph(context) {
   this.margin = 1;
   
 }
+
+
+function HBarGraph(context) {
+
+    var graph = this;
+    this.values = [];
+    this.labels = [];
+
+    this.setLabels = function(labels){
+        this.labels = labels;
+    }
+
+    this.setValues = function(values){
+        this.values = values;
+    }
+
+    this.draw = function () {
+
+        var values = graph.values;
+        var barW;
+        var barH;
+        var barB = 1; // Border
+        var ratio;
+        var maxH;
+        var max;
+        var i;
+
+        // Canvas dimensions
+        context.canvas.width = graph.width;
+        context.canvas.height = graph.height;
+
+        // Height of each bar
+        barH = graph.height / values.length - graph.margin * 2;
+        maxW = graph.width - 200;
+
+        // Reference width
+        var max = 0;
+        for (i = 0; i < values.length; i ++) {
+            if (values[i] > max) {
+                max = values[i];	
+            }
+        }
+
+        // Loop bars
+        for (i = 0; i < values.length; i ++) {
+
+            // Compare with the max value
+            barW = maxW * values[i] / max;
+
+            // Label
+            context.fillStyle = "#003300";
+            context.font = "10px sans-serif";
+            context.textAlign = "right";
+            context.fillText(graph.labels[i], 150, barH / 2 + (graph.margin + i * graph.height / values.length));
+
+            // Bar background (border)
+            context.fillStyle = "#003300";
+            context.fillRect(160, graph.margin + i * graph.height / values.length, barW, barH);
+
+            // Bar fill
+            context.fillStyle = "#ccffcc";
+            context.fillRect(160 + barB, barB + (graph.margin + i * graph.height / values.length), barW - (2 * barB), barH - (2 * barB));
+
+            // Value
+            context.fillStyle = "#003300";
+            context.font = "bold 12px sans-serif";
+            context.textAlign = "left";
+            context.fillText(parseInt(values[i], 10), 170 + barW, barH / 2 + (graph.margin + i * graph.height / values.length));
+
+        }
+    };
+
+  this.width = 450;
+  this.height = 250;
+  this.margin = 1;
+  
+}
+
+
+function PieGraph(context) {
+
+    var graph = this;
+    this.values = [];
+    this.labels = [];
+
+    this.setLabels = function(labels){
+        this.labels = labels;
+    }
+
+    this.setValues = function(values){
+        this.values = values;
+    }
+
+    this.draw = function () {
+
+        var values = graph.values;
+        var barW;
+        var barH;
+        var barB = 1; // Border
+        var ratio;
+        var maxH;
+        var max;
+        var i;
+
+        // Canvas dimensions
+        context.canvas.width = graph.width;
+        context.canvas.height = graph.height;
+
+        // Sum of values
+        var sum = 0;
+        for (i = 0; i < values.length; i ++) {
+            sum = sum + values[i]
+        }
+
+        // Loop arcs
+        var iAngle = (-0.5) * Math.PI;
+        var hLegend = 30;
+        for (i = 0; i < values.length; i ++) {
+
+            // Calculate angle
+            var v = (values[i] * 2  / sum) * Math.PI;
+
+            // Draw arc
+            context.fillStyle = "#00" + (3 * (i + 3)).toString().substr(-1) + (3 * (i + 3)).toString().substr(-1) + "00";
+            context.strokeStyle = "#00" + (3 * (i + 3)).toString().substr(-1) + (3 * (i + 3)).toString().substr(-1) + "00";
+            context.beginPath();
+            context.arc(100, 100, 50, iAngle, iAngle + v);
+            context.lineWidth = 80;
+            context.stroke();
+
+            // Legend
+            var label = graph.labels[i] + " (" + (values[i] * 100 / sum).toFixed(2) + "%)";
+            context.beginPath();
+            context.arc(215, hLegend, 10, 0, 2 * Math.PI);
+            context.fill();
+            context.font = "10px sans-serif";
+            context.textAlign = "left";
+            context.fillText(label, 230, hLegend + 5);
+
+            // Prepare for next
+            iAngle = iAngle + v;
+            hLegend = hLegend + 30;
+
+        }
+    };
+
+  this.width = 380;
+  this.height = 200;
+  this.margin = 1;
+  
+}

www-admin/stats/index.php

@@ -49,16 +49,14 @@
                     <div id='visitCanvas'></div>
                     <script>
                         (function () {
-                            function createCanvas() {
+                            function createVisitCanvas() {
                                 var parent = document.getElementById("visitCanvas");
                                 var canvas = document.createElement("canvas");
                                 parent.appendChild(canvas);
                                 return canvas.getContext("2d");
                             }
-                            var context = createCanvas();
+                            var context = createVisitCanvas();
                             var graph = new BarGraph(context);
-                            graph.width = 450;
-                            graph.height = 150;;
 <?php
                             $q_month = mysqli_query($con, "SELECT month(dtime) AS month, count(id) AS total FROM stat_visit GROUP BY year(dtime), month(dtime) ORDER BY dtime DESC LIMIT 12;");
                             $name_string = "";
@@ -83,14 +81,184 @@
                             $name_string = substr(trim($name_string), 0, -1);
                             $valu_string = substr(trim($valu_string), 0, -1);
 ?>
+                            graph.width = parseInt(window.getComputedStyle(document.getElementById("visitCanvas")).width);
+                            graph.height = 180;
+                            graph.setLabels([<?=$name_string?>]);
+                            graph.setValues([<?=$valu_string?>]);
+                            graph.draw();
+                        }());
+                    </script>
+                </div> <!-- .entry -->
+            </div> <!-- .section -->
+            <div class='section' id='post_edit'>
+                <h3 class='section_title'>Most popular pages</h3>
+                <div class='entry'>
+                    <div id='pagesCanvas'></div>
+                    <script>
+                        (function () {
+                            function createPagesCanvas() {
+                                var parent = document.getElementById("pagesCanvas");
+                                var canvas = document.createElement("canvas");
+                                parent.appendChild(canvas);
+                                return canvas.getContext("2d");
+                            }
+                            var context = createPagesCanvas();
+                            var graph = new HBarGraph(context);
+                            
+<?php
+                            $q_visit = mysqli_query($con, "SELECT count(id) AS total, section, entry FROM stat_view GROUP BY section, entry LIMIT 10;");
+                            $name_string = "";
+                            $valu_string = "";
+                            while ($r_visit = mysqli_fetch_array($q_visit)){
+                                $s = $r_visit["section"];
+                                $e = $r_visit["entry"];
+                                switch ($s){
+                                    case "index":
+                                        $name_string = $name_string . "\"Homepage\", ";
+                                        break;
+                                    case "profile":
+                                        $name_string = $name_string . "\"Profile page\", ";
+                                        break;
+                                    case "help":
+                                        $name_string = $name_string . "\"Help page\", ";
+                                        break;
+                                    case "project":
+                                        if (strlen(e) == 0){
+                                            $name_string = $name_string . "\"Projects page\", ";
+                                        }
+                                        else{
+                                            $t = text($con, mysqli_fetch_array(mysqli_query($con, "SELECT title, permalink FROM project WHERE id = $e;"))["title"], $lang);
+                                            $name_string = $name_string . "\"Project: " . $t . "\", ";
+                                        }
+                                        break;
+                                    case "blog":
+                                        if (strlen(e) == 0){
+                                            $name_string = $name_string . "\"Blog\", ";
+                                        }
+                                        else{
+                                            $t = text($con, mysqli_fetch_array(mysqli_query($con, "SELECT title, permalink FROM project WHERE id = $e;"))["title"], $lang);
+                                            $name_string = $name_string . "\"Post: " . $t . "\", ";
+                                        }
+                                        break;
+                                    default:
+                                        $name_string = $name_string . "\"" . $s . " - " . $e . "\", ";
+                                }
+                                $valu_string = $valu_string . $r_visit["total"] . ", ";
+                            }
+                            $name_string = substr(trim($name_string), 0, -1);
+                            $valu_string = substr(trim($valu_string), 0, -1);
+?>
+                            setTimeout(function(){
+                                graph.width = parseInt(window.getComputedStyle(document.getElementById("pagesCanvas")).width);
+                                graph.height = <?=(40 + (30 * mysqli_num_rows($q_visit)))?>;
+                                graph.setLabels([<?=$name_string?>]);
+                                graph.setValues([<?=$valu_string?>]);
+                                graph.draw();
+                            }, 0);
+                        }());
+                    </script>
+                </div> <!-- .entry -->
+            </div> <!-- .section -->
+            <div class='section'>
+                <h3 class='section_title'>Visitors profile</h3>
+                <div class='entry'>
+                    <div class='pie_chart' id='osCanvas'><h4>Top OS</h4></div>
+                    <div class='pie_chart' id='browserCanvas'><h4>Top browsers</h4></div>
+                    <div class='pie_chart' id='osBrowserCanvas'><h4>Top OS/browser</h4></div>
+                    <script>
+                        (function () {
+                            function createOsCanvas() {
+                                var parent = document.getElementById("osCanvas");
+                                var canvas = document.createElement("canvas");
+                                parent.appendChild(canvas);
+                                return canvas.getContext("2d");
+                            }
+                            var context = createOsCanvas();
+                            var graph = new PieGraph(context);
+<?php
+                            $q_os = mysqli_query($con, "SELECT count(id) AS total, os FROM stat_visit GROUP BY os ORDER BY total DESC LIMIT 9;");
+                            $name_string = "";
+                            $valu_string = "";
+                            while ($r_os = mysqli_fetch_array($q_os)){
+                                $name_string = $name_string . "\"" . $r_os["os"] . "\", ";
+                                $valu_string = $valu_string . $r_os["total"] . ", ";
+                            }
+                            $name_string = substr(trim($name_string), 0, -1);
+                            $valu_string = substr(trim($valu_string), 0, -1);
+?>
+                            var cHeight = 30 * (<?=mysqli_num_rows($q_os)?> + 3);
+                            if (cHeight < 200){
+                                cHeight = 200;
+                            }
+                            graph.width = 400;
+                            graph.height = cHeight;
+                            graph.setLabels([<?=$name_string?>]);
+                            graph.setValues([<?=$valu_string?>]);
+                            graph.draw();
+                        }());
+                        (function () {
+                            function createBrowserCanvas() {
+                                var parent = document.getElementById("browserCanvas");
+                                var canvas = document.createElement("canvas");
+                                parent.appendChild(canvas);
+                                return canvas.getContext("2d");
+                            }
+                            var context = createBrowserCanvas();
+                            var graph = new PieGraph(context);
+<?php
+                            $q_browser = mysqli_query($con, "SELECT count(id) AS total, browser FROM stat_visit GROUP BY browser ORDER BY total DESC LIMIT 9;");
+                            $name_string = "";
+                            $valu_string = "";
+                            while ($r_browser = mysqli_fetch_array($q_browser)){
+                                $name_string = $name_string . "\"" . $r_browser["browser"] . "\", ";
+                                $valu_string = $valu_string . $r_browser["total"] . ", ";
+                            }
+                            $name_string = substr(trim($name_string), 0, -1);
+                            $valu_string = substr(trim($valu_string), 0, -1);
+?>
+                            var cHeight = 30 * (<?=mysqli_num_rows($q_browser)?> + 3);
+                            if (cHeight < 200){
+                                cHeight = 200;
+                            }
+                            graph.width = 400;
+                            graph.height = cHeight;
+                            graph.setLabels([<?=$name_string?>]);
+                            graph.setValues([<?=$valu_string?>]);
+                            graph.draw();
+                        }());
+                        (function () {
+                            function createOsBrowserCanvas() {
+                                var parent = document.getElementById("osBrowserCanvas");
+                                var canvas = document.createElement("canvas");
+                                parent.appendChild(canvas);
+                                return canvas.getContext("2d");
+                            }
+                            var context = createOsBrowserCanvas();
+                            var graph = new PieGraph(context);
+<?php
+                            $q_osbrowser = mysqli_query($con, "SELECT count(id) AS total, os, browser FROM stat_visit GROUP BY os, browser ORDER BY total DESC LIMIT 9;");
+                            $name_string = "";
+                            $valu_string = "";
+                            while ($r_osbrowser = mysqli_fetch_array($q_osbrowser)){
+                                $name_string = $name_string . "\"" . $r_osbrowser["os"] . "/" . $r_osbrowser["browser"] . "\", ";
+                                $valu_string = $valu_string . $r_osbrowser["total"] . ", ";
+                            }
+                            $name_string = substr(trim($name_string), 0, -1);
+                            $valu_string = substr(trim($valu_string), 0, -1);
+?>
+                            var cHeight = 30 * (<?=mysqli_num_rows($q_osbrowser)?> + 3);
+                            if (cHeight < 200){
+                                cHeight = 200;
+                            }
+                            graph.width = 400;
+                            graph.height = cHeight;
                             graph.setLabels([<?=$name_string?>]);
                             graph.setValues([<?=$valu_string?>]);
                             graph.draw();
-
                         }());
                     </script>
-                </div>
-            </div>
+                </div> <!-- .entry -->
+            </div> <!-- .section -->
         </div>
     </div>
 <?php