From f2713a9b3d9a986bdccd82bcb00a93ad93f7cbe0 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Thu, 2 Jan 2020 13:24:45 +0000
Subject: [PATCH] Always show date (but only once if the interval is on the
 same date), break long lines on small displays, and abbreviate gray color
 definition.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/db_graph.js | 26 ++++++++++++++++++++------
 scripts/pi-hole/js/index.js    |  2 +-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js
index b57ead4b..8636244d 100644
--- a/scripts/pi-hole/js/db_graph.js
+++ b/scripts/pi-hole/js/db_graph.js
@@ -190,7 +190,7 @@ function updateQueriesOverTime() {
 
 $(document).ready(function() {
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
-  var blockedColor = "#999999";
+  var blockedColor = "#999";
   var permittedColor = "#00a65a";
   timeLineChart = new Chart(ctx, {
     type: "bar",
@@ -258,12 +258,26 @@ $(document).ready(function() {
               ":" +
               padNumber(time.getSeconds());
             if (from_date === until_date) {
-              return "Queries from " + from_time + " to " + until_time;
-            } else {
-              return (
-                "Queries from " + from_date + " " + from_time + " to " + until_date + " " + until_time
-              );
+              // Abbreviated form for intervals on the same day
+              return "Queries from " + from_time + " to " + until_time + " on " + from_date;
             }
+
+            // Full tooltip for intervals spanning more than one date.
+            // We split title in two lines on small screens
+            if ($(window).width() < 992) {
+              from_date += "\n";
+            }
+
+            return (
+              "Queries from " +
+              from_date +
+              " " +
+              from_time +
+              " to " +
+              until_date +
+              " " +
+              until_time
+            ).split("\n ");
           },
           label: function(tooltipItems, data) {
             if (tooltipItems.datasetIndex === 0) {
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 9871a939..4f61e62b 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -764,7 +764,7 @@ $(document).ready(function() {
 
   updateSummaryData();
 
-  var blockedColor = "#999999";
+  var blockedColor = "#999";
   var permittedColor = "#00a65a";
 
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");