Populate genre data

agersant · Oct 17, 2024 · 8a4b848 · 8a4b848
1 parent fa45d78
commit 8a4b848
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 15 deletions.
diff --git a/src/components/playback/Playlist.vue b/src/components/playback/Playlist.vue
@@ -31,7 +31,7 @@
 					</Transition>
 
 					<SidePanel v-model="showStats">
-						<Stats :paths="[]" />
+						<Stats />
 					</SidePanel>
 				</div>
 			</template>

diff --git a/src/components/playback/Stats.vue b/src/components/playback/Stats.vue
@@ -16,7 +16,7 @@
                 </p>
             </div>
         </div>
-        <div class="flex flex-col">
+        <div v-if="genreData.length > 2" class="flex flex-col">
             <SectionTitle label="Main Genres" icon="hexagon" />
             <apexchart type="radar" :options="genreChartOptions" :series="genreSeries" />
         </div>
@@ -29,16 +29,51 @@
 
 <script setup lang="ts">
 import { formatHex, modeRgb, useMode } from 'culori';
-import { computed } from 'vue';
-import { useCssVar } from '@vueuse/core';
+import { computed, Ref, ref } from 'vue';
+import { useCssVar, watchImmediate } from '@vueuse/core';
 
+import { Song } from '@/api/dto';
 import SectionTitle from '@/components/basic/SectionTitle.vue';
+import { usePlaybackStore } from '@/stores/playback';
+import { useSongsStore } from '@/stores/songs';
 
 const rgb = useMode(modeRgb);
+const playback = usePlaybackStore();
+const songs = useSongsStore();
+
+const playlistSongs = computed(() => {
+    let out: Song[] = [];
+    return playback.playlist.reduce(function (r, entry) {
+        const song = songs.cache.get(entry.path);
+        if (song) {
+            r.push(song);
+        }
+        return r;
+    }, out);
+});
+
+const genreData: Ref<{ x: string, y: number }[]> = ref([]);
+
+watchImmediate(playlistSongs, () => {
+    let songsByGenre = new Map<string, number>();
+    for (const song of playlistSongs.value) {
+        for (const genre of song.genres || []) {
+            songsByGenre.set(genre, 1 + (songsByGenre.get(genre) || 0));
+        }
+    }
+
+    // Sort by most songs
+    let genres = songsByGenre.entries().map(([genre, count]) => ({ x: genre, y: count })).toArray();
+    genres.sort((a, b) => a.y - b.y).reverse();
 
-defineProps<{
-    paths: string[]
-}>();
+    // Only keep top 8 and sort alphabetically
+    genres = genres.filter(({ y }) => y > 0.02 && y < playlistSongs.value.length).slice(0, 8);
+    genres.sort((a, b) => a.x < b.x ? 1 : -1);
+    genreData.value = genres;
+});
+
+
+const genreSeries = computed(() => [{ data: genreData.value }]);
 
 const accent600 = useCssVar("--accent-600");
 const surface0 = useCssVar("--surface-0");
@@ -52,10 +87,6 @@ function toHex(color: string) {
     return formatHex(rgb(`rgb(${color})`));
 }
 
-const genreSeries = [{
-    data: [80, 50, 30, 40, 100, 20],
-}];
-
 const genreChartOptions = computed(() => ({
     chart: {
         animations: { enabled: false },
@@ -77,22 +108,23 @@ const genreChartOptions = computed(() => ({
         }
     },
     stroke: {
-        curve: "straight",
         width: 1.5,
     },
     tooltip: { enabled: false },
     xaxis: {
-        categories: ['Metal', 'Heavy Metal', 'Black Metal', 'Power Metal', 'Symphonic Metal', 'Folk Metal'],
         labels: {
             style: {
-                colors: [toHex(surface700.value), toHex(surface700.value), toHex(surface700.value), toHex(surface700.value), toHex(surface700.value), toHex(surface700.value)],
+                colors: genreData.value.map(_ => toHex(surface700.value)),
                 fontSize: "12px",
                 fontWeight: 500,
                 fontFamily: "InterVariable",
             },
         },
     },
-    yaxis: { labels: { style: { colors: "#00000000" } } }, // Draw transparent. Disabling these entirely misaligns the chart.
+    yaxis: {
+        // Draw transparent. Disabling these entirely misaligns the chart.
+        labels: { style: { colors: "#00000000" } },
+    },
 }));
 
 const minYear = 2009;