Github Heatmap Exercise

Heatmap.tsx

/**
 * A Heatmap component that displays the contributions of a user in a Github format
 * 
*/
const getDayOfYear = (date: string): number => {
  const [dia, mes, anio] = date.split('/').map(Number);
  const formattedDate = new Date(anio, mes - 1, dia);;
  const start = new Date(formattedDate.getFullYear(), 0, 0);
  const diff = formattedDate.getTime() - start.getTime();
  const oneDay = 1000 * 60 * 60 * 24;
  return Math.floor(diff / oneDay);
};


const colors: Record<number, string> = {
  5: "#00831f",
  4: "#00831fb3",
  3: "#00831f6d",
  2: "#22ff0054",
  1: "#00831f21",
  0: "#00000000", // :)
}

const contribution: Contribution[] = [
  {
    date: "02/02/2026",
    number: 3
  },

  {
    date: "03/02/2026",
    number: 2
  },

  {
    date: "04/02/2026",
    number: 1
  },

  {
    date: "05/02/2026",
    number: 4
  },

  {
    date: "06/02/2026",
    number: 5
  },

  {
    date: "07/02/2026",
    number: 3
  }
]

const contributionMap: Record<number, number> = {}
contribution.forEach(cont => {
  const dateOfYear = getDayOfYear(cont.date);
  contributionMap[dateOfYear] = cont.number;
});
console.log(contributionMap);

type Contribution = {
  date: string,
  number: number
}


export function Heatmap() {
  //HERE
  //const startOfYear = new Date(new Date().getFullYear(), 0, 0);
  const days = new Array(365).fill(0)

  return <>
    <div style={{ display: 'grid', gridAutoFlow: "column", gridTemplateRows: "repeat(7, 1fr)", gridTemplateColumns: "repeat(53, 1fr)", gap: "2px", width: "100%" }}>
      {days.map((_, index) => {
        if (index == 0) return;
        return <SquareDate key={index} color={colors[contributionMap[index + 1]] ?? "#00000000"}></SquareDate>
      }

      )}
    </div>
  </>
}

function SquareDate({ color }: {
  color: string,
}) {
  return (
    <div style={{ width: '15px', height: '15px', backgroundColor: color, borderRadius: '4px', border: "1px red solid" }}>

    </div>
  )
}