sundar_grouped_quantity_ofmaterials_used_improvemnts

Author: sundarmachani

src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.css

@@ -241,6 +241,8 @@ div.weekly-project-summary-card.normal-card .dropdown-item {
 .quantity-of-materials-used-card .custom-select__option--is-focused {
   background-color: var(--button-hover) !important;
   color: var(--card-bg) !important;
+  overflow: visible !important;
+  min-width: max-content;
 }
 
 /* Placeholder text inside dropdown */

src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.jsx

@@ -153,15 +153,18 @@ function QuantityOfMaterialsUsed({ data }) {
   };
 
   useEffect(() => {
-    setChartData(null);
-
     if (!Array.isArray(data) || data.length === 0) {
-      setTimeout(() => {
-        setChartData({
-          labels: [],
-          datasets: [{ label: 'Quantity Used', data: [], backgroundColor: [] }],
-        });
-      }, 0);
+      setChartData({
+        labels: [],
+        datasets: [
+          {
+            label: 'Quantity Used',
+            data: [],
+            backgroundColor: [],
+            type: 'bar', // Explicitly define type
+          },
+        ],
+      });
       return;
     }
 
@@ -764,6 +767,7 @@ function QuantityOfMaterialsUsed({ data }) {
           >
             <Bar
               data={chartData}
+              key={uuidv4()}
               options={{
                 maintainAspectRatio: false,
                 responsive: true,
@@ -805,6 +809,17 @@ function QuantityOfMaterialsUsed({ data }) {
                     },
                   },
                 },
+                animation: {
+                  duration: 100,
+                },
+                type: 'bar',
+                transitions: {
+                  active: {
+                    animation: {
+                      duration: 100,
+                    },
+                  },
+                },
               }}
             />
           </div>