past page QOL

Selector.Web/Hubs/PastHub.cs

@@ -1,6 +1,8 @@
 using System;
+using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using IF.Lastfm.Core.Objects;
 using Microsoft.AspNetCore.SignalR;
 using Microsoft.Extensions.Options;
 using Selector.Cache;
@@ -49,6 +51,16 @@ namespace Selector.Web.Hubs
 
         }
 
+        private static IEnumerable<string> AlbumSuffixes = new[]
+        {
+            " (Deluxe)",
+            " (Deluxe Edition)",
+            " (Special)",
+            " (Special Edition)",
+            " (Expanded)",
+            " (Expanded Edition)",
+        };
+
         public async Task OnSubmitted(PastParams param)
         {
             param.Track = string.IsNullOrWhiteSpace(param.Track) ? null : param.Track;
@@ -67,38 +79,49 @@ namespace Selector.Web.Hubs
                 to: to
             ).ToArray();
 
+            Parallel.ForEach(listenQuery, (listen) =>
+            {
+                foreach (var suffix in AlbumSuffixes)
+                {
+                    if (listen.AlbumName.EndsWith(suffix, StringComparison.OrdinalIgnoreCase))
+                    {
+                        listen.AlbumName = listen.AlbumName.Substring(0, listen.AlbumName.Length - suffix.Length);
+                    }
+                }
+            });
+
             var artistGrouped = listenQuery
-                .GroupBy(x => x.ArtistName)
+                .GroupBy(x => x.ArtistName.ToLowerInvariant())
                 .Select(x => (x.Key, x.Count()))
                 .OrderByDescending(x => x.Item2)
-                .Take(20)
+                .Take(pastOptions.Value.RankingCount)
                 .ToArray();
 
             var albumGrouped = listenQuery
-                .GroupBy(x => (x.AlbumName, x.ArtistName))
+                .GroupBy(x => (x.AlbumName.ToLowerInvariant(), x.ArtistName.ToLowerInvariant()))
-                .Select(x => (x.Key, x.Count()))
+                .Select(x => (x.Key, x.Count(), $"{x.FirstOrDefault()?.AlbumName} // {x.FirstOrDefault()?.ArtistName}"))
                 .OrderByDescending(x => x.Item2)
-                .Take(20)
+                .Take(pastOptions.Value.RankingCount)
                 .ToArray();
 
             var trackGrouped = listenQuery
-                .GroupBy(x => (x.TrackName, x.ArtistName))
+                .GroupBy(x => (x.TrackName.ToLowerInvariant(), x.ArtistName.ToLowerInvariant()))
-                .Select(x => (x.Key, x.Count()))
+                .Select(x => (x.Key, x.Count(), $"{x.FirstOrDefault()?.TrackName} // {x.FirstOrDefault()?.ArtistName}"))
                 .OrderByDescending(x => x.Item2)
-                .Take(20)
+                .Take(pastOptions.Value.RankingCount)
                 .ToArray();
 
             await Clients.Caller.OnRankResult(new()
             {
                 TrackEntries = trackGrouped.Select(x => new ChartEntry()
                 {
-                    Name = $"{x.Key.TrackName} - {x.Key.ArtistName}",
+                    Name = x.Item3,
                     Value = x.Item2
                 }).ToArray(),
 
                 AlbumEntries = albumGrouped.Select(x => new ChartEntry()
                 {
-                    Name = $"{x.Key.AlbumName} - {x.Key.ArtistName}",
+                    Name = x.Item3,
                     Value = x.Item2
                 }).ToArray(),
 

Selector.Web/Pages/Past.cshtml

@@ -9,9 +9,9 @@
     <div id="pastapp" class="app col-12">
         <div class="card" style="width: 100%">
             <div>
-                <input v-model="track" class="form-input form-control" placeholder="Track" />
+                <input v-model="track" class="form-input form-control" placeholder="Track" v-on:keyup.enter="submit" />
-                <input v-model="album" class="form-input form-control" placeholder="Album" />
+                <input v-model="album" class="form-input form-control" placeholder="Album" v-on:keyup.enter="submit" />
-                <input v-model="artist" class="form-input form-control" placeholder="Artist" />
+                <input v-model="artist" class="form-input form-control" placeholder="Artist" v-on:keyup.enter="submit" />
             </div>
             <div>
                 <label for="from-picker">From</label>
@@ -27,7 +27,6 @@
         <count-card :count="totalCount"></count-card>
 
         <play-count-chart-card :data_points="resampledSeries"
-                               :title="'Time Series'"
                                :chart_id="'time_series'"
                                :colour="'#ffffff'"
                                v-if="resampledSeries.length > 0"></play-count-chart-card>
@@ -37,6 +36,11 @@
             <rank-card :title="'Album'" :entries="albumEntries" v-if="albumEntries.length > 1"></rank-card>
             <rank-card :title="'Artist'" :entries="artistEntries" v-if="artistEntries.length > 1"></rank-card>
         </div>
+
+        <album-chart-card :data_points="mutatedAlbums"
+                        :chart_id="'past'"
+                        :colour="'#ffffff'"
+                        v-if="albumEntries.length > 1"></album-chart-card>
     </div>
 </div>
 

Selector.Web/scripts/Now/PlayCountGraph.ts

@@ -52,7 +52,7 @@ export let PlayCountChartCard: Vue.Component = {
                 },
                 scales: {
                     yAxis: {
-                        suggestedMin: 0
+                        beginAtZero: true
                     },
                     xAxis: {
                         type: 'time',
@@ -112,7 +112,7 @@ export let CombinedPlayCountChartCard: Vue.Component = {
                 },
                 scales: {
                     yAxis: {
-                        suggestedMin: 0
+                        beginAtZero: true
                     },
                     xAxis: {
                         type: 'time',

Selector.Web/scripts/Past/BarGraphCard.ts

@@ -0,0 +1,48 @@
+import * as Vue from "vue";
+import { Chart, BarElement, BarController } from "chart.js";
+import 'chartjs-adapter-luxon';
+import { CountSample, RankEntry } from "scripts/HubInterfaces";
+
+Chart.register(BarElement, BarController);
+
+export let BarChartCard: Vue.Component = {
+    props: ['data_points', 'title', 'chart_id', 'link', 'earliest_date', 'latest_date', 'colour'],
+    data() {
+        return {
+            chartData: {
+                datasets: [{
+                    data: this.data_points.map((e: RankEntry) => {
+                        return {x: e.name, y: e.value};
+                    }),
+                }]
+            }
+        }
+    },
+    computed: {
+        chartId() {
+            return "bar-chart-" + this.chart_id;
+        }
+    },
+    template: 
+    `
+        <div class="chart-card card" style="width: 100%">
+            <h1>{{ title }}</h1>
+            <canvas :id="chartId"></canvas>
+            <lastfm-logo :link="link" v-if="link" />
+        </div>
+    `, 
+    mounted() {
+        new Chart(`bar-chart-${this.chart_id}`, {
+            type: "bar",
+            data: this.chartData,
+            options: {
+                backgroundColor: 'white',
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                }
+            }
+        })
+    }
+}

Selector.Web/scripts/Past/CountCard.ts

@@ -3,12 +3,21 @@ import * as Vue from "vue";
 export let CountCard: Vue.Component = {
     props: ['count'],
     computed: {
-        
+        formattedCount() {
+            if(this.count != null)
+            {
+                return this.count.toLocaleString()
+            }
+            else
+            {
+                return '0';
+            }
+        }
     },
     template: 
     `
         <div class="card">
-            <h2>{{ count }}</h2>
+            <h2>{{ formattedCount }}</h2>
         </div>
     `
 }

Selector.Web/scripts/past.ts

@@ -6,9 +6,11 @@ import { RankCard } from "./Past/RankCard";
 import { CountCard } from "./Past/CountCard";
 import { PlayCountChartCard } from "./Now/PlayCountGraph";
 import { LastFmLogoLink } from "./Now/LastFm";
+import { BarChartCard } from "./Past/BarGraphCard";
 
 const connection = new signalR.HubConnectionBuilder()
     .withUrl("/pasthub")
+    .withAutomaticReconnect()
     .build();
 
 connection.start()
@@ -60,12 +62,26 @@ const app = Vue.createApp({
 
             console.log(context);
 
+            this.trackEntries = [];
+            this.albumEntries = [];
+            this.artistEntries = [];
+            this.resampledSeries = [];
+
             connection.invoke("OnSubmitted", context);
         }
-    }
+    },
+    computed: {
+        mutatedAlbums() {
+            return this.albumEntries.map((e: RankEntry) => {
+                e.name = e.name.split(' // ')[0];
+                return e;
+            });
+        }
+    },
 });
 
 app.component("play-count-chart-card", PlayCountChartCard);
+app.component("album-chart-card", BarChartCard);
 app.component("rank-card", RankCard);
 app.component("lastfm-logo", LastFmLogoLink);
 app.component("count-card", CountCard);

Selector/Options.cs

@@ -24,6 +24,7 @@ namespace Selector
         public const string Key = "Past";
 
         public TimeSpan ResampleWindow { get; set; } = TimeSpan.FromDays(7);
+        public int RankingCount { get; set; } = 20;
     }
 }