From 014588180e136d7a344ec4c61cd072953abc9043 Mon Sep 17 00:00:00 2001
From: benonymity <benonymity@gmail.com>
Date: Wed, 3 Aug 2022 22:17:11 -0400
Subject: [PATCH 1/3] feat: add stats page to mobile

---
 components/app/SideDrawer.vue            |   7 +-
 components/stats/DailyListeningChart.vue | 221 +++++++++++++++++++++++
 pages/stats.vue                          | 139 ++++++++++++++
 plugins/init.client.js                   |  19 +-
 4 files changed, 382 insertions(+), 4 deletions(-)
 create mode 100644 components/stats/DailyListeningChart.vue
 create mode 100644 pages/stats.vue

diff --git a/components/app/SideDrawer.vue b/components/app/SideDrawer.vue
index 8506812f..81d8ca13 100644
--- a/components/app/SideDrawer.vue
+++ b/components/app/SideDrawer.vue
@@ -100,6 +100,11 @@ export default {
           to: '/account'
         })
       }
+      items.push({
+        icon: 'equalizer',
+        text: 'User Stats',
+        to: '/stats'
+      })
 
       if (this.$platform !== 'ios') {
         items.push({
@@ -162,4 +167,4 @@ export default {
     this.show = false
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/stats/DailyListeningChart.vue b/components/stats/DailyListeningChart.vue
new file mode 100644
index 00000000..db69783e
--- /dev/null
+++ b/components/stats/DailyListeningChart.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="w-96 my-6 mx-auto">
+    <h1 class="text-2xl mb-4 font-book">Minutes Listening <span class="text-white text-opacity-60 text-lg">(Last 7 days)</span></h1>
+    <div class="relative w-96 h-72">
+      <div class="absolute top-0 left-0">
+        <template v-for="lbl in yAxisLabels">
+          <div :key="lbl" :style="{ height: lineSpacing + 'px' }" class="flex items-center justify-end">
+            <p class="text-xs font-semibold">{{ lbl }}</p>
+          </div>
+        </template>
+      </div>
+
+      <template v-for="n in 7">
+        <div :key="n" class="absolute pointer-events-none left-0 h-px bg-white bg-opacity-10" :style="{ top: n * lineSpacing - lineSpacing / 2 + 'px', width: '360px', marginLeft: '24px' }" />
+
+        <div :key="`dot-${n}`" class="absolute z-10" :style="{ left: points[n - 1].x + 'px', bottom: points[n - 1].y + 'px' }">
+          <ui-tooltip :text="last7DaysOfListening[n - 1].minutesListening" direction="top">
+            <div class="h-2 w-2 bg-yellow-400 hover:bg-yellow-300 rounded-full transform duration-150 transition-transform hover:scale-125" />
+          </ui-tooltip>
+        </div>
+      </template>
+
+      <template v-for="(line, index) in pointLines">
+        <div :key="`line-${index}`" class="absolute h-0.5 bg-yellow-400 origin-bottom-left pointer-events-none" :style="{ width: line.width + 'px', left: line.x + 'px', bottom: line.y + 'px', transform: `rotate(${line.angle}deg)` }" />
+      </template>
+
+      <div class="absolute -bottom-2 left-0 flex ml-6">
+        <template v-for="dayObj in last7Days">
+          <div :key="dayObj.date" :style="{ width: daySpacing + daySpacing / 14 + 'px' }">
+            <p class="text-sm font-book">{{ dayObj.dayOfWeek.slice(0, 3) }}</p>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="flex justify-between pt-12">
+      <div>
+        <p class="text-sm text-center">Week Listening</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ totalMinutesListeningThisWeek }}</p>
+        <p class="text-sm text-center">minutes</p>
+      </div>
+      <div>
+        <p class="text-sm text-center">Daily Average</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ averageMinutesPerDay }}</p>
+        <p class="text-sm text-center">minutes</p>
+      </div>
+      <div>
+        <p class="text-sm text-center">Best Day</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ mostListenedDay }}</p>
+        <p class="text-sm text-center">minutes</p>
+      </div>
+      <div>
+        <p class="text-sm text-center">Days</p>
+        <p class="text-5xl font-semibold text-center" style="line-height: 0.85">{{ daysInARow }}</p>
+        <p class="text-sm text-center">in a row</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    listeningStats: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      // test: [111, 120, 4, 156, 273, 76, 12],
+      chartHeight: 288,
+      chartWidth: 384,
+      chartContentWidth: 360,
+      chartContentHeight: 268
+    }
+  },
+  computed: {
+    yAxisLabels() {
+      var lbls = []
+      for (let i = 6; i >= 0; i--) {
+        lbls.push(i * this.yAxisFactor)
+      }
+      return lbls
+    },
+    chartContentMarginLeft() {
+      return this.chartWidth - this.chartContentWidth
+    },
+    chartContentMarginBottom() {
+      return this.chartHeight - this.chartContentHeight
+    },
+    lineSpacing() {
+      return this.chartHeight / 7
+    },
+    daySpacing() {
+      return this.chartContentWidth / 7
+    },
+    linePositions() {
+      var poses = []
+      for (let i = 7; i > 0; i--) {
+        poses.push(i * this.lineSpacing)
+      }
+      poses.push(0)
+      return poses
+    },
+    last7Days() {
+      var days = []
+      for (let i = 6; i >= 0; i--) {
+        var _date = this.$addDaysToToday(i * -1)
+        days.push({
+          dayOfWeek: this.$formatJsDate(_date, 'EEEE'),
+          date: this.$formatJsDate(_date, 'yyyy-MM-dd')
+        })
+      }
+      return days
+    },
+    last7DaysOfListening() {
+      var listeningDays = {}
+      var _index = 0
+      this.last7Days.forEach((dayObj) => {
+        listeningDays[_index++] = {
+          dayOfWeek: dayObj.dayOfWeek,
+          // minutesListening: this.test[_index - 1]
+          minutesListening: this.getMinutesListeningForDate(dayObj.date)
+        }
+      })
+      return listeningDays
+    },
+    mostListenedDay() {
+      var sorted = Object.values(this.last7DaysOfListening)
+        .map((dl) => ({ ...dl }))
+        .sort((a, b) => b.minutesListening - a.minutesListening)
+      return sorted[0].minutesListening
+    },
+    yAxisFactor() {
+      var factor = Math.ceil(this.mostListenedDay / 5)
+
+      if (factor > 25) {
+        // Use nearest multiple of 5
+        return Math.ceil(factor / 5) * 5
+      }
+
+      return Math.max(1, factor)
+    },
+    points() {
+      var data = []
+      for (let i = 0; i < 7; i++) {
+        var listeningObj = this.last7DaysOfListening[String(i)]
+        var minutesListening = listeningObj.minutesListening || 0
+        var yPercent = minutesListening / (this.yAxisFactor * 7)
+        data.push({
+          x: 4 + this.chartContentMarginLeft + (this.daySpacing + this.daySpacing / 14) * i,
+          y: this.chartContentMarginBottom + this.chartHeight * yPercent - 2
+        })
+      }
+      return data
+    },
+    pointLines() {
+      var lines = []
+      for (let i = 1; i < 7; i++) {
+        var lastPoint = this.points[i - 1]
+        var nextPoint = this.points[i]
+
+        var x1 = lastPoint.x
+        var x2 = nextPoint.x
+        var y1 = lastPoint.y
+        var y2 = nextPoint.y
+
+        lines.push({
+          x: x1 + 4,
+          y: y1 + 2,
+          angle: this.getAngleBetweenPoints(x1, y1, x2, y2),
+          width: Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) - 2
+        })
+      }
+      return lines
+    },
+    totalMinutesListeningThisWeek() {
+      var _total = 0
+      Object.values(this.last7DaysOfListening).forEach((listeningObj) => (_total += listeningObj.minutesListening))
+      return _total
+    },
+    averageMinutesPerDay() {
+      return Math.round(this.totalMinutesListeningThisWeek / 7)
+    },
+    daysInARow() {
+      var count = 0
+      while (true) {
+        var _date = this.$addDaysToToday(count * -1)
+        var datestr = this.$formatJsDate(_date, 'yyyy-MM-dd')
+
+        if (!this.listeningStatsDays[datestr] || this.listeningStatsDays[datestr] === 0) {
+          return count
+        }
+        count++
+
+        if (count > 9999) {
+          console.error('Overflow protection')
+          return 0
+        }
+      }
+    },
+    listeningStatsDays() {
+      return this.listeningStats ? this.listeningStats.days || [] : []
+    }
+  },
+  methods: {
+    getAngleBetweenPoints(cx, cy, ex, ey) {
+      var dy = ey - cy
+      var dx = ex - cx
+      var theta = Math.atan2(dy, dx)
+      theta *= 180 / Math.PI // convert to degrees
+      return theta * -1
+    },
+    getMinutesListeningForDate(date) {
+      if (!this.listeningStats || !this.listeningStats.days) return 0
+      return Math.round((this.listeningStats.days[date] || 0) / 60)
+    }
+  },
+  mounted() {}
+}
+</script>
diff --git a/pages/stats.vue b/pages/stats.vue
new file mode 100644
index 00000000..01206f63
--- /dev/null
+++ b/pages/stats.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="w-full h-full px-0 py-4 overflow-y-auto">
+    <!-- <div class="bg-bg rounded-md overflow-y-auto shadow-lg border border-white border-opacity-5 p-4 mb-8"> -->
+      <h1 class="text-xl px-4">Stats for <b>{{ username }}</b></h1>
+
+      <div class="flex text-center justify-center">
+        <div class="flex p-2">
+          <!-- <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24"> -->
+          <!--   <path -->
+          <!--     fill="currentColor" -->
+          <!--     d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z" -->
+          <!--   /> -->
+          <!-- </svg> -->
+          <div class="px-3">
+            <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">Items Finished</p>
+            <div class="flex justify-center">
+              <svg class="h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
+              />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex p-2">
+          <!-- <div class="hidden sm:block"> -->
+            <!-- <span class="hidden sm:block material-icons-outlined text-5xl lg:text-6xl">event</span> -->
+          <!-- </div> -->
+          <div class="px-1">
+            <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">Days Listened</p>
+            <span class="hidden sm:block material-icons-outlined py-1 text-5xl lg:text-6xl">event</span>
+          </div>
+        </div>
+
+        <div class="flex p-2">
+          <!-- <div class="hidden sm:block"> -->
+          <!--   <span class="material-icons-outlined text-5xl lg:text-6xl">watch_later</span> -->
+          <!-- </div> -->
+          <div class="px-1">
+            <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
+            <p class="font-book text-xs md:text-sm text-white text-opacity-80">Minutes Listening</p>
+            <span class="material-icons-outlined text-5xl py-1 lg:text-6xl">watch_later</span>
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
+      <stats-daily-listening-chart :listening-stats="listeningStats" class="lg:scale-100 transform scale-90 px-0"/>
+        <div class="w-80 my-6 mx-auto">
+          <div class="flex mb-4 items-center">
+            <h1 class="text-2xl font-book">Recent Sessions</h1>
+            <div class="flex-grow" />
+            <!-- <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">View All</ui-btn> -->
+          </div>
+          <p v-if="!mostRecentListeningSessions.length">No Listening Sessions</p>
+          <template v-for="(item, index) in mostRecentListeningSessions">
+            <div :key="item.id" class="w-full py-0.5">
+              <div class="flex items-center mb-1">
+                <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
+                <div class="w-56">
+                  <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
+                  <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
+                </div>
+                <div class="flex-grow" />
+                <div class="w-18 text-right">
+                  <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" /> -->
+  <!-- </div> -->
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      listeningStats: null,
+      windowWidth: 0
+    }
+  },
+  watch: {
+    currentLibraryId(newVal) {
+      if (newVal) {
+        this.init()
+      }
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user.user
+    },
+    username() {
+      return this.user ? this.user.username : ''
+    },
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    },
+    userMediaProgress() {
+      return this.user ? this.user.mediaProgress : []
+    },
+    userItemsFinished() {
+      return this.userMediaProgress.filter((lip) => !!lip.isFinished)
+    },
+    mostRecentListeningSessions() {
+      if (!this.listeningStats) return []
+      return this.listeningStats.recentSessions || []
+    },
+    totalMinutesListening() {
+      if (!this.listeningStats) return 0
+      return Math.round(this.listeningStats.totalTime / 60)
+    },
+    totalDaysListened() {
+      if (!this.listeningStats) return 0
+      return Object.values(this.listeningStats.days).length
+    }
+  },
+  methods: {
+    async init() {
+      this.listeningStats = await this.$axios.$get(`/api/me/listening-stats`).catch((err) => {
+        console.error('Failed to load listening sesions', err)
+        return []
+      })
+      console.log('Loaded user listening data', this.listeningStats)
+    }
+  },
+  mounted() {
+    this.init()
+  }
+}
+</script>
diff --git a/plugins/init.client.js b/plugins/init.client.js
index c540d14f..b50e5474 100644
--- a/plugins/init.client.js
+++ b/plugins/init.client.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { App } from '@capacitor/app'
 import { Dialog } from '@capacitor/dialog'
 import { StatusBar, Style } from '@capacitor/status-bar';
-import { formatDistance, format } from 'date-fns'
+import { formatDistance, format, addDays, isDate } from 'date-fns'
 import { Capacitor } from '@capacitor/core';
 
 Vue.prototype.$eventBus = new Vue()
@@ -24,7 +24,20 @@ Vue.prototype.$formatDate = (unixms, fnsFormat = 'MM/dd/yyyy HH:mm') => {
   if (!unixms) return ''
   return format(unixms, fnsFormat)
 }
-
+Vue.prototype.$formatJsDate = (jsdate, fnsFormat = 'MM/dd/yyyy HH:mm') => {
+  if (!jsdate || !isDate(jsdate)) return ''
+  return format(jsdate, fnsFormat)
+}
+Vue.prototype.$addDaysToToday = (daysToAdd) => {
+  var date = addDays(new Date(), daysToAdd)
+  if (!date || !isDate(date)) return null
+  return date
+}
+Vue.prototype.$addDaysToDate = (jsdate, daysToAdd) => {
+  var date = addDays(jsdate, daysToAdd)
+  if (!date || !isDate(date)) return null
+  return date
+}
 Vue.prototype.$bytesPretty = (bytes, decimals = 2) => {
   if (isNaN(bytes) || bytes === null) return 'Invalid Bytes'
   if (bytes === 0) {
@@ -162,4 +175,4 @@ export default ({ store, app }) => {
 export {
   encode,
   decode
-}
\ No newline at end of file
+}

From 87e277fad1fa46610f74882125fc81b69a2a11d1 Mon Sep 17 00:00:00 2001
From: benonymity <benonymity@gmail.com>
Date: Wed, 3 Aug 2022 22:20:20 -0400
Subject: [PATCH 2/3] fix: lint comments

---
 pages/stats.vue | 22 +++-------------------
 1 file changed, 3 insertions(+), 19 deletions(-)

diff --git a/pages/stats.vue b/pages/stats.vue
index 01206f63..9780947e 100644
--- a/pages/stats.vue
+++ b/pages/stats.vue
@@ -5,13 +5,7 @@
 
       <div class="flex text-center justify-center">
         <div class="flex p-2">
-          <!-- <svg class="hidden sm:block h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24"> -->
-          <!--   <path -->
-          <!--     fill="currentColor" -->
-          <!--     d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z" -->
-          <!--   /> -->
-          <!-- </svg> -->
-          <div class="px-3">
+         <div class="px-3">
             <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
             <p class="font-book text-xs md:text-sm text-white text-opacity-80">Items Finished</p>
             <div class="flex justify-center">
@@ -26,10 +20,7 @@
         </div>
 
         <div class="flex p-2">
-          <!-- <div class="hidden sm:block"> -->
-            <!-- <span class="hidden sm:block material-icons-outlined text-5xl lg:text-6xl">event</span> -->
-          <!-- </div> -->
-          <div class="px-1">
+         <div class="px-1">
             <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
             <p class="font-book text-xs md:text-sm text-white text-opacity-80">Days Listened</p>
             <span class="hidden sm:block material-icons-outlined py-1 text-5xl lg:text-6xl">event</span>
@@ -37,10 +28,7 @@
         </div>
 
         <div class="flex p-2">
-          <!-- <div class="hidden sm:block"> -->
-          <!--   <span class="material-icons-outlined text-5xl lg:text-6xl">watch_later</span> -->
-          <!-- </div> -->
-          <div class="px-1">
+         <div class="px-1">
             <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
             <p class="font-book text-xs md:text-sm text-white text-opacity-80">Minutes Listening</p>
             <span class="material-icons-outlined text-5xl py-1 lg:text-6xl">watch_later</span>
@@ -53,7 +41,6 @@
           <div class="flex mb-4 items-center">
             <h1 class="text-2xl font-book">Recent Sessions</h1>
             <div class="flex-grow" />
-            <!-- <ui-btn :to="`/config/users/${user.id}/sessions`" class="text-xs" :padding-x="1.5" :padding-y="1">View All</ui-btn> -->
           </div>
           <p v-if="!mostRecentListeningSessions.length">No Listening Sessions</p>
           <template v-for="(item, index) in mostRecentListeningSessions">
@@ -74,9 +61,6 @@
         </div>
       </div>
     </div>
-
-    <!-- <stats-heatmap v-if="listeningStats" :days-listening="listeningStats.days" class="my-2" /> -->
-  <!-- </div> -->
 </template>
 
 <script>

From be6c675dedde28f9ff4f89f8153630972a1581f7 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 4 Aug 2022 17:22:56 -0500
Subject: [PATCH 3/3] Show user stats nav only when connected to server, remove
 tooltip, remove icons on stats

---
 components/app/SideDrawer.vue            |  10 +--
 components/stats/DailyListeningChart.vue |   4 +-
 pages/stats.vue                          | 101 +++++++++++------------
 3 files changed, 52 insertions(+), 63 deletions(-)

diff --git a/components/app/SideDrawer.vue b/components/app/SideDrawer.vue
index 81d8ca13..f51a1568 100644
--- a/components/app/SideDrawer.vue
+++ b/components/app/SideDrawer.vue
@@ -99,12 +99,12 @@ export default {
           text: 'Account',
           to: '/account'
         })
+        items.push({
+          icon: 'equalizer',
+          text: 'User Stats',
+          to: '/stats'
+        })
       }
-      items.push({
-        icon: 'equalizer',
-        text: 'User Stats',
-        to: '/stats'
-      })
 
       if (this.$platform !== 'ios') {
         items.push({
diff --git a/components/stats/DailyListeningChart.vue b/components/stats/DailyListeningChart.vue
index db69783e..131534ca 100644
--- a/components/stats/DailyListeningChart.vue
+++ b/components/stats/DailyListeningChart.vue
@@ -14,9 +14,7 @@
         <div :key="n" class="absolute pointer-events-none left-0 h-px bg-white bg-opacity-10" :style="{ top: n * lineSpacing - lineSpacing / 2 + 'px', width: '360px', marginLeft: '24px' }" />
 
         <div :key="`dot-${n}`" class="absolute z-10" :style="{ left: points[n - 1].x + 'px', bottom: points[n - 1].y + 'px' }">
-          <ui-tooltip :text="last7DaysOfListening[n - 1].minutesListening" direction="top">
-            <div class="h-2 w-2 bg-yellow-400 hover:bg-yellow-300 rounded-full transform duration-150 transition-transform hover:scale-125" />
-          </ui-tooltip>
+          <div class="h-2 w-2 bg-yellow-400 hover:bg-yellow-300 rounded-full transform duration-150 transition-transform hover:scale-125" />
         </div>
       </template>
 
diff --git a/pages/stats.vue b/pages/stats.vue
index 9780947e..bb337d84 100644
--- a/pages/stats.vue
+++ b/pages/stats.vue
@@ -1,66 +1,57 @@
 <template>
   <div class="w-full h-full px-0 py-4 overflow-y-auto">
-    <!-- <div class="bg-bg rounded-md overflow-y-auto shadow-lg border border-white border-opacity-5 p-4 mb-8"> -->
-      <h1 class="text-xl px-4">Stats for <b>{{ username }}</b></h1>
+    <h1 class="text-xl px-4">
+      Stats for <b>{{ username }}</b>
+    </h1>
 
-      <div class="flex text-center justify-center">
-        <div class="flex p-2">
-         <div class="px-3">
-            <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
-            <p class="font-book text-xs md:text-sm text-white text-opacity-80">Items Finished</p>
-            <div class="flex justify-center">
-              <svg class="h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
-              <path
-                fill="currentColor"
-                d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
-              />
-              </svg>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex p-2">
-         <div class="px-1">
-            <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
-            <p class="font-book text-xs md:text-sm text-white text-opacity-80">Days Listened</p>
-            <span class="hidden sm:block material-icons-outlined py-1 text-5xl lg:text-6xl">event</span>
-          </div>
-        </div>
-
-        <div class="flex p-2">
-         <div class="px-1">
-            <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
-            <p class="font-book text-xs md:text-sm text-white text-opacity-80">Minutes Listening</p>
-            <span class="material-icons-outlined text-5xl py-1 lg:text-6xl">watch_later</span>
-          </div>
+    <div class="flex text-center justify-center">
+      <div class="flex p-2">
+        <div class="px-3">
+          <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
+          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Items Finished</p>
         </div>
       </div>
-      <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
-      <stats-daily-listening-chart :listening-stats="listeningStats" class="lg:scale-100 transform scale-90 px-0"/>
-        <div class="w-80 my-6 mx-auto">
-          <div class="flex mb-4 items-center">
-            <h1 class="text-2xl font-book">Recent Sessions</h1>
-            <div class="flex-grow" />
-          </div>
-          <p v-if="!mostRecentListeningSessions.length">No Listening Sessions</p>
-          <template v-for="(item, index) in mostRecentListeningSessions">
-            <div :key="item.id" class="w-full py-0.5">
-              <div class="flex items-center mb-1">
-                <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
-                <div class="w-56">
-                  <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
-                  <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
-                </div>
-                <div class="flex-grow" />
-                <div class="w-18 text-right">
-                  <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
-                </div>
-              </div>
-            </div>
-          </template>
+
+      <div class="flex p-2">
+        <div class="px-1">
+          <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
+          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Days Listened</p>
+        </div>
+      </div>
+
+      <div class="flex p-2">
+        <div class="px-1">
+          <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
+          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Minutes Listening</p>
         </div>
       </div>
     </div>
+    <div class="flex flex-col md:flex-row overflow-hidden max-w-full">
+      <stats-daily-listening-chart :listening-stats="listeningStats" class="lg:scale-100 transform scale-90 px-0" />
+      <div class="w-80 my-6 mx-auto">
+        <div class="flex mb-4 items-center">
+          <h1 class="text-2xl font-book">Recent Sessions</h1>
+          <div class="flex-grow" />
+        </div>
+        <p v-if="!mostRecentListeningSessions.length">No Listening Sessions</p>
+        <template v-for="(item, index) in mostRecentListeningSessions">
+          <div :key="item.id" class="w-full py-0.5">
+            <div class="flex items-center mb-1">
+              <p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}.&nbsp;</p>
+              <div class="w-56">
+                <p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
+                <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
+              </div>
+              <div class="flex-grow" />
+              <div class="w-18 text-right">
+                <p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>