Heatmap

import { Heatmap } from "@/components/ui/heatmap";

export default function Example() {
  return <Heatmap />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Heatmap = forwardRef(({ className, data = [], xLabels = [], yLabels = [], colors = ["#f0fdf4", "#166534"], ...props }, ref) => {
  const maxVal = Math.max(...data.flat(), 1);
  const interpolate = (val) => {
    const ratio = val / maxVal;
    return `opacity: ${0.15 + ratio * 0.85}`;
  };

  return (
    <div ref={ref} className={cn("overflow-auto", className)} {...props}>
      <div className="inline-grid" style={{ gridTemplateColumns: `auto repeat(${xLabels.length || (data[0]?.length || 0)}, 2rem)` }}>
        <div />
        {xLabels.map((l, i) => <div key={i} className="text-center text-[10px] text-muted-foreground">{l}</div>)}
        {data.map((row, ri) => (
          <>
            <div key={`l${ri}`} className="flex items-center pr-2 text-[10px] text-muted-foreground">{yLabels[ri] || ri}</div>
            {row.map((val, ci) => (
              <div key={`${ri}-${ci}`} className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary text-[9px] font-medium text-primary-foreground"
                style={{ opacity: 0.15 + (val / maxVal) * 0.85 }}
                title={`${val}`}
              >{val}</div>
            ))}
          </>
        ))}
      </div>
    </div>
  );
});
Heatmap.displayName = "Heatmap";

export { Heatmap };