Fix user stats heatmap caption text to be accurate

This commit is contained in:
advplyr 2025-01-01 13:49:22 -06:00
parent eb505a0be7
commit ed17dd9b51
26 changed files with 6 additions and 27 deletions

View file

@ -1,7 +1,7 @@
<template>
<div id="heatmap" class="w-full">
<div class="mx-auto" :style="{ height: innerHeight + 160 + 'px', width: innerWidth + 52 + 'px' }" style="background-color: rgba(13, 17, 23, 0)">
<p class="mb-2 px-1 text-sm text-gray-200">{{ $getString('MessageListeningSessionsInTheLastYear', [Object.values(daysListening).length]) }}</p>
<p class="mb-2 px-1 text-sm text-gray-200">{{ $getString('MessageDaysListenedInTheLastYear', [daysListenedInTheLastYear]) }}</p>
<div class="border border-white border-opacity-25 rounded py-2 w-full" style="background-color: #232323" :style="{ height: innerHeight + 80 + 'px' }">
<div :style="{ width: innerWidth + 'px', height: innerHeight + 'px' }" class="ml-10 mt-5 absolute" @mouseover="mouseover" @mouseout="mouseout">
<div v-for="dayLabel in dayLabels" :key="dayLabel.label" :style="dayLabel.style" class="absolute top-0 left-0 text-gray-300">{{ dayLabel.label }}</div>
@ -37,6 +37,7 @@ export default {
innerHeight: 13 * 7,
blockWidth: 13,
data: [],
daysListenedInTheLastYear: 0,
monthLabels: [],
tooltipEl: null,
tooltipTextEl: null,
@ -213,7 +214,8 @@ export default {
}
dates.push(dateObj)
if (dateObj.value) {
if (dateObj.value > 0) {
this.daysListenedInTheLastYear++
if (dateObj.value > maxValue) maxValue = dateObj.value
if (!minValue || dateObj.value < minValue) minValue = dateObj.value
}
@ -260,6 +262,7 @@ export default {
const heatmapEl = document.getElementById('heatmap')
this.contentWidth = heatmapEl.clientWidth
this.maxInnerWidth = this.contentWidth - 52
this.daysListenedInTheLastYear = 0
this.buildData()
}
},