From a46f7209730d6ae757f62ae803b30bd05f33d5cb Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Sat, 23 Sep 2017 13:03:55 +0200
Subject: [PATCH] Use absolute instead of relative display

---
 index.php                   | 39 +++++++++++++++++++------------------
 scripts/pi-hole/js/index.js | 17 ++++++++--------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/index.php b/index.php
index 85e2278c..69971a79 100644
--- a/index.php
+++ b/index.php
@@ -88,6 +88,26 @@
   // show since the API will respect the privacy of the user if he defines
   // a password
   if($auth){ ?>
+
+<div class="row">
+    <div class="col-md-12">
+    <div class="box" id="clients">
+        <div class="box-header with-border">
+          <h3 class="box-title">Clients (over time)</h3>
+        </div>
+        <div class="box-body">
+          <div class="chart">
+            <canvas id="clientsChart" width="800" height="120"></canvas>
+          </div>
+        </div>
+        <div class="overlay">
+          <i class="fa fa-refresh fa-spin"></i>
+        </div>
+        <!-- /.box-body -->
+      </div>
+    </div>
+</div>
+
 <div class="row">
     <div class="col-md-12 col-lg-6">
     <div class="box" id="query-types-pie">
@@ -158,25 +178,6 @@
     </div>
 </div>
 
-<div class="row">
-    <div class="col-md-12 col-lg-12">
-    <div class="box" id="clients">
-        <div class="box-header with-border">
-          <h3 class="box-title">Clients (over time)</h3>
-        </div>
-        <div class="box-body">
-          <div class="chart">
-            <canvas id="clientsChart" width="400" height="50"></canvas>
-          </div>
-        </div>
-        <div class="overlay">
-          <i class="fa fa-refresh fa-spin"></i>
-        </div>
-        <!-- /.box-body -->
-      </div>
-    </div>
-</div>
-
 <?php
 if($boxedlayout)
 {
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 5ef6b973..915b2a2e 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -98,6 +98,8 @@ function updateQueryTypesOverTime() {
 
         // convert received objects to arrays
         data.over_time = objectToArray(data.over_time);
+        // remove last data point since it not representative
+        data.over_time[0].splice(-1,1);
         var timestamps = data.over_time[0];
         var plotdata  = data.over_time[1];
         // Remove possibly already existing data
@@ -192,6 +194,8 @@ function updateForwardedOverTime() {
 
         // convert received objects to arrays
         data.over_time = objectToArray(data.over_time);
+        // remove last data point since it not representative
+        data.over_time[0].splice(-1,1);
         var timestamps = data.over_time[0];
         var plotdata  = data.over_time[1];
         var labels = [];
@@ -272,6 +276,8 @@ function updateClientsOverTime() {
 
         // convert received objects to arrays
         data.over_time = objectToArray(data.over_time);
+        // remove last data point since it not representative
+        data.over_time[0].splice(-1,1);
         var timestamps = data.over_time[0];
         var plotdata  = data.over_time[1];
         var labels = [];
@@ -318,7 +324,7 @@ function updateClientsOverTime() {
             for (key in plotdata[j])
             {
                 if (!{}.hasOwnProperty.call(plotdata[j], key)) continue;
-                clientsChart.data.datasets[key].data.push(1e-2*plotdata[j][key]);
+                clientsChart.data.datasets[key].data.push(plotdata[j][key]);
             }
 
             var d = new Date(1000*parseInt(timestamps[j]));
@@ -788,7 +794,7 @@ $(document).ready(function() {
                             return "Forward destinations from "+from+" to "+to;
                         },
                         label: function(tooltipItems, data) {
-                            return data.datasets[tooltipItems.datasetIndex].label + ": " + (100.0*tooltipItems.yLabel).toFixed(1) + "%";
+                            return data.datasets[tooltipItems.datasetIndex].label + ": " + tooltipItems.yLabel;
                         }
                     }
                 },
@@ -808,12 +814,7 @@ $(document).ready(function() {
                     }],
                     yAxes: [{
                         ticks: {
-                            mix: 0.0,
-                            max: 1.0,
-                            beginAtZero: true,
-                            callback: function(value, index, values) {
-                                return Math.round(value*100) + " %";
-                            }
+                            beginAtZero: true
                         },
                         stacked: true
                     }]