adding count and chart to past page

Selector.Web/Hubs/PastHub.cs

@@ -107,6 +107,14 @@ namespace Selector.Web.Hubs
                     Name = x.Key,
                     Value = x.Item2
                 }).ToArray(),
+
+                ResampledSeries = listenQuery
+                    .Resample(pastOptions.Value.ResampleWindow)
+                    //.ResampleByMonth()
+                    .CumulativeSum()
+                    .ToArray(),
+
+                TotalCount = listenQuery.Length
             });
         }
     }

Selector.Web/Pages/Past.cshtml

@@ -24,10 +24,18 @@
             </div>
         </div>
 
+        <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>
+
         <div style="width: 100%">
-            <rank-card :title="'Track'" :entries="trackEntries" v-if="trackEntries.length > 0"></rank-card>
-            <rank-card :title="'Album'" :entries="albumEntries" v-if="albumEntries.length > 0"></rank-card>
-            <rank-card :title="'Artist'" :entries="artistEntries" v-if="artistEntries.length > 0"></rank-card>
+            <rank-card :title="'Track'" :entries="trackEntries" v-if="trackEntries.length > 1"></rank-card>
+            <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>
     </div>
 </div>

Selector.Web/Past/RankResult.cs

@@ -8,5 +8,9 @@ public class RankResult
     public IEnumerable<ChartEntry> TrackEntries { get; set; }
     public IEnumerable<ChartEntry> AlbumEntries { get; set; }
     public IEnumerable<ChartEntry> ArtistEntries { get; set; }
+
+    public IEnumerable<CountSample> ResampledSeries { get; set; }
+
+    public int TotalCount { get; set; }
 }
 

Selector.Web/scripts/HubInterfaces.ts

@@ -41,6 +41,8 @@ export interface RankResult {
     trackEntries: RankEntry[];
     albumEntries: RankEntry[];
     artistEntries: RankEntry[];
+    totalCount: number;
+    resampledSeries: CountSample[];
 }
 
 export interface RankEntry {

Selector.Web/scripts/Now/PlayCountGraph.ts

@@ -31,7 +31,7 @@ export let PlayCountChartCard: Vue.Component = {
         <div class="card info-card chart-card">
             <h1>{{ title }}</h1>
             <canvas :id="chartId"></canvas>
-            <lastfm-logo :link="link" />
+            <lastfm-logo :link="link" v-if="link" />
         </div>
     `, 
     mounted() {
@@ -56,8 +56,8 @@ export let PlayCountChartCard: Vue.Component = {
                     },
                     xAxis: {
                         type: 'time',
-                        min: this.earliest_date,
-                        max: this.latest_date
+                        // min: this.earliest_date,
+                        // max: this.latest_date
                     }
                 }
             }

Selector.Web/scripts/Past/CountCard.ts

@@ -0,0 +1,14 @@
+import * as Vue from "vue";
+
+export let CountCard: Vue.Component = {
+    props: ['count'],
+    computed: {
+        
+    },
+    template: 
+    `
+        <div class="card">
+            <h2>{{ count }}</h2>
+        </div>
+    `
+}

Selector.Web/scripts/past.ts

@@ -3,6 +3,9 @@ import * as signalR from "@microsoft/signalr";
 import * as Vue from "vue";
 import { RankResult, RankEntry, PastParams } from "./HubInterfaces";
 import { RankCard } from "./Past/RankCard";
+import { CountCard } from "./Past/CountCard";
+import { PlayCountChartCard } from "./Now/PlayCountGraph";
+import { LastFmLogoLink } from "./Now/LastFm";
 
 const connection = new signalR.HubConnectionBuilder()
     .withUrl("/pasthub")
@@ -27,6 +30,10 @@ const app = Vue.createApp({
             trackEntries: [],
             albumEntries: [],
             artistEntries: [],
+
+            resampledSeries: [],
+
+            totalCount: 0
         }
     },
     created() {
@@ -37,29 +44,30 @@ const app = Vue.createApp({
             this.trackEntries = result.trackEntries;
             this.albumEntries = result.albumEntries;
             this.artistEntries = result.artistEntries;
+            this.resampledSeries = result.resampledSeries;
+            this.totalCount = result.totalCount;
         });
     },
     methods: {
         submit() {
-            console.log({
-                "track": this.track,
-                "album": this.album,
-                "artist": this.artist,
-                "from": this.from,
-                "to": this.to,
-            });
-
-            connection.invoke("OnSubmitted", {
+            let context = {
                 track: this.track,
                 album: this.album,
                 artist: this.artist,
                 from: this.from,
                 to: this.to,
-            } as PastParams);
+            } as PastParams;
+
+            console.log(context);
+
+            connection.invoke("OnSubmitted", context);
         }
     }
 });
 
+app.component("play-count-chart-card", PlayCountChartCard);
 app.component("rank-card", RankCard);
+app.component("lastfm-logo", LastFmLogoLink);
+app.component("count-card", CountCard);
 
 const vm = app.mount('#pastapp');

Selector/Options.cs

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