[캔들차트] 차트 움직일때 svg내 차트dom 생성 제한

[rkdwoals159]

요약

매우 축소시켜서 큰 범위로 그래프를 이동하다보면 어느새 차트 element가 5000개 이상 쌓이게 되는데 렌더링 속도에 지장이 있습니다. 성능 개선을 위해 현재 보여지는 부분만 element를 생성하고 보여지지않는부분은 svg내에서 삭제하도록 구현할 예정입니다. element가 많이 로딩되면 아래처럼 성능 지연됨

예상 작업 내용 (커밋단위)

candleData를 자른다

1. 확대 최대치 제한 -> 200개까지만 보이도록 wheel이벤트에서 제한 추가

2. 최대 data 엘리먼트 개수를 600개로 제한함

3. 600개로 제한하긴 했지만 index를 알아야하므로 해당 600개가 몇번째 인덱스인지 알수있는 변수 추가 ex) 400~1000번째 index면 candleFetchStartIndex = 400

4. optionSetter

   • candleFetchStartIndex를 조절
   • 과거로갈경우 -> index +200
   • 미래로갈경우 -> index -200
   • renderStartDataIndex를 조절
   • 과거로갈경우 -> 미래데이터를 삭제하므로, index - 200
   • 미래로갈경우 -> 인덱스가 0으로 가기 전에 200개 추가해주면 index +200
   • renderCandleCount를 조절 (휠이벤트의 경우)
   • 어차피 최대 축소시 개수를 200개로 제한했기때문에 조절할 필요없음
   • translateX를 조절
   • 과거로갈경우 candleWidth * 200개 만큼 미래꺼를 날렸기때문에 왼쪽으로 이동
   • 미래로갈경우 candleWidth * 200개 만큼 과거꺼를 날렸기때문에 오른쪽으로 이동

이슈가 완료된 후 (TOBE)

성능개선 완료되어 빠른속도로 렌더링 될것으로 예상합니다.