From 02da95377e4b7797b0c6dbf382dbc0cb1b721b8f Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sat, 13 Nov 2021 19:17:33 -0600
Subject: [PATCH] Add: Listening statistics and chart on stats page #167

---
 client/assets/fonts.css                       |   4 +-
 .../components/stats/DailyListeningChart.vue  | 221 ++++++++++++++++++
 client/components/stats/PreviewIcons.vue      |  99 ++++++++
 client/components/ui/Tooltip.vue              |   2 +-
 client/pages/config.vue                       |   5 +-
 client/pages/config/stats.vue                 |  66 ++----
 client/plugins/init.client.js                 |  11 +-
 7 files changed, 357 insertions(+), 51 deletions(-)
 create mode 100644 client/components/stats/DailyListeningChart.vue
 create mode 100644 client/components/stats/PreviewIcons.vue

diff --git a/client/assets/fonts.css b/client/assets/fonts.css
index 43de8964..b4a7b190 100644
--- a/client/assets/fonts.css
+++ b/client/assets/fonts.css
@@ -26,7 +26,7 @@
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 }
-.material-icons:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl) {
+.material-icons:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
   font-size: 1.5rem;
 }
 .material-icons-outlined {
@@ -43,7 +43,7 @@
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 }
-.material-icons-outlined:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl) {
+.material-icons-outlined:not(.text-xs):not(.text-sm):not(.text-md):not(.text-base):not(.text-lg):not(.text-xl):not(.text-2xl):not(.text-3xl):not(.text-4xl):not(.text-5xl):not(.text-6xl):not(.text-7xl):not(.text-8xl) {
   font-size: 1.5rem;
 }
 
diff --git a/client/components/stats/DailyListeningChart.vue b/client/components/stats/DailyListeningChart.vue
new file mode 100644
index 00000000..ed2b895a
--- /dev/null
+++ b/client/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</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 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>
\ No newline at end of file
diff --git a/client/components/stats/PreviewIcons.vue b/client/components/stats/PreviewIcons.vue
new file mode 100644
index 00000000..63606799
--- /dev/null
+++ b/client/components/stats/PreviewIcons.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="flex flex-wrap justify-between mt-6">
+    <div class="flex p-2">
+      <svg class="h-14 w-14 md:h-18 md:w-18" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
+      </svg>
+      <div class="px-2">
+        <p class="text-4xl md:text-5xl font-bold">{{ audiobooks.length }}</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Books in Library</p>
+      </div>
+    </div>
+    <div class="flex p-2">
+      <svg class="h-14 w-14 md:h-18 md: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">{{ userAudiobooksRead.length }}</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Books Read</p>
+      </div>
+    </div>
+
+    <div class="flex p-2">
+      <span class="material-icons text-7xl">show_chart</span>
+      <div class="px-1">
+        <p class="text-4xl md:text-5xl font-bold">{{ totalAudiobookHours }}</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Overall Hours</p>
+      </div>
+    </div>
+
+    <div class="flex p-2">
+      <svg class="h-14 w-14 md:h-18 md:w-18" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
+      </svg>
+      <div class="px-1">
+        <p class="text-4xl md:text-5xl font-bold">{{ uniqueAuthors.length }}</p>
+        <p class="font-book text-xs md:text-sm text-white text-opacity-80">Authors</p>
+      </div>
+    </div>
+
+    <div class="flex p-2">
+      <span class="material-icons-outlined" style="font-size: 4.1rem">watch_later</span>
+      <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>
+</template>
+
+<script>
+export default {
+  props: {
+    listeningStats: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    audiobooks() {
+      return this.$store.state.audiobooks.audiobooks
+    },
+    user() {
+      return this.$store.state.user.user
+    },
+    uniqueAuthors() {
+      return this.$store.getters['audiobooks/getUniqueAuthors']
+    },
+    userAudiobooks() {
+      return Object.values(this.user.audiobooks || {})
+    },
+    userAudiobooksRead() {
+      return this.userAudiobooks.filter((ab) => !!ab.isRead)
+    },
+    totalAudiobookDuration() {
+      var _total = 0
+      this.audiobooks.forEach((ab) => {
+        _total += ab.duration
+      })
+      return _total
+    },
+    totalAudiobookHours() {
+      var totalHours = Math.round(this.totalAudiobookDuration / (60 * 60))
+      return totalHours
+    },
+    totalMinutesListening() {
+      if (!this.listeningStats) return 0
+      return Math.round(this.listeningStats.totalTime / 60)
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
\ No newline at end of file
diff --git a/client/components/ui/Tooltip.vue b/client/components/ui/Tooltip.vue
index cea02dd9..e797632d 100644
--- a/client/components/ui/Tooltip.vue
+++ b/client/components/ui/Tooltip.vue
@@ -8,7 +8,7 @@
 export default {
   props: {
     text: {
-      type: String,
+      type: [String, Number],
       required: true
     },
     direction: {
diff --git a/client/pages/config.vue b/client/pages/config.vue
index 073f8108..e4811f6d 100644
--- a/client/pages/config.vue
+++ b/client/pages/config.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="page-wrapper" class="page p-6 overflow-y-auto relative" :class="streamAudiobook ? 'streaming' : ''">
     <app-config-side-nav :is-open.sync="sideDrawerOpen" />
-    <div class="configContent">
+    <div class="configContent" :class="`page-${currentPage}`">
       <div class="w-full pb-4 px-2 flex md:hidden border-b border-white border-opacity-10 mb-2">
         <span class="material-icons cursor-pointer" @click.stop.prevent="showMore">more_vert</span>
         <p class="pl-3 capitalize">{{ currentPage }}</p>
@@ -72,6 +72,9 @@ export default {
   width: 900px;
   max-width: calc(100% - 176px);
 }
+.configContent.page-stats {
+  width: 1200px;
+}
 @media (max-width: 1024px) {
   .configContent {
     margin-left: 176px;
diff --git a/client/pages/config/stats.vue b/client/pages/config/stats.vue
index 8aba2fa6..bf0f5d19 100644
--- a/client/pages/config/stats.vue
+++ b/client/pages/config/stats.vue
@@ -1,41 +1,9 @@
 <template>
   <div>
-    <!-- <h1>Stats</h1> -->
-    <div class="flex mt-6">
-      <div class="flex mr-1 md:mr-6">
-        <svg class="h-14 w-14 md:h-18 md:w-18" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M9 3V18H12V3H9M12 5L16 18L19 17L15 4L12 5M5 5V18H8V5H5M3 19V21H21V19H3Z" />
-        </svg>
-        <div class="px-2">
-          <p class="text-4xl md:text-5xl font-bold">{{ audiobooks.length }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Books in Library</p>
-        </div>
-      </div>
-      <div class="flex mx-1 md:mx-6">
-        <svg class="h-14 w-14 md:h-18 md: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">{{ userAudiobooksRead.length }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Books Read</p>
-        </div>
-      </div>
-      <div class="flex ml-1 md:ml-6">
-        <svg class="h-14 w-14 md:h-18 md:w-18" viewBox="0 0 24 24">
-          <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
-        </svg>
-        <div class="px-1">
-          <p class="text-4xl md:text-5xl font-bold">{{ uniqueAuthors.length }}</p>
-          <p class="font-book text-xs md:text-sm text-white text-opacity-80">Authors</p>
-        </div>
-      </div>
-    </div>
+    <stats-preview-icons :listening-stats="listeningStats" />
 
-    <div class="flex md:flex-row flex-col mt-12">
-      <div class="w-80 mb-12 md:mb-0 mx-auto md:ml-0 md:mr-12">
+    <div class="flex md:flex-row flex-wrap justify-between flex-col mt-12">
+      <div class="w-80 my-6 mx-auto">
         <h1 class="text-2xl mb-4 font-book">Top 5 Genres</h1>
         <template v-for="genre in top5Genres">
           <div :key="genre.genre" class="w-full py-2">
@@ -50,7 +18,7 @@
           </div>
         </template>
       </div>
-      <div class="w-80 mx-auto md:mx-12">
+      <div class="w-80 my-6 mx-auto">
         <h1 class="text-2xl mb-4 font-book">Top 10 Authors</h1>
         <template v-for="(author, index) in top10Authors">
           <div :key="author.author" class="w-full py-2">
@@ -66,6 +34,7 @@
           </div>
         </template>
       </div>
+      <stats-daily-listening-chart :listening-stats="listeningStats" />
     </div>
   </div>
 </template>
@@ -73,20 +42,16 @@
 <script>
 export default {
   data() {
-    return {}
+    return {
+      listeningStats: null
+    }
   },
   computed: {
     audiobooks() {
       return this.$store.state.audiobooks.audiobooks
     },
-    uniqueAuthors() {
-      return this.$store.getters['audiobooks/getUniqueAuthors']
-    },
-    userAudiobooks() {
-      return Object.values(this.$store.state.user.user.audiobooks || {})
-    },
-    userAudiobooksRead() {
-      return this.userAudiobooks.filter((ab) => !!ab.isRead)
+    user() {
+      return this.$store.state.user.user
     },
     genresWithCount() {
       var genresMap = {}
@@ -130,8 +95,17 @@ export default {
       return this.authorsWithCount.slice(0, 10)
     }
   },
-  methods: {},
+  methods: {
+    async init() {
+      this.listeningStats = await this.$axios.$get(`/api/user/${this.user.id}/listeningStats`).catch((err) => {
+        console.error('Failed to load listening sesions', err)
+        return []
+      })
+      console.log('Loaded user listening data', this.listeningStats)
+    }
+  },
   mounted() {
+    this.init()
     this.$store.dispatch('audiobooks/load')
   }
 }
diff --git a/client/plugins/init.client.js b/client/plugins/init.client.js
index 7ecda99f..d8108f37 100644
--- a/client/plugins/init.client.js
+++ b/client/plugins/init.client.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import vClickOutside from 'v-click-outside'
-import { formatDistance, format } from 'date-fns'
+import { formatDistance, format, addDays, isDate } from 'date-fns'
 
 Vue.directive('click-outside', vClickOutside.directive)
 
@@ -16,6 +16,15 @@ 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.$bytesPretty = (bytes, decimals = 2) => {
   if (bytes === 0) {