fix: match graph tooltip color with graph nodes (#1930)

components/molecules/ContributionsTreemap/contributions-treemap.tsx

@@ -1,14 +1,15 @@
 import { useSpring, animated } from "@react-spring/web";
 import dynamic from "next/dynamic";
+import { Datum } from "@nivo/line";
 import Card from "components/atoms/Card/card";
 import { SpecialNode } from "stories/molecules/treemap-prototype/special-node";
 import { ContributorNode } from "stories/molecules/treemap-prototype/contributor-node";
 import ClientOnly from "components/atoms/ClientOnly/client-only";
-import type { NodeMouseEventHandler, NodeProps } from "@nivo/treemap";
+import type { NodeMouseEventHandler, NodeProps, TreeMapCommonProps } from "@nivo/treemap";
 
 interface ContributionsTreemapProps {
   data: any;
-  color: string;
+  color: TreeMapCommonProps<Datum>["colors"];
   onClick: NodeMouseEventHandler<object>;
   repoId: number | null;
   setRepoId: (repoId: number | null) => void;

lib/utils/color-utils.ts

@@ -1,26 +1,18 @@
-export function stringToHSLAColor({
-  id,
-  saturation = 90,
-  lightness = 48,
-  alpha = 1,
-}: {
-  id: string;
-  saturation?: number;
-  lightness?: number;
-  alpha?: number;
-}) {
-  // Ensure valid values for saturation and lightness (0-100) and alpha (0-1)
-  saturation = Math.min(Math.max(saturation, 0), 100);
-  lightness = Math.min(Math.max(lightness, 0), 100);
-  alpha = Math.min(Math.max(alpha, 0), 1);
+export const getGraphColorPalette = () => {
+  const colors = [
+    "#fb923c",
+    "#34d399",
+    "#10b981",
+    "#22d3ee",
+    "#818cf8",
+    "#3b82f6",
+    "#e879f9",
+    "#fb7185",
+    "#38bdf8",
+    "#a78bfa",
+    "#c084fc",
+    "#f472b6",
+  ];
 
-  // Use a simple hashing algorithm to generate H, S, and L values
-  let hash = 0;
-  for (let i = 0; i < id.length; i++) {
-    hash = id.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  const h = ((hash % 360) + 360) % 360; // Ensure H value is between 0 and 360
-
-  return `hsla(${h}, ${saturation}%, ${lightness}%, ${alpha})`;
-}
+  return colors;
+};

pages/lists/[listId]/activity.tsx

@@ -13,6 +13,7 @@ import ClientOnly from "components/atoms/ClientOnly/client-only";
 import { ContributionsTreemap } from "components/molecules/ContributionsTreemap/contributions-treemap";
 import { useContributorsByProject } from "lib/hooks/api/useContributorsByProject";
 import { useContributionsByProject } from "lib/hooks/api/useContributionsByProject";
+import { getGraphColorPalette } from "lib/utils/color-utils";
 
 interface ContributorListPageProps {
   list?: DBList;
@@ -142,7 +143,7 @@ const ListActivityPage = ({ list, numberOfContributors, isError, activityData }:
             repoId={repoId}
             onClick={onHandleClick}
             data={treemapData}
-            color="hsla(21, 90%, 48%, 1)"
+            color={getGraphColorPalette()}
           />
         </div>
       )}

stories/molecules/treemap-prototype/contributor-node.tsx

@@ -1,8 +1,8 @@
 import { memo } from "react";
+import Image from "next/image";
 import { animated } from "@react-spring/web";
 import { getAvatarByUsername } from "lib/utils/github";
 import { htmlNodeTransform } from "lib/utils/nivo-utils";
-import { stringToHSLAColor } from "lib/utils/color-utils";
 import type { NodeProps } from "@nivo/treemap";
 
 const NonMemoizedContributorNode = <Datum extends { id: string; value?: number; color: string }>({
@@ -16,7 +16,6 @@ const NonMemoizedContributorNode = <Datum extends { id: string; value?: number;
     enableLabel && node.isLeaf && (labelSkipSize === 0 || Math.min(node.width, node.height) > labelSkipSize);
 
   const avatarURL = getAvatarByUsername(node.id);
-  const color = stringToHSLAColor({ id: node.id });
 
   return (
     <animated.div
@@ -36,7 +35,7 @@ const NonMemoizedContributorNode = <Datum extends { id: string; value?: number;
           opacity: node.opacity,
           width: animatedProps.width,
           height: animatedProps.height,
-          background: color,
+          background: node.color,
           gridArea: "1 / 1",
         }}
         onMouseEnter={node.onMouseEnter}
@@ -54,13 +53,15 @@ const NonMemoizedContributorNode = <Datum extends { id: string; value?: number;
           }}
         >
           <div className="grid gap-x-2" style={{ gridTemplateColumns: "auto 1fr", gridTemplateRows: "auto auto" }}>
-            <img
-              className="col-start-1 col-span-1 row-span-2"
+            <Image
+              className="col-span-1 col-start-1 row-span-2"
               src={avatarURL}
+              alt={`${node.id}'s avatar`}
               width="42"
               height="42"
               style={{ display: "block", borderRadius: "50%", border: "solid 2px white", flexShrink: 0, flexGrow: 0 }}
             />
+
             <div className="font-medium" style={{ gridColumnStart: "2", alignItems: "center", alignSelf: "center" }}>
               {node.id}
             </div>

stories/molecules/treemap-prototype/special-node.tsx

@@ -1,7 +1,6 @@
 import { memo } from "react";
 import { animated } from "@react-spring/web";
 import { htmlNodeTransform } from "lib/utils/nivo-utils";
-import { stringToHSLAColor } from "lib/utils/color-utils";
 import type { NodeProps } from "@nivo/treemap";
 
 const NonMemoizedSpecialNode = <Datum extends object>({
@@ -14,11 +13,10 @@ const NonMemoizedSpecialNode = <Datum extends object>({
   const showLabel =
     enableLabel && node.isLeaf && (labelSkipSize === 0 || Math.min(node.width, node.height) > labelSkipSize);
   const [fullRepoName] = node.id.split(":");
-  node.color = stringToHSLAColor({ id: node.id });
 
   return (
     <animated.div
-      className="absolute grid place-content-stretch overflow-hidden border-solid"
+      className="absolute grid overflow-hidden border-solid cursor-pointer place-content-stretch"
       style={{
         top: 0,
         left: 0,
@@ -44,7 +42,7 @@ const NonMemoizedSpecialNode = <Datum extends object>({
       />
       {showLabel && (
         <animated.div
-          className="grid p-3 text-white place-items-start pointer-events-none"
+          className="grid p-3 text-white pointer-events-none place-items-start"
           style={{
             gridArea: "1 / 1",
             transformOrigin: "center center",
@@ -53,8 +51,8 @@ const NonMemoizedSpecialNode = <Datum extends object>({
           }}
         >
           <div className="grid gap-2">
-            <div className="font-medium text-sm">{fullRepoName}</div>
-            <div className="font-normal text-xs" style={{ textOverflow: "ellipsis" }}>
+            <div className="text-sm font-medium">{fullRepoName}</div>
+            <div className="text-xs font-normal" style={{ textOverflow: "ellipsis" }}>
               {node.label}
             </div>
           </div>