Issue#8/candle chart represent data(mouse event)

[kongyb]

개요

• 캔들차트에 추가적인 정보를 나타내는 UI를 생성하고 실시간 정보 업데이트, 마우스 이벤트등에 맞춰 갱신되도록 구현

작업사항

• 캔들 유닛 크기 조정
• 실시간 가격정보 나타내는 점선과 우측의 실시간 가격 보여주는 UI
• 마우스가 차트위에 있을 경우 마우스의 위치를 기준으로 가로선, 세로선 생성 및 해당위치의 시간정보, 가격정보 보여주는 UI
• 마우스가 위치한 시간대의 가격정보를 화면 좌측 상단에 보여주는 UI

생각해볼점

• 중간에 격자와 차트가 틀어지는 문제 아직 해결 못했음.
• 싹다 CandleChar컴포넌트안에 작성하다보니 너무 코드의 크기가 커졌음. 적절하게 분리하는 과정 필요할 것 같음.
• 매직넘버를 상수화, 데이터 처리하는 코드와 뷰를 생성하는 코드에 대해 생각해보고 추가적인 리팩토링 필요
• y축의 가격정보는 axis를 생성할때 사용한 scale을 사용하여 쉽게 접근할 수 있지만, 가격정보(x축)는 scale활용 불가 x축의 이동은 tranlate를 이용하여 처리하고 그때마다 xScale을 다시 계산하기 때문에 마우스의 위치정보를 활용할 수 없으며, xScale의 도메인이 화면에 나타나는 candle에 종속되어 있다.
  격자와 차트가 틀어지는 문제도 차트의 이동과 다시계산되는 xScale의 싱크가 맞지 않는 문제라고 추측하고 있는데, xAxis와 chart-area를 합쳐서 같이 translate시켜보면 어떨지..??

이미지

[baldwinIV]

feature 브랜치로 merge되는 (== main으로 가는 거 외에는) PR 은 approve를 필요로 하지 않으니 맘대로 merge해주시면 감사하겠습니다. 고생하셨습니다.

[baldwinIV]

로직 분리를 깔끔하게 해서 코드 가독성 신경을 써주신 게 정말 좋아요. main이랑 merge시키실 때 함수들의 경우 utils 폴더 안에 알맞은 파일 네임 정해서 분리시켜 주시면 감사하겠습니다.