Heatmap

import { Heatmap } from "@grassroot/charts-react"; 
const heatmapMonths = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"];
function buildHeatmapDays(): React.ComponentProps<typeof Heatmap>["data"] {
  let seed = 20260622;
  const rand = () => {
    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
    return seed / 0x7fffffff;
  };
  const days: React.ComponentProps<typeof Heatmap>["data"] = [];
  const start = new Date(2025, 5, 22);
  for (let index = 0; index < 53 * 7; index += 1) {
    const date = new Date(start.getTime() + index * 86400000);
    const weekend = date.getDay() === 0 || date.getDay() === 6;
    const value = Math.floor(rand() * (weekend ? 5 : 13));
    days.push({ date: date.toISOString().slice(0, 10), value: value < 2 ? 0 : value });
  }
  return days;
}
const heatmapDays = buildHeatmapDays();
 
<Heatmap animation={{ durationMs: 560, staggerMs: 8 }} data={heatmapDays} months={heatmapMonths} total="1,284 deploys in the last year" />

<script setup lang="ts">
import { Heatmap } from "@grassroot/charts-vue";
 
const heatmapMonths = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"];
function buildHeatmapDays(): React.ComponentProps<typeof Heatmap>["data"] {
  let seed = 20260622;
  const rand = () => {
    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
    return seed / 0x7fffffff;
  };
  const days: React.ComponentProps<typeof Heatmap>["data"] = [];
  const start = new Date(2025, 5, 22);
  for (let index = 0; index < 53 * 7; index += 1) {
    const date = new Date(start.getTime() + index * 86400000);
    const weekend = date.getDay() === 0 || date.getDay() === 6;
    const value = Math.floor(rand() * (weekend ? 5 : 13));
    days.push({ date: date.toISOString().slice(0, 10), value: value < 2 ? 0 : value });
  }
  return days;
}
const heatmapDays = buildHeatmapDays();
</script>
 
<template>
  <Heatmap :animation='{ durationMs: 560, staggerMs: 8 }' :data='heatmapDays' :months='heatmapMonths' total="1,284 deploys in the last year" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootHeatmap } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-heatmap-chart-demo",
  standalone: true,
  imports: [GrassrootHeatmap],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-heatmap [animation]='{ durationMs: 560, staggerMs: 8 }' [data]='heatmapDays' [months]='heatmapMonths' total="1,284 deploys in the last year" />`,
})
export class HeatmapDemoComponent {
  readonly heatmapMonths = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"];
  readonly buildHeatmapDays = () => {
    let seed = 20260622;
    const rand = () => {
      seed = (seed * 1103515245 + 12345) & 0x7fffffff;
      return seed / 0x7fffffff;
    };
    const days: React.ComponentProps<typeof Heatmap>["data"] = [];
    const start = new Date(2025, 5, 22);
    for (let index = 0; index < 53 * 7; index += 1) {
      const date = new Date(start.getTime() + index * 86400000);
      const weekend = date.getDay() === 0 || date.getDay() === 6;
      const value = Math.floor(rand() * (weekend ? 5 : 13));
      days.push({ date: date.toISOString().slice(0, 10), value: value < 2 ? 0 : value });
    }
    return days;
  };
  readonly heatmapDays = this.buildHeatmapDays();
}
 
export default HeatmapDemoComponent;

<script lang="ts">
  import { Heatmap } from "@grassroot/charts-svelte";
 
  const heatmapMonths = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"];
  function buildHeatmapDays(): React.ComponentProps<typeof Heatmap>["data"] {
    let seed = 20260622;
    const rand = () => {
      seed = (seed * 1103515245 + 12345) & 0x7fffffff;
      return seed / 0x7fffffff;
    };
    const days: React.ComponentProps<typeof Heatmap>["data"] = [];
    const start = new Date(2025, 5, 22);
    for (let index = 0; index < 53 * 7; index += 1) {
      const date = new Date(start.getTime() + index * 86400000);
      const weekend = date.getDay() === 0 || date.getDay() === 6;
      const value = Math.floor(rand() * (weekend ? 5 : 13));
      days.push({ date: date.toISOString().slice(0, 10), value: value < 2 ? 0 : value });
    }
    return days;
  }
  const heatmapDays = buildHeatmapDays();
</script>
 
<Heatmap animation={{ durationMs: 560, staggerMs: 8 }} data={heatmapDays} months={heatmapMonths} total="1,284 deploys in the last year" />

/** @jsxImportSource solid-js */
import { Heatmap } from "@grassroot/charts-solid";
 
const heatmapMonths = ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun"];
function buildHeatmapDays(): React.ComponentProps<typeof Heatmap>["data"] {
  let seed = 20260622;
  const rand = () => {
    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
    return seed / 0x7fffffff;
  };
  const days: React.ComponentProps<typeof Heatmap>["data"] = [];
  const start = new Date(2025, 5, 22);
  for (let index = 0; index < 53 * 7; index += 1) {
    const date = new Date(start.getTime() + index * 86400000);
    const weekend = date.getDay() === 0 || date.getDay() === 6;
    const value = Math.floor(rand() * (weekend ? 5 : 13));
    days.push({ date: date.toISOString().slice(0, 10), value: value < 2 ? 0 : value });
  }
  return days;
}
const heatmapDays = buildHeatmapDays();
 
export default function HeatmapDemo() {
  return <Heatmap animation={{ durationMs: 560, staggerMs: 8 }} data={heatmapDays} months={heatmapMonths} total="1,284 deploys in the last year" />;
}