d3js not for me

report.tmpl

@@ -4,11 +4,7 @@
     <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 type="module">
-      import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
-    </script>
-    <script>
       const allMessages = {{ json "Marshal" .messages }};
-      console.log(allMessages);
 
       function fillForm() {
         const filterableFields = [
@@ -37,6 +33,7 @@
           `
         }).join("\n");
       }
+      window.fillForm = fillForm;
 
       function drawAll() {
          const messages = filterMessages(allMessages)
@@ -47,6 +44,7 @@
          drawEventVolumeByHour(messages)
          drawEventVolumeByAsset(messages)
       }
+      window.drawAll = drawAll;
 
       function dumpEvents(messages) {
          const eventToThreads = {};
@@ -114,13 +112,55 @@
          }).filter((m) => { return m != null });
       }
 
-      function drawEventVolumeByName() {}
+      function drawEventVolumeByName(messages) {}
 
-      function drawEventVolumeByWeekday() {}
+      function drawEventVolumeByWeekday(messages) {
+         var prettyWeekday = (d) => {
+            switch (d%7) {
+               case 0: return "Sun";
+               case 1: return "Mon";
+               case 2: return "Tue";
+               case 3: return "Wed";
+               case 4: return "Thu";
+               case 5: return "Fri";
+               case 6: return "Sat";
+            }
+         };
+         var byWeekday = [];
+         for(var i = 0; i < 7; i++)
+            byWeekday.push(0);
+         for(var m of messages) {
+            var d = new Date(1000 * m.TS);
+            byWeekday[d.getDay()] += 1;
+         }
+         byWeekday = byWeekday.map((cnt, idx) => {
+            return {x: prettyWeekday(idx), y: cnt};
+         });
+         console.log("drawEventVolumeByWeekday", byWeekday);
 
-      function drawEventVolumeByHour() {}
+         const ele = document.getElementById("eventVolumeByWeekday");
+         ele.innerHTML = "";
+         eventVolumeByWeekday.append(draw(byWeekday));
+      }
 
-      function drawEventVolumeByAsset() {}
+      function drawEventVolumeByHour(messages) {}
+
+      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;
+         });
+         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>
       rows {
@@ -154,7 +194,7 @@
           <columns>
             <rows>
               <h3>by Weekday</h3>
-              <div>DRAW ME</div>
+              <div id="eventVolumeByWeekday"></div>
             </rows>
             <rows>
               <h3>by Hour</h3>