세부사항 그래프
세부사항 그래프는 현재는 /etf/detail 페이지에 구현해놓았으나, 추후 이를 컴포넌트로 통합해서 실제 /etf/detail 페이지에 올리는 방식으로 변경할 예정이다.
구성요소
- 선 그래프
- 투자 희망 ETF의 종가를 보여주는 빨간 그래프
- 헷지 투자를 위해 추천하는 ETF의 종가를 보여주는 파란 그래프
- 두 상품을 동일 비율로 헷지 투자 했을 때 예상되는 값을 보여주는 보라 그래프
- 각 그래프를 껐다 킬 수 있는 토글 버튼이 있으면 좋을 것 같다
- 기간 조절 버튼
- 최근 10년 / 최근 3년 / 최근 1년 / 최근 6개월 / 최근 3개월 버튼 배치
- 배치한 기간은 임의로 삭제하거나 추가할 수 있다
- 미국장의 경우 최대 10년이나 한국장의 경우 최대 3년 데이터이기 때문에 최근 10년 버튼을 비활성화 시킬지 고민중이다
- 단위 조절 버튼
- 선 그래프의 각 점을 찍는 단위를 연도/월/일로 바꿀 수 있는 기능
- 기본은 일별로 되어있다
- 연도별로 보는 경우 최근 6개월, 최근 3개월의 경우에는 현재 년도로 하나의 점만 나오게 된다.
논의 사항
- 현재는 그래프의 Y축을 (0 ~ 세 그래프 중 최고값의 올림)으로 하여 조절 버튼에 따라 Y축이 변경되지 않게 만들었다. 그러나 이렇게 하니까 작은 변화가 눈에 잘 보이지 않는 문제점이 생겼다
그래프 동작 과정 GIF