update member with contribution heatmap component

Author: mrkeshav-05

frontend/__tests__/unit/pages/UserDetails.test.tsx

@@ -5,7 +5,7 @@ import { screen, waitFor } from '@testing-library/react'
 import { render } from 'wrappers/testUtil'
 import '@testing-library/jest-dom'
 import UserDetailsPage from 'app/members/[memberKey]/page'
-import { drawContributions, fetchHeatmapData } from 'utils/helpers/githubHeatmap'
+import { fetchHeatmapData } from 'utils/helpers/githubHeatmap'
 
 // Mock Apollo Client
 jest.mock('@apollo/client/react', () => ({
@@ -56,9 +56,17 @@ jest.mock('next/navigation', () => ({
 // Mock GitHub heatmap utilities
 jest.mock('utils/helpers/githubHeatmap', () => ({
   fetchHeatmapData: jest.fn(),
-  drawContributions: jest.fn(() => {}),
 }))
 
+jest.mock('components/ContributionHeatmap', () => {
+  const MockContributionHeatmap = () => <div data-testid="contribution-heatmap">Heatmap</div>
+  MockContributionHeatmap.displayName = 'MockContributionHeatmap'
+  return {
+    __esModule: true,
+    default: MockContributionHeatmap,
+  }
+})
+
 jest.mock('@heroui/toast', () => ({
   addToast: jest.fn(),
 }))
@@ -71,9 +79,12 @@ describe('UserDetailsPage', () => {
       error: null,
     })
     ;(fetchHeatmapData as jest.Mock).mockResolvedValue({
-      contributions: { years: [{ year: '2023' }] },
+      years: [{ year: '2023' }],
+      contributions: [
+        { date: '2023-01-01', count: 5, intensity: '2' },
+        { date: '2023-01-02', count: 3, intensity: '1' },
+      ],
     })
-    ;(drawContributions as jest.Mock).mockImplementation(() => {})
   })
 
   afterEach(() => {
@@ -272,19 +283,19 @@ describe('UserDetailsPage', () => {
       loading: false,
     })
     ;(fetchHeatmapData as jest.Mock).mockResolvedValue({
-      years: [{ year: '2023' }], // Provide years data to satisfy condition in component
+      years: [{ year: '2023' }],
+      contributions: [
+        { date: '2023-01-01', count: 5, intensity: '2' },
+        { date: '2023-01-02', count: 3, intensity: '1' },
+      ],
     })
 
     render(<UserDetailsPage />)
 
     // Wait for useEffect to process the fetchHeatmapData result
     await waitFor(() => {
-      const heatmapContainer = screen
-        .getByAltText('Heatmap Background')
-        .closest(String.raw`div.hidden.lg\:block`)
-      expect(heatmapContainer).toBeInTheDocument()
-      expect(heatmapContainer).toHaveClass('hidden')
-      expect(heatmapContainer).toHaveClass('lg:block')
+      const heatmap = screen.getByTestId('contribution-heatmap')
+      expect(heatmap).toBeInTheDocument()
     })
   })
 
@@ -298,8 +309,8 @@ describe('UserDetailsPage', () => {
     render(<UserDetailsPage />)
 
     await waitFor(() => {
-      const heatmapTitle = screen.queryByText('Contribution Heatmap')
-      expect(heatmapTitle).not.toBeInTheDocument()
+      const heatmap = screen.queryByTestId('contribution-heatmap')
+      expect(heatmap).not.toBeInTheDocument()
     })
   })
 

frontend/src/app/members/[memberKey]/page.tsx

@@ -3,23 +3,26 @@ import { useQuery } from '@apollo/client/react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
-import { useTheme } from 'next-themes'
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect } from 'react'
 import { FaCodeMerge, FaFolderOpen, FaPersonWalkingArrowRight, FaUserPlus } from 'react-icons/fa6'
 import { handleAppError, ErrorDisplay } from 'app/global-error'
 
 import { GetUserDataDocument } from 'types/__generated__/userQueries.generated'
 import { Badge } from 'types/badge'
 import { formatDate } from 'utils/dateFormatter'
-import { drawContributions, fetchHeatmapData, HeatmapData } from 'utils/helpers/githubHeatmap'
+import { fetchHeatmapData } from 'utils/helpers/githubHeatmap'
 import Badges from 'components/Badges'
 import DetailsCard from 'components/CardDetailsPage'
+import ContributionHeatmap from 'components/ContributionHeatmap'
 import MemberDetailsPageSkeleton from 'components/skeletons/MemberDetailsPageSkeleton'
 
 const UserDetailsPage: React.FC = () => {
   const { memberKey } = useParams<{ memberKey: string }>()
-  const [data, setData] = useState<HeatmapData>({} as HeatmapData)
-  const [username, setUsername] = useState('')
+  const [contributionData, setContributionData] = useState<Record<string, number>>({})
+  const [dateRange, setDateRange] = useState<{ startDate: string; endDate: string }>({
+    startDate: '',
+    endDate: '',
+  })
   const [isPrivateContributor, setIsPrivateContributor] = useState(false)
 
   const {
@@ -50,9 +53,20 @@ const UserDetailsPage: React.FC = () => {
         setIsPrivateContributor(true)
         return
       }
-      if (result?.contributions) {
-        setUsername(memberKey)
-        setData(result as HeatmapData)
+      if (result?.contributions && Array.isArray(result.contributions)) {
+        const transformedData: Record<string, number> = {}
+        result.contributions.forEach((contribution) => {
+          transformedData[contribution.date] = contribution.count
+        })
+        setContributionData(transformedData)
+
+        if (result.contributions.length > 0) {
+          const dates = result.contributions.map((c) => c.date).sort((a, b) => a.localeCompare(b))
+          setDateRange({
+            startDate: dates[0],
+            endDate: dates.at(-1) ?? '',
+          })
+        }
       }
     }
     fetchData()
@@ -128,61 +142,6 @@ const UserDetailsPage: React.FC = () => {
     { icon: FaCodeMerge, value: user?.contributionsCount || 0, unit: 'Contribution' },
   ]
 
-  const Heatmap = () => {
-    const canvasRef = useRef<HTMLCanvasElement | null>(null)
-    const [imgSrc, setImgSrc] = useState('')
-    const { resolvedTheme } = useTheme()
-    const isDarkMode = (resolvedTheme ?? 'light') === 'dark'
-
-    useEffect(() => {
-      if (canvasRef.current && data?.years?.length) {
-        drawContributions(canvasRef.current, {
-          data,
-          username,
-          themeName: isDarkMode ? 'dark' : 'light',
-        })
-        const imageURL = canvasRef.current.toDataURL()
-        setImgSrc(imageURL)
-      } else {
-        setImgSrc('')
-      }
-    }, [isDarkMode])
-
-    return (
-      <div className="overflow-hidden rounded-lg bg-white dark:bg-gray-800">
-        <div className="relative">
-          <canvas ref={canvasRef} style={{ display: 'none' }} aria-hidden="true"></canvas>
-          {imgSrc ? (
-            <div className="h-32">
-              <Image
-                width={100}
-                height={100}
-                src={imgSrc}
-                className="h-full w-full object-cover object-[54%_60%]"
-                alt="Contribution Heatmap"
-              />
-            </div>
-          ) : (
-            <div className="relative h-32 items-center justify-center">
-              <Image
-                height={100}
-                width={100}
-                src={
-                  isDarkMode
-                    ? '/img/heatmap-background-dark.png'
-                    : '/img/heatmap-background-light.png'
-                }
-                className="heatmap-background-loader h-full w-full border-none object-cover object-[54%_60%]"
-                alt="Heatmap Background"
-              />
-              <div className="heatmap-loader"></div>
-            </div>
-          )}
-        </div>
-      </div>
-    )
-  }
-
   const UserSummary = () => (
     <div className="mt-4 flex flex-col items-center lg:flex-row">
       <Image
@@ -192,7 +151,7 @@ const UserDetailsPage: React.FC = () => {
         src={user?.avatarUrl || '/placeholder.svg'}
         alt={user?.name || user?.login || 'User Avatar'}
       />
-      <div className="w-full text-center lg:text-left">
+      <div className="w-full overflow-x-auto text-center lg:text-left">
         <div className="pl-0 lg:pl-4">
           <div className="flex items-center justify-center gap-3 text-center text-sm text-gray-500 lg:justify-start lg:text-left dark:text-gray-400">
             <Link
@@ -217,11 +176,22 @@ const UserDetailsPage: React.FC = () => {
           </div>
           <p className="text-gray-600 dark:text-gray-400">{formattedBio}</p>
         </div>
-        {!isPrivateContributor && (
-          <div className="hidden w-full lg:block">
-            <Heatmap />
-          </div>
-        )}
+        {!isPrivateContributor &&
+          contributionData &&
+          Object.keys(contributionData).length > 0 &&
+          dateRange.startDate &&
+          dateRange.endDate && (
+            <div className="w-full lg:block">
+              <div className="overflow-x-auto rounded-lg bg-white dark:bg-gray-800">
+                <ContributionHeatmap
+                  contributionData={contributionData}
+                  startDate={dateRange.startDate}
+                  endDate={dateRange.endDate}
+                  variant="medium"
+                />
+              </div>
+            </div>
+          )}
       </div>
     </div>
   )

frontend/src/components/ContributionHeatmap.tsx

@@ -249,7 +249,7 @@ interface ContributionHeatmapProps {
   endDate: string
   title?: string
   unit?: string
-  variant?: 'default' | 'compact'
+  variant?: 'default' | 'medium' | 'compact'
 }
 
 const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
@@ -262,7 +262,6 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
 }) => {
   const { theme } = useTheme()
   const isDarkMode = theme === 'dark'
-  const isCompact = variant === 'compact'
 
   const { heatmapSeries } = useMemo(
     () => generateHeatmapSeries(startDate, endDate, contributionData),
@@ -274,21 +273,34 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
   const calculateChartWidth = useMemo(() => {
     const weeksCount = heatmapSeries[0]?.data?.length || 0
 
-    if (isCompact) {
+    if (variant === 'compact') {
       const pixelPerWeek = 13.4
       const padding = 40
       const calculatedWidth = weeksCount * pixelPerWeek + padding
       return Math.max(400, calculatedWidth)
     }
 
+    if (variant === 'medium') {
+      const pixelPerWeek = 15.5
+      const padding = 40
+      const calculatedWidth = weeksCount * pixelPerWeek + padding
+      return Math.max(500, calculatedWidth)
+    }
+
     const pixelPerWeek = 19.5
     const padding = 50
     const calculatedWidth = weeksCount * pixelPerWeek + padding
     return Math.max(600, calculatedWidth)
-  }, [heatmapSeries, isCompact])
+  }, [heatmapSeries, variant])
 
   const chartWidth = calculateChartWidth
 
+  const getChartHeight = () => {
+    if (variant === 'compact') return 150
+    if (variant === 'medium') return 172
+    return 195
+  }
+
   return (
     <div className="w-full">
       {title && (
@@ -316,7 +328,7 @@ const ContributionHeatmap: React.FC<ContributionHeatmapProps> = ({
 
         <div className="inline-block">
           <Chart
-            height={isCompact ? 150 : 195}
+            height={getChartHeight()}
             options={options}
             series={heatmapSeries}
             type="heatmap"