improve charts

cmd/ingestd/web/app.js

@@ -106,26 +106,6 @@ function computeRainIncrements(points) {
   return out;
 }
 
-function computeRollingSum(points, windowMs) {
-  const out = [];
-  let sum = 0;
-  let j = 0;
-  const values = points.map((p) => ({
-    x: p.x,
-    y: p.y == null ? 0 : p.y,
-  }));
-  for (let i = 0; i < values.length; i++) {
-    const cur = values[i];
-    sum += cur.y;
-    while (values[j].x < cur.x - windowMs) {
-      sum -= values[j].y;
-      j += 1;
-    }
-    out.push({ x: cur.x, y: sum });
-  }
-  return out;
-}
-
 function computeHourlySums(points, tz) {
   const buckets = new Map();
   for (const p of points) {
@@ -504,9 +484,12 @@ function renderDashboard(data) {
   upsertChart("chart-rh", rhChart);
 
   const lightOptions = baseOptions(range);
+  lightOptions.scales.y.ticks.color = colors.uvi;
+  lightOptions.scales.y.title = { display: true, text: "UVI", color: colors.uvi };
   lightOptions.scales.y1 = {
     position: "right",
-    ticks: { color: "#a4c4c4" },
+    ticks: { color: colors.light },
+    title: { display: true, text: "Lux", color: colors.light },
     grid: { drawOnChartArea: false },
   };
 
@@ -523,9 +506,12 @@ function renderDashboard(data) {
   upsertChart("chart-light", lightChart);
 
   const powerOptions = baseOptions(range);
+  powerOptions.scales.y.ticks.color = colors.obs;
+  powerOptions.scales.y.title = { display: true, text: "Battery (mV)", color: colors.obs };
   powerOptions.scales.y1 = {
     position: "right",
-    ticks: { color: "#a4c4c4" },
+    ticks: { color: colors.forecast },
+    title: { display: true, text: "Supercap (V)", color: colors.forecast },
     grid: { drawOnChartArea: false },
   };
 
@@ -549,12 +535,10 @@ function renderDashboard(data) {
   };
 
   const rainIncs = computeRainIncrements(obsFiltered);
-  const rainRolling = computeRollingSum(rainIncs, 24 * 60 * 60 * 1000);
   const rainHourly = computeHourlySums(rainIncs, state.tz);
   const rainTitle = document.getElementById("chart-rain-title");
-  const isHourly = state.range === "6h";
   if (rainTitle) {
-    rainTitle.textContent = isHourly ? "Rain (obs hourly vs forecast)" : "Rain (obs rolling 24h vs forecast)";
+    rainTitle.textContent = "Rain (obs hourly sum vs forecast)";
   }
 
   const rainChart = {
@@ -562,8 +546,8 @@ function renderDashboard(data) {
       datasets: [
         {
           type: "line",
-          label: isHourly ? "obs hourly sum (mm)" : "obs rolling 24h (mm)",
-          data: isHourly ? rainHourly : rainRolling,
+          label: "obs hourly sum (mm)",
+          data: rainHourly,
           borderColor: colors.rain,
           yAxisID: "y",
         },