Heatmap

import { useState } from "react";
import { Heatmap } from "@grassroot/charts-react";
import { VariantToggle } from "./VariantToggle";
 
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();
const heatmapTotal = heatmapDays.reduce((sum, day) => sum + day.value, 0);
const heatmapSummary =
  heatmapTotal.toLocaleString("en-GB") + " production deployments in the last year";
 
export default function HeatmapDemo() {
  const [mark, setMark] = useState<"cell" | "dot">("cell");
  return (
    <div style={{ width: "100%", minWidth: 0 }}>
      <VariantToggle
        label="Mark"
        options={[
          { value: "cell" as const, label: "Cells" },
          { value: "dot" as const, label: "Punch card" },
        ]}
        value={mark}
        onChange={setMark}
      />
      <Heatmap
        mark={mark}
        animation={{ durationMs: 560, staggerMs: 8 }}
        data={heatmapDays}
        months={heatmapMonths}
        total={heatmapSummary}
        ariaLabel="Daily production deployment activity over the last 53 weeks"
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { Heatmap } from "@grassroot/charts-vue";
import VariantToggle from "./VariantToggle.vue";
 
const mark = ref<"cell" | "dot">("cell");
const marks = [
  { value: "cell", label: "Cells" },
  { value: "dot", label: "Punch card" },
];
 
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();
const heatmapTotal = heatmapDays.reduce((sum, day) => sum + day.value, 0);
const heatmapSummary =
  heatmapTotal.toLocaleString("en-GB") + " production deployments in the last year";
</script>
 
<template>
  <div style="width: 100%; min-width: 0">
    <VariantToggle v-model="mark" label="Mark" :options="marks" />
    <Heatmap
      :mark="mark"
      :animation="{ durationMs: 560, staggerMs: 8 }"
      :data="heatmapDays"
      :months="heatmapMonths"
      :total="heatmapSummary"
      aria-label="Daily production deployment activity over the last 53 weeks" />
  </div>
</template>

import { ChangeDetectionStrategy, Component, signal } from "@angular/core";
import { GrassrootHeatmap } from "@grassroot/charts-angular";
import type { HeatmapDatum } from "@grassroot/chart-spec";
import { VariantToggleComponent } from "./VariantToggle.component";
 
@Component({
  selector: "app-heatmap-chart-demo",
  standalone: true,
  imports: [GrassrootHeatmap, VariantToggleComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<app-variant-toggle
      label="Mark"
      [options]="marks"
      [value]="mark()"
      (valueChange)="setMark($event)"
    /><grassroot-heatmap
    [mark]="mark()"
    [animation]="{ durationMs: 560, staggerMs: 8 }"
    [data]="heatmapDays"
    [months]="heatmapMonths"
    [total]="heatmapSummary"
    ariaLabel="Daily production deployment activity over the last 53 weeks"
  />`,
})
export class HeatmapDemoComponent {
  readonly mark = signal<"cell" | "dot">("cell");
  readonly marks = [
    { value: "cell", label: "Cells" },
    { value: "dot", label: "Punch card" },
  ] as const;
  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: HeatmapDatum[] = [];
    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();
  readonly heatmapTotal = this.heatmapDays.reduce((sum, day) => sum + day.value, 0);
  readonly heatmapSummary =
    this.heatmapTotal.toLocaleString("en-GB") + " production deployments in the last year";
  setMark(value: string): void {
    if (value === "cell" || value === "dot") this.mark.set(value);
  }
}
 
export default HeatmapDemoComponent;

<script lang="ts">
  import { Heatmap } from "@grassroot/charts-svelte";
  import VariantToggle from "./VariantToggle.svelte";
  let mark = $state<"cell" | "dot">("cell");
  const marks = [
    { value: "cell", label: "Cells" },
    { value: "dot", label: "Punch card" },
  ];
 
  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();
  const heatmapTotal = heatmapDays.reduce((sum, day) => sum + day.value, 0);
  const heatmapSummary =
    heatmapTotal.toLocaleString("en-GB") + " production deployments in the last year";
</script>
 
<div style="width: 100%; min-width: 0">
  <VariantToggle
    label="Mark"
    options={marks}
    value={mark}
    onchange={(value) => (mark = value as typeof mark)}
  />
  <Heatmap
    {mark}
    animation={{ durationMs: 560, staggerMs: 8 }}
    data={heatmapDays}
    months={heatmapMonths}
    total={heatmapSummary}
    ariaLabel="Daily production deployment activity over the last 53 weeks" />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Heatmap } from "@grassroot/charts-solid";
import type { HeatmapDatum } from "@grassroot/chart-spec";
import { VariantToggle } from "./VariantToggle";
 
const heatmapMonths = [
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
];
function buildHeatmapDays(): readonly HeatmapDatum[] {
  let seed = 20260622;
  const rand = () => {
    seed = (seed * 1103515245 + 12345) & 0x7fffffff;
    return seed / 0x7fffffff;
  };
  const days: HeatmapDatum[] = [];
  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();
const heatmapTotal = heatmapDays.reduce((sum, day) => sum + day.value, 0);
const heatmapSummary =
  heatmapTotal.toLocaleString("en-GB") + " production deployments in the last year";
 
export default function HeatmapDemo() {
  const [mark, setMark] = createSignal<"cell" | "dot">("cell");
  const marks = [
    { value: "cell", label: "Cells" },
    { value: "dot", label: "Punch card" },
  ];
  return (
    <div style={{ width: "100%", "min-width": "0" }}>
      <VariantToggle
        label="Mark"
        options={marks}
        value={mark}
        onChange={(value) => setMark(value as "cell" | "dot")}
      />
      <Heatmap
        mark={mark()}
        animation={{ durationMs: 560, staggerMs: 8 }}
        data={heatmapDays}
        months={heatmapMonths}
        total={heatmapSummary}
        ariaLabel="Daily production deployment activity over the last 53 weeks" />
    </div>
  );
}