Skip to content

Commit

Permalink
handle cell color with rules
Browse files Browse the repository at this point in the history
  • Loading branch information
fdelemarre committed Jun 27, 2024
1 parent 70b455f commit 9531bc9
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 134 deletions.
69 changes: 54 additions & 15 deletions src/webapp/components/table/performance-overview-table/PerformanceOverviewTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import {
import styled from "styled-components";
import { SearchInput } from "../../search-input/SearchInput";
import { Selector } from "../../selector/Selector";

type CellType = { value?: string; color?: string };
import { Maybe } from "../../../../utils/ts-utils";

export type TableColumn = {
value: string;
Expand All @@ -22,7 +21,7 @@ export type TableColumn = {

interface PerformanceOverviewTableProps {
rows: {
[key: TableColumn["value"]]: CellType;
[key: TableColumn["value"]]: string;
}[];
}

Expand Down Expand Up @@ -52,19 +51,59 @@ export const PerformanceOverviewTable: React.FC<PerformanceOverviewTableProps> =
{ label: "Respond 7d", dark: true, value: "respond7d" },
];

const editRiskAssessmentColumns = [
"era1",
"era2",
"era3",
"era4",
"era5",
"era6",
"era7",
"eri",
];
const columnRules: { [key: string]: number } = {
detect7d: 7,
notify1d: 1,
respond7d: 7,
};
useEffect(() => {
if (searchTerm === "") {
setFilteredRows(rows);
} else {
const filtered = _.filter(rows, row => {
return _.some(row, cell => {
return _.includes(_.toLower(cell.value), _.toLower(searchTerm));
return _.includes(_.toLower(cell), _.toLower(searchTerm));
});
});
setFilteredRows(filtered);
}
}, [searchTerm, rows]);

const getCellColor = (cellValue: Maybe<string>, column: TableColumn["value"]) => {
// Return "orange" for empty Edit Risk Assessment column
if (!cellValue) {
return _.includes(editRiskAssessmentColumns, column) ? "orange" : undefined;
}

const value = Number(cellValue);

// Return "red" for value greater than rule in Edit Risk Assessment column
if (_.includes(editRiskAssessmentColumns, column)) {
return columnRules.respond7d && value > columnRules.respond7d ? "red" : undefined;
}

// Get the column rule for the current column
const rule = columnRules[column];

// If there is no rule for the current column, return undefined
if (rule === undefined) {
return undefined;
}

// Return "green" if value is less than or equal to the rule, otherwise "red"
return value <= rule ? "green" : "red";
};

return (
<React.Fragment>
<Container>
Expand All @@ -87,7 +126,7 @@ export const PerformanceOverviewTable: React.FC<PerformanceOverviewTableProps> =
<TableHead>
<TableRow>
{columns.map(({ value, label, dark = false }) => (
<HeadTableCell key={value} dark={dark}>
<HeadTableCell key={value} $dark={dark}>
{label}
</HeadTableCell>
))}
Expand All @@ -99,10 +138,10 @@ export const PerformanceOverviewTable: React.FC<PerformanceOverviewTableProps> =
{columns.map((column, columnIndex) => (
<BodyTableCell
key={`${rowIndex}-${column.value}`}
color={row[column.value]?.color}
boldUnderline={columnIndex === 0}
color={getCellColor(row[column.value], column.value)}
$boldUnderline={columnIndex === 0}
>
{row[column.value]?.value || ""}
{row[column.value] || ""}
</BodyTableCell>
))}
</TableRow>
Expand Down Expand Up @@ -131,27 +170,27 @@ const StyledTableContainer = styled(TableContainer)`
color: ${props => props.theme.palette.common.grey};
}
& .MuiTableCell-root {
min-width: 2rem;
font-size: 0.75rem;
white-space: nowrap;
border: 1px solid ${props => props.theme.palette.common.grey};
padding-inline: 0.5rem;
padding-block: 0.625rem;
}
`;

const HeadTableCell = styled(TableCell)<{ dark?: boolean }>`
background-color: ${props => (props.dark ? props.theme.palette.common.grey2 : "initial")};
color: ${props => (props.dark ? props.theme.palette.common.white : "initial")};
const HeadTableCell = styled(TableCell)<{ $dark?: boolean }>`
background-color: ${props => (props.$dark ? props.theme.palette.common.grey2 : "initial")};
color: ${props => (props.$dark ? props.theme.palette.common.white : "initial")};
font-weight: 600;
`;

const BodyTableCell = styled(TableCell)<{ color?: string; boldUnderline?: boolean }>`
const BodyTableCell = styled(TableCell)<{ color?: string; $boldUnderline: boolean }>`
background-color: ${props =>
props.color ? props.theme.palette.common[props.color] : "initial"};
color: ${props => (props.color ? props.theme.palette.common.white : "initial")};
text-decoration: ${props => props.boldUnderline && "underline"};
font-weight: ${props => (props.boldUnderline || props.color) && "600"};
text-decoration: ${props => props.$boldUnderline && "underline"};
font-weight: ${props => (props.$boldUnderline || !!props.color) && "600"};
`;

const Container = styled.div`
Expand Down
238 changes: 119 additions & 119 deletions src/webapp/pages/dashboard/DashboardPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,137 +8,137 @@ import { PerformanceOverviewTable } from "../../components/table/performance-ove
export const DashboardPage: React.FC = React.memo(() => {
const dataPerformanceOverview = [
{
event: { value: "Cholera" },
location: { value: "Northern" },
cases: { value: "62" },
deaths: { value: "34" },
duration: { value: "4d" },
manager: { value: "Paul Zulu" },
detect7d: { value: "2", color: "green" },
notify1d: { value: "1", color: "green" },
era1: { value: "1" },
era2: { color: "orange" },
era3: { value: "", color: "orange" },
era4: { value: "", color: "orange" },
era5: { value: "", color: "orange" },
era6: { value: "", color: "orange" },
era7: { value: "", color: "orange" },
eri: { value: "", color: "orange" },
respond7d: { value: "7", color: "green" },
event: "Cholera",
location: "Northern",
cases: "62",
deaths: "34",
duration: "4d",
manager: "Paul Zulu",
detect7d: "2",
notify1d: "1",
era1: "1",
era2: "",
era3: "",
era4: "",
era5: "",
era6: "",
era7: "",
eri: "",
respond7d: "",
},
{
event: { value: "Measles" },
location: { value: "Western" },
cases: { value: "112" },
deaths: { value: "32" },
duration: { value: "19d" },
manager: { value: "Moses Mei" },
detect7d: { value: "12", color: "red" },
notify1d: { value: "1", color: "green" },
era1: { value: "1" },
era2: { value: "3" },
era3: { value: "6" },
era4: { value: "7" },
era5: { value: "7" },
era6: { value: "7" },
era7: { value: "7" },
eri: { value: "7" },
respond7d: { value: "7", color: "green" },
event: "Measles",
location: "Western",
cases: "112",
deaths: "32",
duration: "19d",
manager: "Moses Mei",
detect7d: "12",
notify1d: "1",
era1: "1",
era2: "3",
era3: "6",
era4: "7",
era5: "7",
era6: "7",
era7: "7",
eri: "7",
respond7d: "7",
},
{
event: { value: "Rabies" },
location: { value: "Central" },
cases: { value: "39" },
deaths: { value: "12" },
duration: { value: "13d" },
manager: { value: "Tristin Go" },
detect7d: { value: "6", color: "green" },
notify1d: { value: "3", color: "red" },
era1: { value: "6" },
era2: { value: "7" },
era3: { value: "7" },
era4: { value: "7" },
era5: { value: "7" },
era6: { value: "7" },
era7: { value: "7" },
eri: { value: "7" },
respond7d: { value: "7", color: "green" },
event: "Rabies",
location: "Central",
cases: "39",
deaths: "12",
duration: "13d",
manager: "Tristin Go",
detect7d: "6",
notify1d: "3",
era1: "6",
era2: "7",
era3: "7",
era4: "7",
era5: "7",
era6: "7",
era7: "7",
eri: "7",
respond7d: "7",
},
{
event: { value: "Polio" },
location: { value: "Copperbelt" },
cases: { value: "10" },
deaths: { value: "3" },
duration: { value: "18d" },
manager: { value: "Lillie Lee" },
detect7d: { value: "10", color: "red" },
notify1d: { value: "3", color: "red" },
era1: { value: "4", color: "red" },
era2: { value: "10", color: "red" },
era3: { value: "9", color: "red" },
era4: { value: "12", color: "red" },
era5: { value: "12", color: "red" },
era6: { value: "5", color: "red" },
era7: { value: "7" },
eri: { value: "7" },
respond7d: { value: "12", color: "red" },
event: "Polio",
location: "Copperbelt",
cases: "10",
deaths: "3",
duration: "18d",
manager: "Lillie Lee",
detect7d: "10",
notify1d: "3",
era1: "4",
era2: "10",
era3: "9",
era4: "12",
era5: "12",
era6: "5",
era7: "7",
eri: "7",
respond7d: "12",
},
{
event: { value: "Covid-19" },
location: { value: "Lusaka" },
cases: { value: "64" },
deaths: { value: "32" },
duration: { value: "14d" },
manager: { value: "Jed Selma" },
detect7d: { value: "7", color: "green" },
notify1d: { value: "1", color: "green" },
era1: { value: "1" },
era2: { value: "7" },
era3: { value: "7" },
era4: { value: "7" },
era5: { value: "7" },
era6: { value: "7" },
era7: { value: "7" },
eri: { value: "7" },
respond7d: { value: "7", color: "green" },
event: "Covid-19",
location: "Lusaka",
cases: "64",
deaths: "32",
duration: "14d",
manager: "Jed Selma",
detect7d: "7",
notify1d: "1",
era1: "1",
era2: "7",
era3: "7",
era4: "7",
era5: "7",
era6: "7",
era7: "7",
eri: "7",
respond7d: "7",
},
{
event: { value: "Covid-19" },
location: { value: "North Western" },
cases: { value: "64" },
deaths: { value: "32" },
duration: { value: "13d" },
manager: { value: "Meg Amy" },
detect7d: { value: "6", color: "green" },
notify1d: { value: "3", color: "red" },
era1: { value: "6" },
era2: { value: "7" },
era3: { value: "7" },
era4: { value: "7" },
era5: { value: "7" },
era6: { value: "7" },
era7: { value: "7" },
eri: { value: "7" },
respond7d: { value: "7", color: "green" },
event: "Covid-19",
location: "North Western",
cases: "64",
deaths: "32",
duration: "13d",
manager: "Meg Amy",
detect7d: "6",
notify1d: "3",
era1: "6",
era2: "7",
era3: "7",
era4: "7",
era5: "7",
era6: "7",
era7: "7",
eri: "7",
respond7d: "7",
},
{
event: { value: "Cholera" },
location: { value: "Eastern" },
cases: { value: "10" },
deaths: { value: "3" },
duration: { value: "17d" },
manager: { value: "Mary Cole" },
detect7d: { value: "10", color: "red" },
notify1d: { value: "3", color: "red" },
era1: { value: "4", color: "red" },
era2: { value: "10", color: "red" },
era3: { value: "9", color: "red" },
era4: { value: "12", color: "red" },
era5: { value: "12", color: "red" },
era6: { value: "5", color: "red" },
era7: { value: "7" },
eri: { value: "7" },
respond7d: { value: "12", color: "red" },
event: "Cholera",
location: "Eastern",
cases: "10",
deaths: "3",
duration: "17d",
manager: "Mary Cole",
detect7d: "10",
notify1d: "3",
era1: "4",
era2: "10",
era3: "9",
era4: "12",
era5: "12",
era6: "5",
era7: "7",
eri: "7",
respond7d: "12",
},
];

Expand Down

0 comments on commit 9531bc9

Please sign in to comment.