Merge development

i18n/en.pot

@@ -84,7 +84,10 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
-msgid "Status: "
+msgid "Median"
+msgstr ""
+
+msgid "% Target Met"
 msgstr ""
 
 msgid "Dashboard"

i18n/es.po

@@ -83,7 +83,10 @@ msgstr ""
 msgid "Last updated: "
 msgstr ""
 
-msgid "Status: "
+msgid "Median"
+msgstr ""
+
+msgid "% Target Met"
 msgstr ""
 
 msgid "Dashboard"

src/webapp/components/table/BasicTable.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@material-ui/core";
+import styled from "styled-components";
+import { Maybe } from "../../../utils/ts-utils";
+import i18n from "../../../utils/i18n";
+import { Option } from "../utils/option";
+import { Cell } from "./Cell";
+
+const noop = () => {};
+
+interface BaseColumn {
+    value: string;
+    label: string;
+}
+interface TextColumn extends BaseColumn {
+    type: "text";
+    underline?: boolean;
+    bold?: boolean;
+}
+interface LinkColumn extends BaseColumn {
+    type: "link";
+}
+interface SelectorColumn extends BaseColumn {
+    type: "selector";
+    options: Option[];
+}
+
+export type TableColumn = TextColumn | LinkColumn | SelectorColumn;
+interface BasicTableProps {
+    columns: TableColumn[];
+    rows: {
+        [key: TableColumn["value"]]: string;
+    }[];
+    onChange?: (cell: Maybe<string>, rowIndex: number, column: TableColumn["value"]) => void;
+    showRowIndex?: boolean;
+}
+
+export const BasicTable: React.FC<BasicTableProps> = React.memo(
+    ({ columns, rows, onChange = noop, showRowIndex = false }) => {
+        return (
+            <StyledTable stickyHeader>
+                <TableHead>
+                    <TableRow>
+                        {showRowIndex && <TableCell />}
+                        {columns.map(({ value, label }) => (
+                            <TableCell key={value}>{i18n.t(label)}</TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row, rowIndex) => (
+                        <TableRow key={rowIndex}>
+                            {showRowIndex && <IndexTableCell>{rowIndex + 1}</IndexTableCell>}
+                            {columns.map(column => (
+                                <Cell
+                                    key={`${rowIndex}-${column.value}`}
+                                    value={row[column.value] || ""}
+                                    rowIndex={rowIndex}
+                                    column={column}
+                                    onChange={onChange}
+                                />
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </StyledTable>
+        );
+    }
+);
+
+const StyledTable = styled(Table)`
+    border-collapse: collapse;
+    & .MuiTableHead-root {
+        color: ${props => props.theme.palette.common.grey1};
+        font-weight: 600;
+        height: 2.25rem;
+        & .MuiTableCell-root {
+            white-space: nowrap;
+            background-color: ${props => props.theme.palette.common.greyLight};
+        }
+    }
+    & .MuiTableBody-root {
+        color: ${props => props.theme.palette.common.grey};
+    }
+    & .MuiTableCell-root {
+        font-size: 0.75rem;
+        padding-block: 0.375rem;
+        border: 1px solid ${props => props.theme.palette.common.grey4};
+        height: 1.875rem;
+    }
+`;
+
+const IndexTableCell = styled(TableCell)`
+    min-width: 2.25rem;
+    padding-inline: 0.375rem;
+    text-align: center;
+`;

src/webapp/components/table/Cell.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from "react";
+import { TableCell, Link } from "@material-ui/core";
+import styled from "styled-components";
+import { Selector } from "../selector/Selector";
+import { TableColumn } from "./BasicTable";
+
+const noop = () => {};
+
+type CellProps = {
+    value: string;
+    rowIndex: number;
+    column: TableColumn;
+    onChange?: (value: string, rowIndex: number, column: TableColumn["value"]) => void;
+};
+
+export const Cell: React.FC<CellProps> = React.memo(
+    ({ value, rowIndex, column, onChange = noop }) => {
+        const [selectorValue, setSelectorValue] = React.useState<string>(value);
+        const handleChange = useCallback(
+            (value: string) => {
+                setSelectorValue(value);
+                onChange(value, rowIndex, column.value);
+            },
+            [onChange, rowIndex, column.value]
+        );
+
+        switch (column.type) {
+            case "link":
+                return (
+                    <StyledTableCell>
+                        <StyledLink onClick={() => onChange(value, rowIndex, column.value)}>
+                            {value}
+                        </StyledLink>
+                    </StyledTableCell>
+                );
+            case "selector":
+                return (
+                    <StyledTableCell>
+                        <Selector
+                            id={`selector-${rowIndex}-${column.value}`}
+                            options={column.options}
+                            selected={selectorValue}
+                            onChange={handleChange}
+                        />
+                    </StyledTableCell>
+                );
+            case "text":
+            default:
+                return (
+                    <StyledTableCell $underline={column.underline} $bold={column.bold}>
+                        {value}
+                    </StyledTableCell>
+                );
+        }
+    }
+);
+
+const StyledTableCell = styled(TableCell)<{ $underline?: boolean; $bold?: boolean }>`
+    text-decoration: ${props => (props.$underline ? "underline" : "initial")};
+    font-weight: ${props => (props.$bold ? 700 : 400)};
+`;
+
+const StyledLink = styled(Link)`
+    color: ${props => props.theme.palette.common.blue600};
+    text-decoration: underline;
+    cursor: pointer;
+`;

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/ColoredCell.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+import { TableCell } from "@material-ui/core";
+import { CellStatus, CellStatusValues } from "./useTableCell";
+
+type ColoredCellProps = {
+    value: string;
+    color?: CellStatusValues;
+};
+
+const cellStatusColor = {
+    [CellStatus.Valid]: "green",
+    [CellStatus.Alert]: "red",
+    [CellStatus.Warning]: "orange",
+};
+
+export const ColoredCell: React.FC<ColoredCellProps> = ({ value, color }) => {
+    return (
+        <StyledTableCell color={color ? cellStatusColor[color] : undefined}>
+            {value}
+        </StyledTableCell>
+    );
+};
+
+const StyledTableCell = styled(TableCell)<{ color?: string }>`
+    background-color: ${props =>
+        props.color ? props.theme.palette.common[props.color] : "initial"};
+    color: ${props => (props.color ? props.theme.palette.common.white : "initial")};
+    font-weight: ${props => (props.color ? "600" : "initial")};
+`;