adding radzen and charts on now page
This commit is contained in:
parent
76f19458d0
commit
f449c7df82
@ -1,29 +1,120 @@
|
||||
@page "/now"
|
||||
@using Selector.SignalR;
|
||||
@using System.Linq;
|
||||
@implements IDisposable
|
||||
|
||||
<h1>Now</h1>
|
||||
|
||||
@*@if (nowCache?.LastPlaying?.Track is not null)
|
||||
{
|
||||
<p role="status">@nowCache.LastPlaying.Track.Name</p>
|
||||
}*@
|
||||
<div class="app">
|
||||
|
||||
<NowPlayingCard Track="@nowCache.LastPlaying?.Track" Episode="@nowCache.LastPlaying?.Episode" />
|
||||
<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>
|
||||
|
||||
@code {
|
||||
|
||||
class DataItem
|
||||
{
|
||||
public DateTime Date { get; set; }
|
||||
public int Plays { get; set; }
|
||||
}
|
||||
|
||||
[Inject]
|
||||
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()
|
||||
{
|
||||
nowCache.NewNowPlaying += OnNewPlaying;
|
||||
nowCache.NewCard += OnNewCard;
|
||||
nowCache.NewPlayCount += OnNewPlayCount;
|
||||
nowCache.NewAudioFeature += OnNewAudioFeature;
|
||||
|
||||
UpdateData();
|
||||
}
|
||||
|
||||
private void OnNewPlaying(object sender, EventArgs args)
|
||||
@ -38,9 +129,17 @@
|
||||
|
||||
private void OnNewPlayCount(object sender, EventArgs args)
|
||||
{
|
||||
UpdateData();
|
||||
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)
|
||||
{
|
||||
Update();
|
||||
|
@ -1,6 +1,20 @@
|
||||
body {
|
||||
}
|
||||
|
||||
.app {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.app {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
width: 100%
|
||||
}
|
||||
}
|
@ -11,6 +11,7 @@
|
||||
<link href="css/link.css" rel="stylesheet" />
|
||||
<link href="css/input.css" rel="stylesheet" />
|
||||
<link href="Selector.MAUI.styles.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -26,6 +27,7 @@
|
||||
</div>
|
||||
|
||||
<script src="_framework/blazor.webview.js" autostart="false"></script>
|
||||
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user