Fix heatmap bugs

components/Heatmap.js

@@ -9,9 +9,10 @@ import { MdChevronLeft, MdChevronRight } from 'react-icons/md';
 import { indexToDate, getMonthTicks } from '@/utils/dates';
 
 const HeatMap = ({ data, stats }) => {
-  const [year, setYear] = useState(new Date().getFullYear());
-  // prettier-ignore
-  const { showTooltip, hideTooltip, tooltipLeft, tooltipTop, tooltipData } = useTooltip();
+  const currentYear = new Date().getFullYear();
+  const [year, setYear] = useState(currentYear);
+  const { showTooltip, hideTooltip, tooltipLeft, tooltipTop, tooltipData } =
+    useTooltip();
 
   // todo: get 53 and 7 from data
   const gap = 4;
@@ -57,15 +58,15 @@ const HeatMap = ({ data, stats }) => {
         </div>
         <div className="ml-auto flex space-x-2 items-center">
           <button
-            disabled={!Object.keys(data).includes((year - 1).toString())}
+            disabled={Object.keys(data).every((key) => +key >= year)}
             onClick={() => setYear((p) => p - 1)}
             className="disabled:text-gray-700"
           >
             <MdChevronLeft size={24} />
           </button>
           <span className="font-semibold">{year}</span>
           <button
-            disabled={!Object.keys(data).includes((year + 1).toString())}
+            disabled={year >= currentYear}
             onClick={() => setYear((p) => p + 1)}
             className="disabled:text-gray-700"
           >

pages/graphs.js

@@ -2,7 +2,7 @@ import Navbar from '@/components/Navbar';
 import HeatMap from '@/components/Heatmap';
 import Bars from '@/components/Bars';
 import getDays from '@/utils/getDays';
-import { getISODay } from 'date-fns';
+import { getISODay, parseISO } from 'date-fns';
 
 import { useData } from '@/lib/data';
 import getMedian from '@/utils/getMedian';
@@ -35,26 +35,11 @@ const Graphs = () => {
     return { level, duration: getDays(start, end) };
   });
 
-  let bins = {};
+  const bins = initializeBins(reviews);
+
   reviews.forEach((review) => {
     const { day, week, year } = calendarize(review.timestamp);
 
-    if (!bins[year]) {
-      bins[year] = [...Array(53)].map((e) => Array(7).fill(0));
-
-      const jan1 = new Date(Date.UTC(year, 0, 1));
-      const dec31 = new Date(Date.UTC(year, 11, 31));
-
-      let janOffset = jan1.getUTCDay();
-      if (janOffset === 0) janOffset = 7;
-
-      let decOffset = dec31.getUTCDay();
-      if (decOffset === 0) decOffset = 7;
-
-      bins[year][0] = bins[year][0].fill(null, 0, janOffset - 1);
-      bins[year][52] = bins[year][52].fill(null, decOffset);
-    }
-
     bins[year][week - 1][day - 1] += 1;
   });
 
@@ -108,4 +93,41 @@ const Graphs = () => {
   );
 };
 
+/**
+ * Initializes a "bins" object that will passed to the heatmap. "bins" is an object whose keys represent
+ * years and whose values are 53x7 arrays (53 weeks in a year, 7 days in a week). The array values are
+ * initalized to either 0 or null where null represents "invalid" days. For example, 1st Jan 2023 is a
+ * Sunday which would mean the first 6 days (Mon-Sat) would be invalid.
+ *
+ * @param {Array} reviews
+ * @returns {Object.<number, (number|null)[][]}
+ */
+const initializeBins = (reviews) => {
+  let bins = {};
+
+  const currentYear = new Date().getFullYear();
+  const allYears = reviews.map((review) =>
+    parseISO(review.timestamp).getFullYear()
+  );
+  const earliestYear = Math.min(...new Set(allYears));
+
+  for (let year = earliestYear; year <= currentYear; year++) {
+    bins[year] = [...Array(53)].map((e) => Array(7).fill(0));
+
+    const jan1 = new Date(Date.UTC(year, 0, 1));
+    const dec31 = new Date(Date.UTC(year, 11, 31));
+
+    let janOffset = jan1.getUTCDay();
+    if (janOffset === 0) janOffset = 7;
+
+    let decOffset = dec31.getUTCDay();
+    if (decOffset === 0) decOffset = 7;
+
+    bins[year][0] = bins[year][0].fill(null, 0, janOffset - 1);
+    bins[year][52] = bins[year][52].fill(null, decOffset);
+  }
+
+  return bins;
+};
+
 export default Graphs;