diff --git a/myteamwallet_frontend_modern/src/app/core/team/team-stats-api.spec.ts b/myteamwallet_frontend_modern/src/app/core/team/team-stats-api.spec.ts index 15f4133..274f710 100644 --- a/myteamwallet_frontend_modern/src/app/core/team/team-stats-api.spec.ts +++ b/myteamwallet_frontend_modern/src/app/core/team/team-stats-api.spec.ts @@ -21,7 +21,7 @@ describe('TeamStatsApi', () => { it('loads the overview stats for a team', () => { const stats: TeamOverviewStats = { - balanceHistory: [{ month: '2026-07', balance: 125 }], + balanceHistory: [{ month: '2026-07', balance: 125, theoreticalBalance: 150 }], monthlyFlow: [{ month: '2026-07', income: 50, expense: 12 }], topOutstanding: [{ playerId: 3, playerName: 'Alex Muster', balance: 20 }], }; diff --git a/myteamwallet_frontend_modern/src/app/features/team/overview/overview.spec.ts b/myteamwallet_frontend_modern/src/app/features/team/overview/overview.spec.ts index 445fcf0..2bf39f4 100644 --- a/myteamwallet_frontend_modern/src/app/features/team/overview/overview.spec.ts +++ b/myteamwallet_frontend_modern/src/app/features/team/overview/overview.spec.ts @@ -21,8 +21,8 @@ vi.mock('chart.js', () => ({ Chart: MockChart, registerables: [] })); const sampleStats: TeamOverviewStats = { balanceHistory: [ - { month: '2026-06', balance: 100 }, - { month: '2026-07', balance: 125 }, + { month: '2026-06', balance: 100, theoreticalBalance: 100 }, + { month: '2026-07', balance: 125, theoreticalBalance: 150 }, ], monthlyFlow: [ { month: '2026-06', income: 50, expense: 10 }, @@ -193,6 +193,10 @@ describe('Overview', () => { ); expect(balanceChart.type).toBe('line'); expect(balanceChart.data.labels).toHaveLength(2); + expect(balanceChart.data.datasets).toHaveLength(2); + expect(balanceChart.data.datasets[0].data).toEqual([100, 125]); + expect(balanceChart.data.datasets[1].label).toBe('Theoretisch (inkl. offene Beiträge)'); + expect(balanceChart.data.datasets[1].data).toEqual([100, 150]); expect(flowChart.type).toBe('bar'); expect(flowChart.data.datasets).toHaveLength(2); expect(outstandingChart.type).toBe('bar'); diff --git a/myteamwallet_frontend_modern/src/app/features/team/overview/overview.ts b/myteamwallet_frontend_modern/src/app/features/team/overview/overview.ts index ebf6f1b..ef48edb 100644 --- a/myteamwallet_frontend_modern/src/app/features/team/overview/overview.ts +++ b/myteamwallet_frontend_modern/src/app/features/team/overview/overview.ts @@ -21,6 +21,7 @@ import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/oper registerLocaleData(localeDe); const BALANCE_COLOR = '#4f8f46'; +const THEORETICAL_BALANCE_COLOR = '#1d70b8'; const INCOME_COLOR = '#4f8f46'; const EXPENSE_COLOR = '#c1121f'; @@ -75,6 +76,15 @@ export class Overview { tension: 0.3, fill: false, }, + { + label: 'Theoretisch (inkl. offene Beiträge)', + data: points.map((point) => point.theoreticalBalance), + borderColor: THEORETICAL_BALANCE_COLOR, + backgroundColor: THEORETICAL_BALANCE_COLOR, + borderDash: [6, 4], + tension: 0.3, + fill: false, + }, ], }; }); @@ -115,7 +125,7 @@ export class Overview { protected readonly balanceChartOptions: ChartOptions = { responsive: true, maintainAspectRatio: false, - plugins: { legend: { display: false } }, + plugins: { legend: { position: 'bottom' } }, }; protected readonly flowChartOptions: ChartOptions = { diff --git a/myteamwallet_frontend_modern/src/app/models/team-stats.model.ts b/myteamwallet_frontend_modern/src/app/models/team-stats.model.ts index c6694af..d49075c 100644 --- a/myteamwallet_frontend_modern/src/app/models/team-stats.model.ts +++ b/myteamwallet_frontend_modern/src/app/models/team-stats.model.ts @@ -1,6 +1,7 @@ export interface BalanceHistoryPoint { month: string; balance: number; + theoreticalBalance: number; } export interface MonthlyFlowPoint {