From b4e1214754b0cb4962ae60bebd5b21f30dd71607 Mon Sep 17 00:00:00 2001
From: GreenAsJade <greenasjade@gregories.net>
Date: Tue, 10 Sep 2024 09:25:23 +0930
Subject: [PATCH] Put a dot on the weekly vote count graph showing the current
 week so far vote count.

---
 src/lib/misc.ts                      |  3 ++-
 src/views/User/VoteActivityGraph.tsx | 24 +++++++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/lib/misc.ts b/src/lib/misc.ts
index 39777130c5..171ac19b0e 100644
--- a/src/lib/misc.ts
+++ b/src/lib/misc.ts
@@ -656,7 +656,8 @@ export function getCurrentGameId() {
     return null;
 }
 
-// x is a  date, y is data for that date
+// x is a date, y is data for that date
+// sets y for the last date in the data array to null
 export function dropCurrentPeriod(data: { x: string; y: number | null }[]) {
     const newData = [...data];
     if (newData.length > 0) {
diff --git a/src/views/User/VoteActivityGraph.tsx b/src/views/User/VoteActivityGraph.tsx
index 6f2e18ffb4..63cadb0214 100644
--- a/src/views/User/VoteActivityGraph.tsx
+++ b/src/views/User/VoteActivityGraph.tsx
@@ -19,7 +19,7 @@ import React, { useEffect, useState } from "react";
 
 import { get } from "requests";
 import * as data from "data";
-import { ResponsiveLine } from "@nivo/line";
+import { ResponsiveLine, Serie } from "@nivo/line"; // cspell:ignore Serie
 import { dropCurrentPeriod } from "misc";
 
 interface VoteCountPerDay {
@@ -49,6 +49,7 @@ const VoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
             [key: string]: number;
         } = {};
 
+        // Note: The vote_data.counts array is sorted by date in the backend
         vote_data.counts.forEach((day) => {
             const weekStart = startOfWeek(new Date(day.date)).toISOString().slice(0, 10); // Format as YYYY-MM-DD
             if (!aggregatedByWeek[weekStart]) {
@@ -65,10 +66,17 @@ const VoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
                 y: count, // y-axis will use the aggregated count
             }));
 
+        const completed_weeks = dropCurrentPeriod(data);
+        const current_week = data.pop();
+
         return [
             {
-                id: "votes",
-                data: dropCurrentPeriod(data),
+                id: "weekly_votes",
+                data: completed_weeks,
+            },
+            {
+                id: "current_week",
+                data: [current_week],
             },
         ];
     }, [vote_data]);
@@ -88,13 +96,19 @@ const VoteActivityGraph = ({ vote_data }: VoteActivityGraphProps) => {
         return <div>No activity yet</div>;
     }
 
+    const line_colors = {
+        weekly_votes: "rgba(230,183,151, 1)", // matches default in pie charts
+        current_week: "rgba(55, 200, 67, 1)", // visually matches nearby green on the page
+    };
+
     return (
         <div className="vote-activity-graph">
             <ResponsiveLine
-                data={chart_data}
+                data={chart_data as Serie[]}
                 animate
                 curve="monotoneX"
-                enablePoints={false}
+                enablePoints={true}
+                colors={({ id }) => line_colors[id as keyof typeof line_colors]}
                 enableSlices="x"
                 axisBottom={{
                     format: "%d %b %g",