Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-01-08 00:08:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix user stats heatmap to use range of currently showing data only

Browse Source
This commit is contained in:
advplyr 2024-12-31 17:41:09 -06:00
parent ee310d967e
commit 1c2ee09f18
1 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
client/components/stats/Heatmap.vue
View File

@ -193,46 +193,46 @@ export default {
buildData() { buildData() {
this.data = [] this.data = []
var maxValue = 0 let maxValue = 0
var minValue = 0 let 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
const dates = []
for (let i = 0; i < this.daysToShow + 1; i++) { 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 date = i === 0 ? this.firstWeekStart : this.$addDaysToDate(this.firstWeekStart, i)
const dateString = this.$formatJsDate(date, 'yyyy-MM-dd') const dateString = this.$formatJsDate(date, 'yyyy-MM-dd')
const datePretty = this.$formatJsDate(date, 'MMM d, yyyy') const dateObj = {
const monthString = this.$formatJsDate(date, 'MMM') col: Math.floor(i / 7),
const value = this.daysListening[dateString] || 0 row: i % 7,
const x = col * 13 date,
const y = row * 13 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] if (dateObj.value) {
var outlineColor = this.outlineColors[0] if (dateObj.value > maxValue) maxValue = dateObj.value
if (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] outlineColor = this.outlineColors[1]
var percentOfAvg = (value - minValue) / range const percentOfAvg = (dateObj.value - minValue) / range
var bgIndex = Math.floor(percentOfAvg * 4) + 1 const bgIndex = Math.floor(percentOfAvg * 4) + 1
bgColor = this.bgColors[bgIndex] || 'red' bgColor = this.bgColors[bgIndex] || 'red'
} }
this.data.push({ this.data.push({
date, ...dateObj,
dateString, style: `transform:translate(${dateObj.col * 13}px,${dateObj.row * 13}px);background-color:${bgColor};outline:1px solid ${outlineColor};outline-offset:-1px;`
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;`
}) })
} }