Code review and enhancement on PRMergeSuccessRateChart

Frontend/src/components/charts/ContributorImpactChart.jsx

@@ -28,6 +28,10 @@ export const ContributorImpactChart = ({ data }) => {
             <XAxis
               type="number"
               dataKey="timeContributing"
+              name="Commits"
+              tick={{ fill: "#6B7280", fontSize: 12 }}
+              label={{
+                value: "Time Contributing",
               name="Time Contributing"
               tick={{ fill: "#6B7280", fontSize: 12 }}
               label={{

Frontend/src/components/charts/PRMergeSuccessRateChart.jsx

@@ -1,18 +1,22 @@
+import { useState } from "react";
+
 import {
   BarChart,
   Bar,
   XAxis,
   YAxis,
   Tooltip,
   Legend,
-  ResponsiveContainer
+  ResponsiveContainer,
 } from "recharts";
 
 import { getPRMergeRates } from "../../utils/prMergeRateHelper";
 
 const PRMergeSuccessRateChart = ({ selectedTeam }) => {
   const data = getPRMergeRates(selectedTeam);
 
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
   return (
     <div>
       <h3>
@@ -21,42 +25,39 @@ const PRMergeSuccessRateChart = ({ selectedTeam }) => {
           style={{
             position: "relative",
             display: "inline-block",
-            marginLeft: "6px"
+            marginLeft: "6px",
           }}
         >
           <span
             tabIndex="0"
             aria-label="PR Merge Success Rate info"
-            style={{ 
-              cursor: "pointer", 
-              border: "1px solid black", 
-              borderRadius: "50%", 
-              padding: "2px 6px", 
+            style={{
+              cursor: "pointer",
+              border: "1px solid black",
+              borderRadius: "50%",
+              padding: "2px 6px",
               fontSize: "12px",
-              display: "inline-block" 
+              display: "inline-block",
             }}
-            onMouseEnter={(e) => {
-              const tooltip = e.currentTarget.nextElementSibling;
-              if (tooltip) {
-                tooltip.style.visibility = "visible";
-                tooltip.style.opacity = "1";
-              }
-            }}
-            onMouseLeave={(e) => {
-              const tooltip = e.currentTarget.nextElementSibling;
-              if (tooltip) {
-                tooltip.style.visibility = "hidden";
-                tooltip.style.opacity = "0";
-              }
-            }}
-          > 
+            onMouseEnter={() => setTooltipVisible(true)}
+            onMouseLeave={() => setTooltipVisible(false)}
+            // Changed by adding onFocus/onBlur so keyboard users (Tab key) can also
+            // trigger the tooltip
+            onFocus={() => setTooltipVisible(true)}
+            onBlur={() => setTooltipVisible(false)}
+            onClick={() => setTooltipVisible((v) => !v)}
+          >
             i
           </span>
 
           <span
             style={{
-              visibility: "hidden",
-              opacity: 0,
+              // Position: default below-and-centered. On narrow viewports the
+              // parent flex container should be `overflow: visible`; for a
+              // production app replace with Floating UI for true boundary checks.
+              // Changed visibility, now driven by tooltipVisible
+              visibility: tooltipVisible ? "visible" : "hidden",
+              opacity: tooltipVisible ? 1 : 0,
               transition: "opacity 0.2s ease",
               position: "absolute",
               top: "28px",
@@ -70,13 +71,19 @@ const PRMergeSuccessRateChart = ({ selectedTeam }) => {
               fontWeight: "400",
               lineHeight: "1.4",
               width: "260px",
+              // Added maxWidth to prevent clipping on narrow screens.
+              maxWidth: "min(260px, 90vw)",
               zIndex: 1000,
               boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
               textAlign: "left",
-              border: "1px solid #e5e7eb"
+              border: "1px solid #e5e7eb",
+              // Prevent the tooltip itself from receiving mouse events so
+              pointerEvents: "none",
             }}
           >
-            This chart compares each contributor’s lifetime PR merge success rate with their recent sprint performance. It helps show both long-term consistency and current activity.
+            This chart compares each contributor’s lifetime PR merge success
+            rate with their recent sprint performance. It helps show both
+            long-term consistency and current activity.
           </span>
         </span>
       </h3>
@@ -85,16 +92,22 @@ const PRMergeSuccessRateChart = ({ selectedTeam }) => {
         <ResponsiveContainer>
           <BarChart data={data} barGap={10}>
             <XAxis dataKey="contributor" />
-            <YAxis tickFormatter={(value) => `${value * 100}%`} />
+            {/* Changed by adding .toFixed(0) to match the Tooltip formatter below.
+                Without it, fractional values like 0.3333 render as "33.3333333%"
+                on the Y-axis ticks, while the hover tooltip correctly shows "33%". */}
+            <YAxis tickFormatter={(value) => `${(value * 100).toFixed(0)}%`} />
             <Tooltip formatter={(value) => `${(value * 100).toFixed(0)}%`} />
             <Legend />
+            {/* Changed Sprint bar color changed from #22C55E (green) to #F59E0B
+                (amber). The original green is hard to distinguish from the indigo
+                (#4F46E5)*/}
             <Bar dataKey="lifetimeRate" name="Lifetime" fill="#4F46E5" />
-            <Bar dataKey="sprintRate" name="Sprint" fill="#22C55E" />
+            <Bar dataKey="sprintRate" name="Sprint" fill="#F59E0B" />
           </BarChart>
         </ResponsiveContainer>
       </div>
     </div>
   );
 };
 
-export default PRMergeSuccessRateChart;
+export default PRMergeSuccessRateChart;

Frontend/src/utils/transformContributorData.js

@@ -32,4 +32,4 @@ const initUser = (name) => ({
   issuesClosed: 0,
   prsOpened: 0,
   timeContributing: 0,
-});
+});