Merge pull request #2823 from GreenAsJade/show_cms_current_week_vote_…

…count

Show CMs the current week's vote count

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) {

src/views/User/VoteActivityGraph.tsx

@@ -19,7 +19,7 @@ import React, { useEffect, useState } from "react";
 
 import { get } from "@/lib/requests";
 import * as data from "@/lib/data";
-import { ResponsiveLine } from "@nivo/line";
+import { ResponsiveLine, Serie } from "@nivo/line";
 import { dropCurrentPeriod } from "@/lib/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",