feat: add server implementation

Signed-off-by: kjuulh <contact@kjuulh.io>

crates/iamalive/assets/html/index.html

@@ -57,6 +57,28 @@
     <script>
         const horizontal = true;
         const categoryAmount = 10;
+        const intervalTime = 500
+
+        let categoryQueue = [];
+        let intervalNow = Math.floor(Date.now() / 1000) - 1;
+        setInterval(() => {
+          const unixTimestampNow = Math.floor(Date.now() / 1000);
+          let resp = fetch("http://localhost:3000/metrics?start=" + intervalNow + "&end=" + unixTimestampNow)
+            .then((resp) => {
+                if (resp.ok) {
+                  return resp.json()
+                } else {
+                    throw new Error("failed to get response")
+                }
+            }).then((json) => {
+              categoryQueue = [
+                ...categoryQueue, 
+                json
+              ]  
+              console.log("received category")
+            });
+          intervalNow = unixTimestampNow;
+        }, intervalTime);
 
         const parentWidth = document.querySelector('#chart').parentElement.offsetWidth;
 
@@ -186,26 +208,69 @@
         // Real-time simulation
         let allData = [];
         const scrollingSpeed = 20; // Pixels per second
+        let maxIntensity = 1;
+
+        setInterval(() => {
+            let newMax = 1;
+            allData.map(c => {
+                if (c.amount > newMax) {
+                    if (newMax < maxIntensity) {
+                        maxIntensity = newMax;
+                    }
+                }
+            })
+        }, 10000)
 
         function generateData() {
-            // Simulate sporadic events with intensity
-            const newData = categories.map(c => {
-                if (Math.random() < 0.7) return null; // 70% chance no data for this category
-                const newIntensity = Math.random(); // Random intensity
-                const smoothIntensity = d3.interpolate(lastIntensity.get(c.id), newIntensity)(0.5); // Smooth transition
-                lastIntensity.set(c.id, smoothIntensity); // Update last intensity
+            const item = categoryQueue.pop();
+            if (item == undefined) {
+                return
+            }
+
+            const newData = item.metrics.map((c, i) => {
+                if (c.amount > maxIntensity) {
+                    maxIntensity = c.amount;
+                }
+                if (c.amount == 0) {
+                    return null
+                }
+                const newIntensity = c.amount / maxIntensity
+                console.log(maxIntensity);
+                const smoothIntensity = d3.interpolate(lastIntensity.get(i), newIntensity)(0.5); // Smooth transition
+                lastIntensity.set(c.event_name, smoothIntensity); // Update last intensity
                 return {
-                    id: `${Date.now()}-${c.id}`,
-                    category: c.id,
+                    id: `${Date.now()}-${c.event_name}`,
+                    category: i,
                     timestamp: Date.now(),
                     intensity: smoothIntensity,
-                };
-            }).filter(Boolean); // Remove null values
+                    color: categories[i].color,
+                    amount: c.amount,
+                }
+            }).filter(Boolean);
 
-            // Append new data and remove older ones beyond the last 60 seconds
-            allData = [...allData, ...newData].filter(d =>
-                new Date(d.timestamp) >= new Date(Date.now() - 60000)
-            );
+            
+
+            allData = [...allData, ...newData].filter(d => new Date(d.timestamp) >= new Date(Date.now() - 600000))
+            return
+        
+            // Simulate sporadic events with intensity
+            //const newData = categories.map(c => {
+            //    if (Math.random() < 0.7) return null; // 70% chance no data for this category
+            //    const newIntensity = Math.random(); // Random intensity
+            //    const smoothIntensity = d3.interpolate(lastIntensity.get(c.id), newIntensity)(0.5); // Smooth transition
+            //    lastIntensity.set(c.id, smoothIntensity); // Update last intensity
+            //    return {
+            //        id: `${Date.now()}-${c.id}`,
+            //        category: c.id,
+            //        timestamp: Date.now(),
+            //        intensity: smoothIntensity,
+            //    };
+            //}).filter(Boolean); // Remove null values
+
+            //// Append new data and remove older ones beyond the last 60 seconds
+            //allData = [...allData, ...newData].filter(d =>
+            //    new Date(d.timestamp) >= new Date(Date.now() - 60000)
+            //);
         }
 
         // Continuous scroll
@@ -232,7 +297,7 @@
 
             // Update positions of all heatmap cells
             updateHeatmap(allData);
-        });
+        }, 150);
     </script>
 </body>
 </html>