ooooo it is pretty

report.tmpl

@@ -40,8 +40,7 @@
          const messages = filterMessages(allMessages)
 
          dumpEvents(messages);
-         drawEventVolumeByName(messages)
-         drawEventVolumeByWeekday(messages)
+         drawEventVolume(messages)
          drawEventVolumeByHour(messages)
          drawEventVolumeByAsset(messages)
       }
@@ -113,32 +112,26 @@
          }).filter((m) => { return m != null });
       }
 
-      function drawEventVolumeByName(messages) {}
-
-      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};
+      function drawEventVolume(messages) {
+         const points = [];
+         messages.forEach((m) => {
+            points.push({x: m.TS, name: m.EventName});
          });
 
-         draw("eventVolumeByWeekday", byWeekday);
+         var xs = points.map((point) => point.x);
+         xs.sort();
+         const k = (x) => new Date(1000 * x).toLocaleDateString('en-US', {month: 'numeric', day: 'numeric', weekday: 'short'});
+         xs = xs.map(k);
+         xs = [...new Set(xs)];
+
+         const names = [...new Set(points.map((p) => p.name))];
+         const nameAndData = names.map((name) => {
+            return {
+               name: name,
+               data: xs.map((x) => points.filter((p) => { return p.name == name && k(p.x) == x }).length),
+            }
+         });
+         draw("eventVolume", xs, nameAndData);
       }
 
       function drawEventVolumeByHour(messages) {
@@ -158,15 +151,15 @@
 
       function drawEventVolumeByAsset(messages) {}
 
-      function draw(id, points) {
-         document.getElementById(id).innerHTML = "";
-         Highcharts.chart(id, {
+      function draw(documentId, xs, nameAndData) {
+         document.getElementById(documentId).innerHTML = "";
+         Highcharts.chart(documentId, {
             chart: { type: 'column' },
             title: { text: '' },
-            xAxis: { categories: points.map((point) => `${point.x}`) },
+            xAxis: { categories: xs },
             yAxis: { allowDecimals: false, title: { text: '' } },
-            legend: { enabled: false },
-            series: [{data: points.map((point) => point.y) }],
+            //legend: { enabled: false },
+            series: nameAndData,
             plotOptions: { column: { stacking: 'normal' } },
          });
       }
@@ -197,14 +190,10 @@
       <rows>
         <rows>
           <rows>
-            <h2>Event Volume by Name</h2>
-            <div>DRAW ME</div>
+            <h2>Event Volume</h2>
+            <div id="eventVolume"></div>
           </rows>
           <columns>
-            <rows>
-              <h3>by Weekday</h3>
-              <div id="eventVolumeByWeekday"></div>
-            </rows>
             <rows>
               <h3>by Hour</h3>
               <div id="eventVolumeByHour"></div>