💄 [Design] 차트 가독성 제고

[yoopark]

Summary

차트 가독성을 높였습니다.

Describe your changes

기존이 왼쪽, 수정이 오른쪽입니다.

여행 중인 유저 레벨 분포

서클 별 평균 통과 기간

블랙홀 유저 비율

• 차트 전체에 적용되는 폰트를 Pretendard로 변경하였습니다. PieChart에서 변화가 가장 두드러집니다.

직전 회차 시험 통과율

여행 중인 유저 수 추이

• 이 카드와 같이 datetime 류 차트에 대하여, xlabel 싱크가 도저히 안 맞아서 제거하였습니다.
• 호버 시 아래 라벨 비슷하게 역할을 해주니까 이상하진 않다고 생각했습니다.

역대 코알리숑 스코어 변동 추이

• LineChart의 선을 굵게하고, smooth로 변경하여 가독성을 높였습니다.
• 위 카드와 동일하게 datetime 류 차트이므로 xlabel을 제거하였습니다.
• 데이터 전체의 최소/최대값을 계산하여 min, max range를 조정하기 때문에 값 변화에 유동적으로 대응할 수 있습니다.

누적 코알리숑 스코어 합산

• 💄 [Design] yeju 피드백 반영 #188 에서 제기되었던 이슈로, 최소값을 50%로 위치하도록 min 값을 조정하였습니다.
• 위에 표시되는 dataLabel이 잘 나오도록 max를 조정하였습니다. 위 카드와 동일하게 min, max 계산 과정에 데이터의 최소/최대값을 파악하는 로직이 들어가 있어 값 변화에 유동적으로 대응할 수 있습니다.

레벨 증가 그래프

• dajeon 레벨 증가 그래프 undefined 개월 #158 문제를 우회적으로 해결하는 방법을 찾아서 2년 이하 유저의 경우 뒤 쪽을 비우는 뷰를 다시 살렸습니다.
• 오래 한 유저에 대해서는 [0...24] 개월차 정보가 모두 주어지지만, 아직 2년 정보가 다 주어지지 않은 경우 데이터 뒤에 { x: 13, y: null }의 형식으로 x: 24까지 추가하는 방식으로 추가해줍니다. 이후 차트에서 null 값인 경우 '미정' 문자열을 표시하는 방식으로 해결하였습니다.

• Versus의 경우에 다음과 같이 표시됩니다.

추가. 모바일 화면에서의 가독성 제고

• 근본적인 변화는 아닙니다만, yLabel 정보를 숨기거나 tickAmount를 줄이는 식으로 가독성을 조금 높였습니다.
• 변경된 카드 이미지를 첨부합니다.
• 코알리숑 스코어 변동 추이 : 60,000 -> 60K

• 레벨 증가 그래프 : Tablet 이상일 때는 xLabel이 3개월 단위로, Mobile일 때는 6개월 단위로 표시됩니다.

Issue number and link

• close dajeon 레벨 증가 그래프 undefined 개월 #158