feat: show theoretical balance line in the cash-balance chart
Adds a second, dashed line to the existing balance-history chart that includes currently open player dues, so managers can see at a glance how far the actual cash balance lags behind what has been pledged. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -21,7 +21,7 @@ describe('TeamStatsApi', () => {
|
|||||||
|
|
||||||
it('loads the overview stats for a team', () => {
|
it('loads the overview stats for a team', () => {
|
||||||
const stats: TeamOverviewStats = {
|
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 }],
|
monthlyFlow: [{ month: '2026-07', income: 50, expense: 12 }],
|
||||||
topOutstanding: [{ playerId: 3, playerName: 'Alex Muster', balance: 20 }],
|
topOutstanding: [{ playerId: 3, playerName: 'Alex Muster', balance: 20 }],
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -21,8 +21,8 @@ vi.mock('chart.js', () => ({ Chart: MockChart, registerables: [] }));
|
|||||||
|
|
||||||
const sampleStats: TeamOverviewStats = {
|
const sampleStats: TeamOverviewStats = {
|
||||||
balanceHistory: [
|
balanceHistory: [
|
||||||
{ month: '2026-06', balance: 100 },
|
{ month: '2026-06', balance: 100, theoreticalBalance: 100 },
|
||||||
{ month: '2026-07', balance: 125 },
|
{ month: '2026-07', balance: 125, theoreticalBalance: 150 },
|
||||||
],
|
],
|
||||||
monthlyFlow: [
|
monthlyFlow: [
|
||||||
{ month: '2026-06', income: 50, expense: 10 },
|
{ month: '2026-06', income: 50, expense: 10 },
|
||||||
@@ -193,6 +193,10 @@ describe('Overview', () => {
|
|||||||
);
|
);
|
||||||
expect(balanceChart.type).toBe('line');
|
expect(balanceChart.type).toBe('line');
|
||||||
expect(balanceChart.data.labels).toHaveLength(2);
|
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.type).toBe('bar');
|
||||||
expect(flowChart.data.datasets).toHaveLength(2);
|
expect(flowChart.data.datasets).toHaveLength(2);
|
||||||
expect(outstandingChart.type).toBe('bar');
|
expect(outstandingChart.type).toBe('bar');
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/oper
|
|||||||
registerLocaleData(localeDe);
|
registerLocaleData(localeDe);
|
||||||
|
|
||||||
const BALANCE_COLOR = '#4f8f46';
|
const BALANCE_COLOR = '#4f8f46';
|
||||||
|
const THEORETICAL_BALANCE_COLOR = '#1d70b8';
|
||||||
const INCOME_COLOR = '#4f8f46';
|
const INCOME_COLOR = '#4f8f46';
|
||||||
const EXPENSE_COLOR = '#c1121f';
|
const EXPENSE_COLOR = '#c1121f';
|
||||||
|
|
||||||
@@ -75,6 +76,15 @@ export class Overview {
|
|||||||
tension: 0.3,
|
tension: 0.3,
|
||||||
fill: false,
|
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 = {
|
protected readonly balanceChartOptions: ChartOptions = {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
plugins: { legend: { display: false } },
|
plugins: { legend: { position: 'bottom' } },
|
||||||
};
|
};
|
||||||
|
|
||||||
protected readonly flowChartOptions: ChartOptions = {
|
protected readonly flowChartOptions: ChartOptions = {
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
export interface BalanceHistoryPoint {
|
export interface BalanceHistoryPoint {
|
||||||
month: string;
|
month: string;
|
||||||
balance: number;
|
balance: number;
|
||||||
|
theoreticalBalance: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MonthlyFlowPoint {
|
export interface MonthlyFlowPoint {
|
||||||
|
|||||||
Reference in New Issue
Block a user