CalendarHeatmap

---
import { CalendarHeatmap } from '@santi020k/lumen-astro'

// Illustrative daily observations, including real zeros and missing values.
const data = Array.from({ length: 184 }, (_, index) => ({
  date: new Date(Date.UTC(2026, 2, index + 1)).toISOString().slice(0, 10),
  value: index % 19 === 0 ? null : (index * 7 + Math.floor(index / 7)) % 9
}))
---

<CalendarHeatmap
  aria-label="Daily activity"
  heading="Daily activity"
  description="Illustrative contributions · March–August 2026"
  data={data}
  startDate="2026-03-01"
  endDate="2026-08-31"
  weekStartsOn={1}
/>

import { CalendarHeatmap } from '@santi020k/lumen-react'

// Illustrative daily observations, including real zeros and missing values.
const data = Array.from({ length: 184 }, (_, index) => ({
  date: new Date(Date.UTC(2026, 2, index + 1)).toISOString().slice(0, 10),
  value: index % 19 === 0 ? null : (index * 7 + Math.floor(index / 7)) % 9
}))

export const Example = () => (
  <>
    <CalendarHeatmap
      aria-label="Daily activity"
      heading="Daily activity"
      description="Illustrative contributions · March–August 2026"
      data={data}
      startDate="2026-03-01"
      endDate="2026-08-31"
      weekStartsOn={1}
    />
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements(['CalendarHeatmap'])
</script>

<lumen-calendar-heatmap id="example-calendar-heatmap"
  aria-label="Daily activity"
  heading="Daily activity"
  description="Illustrative contributions · March–August 2026"
  start-date="2026-03-01"
  end-date="2026-08-31"
  week-starts-on="1"></lumen-calendar-heatmap>

<script type="module">
"use strict";
// Illustrative daily observations, including real zeros and missing values.
const data = Array.from({ length: 184 }, (_, index) => ({
    date: new Date(Date.UTC(2026, 2, index + 1)).toISOString().slice(0, 10),
    value: index % 19 === 0 ? null : (index * 7 + Math.floor(index / 7)) % 9
}));

const chart = document.getElementById('example-calendar-heatmap')

chart?.setAttribute('data', JSON.stringify(data))
</script>