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