Added uplot for some stats in now.html

lukasztyrala · Nov 5, 2023 · 6323d87 · 6323d87
1 parent a1b1784
commit 6323d87
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 34 deletions.
diff --git a/js/chart.js b/js/chart.js
@@ -0,0 +1,78 @@
+// Prepare the data
+const currentYear = new Date().getFullYear();
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const distancesCurrentYear =  [ 71, 141, 279, 318,  85, 365, 472, 497, 302, 276, 224, 157];
+const distancesPreviousYear = [ 97, 100,  82, 275, 293, 270, 197, 272,  83, 255,  89,   0];
+
+// Data structure for uPlot
+const data = [
+  months.map((m, i) => i), // Convert month names to indices
+  distancesPreviousYear,
+  distancesCurrentYear,
+];
+
+// Set the options
+const options = {
+  height: 200,
+  series: [
+    { value: (self, rawValue) => months[rawValue] }, // Assuming months are 0-indexed
+    {
+      label: "2022",
+      stroke: 'gray',
+      width: 2,
+      value: (self, rawValue) => rawValue + ' km', // Append 'km' units to series values
+    },
+    {
+      label: "2023",
+      stroke: 'blue',
+      width: 2,
+      value: (self, rawValue) => rawValue + ' km', // Append 'km' units to series values
+    },
+  ],
+ axes: [
+   {
+     values: (self, ticks) => ticks.map(idx => months[idx]), // Format x-axis labels
+     grid: { show: false }, // Hide x-axis gridlines
+   },
+   {
+     show: false, // Hide y-axis labels and gridlines
+     grid: { show: false },
+   },
+ ],
+};
+
+// Target a DOM element
+const element = document.getElementById('chart');
+
+// 
+
+function createChart() {
+  const element = document.getElementById('chart');
+  if (element) {
+    element.innerHTML = '';
+
+    // Since the DOM is fully loaded, no need for requestAnimationFrame
+    const uplot = new uPlot(options, data, element);
+
+    // Set the initial size explicitly
+    uplot.setSize({
+      width: element.clientWidth,
+      height: options.height
+    });
+
+    // Resize handling
+    let resizeTimer;
+    window.addEventListener('resize', () => {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        uplot.setSize({
+          width: element.clientWidth,
+          height: options.height
+        });
+      }, 100);
+    });
+  }
+}
+
+// Execute immediately since this script is loaded at the end of the body
+createChart();
diff --git a/js/clock.js b/js/clock.js
@@ -0,0 +1,31 @@
+// Clock on now.html
+
+function changeTimeZone(date, timeZone) {
+  if (typeof date === 'string') {
+    return new Date(
+      new Date(date).toLocaleString('en-US', {
+        timeZone,
+      }),
+    );
+  }
+
+  return new Date(
+    date.toLocaleString('en-US', {
+      timeZone,
+    }),
+  );
+}
+
+const krkDate = changeTimeZone(new Date(), 'Europe/Warsaw');
+console.log(krkDate); // 👉️ "Sun Jan 16 2022 08:54:44"
+
+var seconds = krkDate.getSeconds();
+var minutes = krkDate.getMinutes();
+var hours = krkDate.getHours();
+hours = (hours > 12) ? hours - 12 : hours;
+minutes = (minutes * 60) + seconds;
+hours = (hours * 3600) + minutes;
+
+document.querySelector('.clock-second-hand').setAttribute('transform', 'rotate('+360*(seconds/60)+',192,192)');
+document.querySelector('.clock-minute-hand').setAttribute('transform', 'rotate('+360*(minutes/3600)+',192,192)');
+document.querySelector('.clock-hour-hand').setAttribute('transform', 'rotate('+360*(hours/43200)+',192,192)');
diff --git a/lib/uPlot.iife.min.js b/lib/uPlot.iife.min.js
diff --git a/lib/uPlot.min.css b/lib/uPlot.min.css
diff --git a/now.html b/now.html
@@ -51,6 +51,8 @@
 
   <script>if(!sessionStorage.getItem("_swa")&&document.referrer.indexOf(location.protocol+"//"+location.host)!== 0){fetch("https://counter.dev/track?"+new URLSearchParams({referrer:document.referrer,screen:screen.width+"x"+screen.height,user:"lukasz",utcoffset:"1"}))};sessionStorage.setItem("_swa","1");</script>
 
+  <link rel="stylesheet" href="lib/uPlot.min.css">
+
 </head>
 
 <body class="page">
@@ -155,40 +157,6 @@ <h1 class="page-name">Now</h1>
                 attributeType="xml">
           </animateTransform>
         </defs>
-        <script  type="text/javascript">
-        <![CDATA[
-
-            function changeTimeZone(date, timeZone) {
-              if (typeof date === 'string') {
-                return new Date(
-                  new Date(date).toLocaleString('en-US', {
-                    timeZone,
-                  }),
-                );
-              }
-
-              return new Date(
-                date.toLocaleString('en-US', {
-                  timeZone,
-                }),
-              );
-            }
-
-            const krkDate = changeTimeZone(new Date(), 'Europe/Warsaw');
-            console.log(krkDate); // 👉️ "Sun Jan 16 2022 08:54:44"
-
-            var seconds = krkDate.getSeconds();
-            var minutes = krkDate.getMinutes();
-            var hours = krkDate.getHours();
-            hours = (hours > 12) ? hours - 12 : hours;
-            minutes = (minutes * 60) + seconds;
-            hours = (hours * 3600) + minutes;
-
-            document.querySelector('.clock-second-hand').setAttribute('transform', 'rotate('+360*(seconds/60)+',192,192)');
-            document.querySelector('.clock-minute-hand').setAttribute('transform', 'rotate('+360*(minutes/3600)+',192,192)');
-            document.querySelector('.clock-hour-hand').setAttribute('transform', 'rotate('+360*(hours/43200)+',192,192)');
-        ]]>
-        </script>
       </svg>
     </div>
     <p class="lead">
@@ -199,6 +167,9 @@ <h1 class="page-name">Now</h1>
 
 <!-- .page-content %5 -->
   <div class="page-content">
+    <h2>Kilometers biked</h2>
+    <div id="chart" style="width:100%"></div>
+
     <h2>Music</h2>
     <p>My go to playlist for flow states and maintaining focus.</p>
     <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/3mSuzMDJpyoBHzW32FAS91?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
@@ -273,5 +244,9 @@ <h2>Playing</h2>
   <script src="https://www.google-analytics.com/analytics.js" async></script>
  /Google Analytics -->
 
+  <script src="lib/uPlot.iife.min.js"></script>
+  <script src="js/clock.js"></script>
+  <script src="js/chart.js"></script>
+
 </body>
 </html>