aefis-core-ui 2.1.8-rc2 → 2.1.8-rc4

package/dist/index.modern.js

@@ -15005,7 +15005,6 @@ const useStyles$4 = makeStyles(() => ({
     lineHeight: "30px",
     padding: 5,
     backgroundColor: "#ffffff",
-    border: "3px solid #eee",
     boxSizing: "content-box",
     borderRadius: 20,
     position: "relative"
@@ -15066,11 +15065,15 @@ const replaceDuplicateColor = data => {
     return data;
   }
 };
-const addPercentValue = data => {
+const getOverallTotal = data => {
   let overallTotal = 0;
-  data.map(r => {
+  data == null ? void 0 : data.map(r => {
     overallTotal = overallTotal + r.total;
   });
+  return overallTotal;
+};
+const addPercentValue = data => {
+  const overallTotal = getOverallTotal(data);
   const newRubricObj = [];
   data.map(r => {
     const total = percent(overallTotal, r.total);
@@ -15088,26 +15091,32 @@ const barContainerSize = size => {
     case "xsmall":
       struct.height = 15;
       struct.lineHeight = "15px";
+      struct.border = "2px solid #eee";
       break;
     case "small":
       struct.height = 20;
       struct.lineHeight = "20px";
+      struct.border = "3px solid #eee";
       break;
     case "medium":
       struct.height = 25;
       struct.lineHeight = "25px";
+      struct.border = "3px solid #eee";
       break;
     case "large":
       struct.height = 30;
       struct.lineHeight = "30px";
+      struct.border = "3px solid #eee";
       break;
     case "xlarge":
       struct.height = 35;
       struct.lineHeight = "35px";
+      struct.border = "3px solid #eee";
       break;
     default:
       struct.height = 20;
       struct.lineHeight = "20px";
+      struct.border = "3px solid #eee";
   }
   return struct;
 };
@@ -15121,9 +15130,7 @@ const RubricDistributionChart = props => {
     textTransform: "uppercase"
   };
   const a11yProps = {
-    "aria-label": props.title || "progress",
-    "aria-valuemax": 100,
-    role: "progressbar"
+    "aria-label": props.title
   };
   const keyValue = useUID();
   const validatedData = replaceDuplicateColor(props.data);
@@ -15152,6 +15159,11 @@ const RubricDistributionChart = props => {
           sx: containerSize
         }), rubricsDataWithPercent == null ? void 0 : rubricsDataWithPercent.map((rubric, index) => /*#__PURE__*/jsx(Box$1, {
           className: classes.barProgress,
+          "aria-label": rubric.name,
+          "aria-valuemax": getOverallTotal(rubricsDataWithPercent),
+          "aria-valuenow": rubric.total || 0,
+          "aria-valuemin": 0,
+          role: "progressbar",
           style: barStyle(rubric, index === 0, isLastItemInArray(rubricsDataWithPercent, index)),
           children: /*#__PURE__*/jsx(Typography, {
             sx: {
@@ -15163,9 +15175,18 @@ const RubricDistributionChart = props => {
           })
         }, `rubric-bar-chart-bar-${(rubric == null ? void 0 : rubric.id) || index}`))]
       }))
-    }), props.showLegend && /*#__PURE__*/jsx(Legend, {
-      data: validatedData,
-      size: props.size
+    }), /*#__PURE__*/jsx(Collapse, {
+      sx: {
+        mt: 1,
+        mb: 1
+      },
+      in: props.showLegend,
+      timeout: "auto",
+      unmountOnExit: true,
+      children: /*#__PURE__*/jsx(Legend, {
+        data: validatedData,
+        size: props.size
+      })
     })]
   });
 };