YearlyHeatmap

@hua-labs/ui/dashboard

v1.0.0

색상과 툴팁을 커스터마이징할 수 있는 GitHub 스타일 연간 기여 히트맵.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { YearlyHeatmap } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Props

이름	타입	기본값	설명
`data`	`Record<string, number>`	-	날짜-카운트 데이터 맵 (키: 'YYYY-MM-DD', 값: 카운트)
`color`	`"primary" \| "cyan" \| "blue" \| "green" \| "purple" \| "orange" \| "red" \| "indigo" \| "pink" \| "gray"`	`"cyan"`	히트맵 색상 테마
`locale`	`string`	`"en-US"`	요일/월 라벨 로케일
`labels`	`YearlyHeatmapLabels`	-	제목, 범례, 툴팁 텍스트 라벨
`dot`	`string`	-	스타일링을 위한 dot 유틸리티 문자열

코드 예시

기본 사용법

import { YearlyHeatmap } from '@hua-labs/ui/dashboard';

const data = {
  '2026-03-01': 3,
  '2026-03-02': 1,
  '2026-03-05': 5,
};

<YearlyHeatmap data={data} color="cyan" />

커스텀 라벨 사용

import { YearlyHeatmap } from '@hua-labs/ui/dashboard';

<YearlyHeatmap
  data={diaryData}
  color="green"
  locale="ko-KR"
  labels={{
    title: "작성 기록",
    totalDays: "42일 작성",
    less: "적음",
    more: "많음",
    tooltip: (date, count) => `${date}: ${count}건`,
  }}
/>

MerchantListPro HeroSection