원티드 프리 온보딩 21일차 TIL

Victory js 정복기

제목은 거창하나 아직은 victory js한테 얻어 맞는 중 입니다.

1. axis label 위치 조정하기
   
   y축의 값들이 grid의 아래에 위치하게끔 하려면 그냥 VictoryAxis로는 불가능 합니다.

   해결방법

   <VictoryAxis
      dependentAxis
      tickLabelComponent={<VictoryLabel verticalAnchor='start' textAnchor='start' dy={5} dx={8} />}
   />

   VictoryAxis 안에 tickLabelComponet라는 것을 이용해서 위치를 조정할 수 있습니다.
   verticlaAnchor, textAnchor는 'start' , 'middle', 'end'을 값으로 가지고
   dy, dx는 각각 숫자를 값으로 가지며 위치를 조정할 수 있습니다.

2. 반응형 차트 만들기.

    useEffect(() => {
       const onResize = () => {
         const containerWidth = Number(containerRef.current?.offsetWidth)
         setWidth(containerWidth >= 1000 ? containerWidth : 1000)
         setIsResponsive(false)
       }
       window.addEventListener('resize', onResize)
       return () => window.removeEventListener('resize', onResize)
     })

   일단 resize event를 통해 브라우저의 크기가 변할때 마다 chart를 감싸고 있는 container의 offsetWidth를 감지하여 chart의 width를 변화시키는 방법으로 구현을 했습니다.
   하지만 이 방법은 초기 width를 감지할 방법이 없기 때문에 초기값을 정해 주어야 합니다.
   그래서 약간 야매로 생각한 방법이 chart responsive 변수를 통해 제어하는 것입니다.
   chart의 height와 width를 고정하려면 responsive변수를 false로 주어야 합니다. 그래서 일단 처음에는 responsive를 true로 주어서 크기에 맞게 자동으로 조절되게끔 하고 브라우저의 크기를 변화시키면 responsive를 false로 주어서 원하는 크기에 맞게 조절되게끔 하였습니다. 하지만 이 방법은 크기를 조절시키는 순간 height가 바뀌어서 좀 부자연스러워 좀 더 연구를 해봐야 할 것 같습니다.