Issue#8/candle chart represent data

[kongyb]

개요

• 캔들차트상에 추가적인 정보를 나타내는 UI 생성

작업사항

• 27

  • 캔들차트에 격자 생성 및 격자 간격 증가
  • 격자와 캔들차트 틀어지는 에러 (나중에 해결)

• 32

  • 캔들유닛 크기 조정
  • 실시간 가격정보 나타내는 점선과 우측의 y축에 가격을 표시하는 텍스트 UI
  • 마우스가 차트위에 있을 경우 마우스의 위치를 기준으로 가로선, 세로선 생성 및 해당위치의 시간정보, 가격정보 표시하는 UI
  • 글자크기 추가조정 필요?
  • 마우스가 위치한 시간대의 가격정보 (시가, 종가, 고가, 저가)를 차트 좌측 상단에 표시하는 UI
• conflict가 많을 것 같아 미리 main을 merge하고 PR합니다.

생각해볼점

• 매직넘버 상수화(UI의 font-size) 반응형고려하면 어떻게 해야할까
• y축의 가격정보는 axis를 생성할때 사용한 scale을 사용하여 쉽게 접근할 수 있지만, 가격정보(x축)는 scale활용 불가 x축의 이동은 tranlate를 이용하여 처리하고 그때마다 xScale을 다시 계산하기 때문에 마우스의 위치정보를 활용할 수 없으며, xScale의 도메인이 화면에 나타나는 candle에 종속되어 있다. 격자와 차트가 틀어지는 문제도 차트의 이동과 다시계산되는 xScale의 싱크가 맞지 않는 문제라고 추측하고 있는데, xAxis와 chart-area를 합쳐서 같이 translate시켜보면 어떨지..??
• main을 merge하다 생각해본점 현재 차트를 생성하기 위해 추가적인 데이터를 받아오는 과정과 에러핸들링이 utils/chartManager.ts와 components/candleChart.tsx에 나누어져 있다. 저 두부분을 updateChart의 시작부분에서 한번에 관리하는 방향으로 수정해보면 어떨까. updateChart함수는 단순히 매개변수를 이용하여 차트를 적절하게 렌더링하는 역할을 하고있는데, 차트를 렌더링하기 전에 매개변수의 option의 인덱스 정보를 활용하여 현재 갖고있는 데이터가 렌더링되야하는 데이터를 포함하는지 확인하고 포함하지 않는다면 데이터를 fetch해오는 방향으로 핸들링 하는 방법 생각해보기.

이미지

[baldwinIV]

매직넘버 상수화(UI의 font-size) 반응형고려하면 어떻게 해야할까

ref를 argument로 넣고, ref의 width, height를 이벤트 리스너로 걸어서 변할떄마다 상태를 내밷는 useRefSize라는 커스텀훅을 하나 만들어서 사용하면 될 것 같습니다.

[baldwinIV]

격자와 차트가 틀어지는 문제도 차트의 이동과 다시계산되는 xScale의 싱크가 맞지 않는 문제라고 추측하고 있는데, xAxis와 chart-area를 합쳐서 같이 translate시켜보면 어떨지..??

• 31 <- 시도해볼만한 가치가 있다고 생각하는데, 다음 이슈에서 같이 진행 해보시나요?

[baldwinIV]

updateChart함수는 단순히 매개변수를 이용하여 차트를 적절하게 렌더링하는 역할을 하고있는데, 차트를 렌더링하기 전에 매개변수의 option의 인덱스 정보를 활용하여 현재 갖고있는 데이터가 렌더링되야하는 데이터를 포함하는지 확인하고 포함하지 않는다면 데이터를 fetch해오는 방향으로 핸들링 하는 방법 생각해보기.

잘 이해가 되지 않는데, 다음 기회에, 스크럼때 한번 설명해주시면 감사하겠습니다.