move calculation logic in useStatisticCalculations hook and refacto…

…r into a generic `CalculationRow` component

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-07-08T08:33:37.522Z\n"
-"PO-Revision-Date: 2024-07-08T08:33:37.523Z\n"
+"POT-Creation-Date: 2024-07-10T08:54:31.455Z\n"
+"PO-Revision-Date: 2024-07-10T08:54:31.455Z\n"
 
 msgid "Add new option"
 msgstr ""
@@ -32,6 +32,12 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
+msgid "Median"
+msgstr ""
+
+msgid "% Target Met"
+msgstr ""
+
 msgid "Dashboard"
 msgstr ""
 

i18n/es.po

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-07-08T08:33:37.522Z\n"
+"POT-Creation-Date: 2024-07-10T08:54:31.455Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -32,6 +32,12 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
+msgid "Median"
+msgstr ""
+
+msgid "% Target Met"
+msgstr ""
+
 msgid "Dashboard"
 msgstr ""
 

src/webapp/components/table/statistic-table/CalculationRow.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { TableCell, TableRow } from "@material-ui/core";
+import styled from "styled-components";
+import { TableColumn } from "./StatisticTable";
+
+type CalculationRowProps = {
+    columns: TableColumn[];
+    calculateColumns: string[];
+    label: string;
+    calculate: (column: string) => string | number;
+};
+
+export const CalculationRow: React.FC<CalculationRowProps> = React.memo(
+    ({ columns, calculateColumns, label, calculate }) => {
+        const [labelColumn, ...otherColumns] = columns;
+        return (
+            <TableRow>
+                <FooterTableCell key={`${label}-${labelColumn?.value}`} $boldUnderline>
+                    {label}
+                </FooterTableCell>
+                {otherColumns.map(column => (
+                    <FooterTableCell key={`${label}-${column.value}`}>
+                        {calculateColumns.includes(column.value) ? calculate(column.value) : ""}
+                    </FooterTableCell>
+                ))}
+            </TableRow>
+        );
+    }
+);
+
+const FooterTableCell = styled(TableCell)<{ $boldUnderline?: boolean }>`
+    background-color: ${props => props.theme.palette.common.greyLight};
+    text-decoration: ${props => props.$boldUnderline && "underline"};
+    font-weight: ${props => (props.$boldUnderline || !!props.color) && "600"};
+`;

src/webapp/components/table/statistic-table/StatisticTable.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import i18n from "../../../../utils/i18n";
 import {
     Table,
     TableBody,
@@ -9,13 +10,12 @@ import {
     TableContainer,
 } from "@material-ui/core";
 import { SearchInput } from "../../search-input/SearchInput";
-import i18n from "../../../../utils/i18n";
-import { MedianRow } from "./MedianRow";
-import { PercentTargetMetRow } from "./PercentTargetMetRow";
 import { MultipleSelector } from "../../selector/MultipleSelector";
 import { useTableFilters } from "../../../hooks/useTableFilters";
 import { useTableCell } from "../../../hooks/useTableCell";
+import { useStatisticCalculations } from "../../../hooks/useStatisticCalculations";
 import { ColoredCell } from "./ColoredCell";
+import { CalculationRow } from "./CalculationRow";
 
 export type TableColumn = {
     value: string;
@@ -52,6 +52,10 @@ export const StatisticTable: React.FC<StatisticTableProps> = React.memo(
         const { searchTerm, setSearchTerm, filters, setFilters, filteredRows, filterOptions } =
             useTableFilters(rows, filtersConfig);
         const { getCellColor } = useTableCell(editRiskAssessmentColumns, columnRules);
+        const { calculateMedian, calculatePercentTargetMet } = useStatisticCalculations(
+            filteredRows,
+            columnRules
+        );
 
         return (
             <React.Fragment>
@@ -105,16 +109,17 @@ export const StatisticTable: React.FC<StatisticTableProps> = React.memo(
                                     )}
                                 </TableRow>
                             ))}
-                            <MedianRow
+                            <CalculationRow
                                 columns={columns}
-                                rows={filteredRows}
                                 calculateColumns={calculateColumns}
+                                label={i18n.t("Median")}
+                                calculate={calculateMedian}
                             />
-                            <PercentTargetMetRow
+                            <CalculationRow
                                 columns={columns}
-                                rows={filteredRows}
                                 calculateColumns={calculateColumns}
-                                columnRules={columnRules}
+                                label={i18n.t("% Target Met")}
+                                calculate={calculatePercentTargetMet}
                             />
                         </TableBody>
                     </Table>

src/webapp/hooks/useStatisticCalculations.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { StatisticTableProps } from "../components/table/statistic-table/StatisticTable";
+
+export const useStatisticCalculations = (
+    rows: StatisticTableProps["rows"],
+    columnRules: { [key: string]: number }
+) => {
+    const calculateMedian = useCallback(
+        (column: string) => {
+            const values = rows.map(row => Number(row[column])).filter(value => !isNaN(value));
+            values.sort((a, b) => a - b);
+            const mid = Math.floor(values.length / 2);
+            return (
+                (values.length % 2 !== 0
+                    ? values[mid]
+                    : ((values[mid - 1] || 0) + (values[mid] || 0)) / 2) || 0
+            );
+        },
+        [rows]
+    );
+
+    const calculatePercentTargetMet = useCallback(
+        (column: string) => {
+            const target = columnRules[column] || 7;
+            const count = rows.filter(row => Number(row[column]) <= target).length;
+            const percentage = (count / rows.length) * 100 || 0;
+            return `${percentage.toFixed(0) || 0}%`;
+        },
+        [rows, columnRules]
+    );
+
+    return {
+        calculateMedian,
+        calculatePercentTargetMet,
+    };
+};