From a9889866e2790839ec12594b4bec3a031ecfe2e2 Mon Sep 17 00:00:00 2001
From: Daniel Bisgrove <daniel@bizz-websites.com>
Date: Mon, 16 Dec 2024 14:21:47 -0500
Subject: [PATCH] Add percentage to overall score

---
 .../HealthIndicatorWidget.tsx                 | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/components/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.tsx b/src/components/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.tsx
index c955c6caa..e6cd4d2f2 100644
--- a/src/components/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.tsx
+++ b/src/components/Reports/HealthIndicatorReport/HealthIndicatorWidget/HealthIndicatorWidget.tsx
@@ -7,6 +7,7 @@ import {
   CardContent,
   CardHeader,
   Grid,
+  Tooltip,
   Typography,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -78,27 +79,34 @@ export const HealthIndicatorWidget: React.FC<HealthIndicatorWidgetProps> = ({
         }}
       />
       <StyledCardContent>
-        <StyledBox>
-          <Typography variant="h4" color="primary" width={'55px'}>
-            {currentStats?.overallHi}
-          </Typography>
-          <Box width={'calc(100% - 55px)'}>
-            <Typography
-              component="div"
-              color="primary"
-              sx={{ marginBottom: 1 }}
-            >
-              {t('Overall Health Indicator')}
+        <Tooltip
+          title={`${t('MPD Health')} = [(${t('Ownership')} * 3) + (${t(
+            'Success',
+          )} * 2) + (${t('Consistency')} * 1) + (${t('Depth')} * 1)] / 7`}
+          arrow
+        >
+          <StyledBox>
+            <Typography variant="h4" color="primary" width={'55px'}>
+              {currentStats?.overallHi}
             </Typography>
-            <StyledProgress
-              loading={loading}
-              primary={
-                currentStats?.overallHi ? currentStats.overallHi / 100 : 0
-              }
-              barHeight={20}
-            />
-          </Box>
-        </StyledBox>
+            <Box width={'calc(100% - 55px)'}>
+              <Typography
+                component="div"
+                color="primary"
+                sx={{ marginBottom: 1 }}
+              >
+                {t('Overall Health Indicator')}
+              </Typography>
+              <StyledProgress
+                loading={loading}
+                primary={
+                  currentStats?.overallHi ? currentStats.overallHi / 100 : 0
+                }
+                barHeight={20}
+              />
+            </Box>
+          </StyledBox>
+        </Tooltip>
 
         <Grid container>
           <WidgetStat