mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-03 17:54:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Add: Listening statistics and chart on stats page #167

Browse source
This commit is contained in:
advplyr 2021-11-13 19:17:33 -06:00
parent 416aa3bd60
commit 02da95377e
7 changed files with 357 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

66
client/pages/config/stats.vue
View file

@ -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')
}
}