APEXCHARTS.JS는 다양한 타입의 차트를 사용할 수 있는 라이브러리입니다.
문서가 잘 되어있고, 커스텀 옵션도 굉장히 다양합니다.
근무 기록을 시각화하여 타임라인으로 보여주려고 하였습니다.
라이브러리에 원하던 형식의 타임라인 차트가 있어서, 시간을 많이 절약할 수 있게 되었습니다!
테스트를 하던 중 예상치 못한 문제를 발견하게 됐습니다.
시간 범위를 지정했을 때, 범위 자체는 맞는데 시작 시간이 항상 해당 날짜의 00시부터 시작됐습니다.
시간 범위의 비율은 어느정도 정확한 것 같아서, x축 눈금을 css로 새로 그려버릴까... 까지 고민했는데요.
많은 사람들이 사용하는 라이브러리인만큼 깃허브 Issues가 300개...!!
timeline chart를 사용하며 저와는 좀 다르지만 비슷한 오류를 겪는 사람들을 볼 수 있었습니다.
무엇이 문제였나?
해당 이슈에서 해결법을 찾았지만 찜찜한 감이 없잖아 있네요.
시간을 UTC로 입력하면 해결되는 문제였습니다.
공식 데모는 new Date(), 즉 GMT로 된 예시였기 때문에 더 김이 빠졌습니다.
저는 옵션에서 UTC로 설정해야 하는 부분을 false 로 바꿔주는 방법을 선택했습니다.
xaxis: {
type: "datetime",
labels: {
datetimeUTC: false,
},
},new Date()와 dayjs는 모두 GMT로 표기하지만, UTC와 거의 다른 바가 없다고 알고 있어서 신기하다고 생각했는데요.
console.log(new Date()); //Wed Jan 31 2024 17:11:45 GMT+0900 (한국 표준시)
console.log(dayjs); //Wed Jan 31 2024 17:11:45 GMT+0900 (한국 표준시)해당 차트의 x축 수치에 오류가 나는 정확한 원인을 알 수는 없지만, GMT와 UTC의 미묘한 수치 차이가 존재하고, 실제로 버그를 유발하기도 한다는 점을 알게 되었습니다.
//GMT
console.log(dayjs("2024-01-31 09:00").format()); //2024-01-31T09:00:00+09:00
console.log(dayjs("2024-01-31 09:00").valueOf()); //1706659200000
//UTC
console.log(dayjs.utc("2024-01-31 09:00").format()); //2024-01-31T09:00:00+00:00
console.log(dayjs.utc("2024-01-31 09:00").valueOf()); //1706691600000이런 많은 사람들이 사용하는 라이브러리는 자체적으로도 문서화가 잘 되어있는데다가 버그 리포트가 활발하다는 점이 매력적인 것 같습니다.
