Merge pull request #2959 from metabrainz/LB-1254

LB-1254: Graph for month view in statistics may cut of days at the end due to varying length of months
metabrainz · Aug 13, 2024 · 8c1fb0b · 8c1fb0b
2 parents 0caf3f8 + 0a3d279
commit 8c1fb0b
Showing 1 changed file with 33 additions and 11 deletions.
diff --git a/frontend/js/src/user/stats/components/UserListeningActivity.tsx b/frontend/js/src/user/stats/components/UserListeningActivity.tsx
@@ -229,7 +229,14 @@ export default class UserListeningActivity extends React.Component<
     const startOfLastMonth = new Date(
       data.payload.listening_activity[0].from_ts * 1000
     );
+    const endOfThisMonth = new Date(
+      data.payload.listening_activity[
+        data.payload.listening_activity.length - 1
+      ].from_ts * 1000
+    );
+
     const numOfDaysInLastMonth = this.getNumberOfDaysInMonth(startOfLastMonth);
+    const numOfDaysInThisMonth = this.getNumberOfDaysInMonth(endOfThisMonth);
 
     const lastMonth = data.payload.listening_activity.slice(
       0,
@@ -239,11 +246,18 @@ export default class UserListeningActivity extends React.Component<
       numOfDaysInLastMonth
     );
 
-    const result = lastMonth.map((lastMonthDay, index) => {
-      const thisMonthDay = thisMonth[index];
+    const result = [];
+
+    const maxDays = Math.max(numOfDaysInLastMonth, numOfDaysInThisMonth);
+
+    for (let i = 0; i < maxDays; i += 1) {
+      const lastMonthDay = lastMonth[i] || null;
+      const thisMonthDay = thisMonth[i] || null;
+      const thisMonthCount = thisMonthDay ? thisMonthDay.listen_count : 0;
+
       let thisMonthData = {};
+      let lastMonthData = {};
       if (thisMonthDay) {
-        const thisMonthCount = thisMonthDay.listen_count;
         totalListens += thisMonthCount;
         totalDays += 1;
 
@@ -253,15 +267,23 @@ export default class UserListeningActivity extends React.Component<
         };
       }
 
-      const lastMonthCount = lastMonthDay.listen_count;
-      const lastMonthDate = new Date(lastMonthDay.from_ts * 1000);
-      return {
-        id: lastMonthDate.toLocaleString("en-us", dateFormat),
-        lastRangeCount: lastMonthCount,
-        lastRangeTs: lastMonthDay.from_ts,
+      if (lastMonthDay) {
+        lastMonthData = {
+          lastRangeCount: lastMonthDay.listen_count,
+          lastRangeTs: lastMonthDay.from_ts,
+        };
+      }
+
+      const dateTS = lastMonthDay
+        ? new Date(lastMonthDay.from_ts * 1000)
+        : new Date(thisMonthDay.from_ts * 1000);
+
+      result.push({
+        id: dateTS.toLocaleString("en-us", dateFormat),
+        ...lastMonthData,
         ...thisMonthData,
-      };
-    });
+      });
+    }
 
     this.setState({
       avgListens: totalListens > 0 ? Math.ceil(totalListens / totalDays) : 0,