From 2c2393ebef41b601528bb0f67532e30f4e09b44e Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Tue, 20 May 2025 10:24:12 +0200
Subject: [PATCH] Make hovered serie bold in Tooltip

With many versions, particularly in React Native, it may be hard to track which serie correspond to which entry on the tooltip. In this PR, I track hovered serie and make hovered serie bold to make comparing numbers easier.
---
 src/components/VersionDownloadChart.tsx |  5 +++++
 src/components/VersionTooltip.tsx       | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/VersionDownloadChart.tsx b/src/components/VersionDownloadChart.tsx
index 8c65a7117..a504f8cb7 100644
--- a/src/components/VersionDownloadChart.tsx
+++ b/src/components/VersionDownloadChart.tsx
@@ -110,6 +110,7 @@ const VersionDownloadChart: React.FC<VersionDownloadChartProps> = ({
 
   const [legendElement, setLegendElement] = useState<HTMLDivElement>();
   const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);
+  const [hoveredVersion, setHoveredVersion] = useState<string | null>(null);
 
   const filteredHistory = React.useMemo(
     () =>
@@ -240,6 +241,7 @@ const VersionDownloadChart: React.FC<VersionDownloadChartProps> = ({
                 versionHues,
                 unit,
                 theme: tooltipTheme,
+                hoveredVersion,
               })}
             />
           )}
@@ -277,6 +279,9 @@ const VersionDownloadChart: React.FC<VersionDownloadChartProps> = ({
               stackId="1"
               fill={fill}
               fillOpacity={1}
+              onMouseEnter={() => {
+                setHoveredVersion(name);
+              }}
             />
           ))}
 
diff --git a/src/components/VersionTooltip.tsx b/src/components/VersionTooltip.tsx
index 16012547f..976e7c35e 100644
--- a/src/components/VersionTooltip.tsx
+++ b/src/components/VersionTooltip.tsx
@@ -59,11 +59,12 @@ export type VersionProps = {
   versionHues: Record<string, number>;
   unit?: Unit;
   theme?: ITheme;
+  hoveredVersion?: string | null;
 };
 
 export const VersionTooltipContent: React.FC<
   VersionProps & DateTooltipProps
-> = ({ label, payload, unit, versionHues, theme }) => {
+> = ({ label, payload, unit, versionHues, theme, hoveredVersion }) => {
   const reversedItems = [...(payload ?? [])];
   reversedItems.reverse();
 
@@ -91,11 +92,22 @@ export const VersionTooltipContent: React.FC<
                   <Text
                     variant="small"
                     className={styles.versionLabel}
-                    style={{ color: colorChipColor }}
+                    style={{
+                      color: colorChipColor,
+                      fontWeight:
+                        hoveredVersion === entry.name ? "bold" : "normal",
+                    }}
                   >
                     {entry.name}
                   </Text>
-                  <Text variant="small" className={styles.versionCount}>
+                  <Text
+                    variant="small"
+                    className={styles.versionCount}
+                    style={{
+                      fontWeight:
+                        hoveredVersion === entry.name ? "bold" : "normal",
+                    }}
+                  >
                     {formattedValue}
                   </Text>
                 </li>