adding count and chart to past page

This commit is contained in:
Andy Pack 2022-10-10 22:29:47 +01:00
parent c49e561ae0
commit 28fb783432
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
8 changed files with 61 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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>
`
}

View File

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

View File

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