Show total weight difference in weight overview (issue #2133 from backend)

public/locales/en/translation.json

@@ -45,6 +45,7 @@
   "nutritionalPlan": "Nutritional plan",
   "addEntry": "Add entry",
   "currentWeight": "Current weight",
+  "totalChange": "Total change",
   "workout": "Workout",
   "seeDetails": "See details",
   "actions": "Actions",

src/components/BodyWeight/Table/index.test.tsx

@@ -30,4 +30,39 @@ describe("Body weight test", () => {
         const weightRow2 = await screen.findByText("90");
         expect(weightRow2).toBeInTheDocument();
     });
+
+    test('displays total change column correctly', async () => {
+        const weightsData: WeightEntry[] = [
+            new WeightEntry(new Date('2021/12/10'), 80, 1),
+            new WeightEntry(new Date('2021/12/20'), 90, 2),
+            new WeightEntry(new Date('2021/12/25'), 85, 3),
+        ];
+
+        render(
+            <BrowserRouter>
+                <QueryClientProvider client={testQueryClient}>
+                    <WeightTable weights={weightsData} />
+                </QueryClientProvider>
+            </BrowserRouter>
+        );
+
+    // Wait for the table to load
+        await screen.findByText('80');
+
+        // Find all rows in the table
+        const rows = screen.getAllByRole('row');
+
+        // Skip header row (index 0), then check each data row
+        // Row 1: totalChange is in the 4th column (index 3) and should be 0
+        const firstRowCells = rows[1].querySelectorAll('td');
+        expect(firstRowCells[3]).toHaveTextContent('0');
+
+        // Row 2: totalChange should be 10
+        const secondRowCells = rows[2].querySelectorAll('td');
+        expect(secondRowCells[3]).toHaveTextContent('10');
+
+        // Row 3: totalChange should be 5
+        const thirdRowCells = rows[3].querySelectorAll('td');
+        expect(thirdRowCells[3]).toHaveTextContent('5');
+    });
 });

src/components/BodyWeight/Table/index.tsx

@@ -32,7 +32,8 @@ export interface WeightTableProps {
 }
 
 export const WeightTable = ({ weights }: WeightTableProps) => {
-
+    console.log('WeightTable rendered with weights:', weights);
+    console.log('Processed weights:', processWeight(weights));
     const availableResultsPerPage = [10, 50, 100];
 
     const { t } = useTranslation();
@@ -59,6 +60,7 @@ export const WeightTable = ({ weights }: WeightTableProps) => {
                             <TableCell align="center">{t('date')}</TableCell>
                             <TableCell align="center">{t('weight')}</TableCell>
                             <TableCell align="center">{t('difference')}</TableCell>
+                            <TableCell align="center">{t('totalChange')}</TableCell>
                             <TableCell align="center">{t('days')}</TableCell>
                             <TableCell align="center" />
                         </TableRow>
@@ -74,6 +76,7 @@ export const WeightTable = ({ weights }: WeightTableProps) => {
                                 </TableCell>
                                 <TableCell align="center">{row.entry.weight}</TableCell>
                                 <TableCell align="center">{+row.change.toFixed(2)}</TableCell>
+                                <TableCell align="center">{+row.totalChange.toFixed(2)}</TableCell>
                                 <TableCell align="center">{row.days.toFixed(1)}</TableCell>
                                 <TableCell align="center">
                                     <ActionButton weight={row.entry} />

src/components/BodyWeight/utils.test.ts

@@ -23,22 +23,39 @@ describe("process_weight tests", () => {
         expect(result[0]).toStrictEqual({
             entry: entry1,
             change: 0,
-            days: 0
+            days: 0,
+            totalChange: 0
         });
         expect(result[1]).toStrictEqual({
             entry: entry2,
             change: 15,
-            days: 10
+            days: 10,
+            totalChange: 15
         });
         expect(result[2]).toStrictEqual({
             entry: entry3,
             change: -25,
-            days: 5
+            days: 5,
+            totalChange: -10
         });
     });
 
     test('processing an empty weight entry list doesnt crash', () => {
         const result = processWeight([]);
         expect(result).toStrictEqual([]);
     });
+
+    test('totalChange accumulates correctly with multiple entries', () => {
+        const entry1 = new WeightEntry(new Date('2021-12-10'), 80, 1);
+        const entry2 = new WeightEntry(new Date('2021-12-15'), 75, 2);
+        const entry3 = new WeightEntry(new Date('2021-12-20'), 82, 3);
+        const entry4 = new WeightEntry(new Date('2021-12-25'), 70, 4);
+
+        const result = processWeight([entry1, entry2, entry3, entry4]);
+
+        expect(result[0].totalChange).toStrictEqual(0);
+        expect(result[1].totalChange).toStrictEqual(-5);
+        expect(result[2].totalChange).toStrictEqual(2);
+        expect(result[3].totalChange).toStrictEqual(-10);
+    });
 });

src/components/BodyWeight/utils.ts

@@ -1,6 +1,9 @@
 import { WeightEntry } from "components/BodyWeight/model";
 
 export const processWeight = (weights: WeightEntry[]) => {
+    // get first weight as reference for changes, if there are no weights, use 0 as reference
+    const firstWeight = weights.length > 0 ? weights[0].weight : 0;
+
     // go through weights, referencing the same weights to have days and weight changes
     return weights.map((entry, i) => {
 
@@ -9,14 +12,16 @@ export const processWeight = (weights: WeightEntry[]) => {
             return {
                 entry,
                 change: 0,
-                days: Math.abs(entry.date.getTime() - entry.date.getTime()) / (1000 * 60 * 60 * 24)
+                days: Math.abs(entry.date.getTime() - entry.date.getTime()) / (1000 * 60 * 60 * 24),
+                totalChange: 0
             };
         }
 
         return {
             entry,
             change: weights[i].weight - weights[i - 1].weight,
-            days: Math.abs(entry.date.getTime() - weights[i - 1].date.getTime()) / (1000 * 60 * 60 * 24)
+            days: Math.abs(entry.date.getTime() - weights[i - 1].date.getTime()) / (1000 * 60 * 60 * 24),
+            totalChange: weights[i].weight - firstWeight
         };
     });
 };