chk
/
KoogleApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add dayStatisticChart

This commit is contained in:
beo3000 2025-12-29 16:11:22 +01:00
parent 21130895d4
commit 1fbf4763d9
5 changed files with 236 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Koogle.Application/DependencyInjection.cs
View File

@ -42,6 +42,7 @@ namespace Koogle.Application
// Note: Game types are registered in Koogle.Web where Blazor components are defined
// Use services.AddGameType<TDefinition, TLogicService>() to register game types
return services;
}
}

163
src/Koogle.Web/Components/Pages/Days/DayDetails.razor
View File

@ -103,15 +103,17 @@ else
<!-- Main Content with Tabs -->
<MudTabs @bind-ActivePanelIndex="_activeTabIndex" Elevation="0" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-4">
<!-- Tab 1: Details (existing content) -->
<!-- Tab 1: Details (existing content) -->
<MudTabPanel Text="Details" Icon="@Icons.Material.Filled.Info">
<MudGrid>
<MudGrid>
<!-- Participants Section -->
<MudItem xs="12" md="6">
<MudPaper Class="pa-4">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mb-4">
<MudText Typo="Typo.h6">
<MudIcon Icon="@Icons.Material.Filled.People" Class="mr-2" />
<MudIcon Icon="@Icons.Material.Filled.People" Class="mr-2"/>
Teilnehmer (@Day.ParticipantCount)
</MudText>
@if (Day.Status != DayStatus.Closed)
@ -164,7 +166,7 @@ else
Size="Size.Small"
Color="Color.Error"
OnClick="@(() => RemoveParticipant(participant))"
OnClickStopPropagation="true" />
OnClickStopPropagation="true"/>
}
</MudStack>
</MudListItem>
@ -182,77 +184,20 @@ else
</MudPaper>
</MudItem>
<!-- Status/Info Section -->
<!-- Statistics -->
<MudItem xs="12" md="6">
<MudPaper Class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4">
<MudIcon Icon="@Icons.Material.Filled.Info" Class="mr-2" />
Details
</MudText>
<MudSimpleTable Dense="true" Hover="true" Striped="true">
<tbody>
<tr>
<td><strong>Status</strong></td>
<td>
<MudChip T="string" Size="Size.Small" Color="GetStatusColor(Day.Status)">
@GetStatusLabel(Day.Status)
</MudChip>
</td>
</tr>
<tr>
<td><strong>Datum</strong></td>
<td>@Day.PostDate.ToString("dd.MM.yyyy")</td>
</tr>
<tr>
<td><strong>Teilnehmer</strong></td>
<td>@Day.ParticipantCount</td>
</tr>
<tr>
<td><strong>Erstellt</strong></td>
<td>@Day.CreatedAt.ToString("dd.MM.yyyy HH:mm")</td>
</tr>
@if (Day.ModifiedAt.HasValue)
{
<tr>
<td><strong>Geändert</strong></td>
<td>@Day.ModifiedAt.Value.ToString("dd.MM.yyyy HH:mm")</td>
</tr>
}
</tbody>
</MudSimpleTable>
<MudDivider Class="my-4" />
<MudText Typo="Typo.subtitle2" Class="mb-2">Status-Workflow</MudText>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center" Class="mt-2">
<MudChip T="string" Size="Size.Small"
Color="@(Day.Status == DayStatus.New ? Color.Info : Color.Success)"
Icon="@(Day.Status == DayStatus.New ? Icons.Material.Filled.FiberNew : Icons.Material.Filled.Check)">
Neu
</MudChip>
<MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default" />
<MudChip T="string" Size="Size.Small"
Color="@GetWorkflowStepColor(DayStatus.Started)"
Icon="@GetWorkflowStepIcon(DayStatus.Started)">
Gestartet
</MudChip>
<MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default" />
<MudChip T="string" Size="Size.Small"
Color="@GetWorkflowStepColor(DayStatus.Closed)"
Icon="@GetWorkflowStepIcon(DayStatus.Closed)">
Abgeschlossen
</MudChip>
</MudStack>
</MudPaper>
<PlayerStatisticsChart DayId="DayState.Value.SelectedDay.Id"/>
</MudItem>
<!-- PersonExpense Section -->
<MudItem xs="12">
<MudPaper Class="pa-4">
<MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mb-4">
<MudText Typo="Typo.h6">
<MudIcon Icon="@Icons.Material.Filled.AttachMoney" Class="mr-2" />
<MudIcon Icon="@Icons.Material.Filled.AttachMoney" Class="mr-2"/>
Strafen / Kosten (@FilteredExpenses.Count@(_selectedParticipantId.HasValue && Expenses.Count != FilteredExpenses.Count ? $"/{Expenses.Count}" : ""))
</MudText>
@if (Day.Status != DayStatus.Closed)
@ -292,7 +237,7 @@ else
@if (DayState.Value.IsLoadingExpenses)
{
<MudProgressLinear Indeterminate="true" Class="mb-4" />
<MudProgressLinear Indeterminate="true" Class="mb-4"/>
}
@if (Day.Participants.Count == 0)
@ -388,7 +333,7 @@ else
Size="Size.Small"
Color="Color.Success"
OnClick="@(() => MarkAsPaid(context))"
Title="Als bezahlt markieren" />
Title="Als bezahlt markieren"/>
}
else
{
@ -396,7 +341,7 @@ else
Size="Size.Small"
Color="Color.Warning"
OnClick="@(() => MarkAsOpen(context))"
Title="Als offen markieren" />
Title="Als offen markieren"/>
}
@if (Day.Status != DayStatus.Closed)
{
@ -404,7 +349,7 @@ else
Size="Size.Small"
Color="Color.Error"
OnClick="@(() => ConfirmDeleteExpense(context))"
Title="Löschen" />
Title="Löschen"/>
}
</MudStack>
</MudTd>
@ -413,10 +358,80 @@ else
}
</MudPaper>
</MudItem>
</MudGrid>
<!-- Completed Games List at bottom of Details tab -->
<CompletedGamesList DayId="DayId" />
<!-- Completed Games List at bottom of Details tab -->
<MudItem xs="12" md="6">
<CompletedGamesList DayId="DayId"/>
</MudItem>
<!-- Status/Info Section -->
<MudItem xs="12" md="6">
<MudPaper Class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4">
<MudIcon Icon="@Icons.Material.Filled.Info" Class="mr-2"/>
Details
</MudText>
<MudSimpleTable Dense="true" Hover="true" Striped="true">
<tbody>
<tr>
<td><strong>Status</strong></td>
<td>
<MudChip T="string" Size="Size.Small" Color="GetStatusColor(Day.Status)">
@GetStatusLabel(Day.Status)
</MudChip>
</td>
</tr>
<tr>
<td><strong>Datum</strong></td>
<td>@Day.PostDate.ToString("dd.MM.yyyy")</td>
</tr>
<tr>
<td><strong>Teilnehmer</strong></td>
<td>@Day.ParticipantCount</td>
</tr>
<tr>
<td><strong>Erstellt</strong></td>
<td>@Day.CreatedAt.ToString("dd.MM.yyyy HH:mm")</td>
</tr>
@if (Day.ModifiedAt.HasValue)
{
<tr>
<td><strong>Geändert</strong></td>
<td>@Day.ModifiedAt.Value.ToString("dd.MM.yyyy HH:mm")</td>
</tr>
}
</tbody>
</MudSimpleTable>
<MudDivider Class="my-4"/>
<MudText Typo="Typo.subtitle2" Class="mb-2">Status-Workflow</MudText>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center" Class="mt-2">
<MudChip T="string" Size="Size.Small"
Color="@(Day.Status == DayStatus.New ? Color.Info : Color.Success)"
Icon="@(Day.Status == DayStatus.New ? Icons.Material.Filled.FiberNew : Icons.Material.Filled.Check)">
Neu
</MudChip>
<MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default"/>
<MudChip T="string" Size="Size.Small"
Color="@GetWorkflowStepColor(DayStatus.Started)"
Icon="@GetWorkflowStepIcon(DayStatus.Started)">
Gestartet
</MudChip>
<MudIcon Icon="@Icons.Material.Filled.ArrowForward" Size="Size.Small" Color="Color.Default"/>
<MudChip T="string" Size="Size.Small"
Color="@GetWorkflowStepColor(DayStatus.Closed)"
Icon="@GetWorkflowStepIcon(DayStatus.Closed)">
Abgeschlossen
</MudChip>
</MudStack>
</MudPaper>
</MudItem>
</MudGrid>
</MudTabPanel>
<!-- Tab 2: Eingabe (Game Input) -->

128
src/Koogle.Web/Components/Shared/PlayerStatisticsChart.razor Normal file
View File

@ -0,0 +1,128 @@
@using ApexCharts
@using Koogle.Application.DTOs
@using Koogle.Application.Interfaces
@using Color = MudBlazor.Color
@using Size = MudBlazor.Size
@inject IPlayerStatisticsService StatisticsService
@inject ISnackbar Snackbar
<MudPaper Class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4">
<MudIcon Icon="@Icons.Material.Filled.BarChart" Class="mr-2" />
Statistik
</MudText>
@if (_isLoading)
{
<MudProgressCircular Indeterminate="true" Size="Size.Small" />
}
else if (_stats != null)
{
@if (_stats.PlayerStats.Count == 0)
{
<MudText Typo="Typo.body2" Color="Color.Secondary">
Noch keine Statistiken vorhanden. Spiele ein paar Runden!
</MudText>
}
else
{
<ApexChart TItem="MyData"
Title="">
<ApexPointSeries TItem="MyData"
Items="Data"
Name="Kegel"
SeriesType="SeriesType.Bar"
XValue="e => e.Name"
YValue="e => e.TotalPins"/>
<ApexPointSeries TItem="MyData"
Items="Data"
Name="Gossen"
SeriesType="SeriesType.Bar"
XValue="e => e.Name"
YValue="e => e.TotalGutters"/>
<ApexPointSeries TItem="MyData"
Items="Data"
Name="Würfe"
SeriesType="SeriesType.Bar"
XValue="e => e.Name"
YValue="e => e.TotalThrows" />
<ApexPointSeries TItem="MyData"
Items="Data"
Name="alle 9"
SeriesType="SeriesType.Bar"
XValue="e => e.Name"
YValue="e => e.TotalStrikes" />
<ApexPointSeries TItem="MyData"
Items="Data"
Name="Kränze"
SeriesType="SeriesType.Bar"
XValue="e => e.Name"
YValue="e => e.TotalCircles" />
<ApexPointSeries TItem="MyData"
Items="Data"
Name="Abgeräumt"
SeriesType="SeriesType.Bar"
XValue="e => e.Name"
YValue="e => e.TotalCleared" />
</ApexChart>
}
}
</MudPaper>
@code {
private List<MyData> Data { get; set; } = new();
public class MyData
{
public string Name { get; set; } = string.Empty;
public int TotalPins { get; set; }
public int TotalGutters { get; set; }
public int TotalThrows { get; set; }
public int TotalStrikes { get; set; }
public int TotalCircles { get; set; }
public int TotalCleared { get; set; }
}
[Parameter, EditorRequired]
public Guid DayId { get; set; }
private DayStatisticsDto? _stats;
private bool _isLoading = true;
protected override async Task OnInitializedAsync()
{
try
{
_stats = await StatisticsService.GetDayStatisticsAsync(DayId);
Data.AddRange(
_stats.PlayerStats.Select(s => new MyData
{
Name = s.PersonName,
TotalPins = s.TotalPins,
TotalGutters = s.TotalGutters,
TotalThrows = s.TotalThrows,
TotalStrikes = s.TotalStrikes,
TotalCircles = s.TotalCircles,
TotalCleared = s.TotalCleared
})
);
}
catch (Exception ex)
{
Snackbar.Add($"Fehler beim Laden der Statistiken: {ex.Message}", Severity.Error);
}
finally
{
_isLoading = false;
}
}
}

1
src/Koogle.Web/Koogle.Web.csproj
View File

@ -7,6 +7,7 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazor-ApexCharts" Version="6.0.2" />
<PackageReference Include="Fluxor.Blazor.Web" Version="6.9.0" />
<PackageReference Include="Fluxor.Blazor.Web.ReduxDevTools" Version="6.9.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="9.0.11">

21
src/Koogle.Web/Program.cs
View File

@ -1,12 +1,13 @@
using System.Reflection;
using ApexCharts;
using Fluxor;
using Fluxor.Blazor.Web.ReduxDevTools;
using Koogle.Application;
using Koogle.Application.Games;
using Koogle.Application.Games.Training;
using Koogle.Application.Games.Shit;
using Koogle.Application.Games.DeathBox;
using Koogle.Application.Games.Shit;
using Koogle.Application.Games.Training;
using Koogle.Infrastructure;
using Koogle.Infrastructure.Data;
using Koogle.Infrastructure.Security;
using Koogle.Web.Components;
using Koogle.Web.Hubs;
@ -15,7 +16,7 @@ using Koogle.Web.Store.AuthState;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Server;
using MudBlazor.Services;
using Koogle.Infrastructure.Data;
using System.Reflection;
var builder = WebApplication.CreateBuilder(args);
@ -65,6 +66,18 @@ builder.Services.AddScoped<IHostEnvironmentAuthenticationStateProvider>(sp =>
builder.Services.AddMudServices();
// ApexCharts - https://github.com/apexcharts/Blazor-ApexCharts
builder.Services.AddApexCharts(e =>
{
e.GlobalOptions = new ApexChartBaseOptions
{
Debug = true,
Theme = new Theme { Palette = PaletteType.Palette6 }
};
});
var app = builder.Build();
// Configure the HTTP request pipeline.