-
시계열 차트 만들기
- 주어진 JSON 데이터의
key
값(시간)을 기반으로 시계열 차트를 만들어주세요 - 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
- Area 그래프의 기준값은
value_area
값을 이용해주세요 - Bar 그래프의 기준값은
value_bar
값을 이용해주세요 - 차트의 Y축에 대략적인 수치를 표현해주세요(예시 이미지 참고)
- 주어진 JSON 데이터의
-
호버 기능 구현
- 특정 데이터 구역에 마우스 호버시
id, value_area, value_bar
데이터를 툴팁 형태로 제공해주세요
- 특정 데이터 구역에 마우스 호버시
-
필터링 기능 구현
- 필터링 기능을 구현해주세요, 필터링은 특정 데이터 구역을 하이라이트 하는 방식으로 구현해주세요
- 필터링 기능은 버튼 형태로 ID값(지역이름)을 이용해주세요
- 필터링 시 버튼에서 선택한 ID값과 동일한 ID값을 가진 데이터 구역만 하이라이트 처리를 해주세요
- 특정 데이터 구역을 클릭 시에도 필터링 기능과 동일한 형태로 동일한 ID값을 가진 데이터 구역을 하이라이트해주세요
1. 시계열 차트 만들기 |
---|
2. 호버 기능 구현 |
3. 필터링 기능 구현 |
- Node v20.5.0
- npm v8.19.1
-
해당 레포지토리를 클론합니다.
git clone [레포지토리 주소]
-
npm을 통한 패키지의 의존성을 설치합니다.
npm install
-
프로젝트를 실행합니다.
npm run dev
- 요구사항에서의 json 파일을 프로젝트 로컬에 저장하고 임포트하여 별도의 서버구현 없이 사용했습니다.
- json 파일을 통해 새로운 배열을 만들어서 훅으로 사용했습니다.
export const useGetMock = () => { const mockKeys = Object.keys(mock.response) const mockValues = Object.values(mock.response) const [chartData, setChartData] = useState<MockData[]>([]) useEffect(() => { setChartData([]) mockValues.map((item, idx) => { setChartData(chartList => [ ...chartList, { time: mockKeys[idx].split(' ')[1], id: item.id, value_area: item.value_area, value_bar: item.value_bar, }, ]) }) }, []) return { chartData } }
-
선택된 필터값을 전역으로 설정해 사용할 수 있도록 했습니다.
import { createContext, useContext, useState } from 'react' interface IFilter { chartFilter: string changeChartFilter: (text: string) => void } const FilterContext = createContext<IFilter>({ chartFilter: '해제', changeChartFilter: () => {} }) export const useFilter = () => useContext(FilterContext) export function FilterProvider({ children }: { children: React.ReactNode }) { const [chartFilter, setChartFilter] = useState('해제') const changeChartFilter = (text: string) => { // NOTE 같은 항목 선택 시 디폴트 설정 setChartFilter(chartFilter === text ? '해제' : text) } return ( <FilterContext.Provider value={{ chartFilter, changeChartFilter }}> {children} </FilterContext.Provider> ) }
Recharts 공식문서
- 사용과 커스텀이 쉽습니다.
- 간단한 애니메이션 기능이 있습니다.
- 요구사항의 기능구현을 위해 적합한 라이브러리라고 판단하여 사용했습니다.
├── App.tsx
├── assets
│ └── mock_data.json
├── components
│ ├── ChartFilter.tsx
│ ├── ChartList.tsx
│ ├── CustomizedTooltip.tsx
│ └── LoadingSpinner.tsx
├── constants
│ └── constant.ts
├── contexts
│ └── FilterContext.tsx
├── hooks
│ └── useGetMock.ts
├── index.css
├── main.tsx
├── pages
│ └── Chart.tsx
├── styles
│ ├── Chart.style.ts
│ └── Cmn.style.ts
└── types
└── mock.ts