diff --git a/client/src/app/pages/reports/components/application-landscape/application-landscape.tsx b/client/src/app/pages/reports/components/application-landscape/application-landscape.tsx index 3c0107c833..f06ee70b0c 100644 --- a/client/src/app/pages/reports/components/application-landscape/application-landscape.tsx +++ b/client/src/app/pages/reports/components/application-landscape/application-landscape.tsx @@ -148,6 +148,7 @@ export const ApplicationLandscape: React.FC = ({ riskLabel={ {t("terms.highRisk")} } + riskTitle={t("terms.highRisk")} riskDescription={questionnaire?.riskMessages?.red ?? ""} /> @@ -163,6 +164,7 @@ export const ApplicationLandscape: React.FC = ({ {t("terms.mediumRisk")} } + riskTitle={t("terms.mediumRisk")} riskDescription={questionnaire?.riskMessages?.yellow ?? ""} /> @@ -176,6 +178,7 @@ export const ApplicationLandscape: React.FC = ({ riskLabel={ {t("terms.lowRisk")} } + riskTitle={t("terms.lowRisk")} riskDescription={questionnaire?.riskMessages?.green ?? ""} /> @@ -191,6 +194,7 @@ export const ApplicationLandscape: React.FC = ({ {`${t("terms.unassessed")}/${t("terms.unknown")}`} } + riskTitle={t("terms.unassessed")} /> diff --git a/client/src/app/pages/reports/components/donut/donut.tsx b/client/src/app/pages/reports/components/donut/donut.tsx index 8c1d413266..60b0ef040a 100644 --- a/client/src/app/pages/reports/components/donut/donut.tsx +++ b/client/src/app/pages/reports/components/donut/donut.tsx @@ -18,7 +18,8 @@ export interface IDonutProps { total: number; color: string; riskLabel: string | React.ReactElement; - riskDescription?: string | React.ReactElement; + riskDescription?: string; + riskTitle: string; isAssessment: boolean; } @@ -29,6 +30,7 @@ export const Donut: React.FC = ({ color, riskLabel, isAssessment, + riskTitle, }) => { const { t } = useTranslation(); @@ -50,7 +52,7 @@ export const Donut: React.FC = ({ } constrainToVisibleArea={true} data={[ - { x: riskLabel, y: value }, + { x: riskTitle, y: value }, { x: t("terms.other"), y: total - value }, ]} labels={({ datum }) => `${datum.x}: ${datum.y}`}