CalendarHeatmap

Calendario de intensidad estilo GitHub en SVG puro. Agrupa los datos cronológicos automáticamente en 53 semanas y 7 filas correspondientes a los días de la semana, asignando opacidades según la carga de actividad.

Menos

Más

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { CalendarHeatmap } from "@tsukira/ui"; const data = [  { date: "2026-01-01", value: 3 },  { date: "2026-01-02", value: 8 },  { date: "2026-01-03", value: 0 },]; <CalendarHeatmap  data={data}  tone="success"/>

Ejemplos#

Playground

Prueba distintos tonos semánticos

Menos

Más

tono de intensidad

Opciones

showLegend

Uso en Muro de Actividad de Usuario (Color Marea)

Combina con tonos brand del template para visualizaciones integradas

Menos

Más

API#

CalendarHeatmapPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'data'>

Prop	Tipo	Default	Descripción
`data`*	`{ date: string; value: number }[]`	—	Dataset con formato [{ date: 'YYYY-MM-DD', value: number }]
`startDate`	`Date \| string`	—	Fecha inicial (por defecto hace 1 año)
`endDate`	`Date \| string`	—	Fecha final (por defecto hoy)
`tone`	`ChartTone`	—	Tono de color para representar la intensidad
`valueFormatter`	`(value: number) => string`	—	Formateador para los valores en tooltip
`showLegend`	`boolean`	—	Mostrar leyenda (Menos -> Más)