create utils.getGraphType() function.

also apply setting to long term graphs
flip logic - only return "line" if the setting is explicitly set to "false"

Signed-off-by: Adam Warner <me@adamwarner.co.uk>

scripts/pi-hole/js/db_graph.js

@@ -151,7 +151,7 @@ $(function () {
   var blockedColor = "#999";
   var permittedColor = "#00a65a";
   timeLineChart = new Chart(ctx, {
-    type: "bar",
+    type: utils.getGraphType(),
     data: {
       labels: [],
       datasets: [

scripts/pi-hole/js/index.js

@@ -783,12 +783,9 @@ $(function () {
   var permittedColor = $(".queries-permitted").css("background-color");
   var gridColor = $(".graphs-grid").css("background-color");
   var ticksColor = $(".graphs-ticks").css("color");
-
-  var graphType = localStorage.getItem("barchart_chkbox") === "true" ? "bar" : "line";
-
   var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
   timeLineChart = new Chart(ctx, {
-    type: graphType,
+    type: utils.getGraphType(),
     data: {
       labels: [],
       datasets: [
@@ -906,7 +903,7 @@ $(function () {
   if (clientsChartEl) {
     ctx = clientsChartEl.getContext("2d");
     clientsChart = new Chart(ctx, {
-      type: graphType,
+      type: utils.getGraphType(),
       data: {
         labels: [],
         datasets: [{ data: [] }]

scripts/pi-hole/js/utils.js

@@ -207,6 +207,11 @@ function stateLoadCallback(itemName) {
   return data;
 }
 
+function getGraphType() {
+  // Only return line if `barchart_chkbox` is explicitly set to false. Else return bar
+  return localStorage.getItem("barchart_chkbox") === "false" ? "line" : "bar";
+}
+
 window.utils = (function () {
   return {
     escapeHtml: escapeHtml,
@@ -220,6 +225,7 @@ window.utils = (function () {
     validateIPv6CIDR: validateIPv6CIDR,
     setBsSelectDefaults: setBsSelectDefaults,
     stateSaveCallback: stateSaveCallback,
-    stateLoadCallback: stateLoadCallback
+    stateLoadCallback: stateLoadCallback,
+    getGraphType: getGraphType
   };
 })();