Calendar Heatmap

[mattgatee]

Hey everyone 👋

I've been trying to knock down a heatmap based off of the gallery example. I'm basically trying to re-create heatmap for react but I'm pretty stumped as to why my scales are clearly broken.

Here's a codesandbox

My idea was to generate all the days for the specified date range:

const dates: string[] = Array.from(
  { length: Math.floor(Date.parse(endDate) - Date.parse(startDate)) / (24 * 60 * 60 * 1000) + 1 },
  (_, i: number) => {
    let date: Date = new Date(startDate);
    return new Date(date.setDate(date.getDate() + (i + 1))).toLocaleDateString("en-CA");
  }
);

group em later on by YYYY-mm:

const months: string[] = [...new Set(dates.map((date: string) => date.slice(0, 7)))].sort((a: string, b: string) =>
  a.localeCompare(b)
);

generate the bins (bins is always a 1 item array? for my data at least...)

const heatmapData: HeatmapData[] = dates.map((date: string, i: number) => {
  let d: ThermalOutageType = data.find((value: ThermalOutageType) => value.date === date);
  return { bin: i + 1, bins: [{ bin: date, count: d?.nodes ?? 0 }] };
});

my scales, which i'm almost positive is wrong

  const xScale = scaleLinear<number>({
    domain: [1, 31]
  });

  const yScale = scaleBand({
    domain: Array.from({ length: 6 }),
    padding: 0.2
  });

then finally:

  return (
    heatmapData && (
      <div className={styles.parentDiv}>
        <svg>
          <rect className={styles.parentRect} />
          <Group left={20}>
            {months.map((m: string, i: number) => (
              <HeatmapRect
                key={i}
                data={heatmapData.filter((value: HeatmapData) => (value.bins[0].bin as string).slice(0, 7) === m)}
                xScale={(columIndex: number) => xScale(columIndex) ?? 0}
                yScale={(rowIndex: number) => yScale(rowIndex) ?? 0}
                colorScale={rectColorScale}
                opacityScale={opacityScale}
                gap={2}
              >
                {(heatmap: RectCell<HeatmapData, unknown>[][]) =>
                  heatmap.map((heatmapBins: RectCell<HeatmapData, unknown>[]) =>
                    heatmapBins.map((bin: RectCell<HeatmapData, unknown>) => (
                      <rect
                        key={`heatmap-rect-${bin.row}-${bin.column}`}
                        width={bin.width}
                        height={bin.height}
                        x={bin.x}
                        y={bin.y}
                        fill={bin.color}
                        fillOpacity={bin.opacity}
                        onClick={() => {
                          if (!heatmapProps.events) return;
                          const { row, column } = bin;
                          alert(JSON.stringify({ row, column, bin: bin.bin }));
                        }}
                      />
                    ))
                  )
                }
              </HeatmapRect>
            ))}
          </Group>
        </svg>
      </div>
    )
  );

this is probably the closest i've gotten... any help at all for a front end newb would be greatly appreciated 🙏

[jmssnr]

Hey, quite late to answer but in case this is still open, here is my implementation for the calendar heatmap:
https://github.com/jmssnr/power-viewer/blob/02e2eed6517f2413037794501d675af2bae6b557/src/components/charts/cartesian/CalendarHeatmap/CalendarHeatmap.tsx