react-native-chart-kit 라이브러리를 이용한 커스텀 차트 만들기
그래프 시작점을 x인덱스 한 칸만 옮기기 삽질
작업 이유: 그래프 시작점이 y축에 붙어있어서 심미적으로 불편했음
시작점이 x인덱스 한 칸만 옮기면 보기 딱 좋을 것 같았음
생각한 방법:
x인덱스 맨 앞에 임시 인덱스를 만들고, 라이브러리의 특정 인덱스 숨기기 파라미터를 이용해 해당 값만 안보이게 하고(칸은 그대로 남아있다) x인덱스를 오른쪽으로 한 칸씩 미는 방법을 생각했다.
예상 문제점:
요일별로 데이터 개수를 집계하는 방식이기에 개수집계함수도 손봐야한다.(기존은 요일 7개임을 이용했기 때문, 맨 처음에는 데이터가 안들어가도록 처리를 해줘야 할 것이다. Date객체를 이용하여 getDay를 이용하는 것이기에 따로 처리를 해줘야한다.
진행:
커스텀을 위해 차트 라이브러리의 코드를 일일이 살펴 어떤 패러미터가 있는지 살폈다.
visual studio에서, 컴포넌트에 ctrl+클릭을 하면 해당 컴포넌트의 코드가 열린다. 이 코드에 컴포넌트의 파라미터들과 주석으로 설명들이 있었다.
getDay가 요일을 숫자형식으로 반환(0:일요일 ~ 6: 토요일)하니까, 게다가 맨 앞의 라벨을 임시라벨로 할 것이기에 getDay의 반환값에 1만 더해주면 되었다.
결과: 성공!
성장한 점:
라이브러리의 패러미터들을 가지고 라이브러리 컴포넌트에 원하는 옵션들을 설정할 수 있게 되었다.
보통 라이브러리를 사용하면 제시해주는 예시코드를 가져와서 데이터값만 바꾸거나, 색깔만 바꿨었는데,
x축, y출 항목 라벨의 위치, 선의 형태 및 스타일 등등 세부적인 옵션들도 파헤쳐봐서 개발중인 앱의 스타일과 가장 비슷하고 적합한 스타일로 바꾼 적은 처음이었다.
라이브러리에 어떤 옵션들이 있고, 이 중 필요한 옵션은 뭐고 어떻게 바꿔야하는지 파헤쳐보는 작업은 어렵기도 했지만, 그만큼 코드를 자세하게 뜯어볼 수 있고 더 나아가서 뜯어본 코드를 내 입맛대로 다시 맞춰볼 수 있는 능력을 키운 것 같아서 뿌듯하다.
개선해보고 싶은 것
위의 그래프 그림을 보면 알겠지만, 그래프 선이 렌더링이 급격히 꺾이는 부분에서 그래프의 꼭짓점이 기준점과 맞지 않아 또 심미적 불편함(...)이 있다. 이런 그래픽적인 렌더링 부분을 약간의 곡선을 주고 그래프의 꺾이는 부분이 x축과 딱 맞도록 해서 더 이쁘게 만들어보고 싶다는 생각이 들었다.
