소개
이 프로젝트는 GitHub 의 기여 그래프와 유사한 React 에서 히트맵 캘린더를 만드는 과정을 안내합니다. 이러한 종류의 캘린더는 주어진 날짜의 활동 수준을 색상의 강도로 나타내어 시간 경과에 따른 활동 데이터를 시각화하는 매력적인 방법이 될 수 있습니다. 이 프로젝트를 완료하면 React 애플리케이션에서 캘린더 히트맵을 통합하고 사용하는 방법에 대한 명확한 이해를 얻게 될 것입니다.
React 로 GitHub 히트맵 기여도 만들기
필요한 의존성 설치
히트맵 캘린더의 기반은 새로운 React 애플리케이션입니다.
기능:
- 프로젝트 종속성 설치.
- 히트맵을 위해
react-calendar-heatmap라이브러리 설치. - 간편한 날짜 조작을 위해
date-fns설치.
프로젝트 종속성을 설치하려면 다음 명령을 사용하십시오.
cd github-heatmap-calendar
npm install캘린더 히트맵 기능을 추가하려면 React 관련 라이브러리와 날짜 유틸리티 라이브러리를 설치해야 합니다. (해당 라이브러리는 이미 프로젝트에 포함되어 있으며 설치할 필요가 없습니다.)
npm install react-calendar-heatmap date-fns히트맵 컴포넌트 셸 생성
어떤 기능도 없이 히트맵 컴포넌트의 기본 구조를 먼저 만들겠습니다.
기능:
- 히트맵 컴포넌트를 위한 새 파일 생성.
- 자리 표시자 콘텐츠로 함수형 컴포넌트 정의.
코드:
// src/GitHubCalendar.js
import React from "react";
const GitHubCalendar = () => {
return (
<div>
{/* 히트맵 자리 표시자 */}
<div>Heatmap will go here</div>
</div>
);
};
export default GitHubCalendar;필터링을 위한 상태 추가
히트맵을 채우기 전에 사용자 상호 작용에 따라 데이터를 필터링하기 위한 상태를 추가해 보겠습니다.
기능:
useState훅을 가져옵니다.colorFilter상태 변수를 초기화합니다.
코드:
// src/GitHubCalendar.js
import React, { useState } from "react";
const GitHubCalendar = () => {
const [colorFilter, setColorFilter] = useState(null);
return (
<div>
{/* 히트맵 자리 표시자 */}
<div>Heatmap will go here</div>
</div>
);
};
export default GitHubCalendar;더미 데이터 생성
활동을 시뮬레이션하기 위해 더미 데이터를 생성합니다. 실제 애플리케이션에서는 이 데이터를 실제 데이터로 대체할 것입니다.
기능:
date-fns를 사용하여 날짜 범위를 생성합니다.- 각 날짜에 대한 더미 데이터로 배열을 채웁니다.
코드:
// src/GitHubCalendar.js
import { subYears, isBefore, format } from "date-fns";
// GitHubCalendar 컴포넌트 내부에 추가
const startDate = subYears(new Date(), 1);
const endDate = new Date();
const values = [];
let currentDate = startDate;
while (isBefore(currentDate, endDate)) {
values.push({
date: format(currentDate, "yyyy-MM-dd"),
count: Math.floor(Math.random() * 5)
});
currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
}캘린더 히트맵 렌더링
이제 CalendarHeatmap 컴포넌트를 포함하고 더미 데이터를 전달합니다.
기능:
- 데이터로 히트맵을 렌더링합니다.
- 카운트를 기반으로 색상 스케일을 정의합니다.
코드:
// src/GitHubCalendar.js
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";
// GitHubCalendar 컴포넌트의 return 문 안에 추가
<CalendarHeatmap
startDate={startDate}
endDate={endDate}
values={values}
classForValue={(value) => {
if (!value || value.count === 0) {
return "color-empty";
}
return `color-scale-${value.count}`;
}}
showWeekdayLabels={true}
/>;필터링 로직 구현
클릭 시 히트맵을 필터링하는 각 활동 레벨에 대한 버튼을 생성합니다.
기능:
colorFilter상태를 설정하는 버튼을 추가합니다.- 선택된 필터를 기반으로 히트맵 데이터를 필터링합니다.
코드:
// src/GitHubCalendar.js
// return 문에서 CalendarHeatmap 컴포넌트 아래에 추가
<div className="filter-bar">
{Array.from({ length: 5 }, (_, i) => (
<button
key={i}
className={`filter-btn color-scale-${i}`}
onClick={() => setColorFilter(colorFilter === i ? null : i)}
>
Filter {i}
</button>
))}
</div>컴포넌트 스타일 지정
데이터를 시각적으로 전달하기 위해 히트맵 및 필터 버튼에 대한 CSS 를 정의합니다.
기능:
- 히트맵 색상 및 버튼 스타일 지정을 위한 CSS 규칙을 추가합니다.
코드:
/* src/App.css */
/* 여기에 CSS 규칙을 추가하세요 */
.color-empty {
fill: #ebedf0; /* 기여 없음 - 흰색 */
}
.color-scale-0 {
fill: #ebedf0; /* 가장 밝은 녹색 - 가장 밝은 녹색으로 변경하세요 */
}
.color-scale-1 {
fill: #9be9a8; /* 밝은 녹색 */
}
.color-scale-2 {
fill: #40c463; /* 중간 녹색 */
}
.color-scale-3 {
fill: #30a14e; /* 어두운 녹색 */
}
.color-scale-4 {
fill: #216e39; /* 가장 어두운 녹색 */
}
.filter-bar {
display: flex;
justify-content: center;
margin-top: 20px;
}
.filter-btn {
background: none;
border: 2px solid transparent;
margin: 0 5px;
padding: 5px 10px;
cursor: pointer;
transition:
background-color 0.3s,
border-color 0.3s;
}
/* 필터 버튼에 동일한 색상 적용 */
.filter-btn.color-scale-0 {
border-color: #ebedf0;
}
.filter-btn.color-scale-1 {
border-color: #9be9a8;
}
.filter-btn.color-scale-2 {
border-color: #40c463;
}
.filter-btn.color-scale-3 {
border-color: #30a14e;
}
.filter-btn.color-scale-4 {
border-color: #216e39;
}
.filter-btn:hover,
.filter-btn:focus {
background-color: #ddd;
}
.reset {
border-color: #000; /* Reset 버튼 테두리 색상 */
}
/* 활성 필터 강조 */
.filter-btn.active {
border-color: #666; /* 활성 버튼 테두리 색상 */
font-weight: bold;
}색상 스케일 및 버튼 스타일 설정에 대한 지침은 이전 CSS 예제를 참조하십시오.
애플리케이션 조립
히트맵 컴포넌트를 주 애플리케이션 파일에 통합합니다.
기능:
GitHubCalendar컴포넌트를App.js로 가져옵니다.- 애플리케이션에서
GitHubCalendar컴포넌트를 렌더링합니다.
코드:
// src/App.js
import React from "react";
import "./App.css";
import GitHubCalendar from "./GitHubCalendar";
function App() {
return (
<div className="App">
<GitHubCalendar />
</div>
);
}
export default App;애플리케이션 실행
모든 구성 요소가 준비되었으니, 히트맵 캘린더가 작동하는 모습을 볼 차례입니다.
기능:
- 애플리케이션을 실행하고 히트맵 캘린더를 확인합니다.
명령어:
npm start이 명령은 React 애플리케이션을 컴파일하고 기본 웹 브라우저에서 8080 포트로 엽니다.
요약
축하합니다! GitHub 의 기여 그래프와 유사한 히트맵 캘린더를 포함하는 React 애플리케이션을 방금 생성했습니다. 프로젝트 초기화부터 시작하여 필요한 라이브러리를 설치하고, 히트맵 컴포넌트를 생성하고, 필터링 기능을 구현하고, 컴포넌트의 스타일을 지정했습니다. 이 프로젝트는 React 에서 복잡한 UI 컴포넌트를 구축하는 단계별 접근 방식을 제공했으며, 다양한 유형의 시계열 데이터 또는 사용자 활동을 표시하는 데 적용할 수 있습니다.
