From 1c2ee09f1868ca47c4eb45d1dbb83ee3f854a58e Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 31 Dec 2024 17:41:09 -0600
Subject: [PATCH] Fix user stats heatmap to use range of currently showing data
 only

---
 client/components/stats/Heatmap.vue | 60 ++++++++++++++---------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/client/components/stats/Heatmap.vue b/client/components/stats/Heatmap.vue
index fe235bdd..46ac9609 100644
--- a/client/components/stats/Heatmap.vue
+++ b/client/components/stats/Heatmap.vue
@@ -193,46 +193,46 @@ export default {
     buildData() {
       this.data = []
 
-      var maxValue = 0
-      var minValue = 0
-      Object.values(this.daysListening).forEach((val) => {
-        if (val > maxValue) maxValue = val
-        if (!minValue || val < minValue) minValue = val
-      })
-      const range = maxValue - minValue + 0.01
+      let maxValue = 0
+      let minValue = 0
 
+      const dates = []
       for (let i = 0; i < this.daysToShow + 1; i++) {
-        const col = Math.floor(i / 7)
-        const row = i % 7
-
         const date = i === 0 ? this.firstWeekStart : this.$addDaysToDate(this.firstWeekStart, i)
         const dateString = this.$formatJsDate(date, 'yyyy-MM-dd')
-        const datePretty = this.$formatJsDate(date, 'MMM d, yyyy')
-        const monthString = this.$formatJsDate(date, 'MMM')
-        const value = this.daysListening[dateString] || 0
-        const x = col * 13
-        const y = row * 13
+        const dateObj = {
+          col: Math.floor(i / 7),
+          row: i % 7,
+          date,
+          dateString,
+          datePretty: this.$formatJsDate(date, 'MMM d, yyyy'),
+          monthString: this.$formatJsDate(date, 'MMM'),
+          dayOfMonth: Number(dateString.split('-').pop()),
+          yearString: dateString.split('-').shift(),
+          value: this.daysListening[dateString] || 0
+        }
+        dates.push(dateObj)
 
-        var bgColor = this.bgColors[0]
-        var outlineColor = this.outlineColors[0]
-        if (value) {
+        if (dateObj.value) {
+          if (dateObj.value > maxValue) maxValue = dateObj.value
+          if (!minValue || dateObj.value < minValue) minValue = dateObj.value
+        }
+      }
+      const range = maxValue - minValue + 0.01
+
+      for (const dateObj of dates) {
+        let bgColor = this.bgColors[0]
+        let outlineColor = this.outlineColors[0]
+        if (dateObj.value) {
           outlineColor = this.outlineColors[1]
-          var percentOfAvg = (value - minValue) / range
-          var bgIndex = Math.floor(percentOfAvg * 4) + 1
+          const percentOfAvg = (dateObj.value - minValue) / range
+          const bgIndex = Math.floor(percentOfAvg * 4) + 1
           bgColor = this.bgColors[bgIndex] || 'red'
         }
 
         this.data.push({
-          date,
-          dateString,
-          datePretty,
-          monthString,
-          dayOfMonth: Number(dateString.split('-').pop()),
-          yearString: dateString.split('-').shift(),
-          value,
-          col,
-          row,
-          style: `transform:translate(${x}px,${y}px);background-color:${bgColor};outline:1px solid ${outlineColor};outline-offset:-1px;`
+          ...dateObj,
+          style: `transform:translate(${dateObj.col * 13}px,${dateObj.row * 13}px);background-color:${bgColor};outline:1px solid ${outlineColor};outline-offset:-1px;`
         })
       }