sarsoo/Selector
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases Wiki Activity

adding radzen and charts on now page

Browse Source
This commit is contained in:
Andy Pack 2023-01-27 23:31:32 +00:00
parent 76f19458d0
commit f449c7df82
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
3 changed files with 121 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
Selector.MAUI/Pages/Now.razor
View File

@ -1,29 +1,120 @@
@page "/now" @page "/now"
@using Selector.SignalR; @using Selector.SignalR;
@using System.Linq;
@implements IDisposable @implements IDisposable
<h1>Now</h1> <h1>Now</h1>
@*@if (nowCache?.LastPlaying?.Track is not null) <div class="app">
{
<p role="status">@nowCache.LastPlaying.Track.Name</p>
}*@
<NowPlayingCard Track="@nowCache.LastPlaying?.Track" Episode="@nowCache.LastPlaying?.Episode" /> <NowPlayingCard Track="@nowCache.LastPlaying?.Track" Episode="@nowCache.LastPlaying?.Episode" />
<PlayCountCard Track="@nowCache.LastPlaying?.Track" Count="@nowCache.LastPlayCount" Username="@nowCache.LastPlayCount?.Username" /> <PlayCountCard Track="@nowCache.LastPlaying?.Track" Count="@nowCache.LastPlayCount" Username="@nowCache.LastPlayCount?.Username" />
@if (nowCache.LastPlayCount?.ArtistCountData?.Count() > 0)
{
<div class="chart-card card">
<RadzenChart>
<RadzenLineSeries Smooth="@smooth" Data="@artistData" CategoryProperty="Date" Title="Artist" ValueProperty="Plays" Stroke="#598556" StrokeWidth="@strokeWidth">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>
<RadzenLineSeries Smooth="@smooth" Data="@albumData" CategoryProperty="Date" Title="Album" ValueProperty="Plays" Stroke="#a34c77" StrokeWidth="@strokeWidth">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>
<RadzenLineSeries Smooth="@smooth" Data="@trackData" CategoryProperty="Date" Title="Track" ValueProperty="Plays" Stroke="#7a99c2" StrokeWidth="@strokeWidth">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
</RadzenValueAxis>
<RadzenCategoryAxis>
<RadzenGridLines Visible="true" />
</RadzenCategoryAxis>
</RadzenChart>
</div>
}
@if (nowCache.LastPlayCount?.TrackCountData?.Count() > 3)
{
<div class="chart-card card">
<RadzenChart>
<RadzenLineSeries Smooth="@smooth" Data="@trackData" CategoryProperty="Date" Title="Track" ValueProperty="Plays" Stroke="#7a99c2" StrokeWidth="@strokeWidth">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
</RadzenValueAxis>
<RadzenCategoryAxis>
<RadzenGridLines Visible="true" />
</RadzenCategoryAxis>
</RadzenChart>
</div>
}
@if (nowCache.LastPlayCount?.AlbumCountData?.Count() > 3)
{
<div class="chart-card card">
<RadzenChart>
<RadzenLineSeries Smooth="@smooth" Data="@albumData" CategoryProperty="Date" Title="Album" ValueProperty="Plays" Stroke="#a34c77" StrokeWidth="@strokeWidth">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
</RadzenValueAxis>
<RadzenCategoryAxis>
<RadzenGridLines Visible="true" />
</RadzenCategoryAxis>
</RadzenChart>
</div>
}
@if (nowCache.LastPlayCount?.ArtistCountData?.Count() > 3)
{
<div class="chart-card card">
<RadzenChart>
<RadzenLineSeries Smooth="@smooth" Data="@artistData" CategoryProperty="Date" Title="Artist" ValueProperty="Plays" Stroke="#598556" StrokeWidth="@strokeWidth">
<RadzenSeriesDataLabels Visible="@showDataLabels" />
</RadzenLineSeries>
<RadzenValueAxis>
<RadzenGridLines Visible="true" />
</RadzenValueAxis>
<RadzenCategoryAxis>
<RadzenGridLines Visible="true" />
</RadzenCategoryAxis>
</RadzenChart>
</div>
}
</div>
<div class="v-space"></div> <div class="v-space"></div>
@code { @code {
class DataItem
{
public DateTime Date { get; set; }
public int Plays { get; set; }
}
[Inject] [Inject]
private NowHubCache nowCache { get; set; } private NowHubCache nowCache { get; set; }
private bool smooth = true;
private bool showDataLabels = false;
private double strokeWidth = 5;
private DataItem[] artistData { get; set; }
private DataItem[] albumData { get; set; }
private DataItem[] trackData { get; set; }
protected async override Task OnInitializedAsync() protected async override Task OnInitializedAsync()
{ {
nowCache.NewNowPlaying += OnNewPlaying; nowCache.NewNowPlaying += OnNewPlaying;
nowCache.NewCard += OnNewCard; nowCache.NewCard += OnNewCard;
nowCache.NewPlayCount += OnNewPlayCount; nowCache.NewPlayCount += OnNewPlayCount;
nowCache.NewAudioFeature += OnNewAudioFeature; nowCache.NewAudioFeature += OnNewAudioFeature;
UpdateData();
} }
private void OnNewPlaying(object sender, EventArgs args) private void OnNewPlaying(object sender, EventArgs args)
@ -38,9 +129,17 @@
private void OnNewPlayCount(object sender, EventArgs args) private void OnNewPlayCount(object sender, EventArgs args)
{ {
UpdateData();
Update(); Update();
} }
private void UpdateData()
{
artistData = nowCache.LastPlayCount?.ArtistCountData?.Select(x => new DataItem { Date = x.TimeStamp, Plays = x.Value }).ToArray();
albumData = nowCache.LastPlayCount?.AlbumCountData?.Select(x => new DataItem { Date = x.TimeStamp, Plays = x.Value }).ToArray();
trackData = nowCache.LastPlayCount?.TrackCountData?.Select(x => new DataItem { Date = x.TimeStamp, Plays = x.Value }).ToArray();
}
private void OnNewAudioFeature(object sender, EventArgs args) private void OnNewAudioFeature(object sender, EventArgs args)
{ {
Update(); Update();

14
Selector.MAUI/Pages/Now.razor.css
View File

@ -1,6 +1,20 @@
body { body {
} }
.app {
display: block;
}
h1 { h1 {
padding-bottom: 20px; padding-bottom: 20px;
}
@media (min-width: 641px) {
.app {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
width: 100%
}
} }

2
Selector.MAUI/wwwroot/index.html
View File

@ -11,6 +11,7 @@
<link href="css/link.css" rel="stylesheet" /> <link href="css/link.css" rel="stylesheet" />
<link href="css/input.css" rel="stylesheet" /> <link href="css/input.css" rel="stylesheet" />
<link href="Selector.MAUI.styles.css" rel="stylesheet" /> <link href="Selector.MAUI.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
</head> </head>
<body> <body>
@ -26,6 +27,7 @@
</div> </div>
<script src="_framework/blazor.webview.js" autostart="false"></script> <script src="_framework/blazor.webview.js" autostart="false"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body> </body>