diff --git a/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/IndicatorTableBodyV2Styles.tsx b/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/IndicatorTableBodyV2Styles.tsx index 8328e375e..51bce1808 100644 --- a/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/IndicatorTableBodyV2Styles.tsx +++ b/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/IndicatorTableBodyV2Styles.tsx @@ -37,4 +37,24 @@ export const StyledTableCell = styled(TableCell)(() => ({ borderTopLeftRadius: "8px", borderBottomLeftRadius: "8px", backgroundColor: "#FFFFFF", + borderColor: skdeTheme.palette.background.paper, +})); + +export const StyledTableCellStart = styled(TableCell)(() => ({ + borderTopLeftRadius: "8px", + borderBottomLeftRadius: "8px", + backgroundColor: "#FFFFFF", + borderColor: skdeTheme.palette.background.paper, +})); + +export const StyledTableCellEnd = styled(TableCell)(() => ({ + borderTopRightRadius: "8px", + borderBottomRightRadius: "8px", + backgroundColor: "#FFFFFF", + borderColor: skdeTheme.palette.background.paper, +})); + +export const StyledTableCellMiddle = styled(TableCell)(() => ({ + backgroundColor: "#FFFFFF", + borderColor: skdeTheme.palette.background.paper, })); diff --git a/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/index.tsx b/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/index.tsx index 28a058fd1..8c523bc92 100644 --- a/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/index.tsx +++ b/packages/qmongjs/src/components/IndicatorTable/IndicatortablebodyV2/index.tsx @@ -8,16 +8,19 @@ import { Indicator, RegisterData, IndicatorData } from "types"; import Button from "@mui/material/Button"; import { UseQueryResult } from "@tanstack/react-query"; import { FetchIndicatorParams } from "../../../helpers/hooks"; -import { newLevelSymbols, level2 } from "qmongjs"; +import { newLevelSymbols, level2, skdeTheme } from "qmongjs"; import ReactMarkdown from "react-markdown"; import remarkGfm from "remark-gfm"; import { PluggableList } from "react-markdown/lib"; import { useScreenSize } from "@visx/responsive"; -import { Skeleton, Collapse } from "@mui/material"; +import { Skeleton, Collapse, Stack, Typography } from "@mui/material"; import { StyledTable, StyledTableRow, StyledTableCell, + StyledTableCellStart, + StyledTableCellMiddle, + StyledTableCellEnd, } from "./IndicatorTableBodyV2Styles"; import { LinechartBase, @@ -231,9 +234,10 @@ const IndicatorRow = (props: { const buttonText = showBars ? "Vis tidstrend" : "Vis alle sykehus"; return ( - <> +
{figure} - +
); }; const responsiveChart = open ? : null; + const emptyRow = ( + + + + ); + return ( - + @@ -268,9 +287,9 @@ const IndicatorRow = (props: {
-
+ - {rowDataSorted.map((row, index) => { + {rowDataSorted.map((row, index, arr) => { const lowDG = row?.dg == null ? false : row?.dg < 0.6 ? true : false; const noData = row?.denominator == null ? true : false; const lowN = @@ -306,8 +325,16 @@ const IndicatorRow = (props: { ? "Ingen data" : row?.numerator + " av " + row?.denominator; + let CellType; + + if (index === arr.length - 1) { + CellType = StyledTableCellEnd; + } else { + CellType = StyledTableCellMiddle; + } + return ( - {patientCounts} - + ); })}
- - - - + {!open ? emptyRow : null} + + + + + {indData.shortDescription} - - + + + {"Ønsket målnivå: " + (indData.levelGreen === null ? "" : customFormat(",.0%")(indData.levelGreen))} - - + - - +
{responsiveChart} - - +
- - + + Om kvalitetsindikatoren {indData.longDescription} - - -
-
+ + + + + + {open ? emptyRow : null}
); }; @@ -483,18 +506,30 @@ const RegistrySection = (props: { - + {regData.registerFullName} - + + + {unitNames.map((row, index, arr) => { + let CellType; + + if (index === arr.length - 1) { + CellType = StyledTableCellEnd; + } else { + CellType = StyledTableCellMiddle; + } - {unitNames.map((row, index) => { return ( - {row} - + ); })} @@ -567,7 +602,7 @@ export const IndicatorTableBodyV2 = (props: IndicatorTableBodyV2Props) => { }); return ( - + {rowDataFiltered.map((row) => (