Charts

<HeatmapChart data={data} gap={3} layout="fluid">
  <HeatmapCells
    cornerRadius={999}
    inactiveOpacity={0.8}
    inactiveScale={0.94}
  />
  <HeatmapSeparator
    groupBy="quarter"
    showLabels
    labelClassName="text-[var(--chart-3)]"
    spacing={12}
    startOffset={14}
    strokeOpacity={0.6}
  />
  <HeatmapXAxis />
  <HeatmapYAxis tickFilter="all" labelFormat="initial" />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend
  align="center"
  cornerRadius={999}
  gap={3}
  inactiveOpacity={0.8}
  inactiveScale={0.94}
/>

<HeatmapChart data={data} gap={3} layout="fluid">
  <HeatmapCells inactiveOpacity={1} inactiveScale={1} />
  <HeatmapXAxis />
  <HeatmapYAxis />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend align="center" gap={3} inactiveOpacity={1} inactiveScale={1} />

<HeatmapChart data={data} gap={3} layout="fluid" levelStyles={levelStyles}>
  <HeatmapCells />
  <HeatmapXAxis />
  <HeatmapYAxis />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend align="center" gap={3} levelStyles={levelStyles} />

const levelStyles = [
  { color: "var(--chart-scale-01)", fillMode: "solid", pattern: "none" },
  { color: "var(--chart-scale-02)", fillMode: "solid", pattern: "none" },
  {
    color: "var(--chart-scale-03)",
    fillMode: "pattern",
    pattern: "diagonal",
    patternColor: "var(--chart-scale-pattern-color)",
  },
  { color: "var(--chart-scale-04)", fillMode: "solid", pattern: "none" },
  { color: "var(--chart-scale-05)", fillMode: "solid", pattern: "none" },
] as const;

<HeatmapChart data={data} gap={3} layout="fluid">
  <HeatmapCells />
  <HeatmapSeparator
    groupBy="quarter"
    showLabels
    labelClassName="text-black dark:text-white"
    spacing={12}
    startOffset={14}
    stroke="var(--border)"
    strokeStyle="solid"
  />
  <HeatmapXAxis />
  <HeatmapYAxis tickFilter="odd" labelFormat="initial" />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend align="center" gap={3} />

<HeatmapChart data={data} gap={3} layout="fluid">
  <HeatmapCells />
  <HeatmapSeparator
    groupBy="quarter"
    showLabels
    labelClassName="text-black dark:text-white"
    spacing={12}
    startOffset={14}
    strokeStyle="solid"
    stroke="var(--muted)"
    gradient={{
      from: "var(--muted)",
      via: "var(--muted)",
      to: "var(--muted)",
      fromOpacity: 0,
      viaOpacity: 1,
      toOpacity: 0,
    }}
  />
  <HeatmapXAxis />
  <HeatmapYAxis tickFilter="odd" labelFormat="initial" />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend align="center" gap={3} />

<HeatmapChart data={data} gap={3} layout="fluid">
  <HeatmapCells />
  <HeatmapSeparator
    groupBy="quarter"
    showLabels
    spacing={12}
    startOffset={14}
    strokeStyle="dashed"
    strokeDasharray="3,5"
    stroke="var(--muted)"
    gradient={{
      from: "var(--muted)",
      via: "var(--muted)",
      to: "var(--muted)",
      fromOpacity: 0,
      viaOpacity: 1,
      toOpacity: 0,
    }}
  />
  <HeatmapXAxis />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend align="center" gap={3} />

import { HeatmapChartLoading } from "@bklitui/ui/charts";

<HeatmapChartLoading
  data={data}
  gap={3}
  label="Loading contributions"
/>

<HeatmapInteractionProvider>
  <HeatmapInteractionBoundary>
    <div className="flex w-full min-w-0">
      <div className="relative shrink-0" style={{ width: yAxisWidth }}>
        {/* Mon / Wed / Fri labels aligned to row bins */}
      </div>
      <div className="scroll-fade-x no-scrollbar min-w-0 flex-1 overflow-x-auto">
        <div style={{ width: `${(data.length / 26) * 100}%` }}>
          <HeatmapChart
            data={data}
            gap={3}
            layout="fluid"
            margin={{ top: 28, right: 12, bottom: 0, left: 0 }}
          >
            <HeatmapCells />
            <HeatmapXAxis />
            <HeatmapTooltip />
          </HeatmapChart>
        </div>
      </div>
    </div>
    <HeatmapLegend align="center" gap={3} />
  </HeatmapInteractionBoundary>
</HeatmapInteractionProvider>

<HeatmapChart data={data} gap={3} layout="fluid" levelStyles={levelStyles}>
  <HeatmapCells />
  <HeatmapXAxis />
  <HeatmapYAxis tickFilter="odd" labelFormat="initial" />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend
  align="center"
  variant="gradient"
  lessLabel="Faster"
  moreLabel="Slower"
  fontSize={12}
  labelClassName="text-muted-foreground"
  levelStyles={levelStyles}
  gap={3}
/>

import { buildHeatmapRowOpacity } from "@bklitui/ui/charts";

const weekendOpacity = buildHeatmapRowOpacity((row) => row >= 5, 0.35);

<HeatmapChart data={data} gap={3} layout="fluid" weekStartDay={1}>
  <HeatmapCells rowOpacity={weekendOpacity} />
  <HeatmapXAxis />
  <HeatmapYAxis
    tickFilter="all"
    labelFormat="initial"
    rowOpacity={weekendOpacity}
  />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend align="center" gap={3} />

<HeatmapChart data={data} gap={4} layout="fluid">
  <HeatmapCells
    activeScale={1.1}
    inactiveOpacity={0.45}
    inactiveScale={1}
  />
  <HeatmapXAxis />
  <HeatmapYAxis tickFilter="odd" labelFormat="initial" />
  <HeatmapTooltip />
</HeatmapChart>
<HeatmapLegend
  align="center"
  gap={4}
  activeScale={1.1}
  inactiveOpacity={0.45}
  inactiveScale={1}
/>