From ba833fa31527912521efbd10fe9e5bf9f930a3e7 Mon Sep 17 00:00:00 2001
From: Bel LaPointe <153096461+breel-render@users.noreply.github.com>
Date: Mon, 15 Apr 2024 08:45:20 -0600
Subject: [PATCH] this is getting k

---
 report.tmpl | 45 +++++++++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 18 deletions(-)
diff --git a/report.tmpl b/report.tmpl
index 767e6b4..e63be70 100644
--- a/report.tmpl
+++ b/report.tmpl
@@ -3,6 +3,7 @@
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
+    <script src="https://code.highcharts.com/10/highcharts.js"></script>
     <script type="module">
       const allMessages = {{ json "Marshal" .messages }};
 
@@ -136,30 +137,38 @@
          byWeekday = byWeekday.map((cnt, idx) => {
             return {x: prettyWeekday(idx), y: cnt};
          });
-         console.log("drawEventVolumeByWeekday", byWeekday);
 
-         const ele = document.getElementById("eventVolumeByWeekday");
-         ele.innerHTML = "";
-         eventVolumeByWeekday.append(draw(byWeekday));
+         draw("eventVolumeByWeekday", byWeekday);
       }
 
-      function drawEventVolumeByHour(messages) {}
+      function drawEventVolumeByHour(messages) {
+         var byHour = [];
+         for(var i = 0; i < 24; i++)
+            byHour.push(0);
+         for(var m of messages) {
+            var d = new Date(1000 * m.TS);
+            byHour[d.getHours()] += 1;
+         }
+         byHour = byHour.map((cnt, idx) => {
+            return {x: idx, y: cnt};
+         });
+
+         draw("eventVolumeByHour", byHour);
+      }
 
       function drawEventVolumeByAsset(messages) {}
 
-      import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
-
-      function draw(points) {
-         var ymax = 0;
-         points.forEach((point) => {
-            ymax = ymax > point.y ? ymax : point.y;
+      function draw(id, points) {
+         document.getElementById(id).innerHTML = "";
+         Highcharts.chart(id, {
+            chart: { type: 'column' },
+            title: { text: '' },
+            xAxis: { categories: points.map((point) => `${point.x}`) },
+            yAxis: { allowDecimals: false, title: { text: '' } },
+            legend: { enabled: false },
+            series: [{data: points.map((point) => point.y) }],
+            plotOptions: { column: { stacking: 'normal' } },
          });
-         const svg = d3.create("svg");
-         const x = d3.scaleLinear().domain([0, points.length]).range([0, 250]);
-         const y = d3.scaleLinear().domain([0, ymax]).range([0, 250]);
-         svg.append("g").call(d3.axisBottom(x));
-         svg.append("g").call(d3.axisLeft(y));
-         return svg.node();
       }
     </script>
     <style>
@@ -198,7 +207,7 @@
             </rows>
             <rows>
               <h3>by Hour</h3>
-              <div>DRAW ME</div>
+              <div id="eventVolumeByHour"></div>
             </rows>
           </columns>
           <rows>
