Add legend info

SAS/TMSS/frontend/tmss_webapp/src/routes/Report/failure/failure.report.js

@@ -41,13 +41,24 @@ export default function FailureReport() {
         }
     }, [dates]);
 
-    const MakePieChartData = (element, key, labelkey) => {
+
+    function formatNumber(number) {
+        // Check if the result is an integer
+        if (Number.isInteger(number)) {
+            return number.toFixed(0); // No decimal places for integers
+        } else {
+            return number.toFixed(2); // Two decimal places for non-integers
+        }
+    }
+
+
+    const MakePieChartData = (element, key, labelkey,divider) => {
         const documentStyle = getComputedStyle(document.documentElement);
         return {
-            labels: element?.map(item => item[labelkey]),
+            labels: element?.map(item => item[labelkey] + " (" + formatNumber(item[key]/divider.toFixed(2)) + ")"),
             datasets: [
                 {
-                    data: element?.map(item => item[key]),
+                    data: element?.map(item =>formatNumber(item[key]/divider.toFixed(2))),
                     backgroundColor: Colors(documentStyle, "500"),
                     hoverBackgroundColor: Colors(documentStyle, "400")
                 }
@@ -79,20 +90,20 @@ export default function FailureReport() {
     function MakePieChart(failureReport) {
         let pieelement = failureReport?.system_event_summary?.by_issue_type;
         if (pieelement !== null) {
-            setChartData_Issue_count(MakePieChartData(pieelement, "count", "issue_type__value"));
+            setChartData_Issue_count(MakePieChartData(pieelement, "count", "issue_type__value",1));
             setChartData_Issue_count_options(MakeChartOptions("Issue Type count per Primary failure category"));
-            setChartData_Issue_total_duration(MakePieChartData(pieelement, "duration_lost_event", "issue_type__value"));
-            setChartData_Issue_total_duration_options({ plugins: { legend: { display: false }, title: { text: "Issue Type Duration", display: true } } });
+            setChartData_Issue_total_duration(MakePieChartData(pieelement, "duration_lost_event", "issue_type__value",3600));
+            setChartData_Issue_total_duration_options(MakeChartOptions("Issue Type Duration in Hours")); 
         }
     }
 
     function makeSubTypePieChart(failureReport) {
         let piesubtypeelement = failureReport?.system_event_summary?.by_issue_subtype;
         if (piesubtypeelement !== null) {
-            setChartData_sub_Issue_count(MakePieChartData(piesubtypeelement, "count", "issue_subtype__value"));
+            setChartData_sub_Issue_count(MakePieChartData(piesubtypeelement, "count", "issue_subtype__value",1));
             setChartData_sub_Issue_count_options(MakeChartOptions("Issue sub Type per failure sub-category"));
-            setChartData_sub_Issue_total_duration(MakePieChartData(piesubtypeelement, "duration_lost_event", "issue_subtype__value"));
-            setChartData_sub_Issue_total_duration_options({ plugins: { legend: { display: false }, title: { text: "Sub Issue Type Duration", display: true } } });
+            setChartData_sub_Issue_total_duration(MakePieChartData(piesubtypeelement, "duration_lost_event", "issue_subtype__value",3600));
+            setChartData_sub_Issue_total_duration_options(MakeChartOptions("Sub Issue Type Duration in Hours"));
         }
     }
 

SAS/TMSS/frontend/tmss_webapp/src/tests/__snapshots__/report.failure.test.js.snap

@@ -146,7 +146,7 @@ exports[`Failure Report Generates exports Failure Report  renders correctly when
           style="width: 450px; position: relative;"
         >
           <canvas
-            aria-label="Issue Type Duration"
+            aria-label="Issue Type Duration in Hours"
             data-pc-section="canvas"
             role="img"
           />
@@ -177,7 +177,7 @@ exports[`Failure Report Generates exports Failure Report  renders correctly when
           style="width: 450px; position: relative;"
         >
           <canvas
-            aria-label="Sub Issue Type Duration"
+            aria-label="Sub Issue Type Duration in Hours"
             data-pc-section="canvas"
             role="img"
           />
@@ -10567,7 +10567,7 @@ exports[`Failure Report Generates exports Failure Report  renders correctly when
           style="width: 450px; position: relative;"
         >
           <canvas
-            aria-label="Issue Type Duration"
+            aria-label="Issue Type Duration in Hours"
             data-pc-section="canvas"
             role="img"
           />
@@ -10598,7 +10598,7 @@ exports[`Failure Report Generates exports Failure Report  renders correctly when
           style="width: 450px; position: relative;"
         >
           <canvas
-            aria-label="Sub Issue Type Duration"
+            aria-label="Sub Issue Type Duration in Hours"
             data-pc-section="canvas"
             role="img"
           />