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) => (