Fix Chart colouring and javascript

Author: Buried-In-Code

static/js/scripts.js

@@ -27,26 +27,13 @@ function toggleLoading(caller) {
   element.classList.toggle("is-loading");
 }
 
-function toggleChartLoading(id) {
-  const progress = document.getElementById(`${id}-loading`).parentElement;
-  const chart = document.getElementById(id).parentElement;
-  progress.hidden = !progress.hidden;
-  chart.hidden = !chart.hidden;
-}
-
 function resetForm(page) {
   window.location = page;
 }
 
 function setTheme() {
-  const darkCss = document.getElementById("dark-theme");
-  const lightCss = document.getElementById("light-theme");
   const theme = getCookie("weatherdan_theme");
-
-  if (darkCss !== null && lightCss !== null) {
-    darkCss.disabled = theme == "dark";
-    lightCss.disabled = theme == "light";
-  }
+  document.documentElement.setAttribute("data-theme", theme === "dark" ? "villain" : "hero");
 }
 
 function toggleTheme() {
@@ -57,7 +44,9 @@ function toggleTheme() {
   setTheme();
 }
 
-ready(setTheme());
+ready(() => {
+    setTheme();
+});
 
 async function submitRequest(endpoint, method, body = {}) {
   try {
@@ -80,28 +69,37 @@ async function submitRequest(endpoint, method, body = {}) {
   }
 }
 
-async function refreshData(endpoint) {
-  const response = await submitRequest(endpoint, "PUT");
-  if (response !== null && response.status != 208)
-      window.location.reload();
+function getBulmaColour(name) {
+  const tempElement = document.createElement("div");
+  tempElement.className = `has-background-${name}`;
+  document.body.appendChild(tempElement);
+  const computedStyle = getComputedStyle(tempElement);
+  const color = computedStyle.backgroundColor;
+  document.body.removeChild(tempElement);
+  return color;
 }
 
-const backgroundColours = [
-  "rgba(65,105,225,0.1)",
-  "rgba(255,65,105,0.1)",
-  "rgba(105,255,65,0.1)",
-];
+function setAlpha(rgb, alpha) {
+  const rgbValues = rgb.match(/\d+/g).map(Number);
+  return `rgba(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]}, ${alpha})`;
+}
 
-const borderColours = [
-  "rgba(65,105,225,1)",
-  "rgba(255,65,105,1)",
-  "rgba(105,255,65,1)",
-];
+function getColours(alpha) {
+  const colours = ["info", "danger", "success"];
+  return colours.map(colour => setAlpha(getBulmaColour(colour), alpha));
+}
+
+function toggleChartLoading(id) {
+  const progress = document.getElementById(`${id}-loading`).parentElement;
+  const chart = document.getElementById(id).parentElement;
+  progress.hidden = !progress.hidden;
+  chart.hidden = !chart.hidden;
+}
 
 function createDataset(index, data, label, type, yAxisID = "y") {
   return {
-    backgroundColor: backgroundColours[index],
-    borderColor: borderColours[index],
+    backgroundColor: getColours(0.5)[index],
+    borderColor: getColours(1)[index],
     borderWidth: 2,
     borderSkipped: false,
     data: data,
@@ -124,7 +122,10 @@ function createGraph(elementId, labels, datasets, unit, unitLabel) {
       },
       plugins: {
         legend: {
-          display: datasets.length > 1
+          display: datasets.length > 1,
+          labels: {
+            color: getBulmaColour("text")
+          }
         },
         tooltip: {
           callbacks: {
@@ -143,21 +144,42 @@ function createGraph(elementId, labels, datasets, unit, unitLabel) {
           title: {
             display: true,
             text: "Date",
+            color: getBulmaColour("text")
           },
           position: "bottom",
+          ticks: {
+            color: getBulmaColour("text")
+          },
+          grid: {
+            color: getBulmaColour("text-50")
+          }
         },
         y: {
           title: {
             display: true,
-            text: unitLabel
+            text: unitLabel,
+            color: getBulmaColour("text")
           },
           position: "left",
           beginAtZero: false,
+          ticks: {
+            color: getBulmaColour("text")
+          },
+          grid: {
+            color: getBulmaColour("text-50")
+          }
         }
       }
     }
   }
   new Chart(document.getElementById(elementId), config);
+  toggleChartLoading(elementId);
+}
+
+async function refreshData(endpoint) {
+  const response = await submitRequest(endpoint, "PUT");
+  if (response !== null && response.status != 208)
+      window.location.reload();
 }
 
 async function loadTotalStats(timeframe, graphId, endpoint, unit, unitLabel, maxEntries) {

templates/editor.html.jinja

@@ -22,7 +22,7 @@
         <div class="columns is-centered is-multiline">
             <div class="column is-one-quarter-tablet is-one-fifth-fullhd">
                 <div class="box has-background-text-soft">
-                    <h5 class="title is-5 has-text-info-light">Graph Points</h5>
+                    <h4 class="title is-4 has-text-text-bold">Graph Points</h4>
                     <form id="settings-form" onsubmit="return false;">
                         {{ input_number(label="Max Entries", name="max-entries", value=max_entries) }}
                         <div class="buttons is-centered">

templates/index.html.jinja

@@ -65,10 +65,6 @@
 
     if (results.some(x => x))
       window.location.reload();
-    toggleChartLoading("rainfall-stats");
-    toggleChartLoading("solar-stats");
-    toggleChartLoading("uv-index-stats");
-    toggleChartLoading("wind-stats");
   });
 </script>
 </body>

templates/rainfall.html.jinja

@@ -70,18 +70,6 @@
 <script src="/static/js/scripts.js" type="text/javascript"></script>
 <script src="/static/js/bulma-navbar.js" type="text/javascript"></script>
 <script type="text/javascript">
-  ready(() => {
-    refreshData("/api/rainfall");
-    {% if month %}
-      toggleChartLoading("daily-stats");
-      toggleChartLoading("weekly-stats");
-    {% endif %}
-    {% if year %}
-      toggleChartLoading("monthly-stats");
-    {% endif %}
-    toggleChartLoading("yearly-stats");
-  });
-
   ready(() => {
     {% if month %}
       loadRainfallStats("Daily", "daily-stats", maxEntries=100);
@@ -92,6 +80,10 @@
     {% endif %}
     loadRainfallStats("Yearly", "yearly-stats", maxEntries=100);
   });
+
+  ready(() => {
+    refreshData("/api/rainfall");
+  });
 </script>
 </body>
 </html>

templates/solar.html.jinja

@@ -70,18 +70,6 @@
 <script src="/static/js/scripts.js" type="text/javascript"></script>
 <script src="/static/js/bulma-navbar.js" type="text/javascript"></script>
 <script type="text/javascript">
-  ready(() => {
-    refreshData("/api/solar");
-    {% if month %}
-      toggleChartLoading("daily-stats");
-      toggleChartLoading("weekly-stats");
-    {% endif %}
-    {% if year %}
-      toggleChartLoading("monthly-stats");
-    {% endif %}
-    toggleChartLoading("yearly-stats");
-  });
-
   ready(() => {
     {% if month %}
       loadSolarStats("Daily", "daily-stats", maxEntries=100);
@@ -92,6 +80,10 @@
     {% endif %}
     loadSolarStats("Yearly", "yearly-stats", maxEntries=100);
   });
+
+  ready(() => {
+    refreshData("/api/solar");
+  });
 </script>
 </body>
 </html>

templates/uv-index.html.jinja

@@ -70,18 +70,6 @@
 <script src="/static/js/scripts.js" type="text/javascript"></script>
 <script src="/static/js/bulma-navbar.js" type="text/javascript"></script>
 <script type="text/javascript">
-  ready(() => {
-    refreshData("/api/uv-index");
-    {% if month %}
-      toggleChartLoading("daily-stats");
-      toggleChartLoading("weekly-stats");
-    {% endif %}
-    {% if year %}
-      toggleChartLoading("monthly-stats");
-    {% endif %}
-    toggleChartLoading("yearly-stats");
-  });
-
   ready(() => {
     {% if month %}
       loadUVIndexStats("Daily", "daily-stats", maxEntries=100);
@@ -92,6 +80,10 @@
     {% endif %}
     loadUVIndexStats("Yearly", "yearly-stats", maxEntries=100);
   });
+
+  ready(() => {
+    refreshData("/api/uv-index");
+  });
 </script>
 </body>
 </html>

templates/wind.html.jinja

@@ -70,18 +70,6 @@
 <script src="/static/js/scripts.js" type="text/javascript"></script>
 <script src="/static/js/bulma-navbar.js" type="text/javascript"></script>
 <script type="text/javascript">
-  ready(() => {
-    refreshData("/api/wind");
-    {% if month %}
-      toggleChartLoading("daily-stats");
-      toggleChartLoading("weekly-stats");
-    {% endif %}
-    {% if year %}
-      toggleChartLoading("monthly-stats");
-    {% endif %}
-    toggleChartLoading("yearly-stats");
-  });
-
   ready(() => {
     {% if month %}
       loadWindStats("Daily", "daily-stats", maxEntries=100);
@@ -92,6 +80,10 @@
     {% endif %}
     loadWindStats("Yearly", "yearly-stats", maxEntries=100);
   });
+
+  ready(() => {
+    refreshData("/api/wind");
+  });
 </script>
 </body>
 </html>

weatherdan/__init__.py

@@ -20,7 +20,7 @@
 from rich.theme import Theme
 from rich.traceback import install
 
-__version__ = "0.6.2"
+__version__ = "0.6.3"
 CONSOLE = Console(
     theme=Theme(
         {