From 7c6e94c9289e9cb5230da6916f800e7d2b447ccb Mon Sep 17 00:00:00 2001
From: Vinay Vk <vinayvk@Vinays-MacBook-Air.local>
Date: Sat, 10 Jan 2026 20:44:09 -0500
Subject: [PATCH 1/2] Updated the Injury Category Bar chart jsx file

---
 .../InjuryCategoryBarChart.jsx                | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
index 2a7070ff71..e23e44fb20 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
@@ -48,6 +48,9 @@ function InjuryCategoryBarChart() {
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState(null);
 
+  // ✅ NEW: key to force Recharts remount when needed (fixes "renders only on hover")
+  const [chartKey, setChartKey] = useState(0);
+
   useEffect(() => {
     dispatch(fetchSeverities());
     dispatch(fetchInjuryTypes());
@@ -130,6 +133,30 @@ function InjuryCategoryBarChart() {
 
   const showLabels = seriesProjectIds.length <= 4;
 
+  // Force a resize/reflow after data/filter changes so chart draws immediately (no hover needed)
+  useEffect(() => {
+    // Only do this once the chart is supposed to be visible
+    if (loading || error) return;
+
+    const raf = requestAnimationFrame(() => {
+      window.dispatchEvent(new Event('resize')); // triggers ResponsiveContainer measure
+      setChartKey(k => k + 1); // extra-safe: forces a clean remount
+    });
+
+    return () => cancelAnimationFrame(raf);
+  }, [
+    loading,
+    error,
+    darkMode,
+    chartData.length,
+    seriesProjectIds.length,
+    projectNameFilter,
+    severityFilter,
+    injuryTypeFilter,
+    startDate,
+    endDate,
+  ]);
+
   return (
     <div className={`${styles['injury-chart-container']} ${darkMode ? styles.darkMode : ''}`}>
       <div className={styles['injury-chart-header']}>
@@ -221,7 +248,7 @@ function InjuryCategoryBarChart() {
       {!loading && error && <p className={styles.error}>Error: {String(error)}</p>}
 
       {!loading && !error && (
-        <ResponsiveContainer width="100%" height={420}>
+        <ResponsiveContainer key={chartKey} width="100%" height={420}>
           <BarChart
             data={chartData}
             margin={{ top: 16, right: 24, bottom: 8, left: 8 }}
@@ -248,6 +275,8 @@ function InjuryCategoryBarChart() {
               tickLine={{ stroke: darkMode ? '#888' : '#000' }}
             />
             <Tooltip
+              //tooltip only; no shaded hover overlay across the chart
+              cursor={false}
               contentStyle={{
                 backgroundColor: darkMode ? '#2b3e59' : '#fff',
                 color: darkMode ? '#fff' : '#000',

From ae2acf0988548e917d4fbe3268df024f249c9535 Mon Sep 17 00:00:00 2001
From: Vinay Vk <vinayvk@Vinays-MacBook-Air.local>
Date: Mon, 20 Apr 2026 14:53:55 -0400
Subject: [PATCH 2/2] Resolved merge conflicts

---
 .../GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
index c388da74f6..6424d238e1 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/GroupedBarGraphInjurySeverity/InjuryCategoryBarChart.jsx
@@ -166,6 +166,7 @@ function InjuryCategoryBarChart() {
     injuryTypeFilter,
     startDate,
     endDate,
+  ]);
 
   const selectStyles = darkMode && {
     control: base => ({