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.

Author: wojtekmaj

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);
+              }}
             />
           ))}
 

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>