93 lines
2.6 KiB
Plaintext
93 lines
2.6 KiB
Plaintext
@using ShadcnBlazor.Cards
|
|
|
|
@inject IJSRuntime JsRuntime
|
|
|
|
@implements IAsyncDisposable
|
|
|
|
@typeparam T
|
|
|
|
<Card ClassName="py-0 overflow-hidden">
|
|
<CardContent ClassName="@($"px-0 relative overflow-hidden {ClassName}")">
|
|
<div class="absolute top-6 left-6 z-10">
|
|
@if (!string.IsNullOrEmpty(Title))
|
|
{
|
|
<CardDescription>@Title</CardDescription>
|
|
}
|
|
<CardTitle ClassName="text-lg">
|
|
@if (CurrentValue != null)
|
|
{
|
|
@DisplayField.Invoke(CurrentValue)
|
|
}
|
|
else
|
|
{
|
|
<span>-</span>
|
|
}
|
|
</CardTitle>
|
|
</div>
|
|
<canvas id="@Identifier" class="absolute block rounded-xl -left-5 -right-5 top-0 -bottom-2 w-[calc(100%+30px)]! h-[calc(100%+8px)]!">
|
|
</canvas>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
@code
|
|
{
|
|
[Parameter] public IEnumerable<T>? DefaultItems { get; set; }
|
|
[Parameter] public Func<T, string> DisplayField { get; set; }
|
|
[Parameter] public Func<T, double> ValueField { get; set; }
|
|
[Parameter] public string Title { get; set; }
|
|
[Parameter] public int Min { get; set; } = 0;
|
|
[Parameter] public int Max { get; set; } = 100;
|
|
[Parameter] public int VisibleDataPoints { get; set; } = 30;
|
|
|
|
[Parameter] public string ClassName { get; set; }
|
|
|
|
private string Identifier;
|
|
private T? CurrentValue;
|
|
private int Counter;
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
Identifier = $"realtimeChart{GetHashCode()}";
|
|
}
|
|
|
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
|
{
|
|
if (!firstRender) return;
|
|
|
|
var items = DefaultItems?.ToArray() ?? [];
|
|
|
|
var labels = items.Select(x =>
|
|
{
|
|
Counter++;
|
|
return Counter.ToString();
|
|
});
|
|
|
|
var dataPoints = items.Select(ValueField);
|
|
|
|
await JsRuntime.InvokeVoidAsync(
|
|
"moonlightServersRealtimeChart.init",
|
|
Identifier,
|
|
Identifier,
|
|
VisibleDataPoints,
|
|
Min,
|
|
Max,
|
|
labels,
|
|
dataPoints
|
|
);
|
|
}
|
|
|
|
public async Task PushAsync(T value)
|
|
{
|
|
Counter++;
|
|
var label = Counter.ToString();
|
|
var dataPoint = ValueField.Invoke(value);
|
|
|
|
CurrentValue = value;
|
|
|
|
await JsRuntime.InvokeVoidAsync("moonlightServersRealtimeChart.pushValue", Identifier, label, dataPoint);
|
|
await InvokeAsync(StateHasChanged);
|
|
}
|
|
|
|
public async ValueTask DisposeAsync()
|
|
=> await JsRuntime.InvokeVoidAsync("moonlightServersRealtimeChart.destroy", Identifier);
|
|
} |