5월 25일 프리온보딩 23일차

오늘 한 일

오늘은 만들어야 하는 기능을 마무리하고 다른 팀원들 부분을 합쳐가며 코드를 리뷰했다.
아직 만들어져야 하는 부분이 많아서 바쁘긴하지만 마감 전의 이 느낌이 나쁘지는 않다.
개발자의 적성에 맞을지도 ㅎㅎ....
물론 마감 전까지 바쁘면 좋은게 절대 아니니 조심하자!

공부한 것

Victory Chart Tooltip

Victory.js에서 chart에 마우스를 올렸을 때 정보를 보기 위해서는 tooltip이라는 기능을 사용한다.
정말 나오게만 하는건 VictoryChart에 속성 하나만 넣으면 된다.

<VictoryChart
  theme={VictoryTheme.material}
  domainPadding={{ x: 100, y: 0 }}
  {...props}
  containerComponent={
    <VictoryVoronoiContainer
      labels={({ datum }) => {
        return `${round(datum.value, 2)}`
      }}
    />
  }
/>

containerComponent 속성에서 VictoryVoronoiContainer 태그를 사용해서 labels로 안의 chart의 데이터를 보여줄 수 있다.
그런데 이렇게만 사용하면 너무 이쁘지가 않기 때문에 style을 조절해줘야 할 필요가 있다.

labelComponent={
  <VictoryTooltip
    style={{ fill: 'white', fontSize: 14 }}
    flyoutStyle={{ fill: '#3a474e' }}
    flyoutHeight={40}
    flyoutPadding={20}
  />
}

VictoryVoronoiContainer 태그안에서 위의 속성을 이용해서 style을 조절할 수 있다.
안에 들어가는 속성들은 태그에 들어가서 타입을 살펴보면 어떤 것을 쓸 수 있는지 알 수 있다.