Better interval computation for Long-term data -> Graphics page

Signed-off-by: rubpa <rubpa@users.noreply.github.com>

api_db.php

@@ -319,7 +319,7 @@
 	if(isset($_GET["interval"]))
 	{
 		$q = intval($_GET["interval"]);
-		if($q > 10)
+		if($q >= 10)
 			$interval = $q;
 	}
 

scripts/pi-hole/js/db_graph.js

@@ -8,9 +8,9 @@
 /* global utils:false, Chart:false, moment:false */
 
 var start__ = moment().subtract(7, "days");
-var from = moment(start__).utc().valueOf() / 1000;
+var from = Math.round(moment(start__).utc().valueOf() / 1000);
 var end__ = moment();
-var until = moment(end__).utc().valueOf() / 1000;
+var until = Math.round(moment(end__).utc().valueOf() / 1000);
 var interval = 0;
 
 var dateformat = "MMMM Do YYYY, HH:mm";
@@ -51,8 +51,8 @@ $(function () {
       autoUpdateInput: false,
     },
     function (startt, endt) {
-      from = moment(startt).utc().valueOf() / 1000;
-      until = moment(endt).utc().valueOf() / 1000;
+      from = Math.round(moment(startt).utc().valueOf() / 1000);
+      until = Math.round(moment(endt).utc().valueOf() / 1000);
     }
   );
 });
@@ -63,32 +63,59 @@ function compareNumbers(a, b) {
   return a - b;
 }
 
+function computeInterval(from, until) {
+  // Compute interval to obtain about 200 values
+  var num = 200;
+  // humanly understandable intervals (in seconds)
+  const intervals = [10, 20, 30, 60, 120, 180, 300, 600, 900, 1200, 1800,
+    3600, 3600 * 2, 3600 * 3, 3600 * 4, 3600 * 6,
+    3600 * 8, 3600 * 12, 3600 * 24, 3600 * 24 * 7, 3600 * 24 * 30
+  ];
+
+  var duration = until - from;
+  if (duration / (num * intervals[0]) < 1) {
+    return intervals[0];
+  }
+
+  var preverr = Number.MAX_SAFE_INTEGER;
+  for (let i in intervals) {
+    var err = Math.abs(1 - (duration / (num * intervals[i])));
+    // pick the interval with least deviation 
+    // from selected duration
+    if (preverr < err) {
+      // console.log("interval=", intervals[i - 1], "duration=", duration, "values=", duration / intervals[i - 1]);
+      return intervals[i - 1];
+    }
+    preverr = err;
+  }
+  return intervals[intervals.length - 1];
+}
+
 function updateQueriesOverTime() {
   var timeoutWarning = $("#timeoutWarning");
 
   $("#queries-over-time .overlay").show();
   timeoutWarning.show();
 
-  // Compute interval to obtain about 200 values
-  var num = 200;
-  interval = (until - from) / num;
+  interval = computeInterval(from, until);
   // Default displaying axis scaling
   timeLineChart.options.scales.xAxes[0].time.unit = "hour";
 
+  var duration = until - from;
   // Xaxis scaling based on selected daterange
-  if (num * interval > 4 * 365 * 24 * 60 * 60) {
+  if (duration > 4 * 365 * 24 * 60 * 60) {
     // If the requested data is more than 4 years, set ticks interval to year
     timeLineChart.options.scales.xAxes[0].time.unit = "year";
-  } else if (num * interval >= 366 * 24 * 60 * 60) {
+  } else if (duration >= 366 * 24 * 60 * 60) {
     // If the requested data is more than 1 year, set ticks interval to quarter
     timeLineChart.options.scales.xAxes[0].time.unit = "quarter";
-  } else if (num * interval >= 92 * 24 * 60 * 60) {
+  } else if (duration >= 92 * 24 * 60 * 60) {
     // If the requested data is more than 3 months, set ticks interval to months
     timeLineChart.options.scales.xAxes[0].time.unit = "month";
-  } else if (num * interval >= 31 * 24 * 60 * 60) {
+  } else if (duration >= 31 * 24 * 60 * 60) {
     // If the requested data is 1 month or more, set ticks interval to weeks
     timeLineChart.options.scales.xAxes[0].time.unit = "week";
-  } else if (num * interval > 3 * 24 * 60 * 60) {
+  } else if (duration > 3 * 24 * 60 * 60) {
     // If the requested data is more than 3 days (72 hours), set ticks interval to days
     timeLineChart.options.scales.xAxes[0].time.unit = "day";
   }