From 28fb783432f236dffd5206502a35fe6d1693d9fd Mon Sep 17 00:00:00 2001
From: Andy Pack <andy@sarsoo.xyz>
Date: Mon, 10 Oct 2022 22:29:47 +0100
Subject: [PATCH] adding count and chart to past page

---
 Selector.Web/Hubs/PastHub.cs                  |  8 ++++++
 Selector.Web/Pages/Past.cshtml                | 14 ++++++++--
 .../Past/{ChartResult.cs => RankResult.cs}    |  4 +++
 Selector.Web/scripts/HubInterfaces.ts         |  2 ++
 Selector.Web/scripts/Now/PlayCountGraph.ts    |  6 ++--
 Selector.Web/scripts/Past/CountCard.ts        | 14 ++++++++++
 Selector.Web/scripts/past.ts                  | 28 ++++++++++++-------
 Selector/Options.cs                           |  2 +-
 8 files changed, 61 insertions(+), 17 deletions(-)
 rename Selector.Web/Past/{ChartResult.cs => RankResult.cs} (73%)
 create mode 100644 Selector.Web/scripts/Past/CountCard.ts

diff --git a/Selector.Web/Hubs/PastHub.cs b/Selector.Web/Hubs/PastHub.cs
index 5055090..4144680 100644
--- a/Selector.Web/Hubs/PastHub.cs
+++ b/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
             });
         }
     }
diff --git a/Selector.Web/Pages/Past.cshtml b/Selector.Web/Pages/Past.cshtml
index 4ecc242..8d865a2 100644
--- a/Selector.Web/Pages/Past.cshtml
+++ b/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>
diff --git a/Selector.Web/Past/ChartResult.cs b/Selector.Web/Past/RankResult.cs
similarity index 73%
rename from Selector.Web/Past/ChartResult.cs
rename to Selector.Web/Past/RankResult.cs
index b3fd206..984dd5c 100644
--- a/Selector.Web/Past/ChartResult.cs
+++ b/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; }
 }
 
diff --git a/Selector.Web/scripts/HubInterfaces.ts b/Selector.Web/scripts/HubInterfaces.ts
index 9d1102b..58a551e 100644
--- a/Selector.Web/scripts/HubInterfaces.ts
+++ b/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 {
diff --git a/Selector.Web/scripts/Now/PlayCountGraph.ts b/Selector.Web/scripts/Now/PlayCountGraph.ts
index aa7182c..128b210 100644
--- a/Selector.Web/scripts/Now/PlayCountGraph.ts
+++ b/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
                     }
                 }
             }
diff --git a/Selector.Web/scripts/Past/CountCard.ts b/Selector.Web/scripts/Past/CountCard.ts
new file mode 100644
index 0000000..b39657e
--- /dev/null
+++ b/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>
+    `
+}
\ No newline at end of file
diff --git a/Selector.Web/scripts/past.ts b/Selector.Web/scripts/past.ts
index 635f347..f8b2505 100644
--- a/Selector.Web/scripts/past.ts
+++ b/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');
\ No newline at end of file
diff --git a/Selector/Options.cs b/Selector/Options.cs
index 7e00573..2f1c930 100644
--- a/Selector/Options.cs
+++ b/Selector/Options.cs
@@ -23,7 +23,7 @@ namespace Selector
     {
         public const string Key = "Past";
 
-
+        public TimeSpan ResampleWindow { get; set; } = TimeSpan.FromDays(7);
     }
 }