gatherer/assets/hour_graph.js: round curves for relevant period

gatherer/assets/hour_graphs.js

@@ -15,14 +15,24 @@
         var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="';
         svg += [0, 0, W, H].join(" ");
         svg += '" preserveAspectRatio="none" width="100%" height="100%">';
-        svg += '<path d="M 0 '+H+' L ';
-        svg += hours.map(function(count, j) {
+        svg += '<path d="M 0 '+H;
+        var x0 = 0;
+        var y0 = H * (0.05 + 0.95 * (1 - hours[0] / max));
+        svg += ' L 0,' + y0;
+        for(var j = 1; j < hours.length; j++) {
             var x = W * j / (hours.length - 1);
-            var y = H * (0.05 + 0.95 * (1 - count / max));
-            return [x, y].join(",");
-        }).join(" L ");
+            var y = H * (0.05 + 0.95 * (1 - hours[j] / max));
+            if (y < H) {
+                console.log("xy", x, y, ' Q ' + x + ',' + y0 + ' ' + x0 + ',' + y + ' ' + x + ',' + y);
+            }
+            var cx = (x0 + x) / 2;
+            svg += ' C ' + cx + ',' + y0 + ' ' + cx + ',' + y + ' ' + x + ',' + y;
+            x0 = x;
+            y0 = y;
+        }
         svg += ' L '+W+','+H+' z" stroke="#5582E0" stroke-width="1.5" stroke-linejoin="round" fill="#5582E0"/>';
         svg += '</svg>';
+        console.log(svg)
 
         var graphContainer = document.createElement("p");
         graphContainer.className = "graph";

gatherer/src/http_server.rs

@@ -1,4 +1,8 @@
-use std::{net::SocketAddr, collections::HashMap};
+use std::{
+    collections::HashMap,
+    ops::Deref,
+    net::SocketAddr,
+};
 use askama::Template;
 use axum::{
     async_trait,

gatherer/templates/trends.html

@@ -44,12 +44,12 @@
     </nav>
 
     <main>
-      {% for ((_until, _period, result), title) in results.iter().zip(["Now", "Today", "This week"]) %}
+      {% for ((_until, period, result), title) in results.iter().zip(["Now", "Today", "This week"]) %}
         <article>
           <h2>{{ title }}</h2>
           {% for (score, tag) in result %}
             <section data-images="{{ tag_images.get(tag.name).unwrap() }}">
-              <div class="title" data-hours="{{ tag.hour_scores_data(2 * 24) }}">
+              <div class="title" data-hours="{{ tag.hour_scores_data(4 * period.deref()) }}">
                 <h3>{{ tag.spelling() }}</h3>
                 <p class="score">{{ format!("{}{:.0}%", if *score > 1. { "+" } else { "" }, 100. * *score - 100.) }}</p>
               </div>