Improve leaderboard graph a bit more

acmCSUFDev · Mar 22, 2024 · 11dd336 · 11dd336
1 parent aef0392
commit 11dd336
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 2 deletions.
diff --git a/server/frontend/pages/leaderboard.html b/server/frontend/pages/leaderboard.html
@@ -60,6 +60,7 @@ <h1>Leaderboard</h1>
     <section>
       <h2>History</h2>
       <div id="points-chart"></div>
+      <p id="points-hover-info"></p>
       <script>
         window.teamPointsEvents = JSON.parse({{ toJson .Events }});
         window.teams = JSON.parse({{ toJson .Table.Teams }});
@@ -78,6 +79,9 @@ <h2>History</h2>
   const styles = window.getComputedStyle(document.body);
   const mutedColor = styles.getPropertyValue("--muted-color");
 
+  const pointsChart = document.getElementById("points-chart");
+  const pointsHoverInfo = document.getElementById("points-hover-info");
+
   const teams = window.teams;
   const startedAt = Math.round(window.startedAt / 1000);
   const teamPointsEvents = window.teamPointsEvents.map((e) => ({
@@ -99,7 +103,7 @@ <h2>History</h2>
     "#17becf",
   ];
 
-  const chart = charts.createChart(document.getElementById("points-chart"), {
+  const chart = charts.createChart(pointsChart, {
     autoSize: true,
     handleScale: true,
     handleScroll: true,
@@ -119,20 +123,39 @@ <h2>History</h2>
       secondsVisible: false,
       fixLeftEdge: true,
       fixRightEdge: true,
+      tickMarkFormatter: (time, mark, locale) => {
+        let d = new Date(time * 1000);
+        switch (mark) {
+          case charts.TickMarkType.DayOfMonth:
+          case charts.TickMarkType.Month:
+            return d.toLocaleDateString(locale, { day: "numeric", month: "short" });
+          case charts.TickMarkType.Time:
+          case charts.TickMarkType.TimeWithSeconds:
+            return d.toLocaleTimeString(locale, {
+              hour: "numeric",
+              minute: "numeric",
+            });
+          default:
+            return d.toLocaleDateString(locale, { day: "numeric" });
+        }
+      },
     },
   });
 
   const series = teams.map((team) => {
     const series = chart.addLineSeries({
       title: team,
       color: colors[teams.indexOf(team) % colors.length],
-      lineWidth: 2,
+      lineWidth: 1.5,
       priceFormat: {
         type: "price",
         precision: 0,
         minMove: 1,
       },
+      priceLineVisible: false,
       pointMarkersVisible: true,
+      pointMarkersRadius: 2,
+      crosshairMarkerVisible: false,
     });
     let total = 0;
     series.setData(
@@ -146,7 +169,29 @@ <h2>History</h2>
     return series;
   });
 
+  function setHoverInfo(info, color = null) {
+    pointsHoverInfo.textContent = info || "Hover over any point to see scoring information.";
+    pointsHoverInfo.style.color = color;
+    pointsHoverInfo.classList.toggle("empty", !info);
+  }
+
+  chart.subscribeCrosshairMove((ev) => {
+    const data = ev.seriesData.entries().next().value;
+    if (!data) {
+      setHoverInfo();
+      return;
+    }
+
+    const [series, value] = data;
+    const team = series.options().title;
+    const color = series.options().color;
+    const score = value.value;
+
+    setHoverInfo(`${team}: ${Math.floor(score)} points`, color);
+  });
+
   chart.timeScale().fitContent();
+  setHoverInfo();
 </script>
 
 <!-- -->

diff --git a/server/frontend/styles/_leaderboard.scss b/server/frontend/styles/_leaderboard.scss
@@ -71,4 +71,14 @@
       display: none;
     }
   }
+
+  #points-hover-info {
+    margin-top: var(--spacing);
+    font-size: 0.8em;
+    text-align: center;
+
+    &.empty {
+      opacity: 0.75;
+    }
+  }
 }