July 6, 2020

라이트웨이트 차트 3.0

라이트웨이트 차트 3.0 이 릴리즈되었습니다. 프라이스 스케일 두개 넣기, 보이는 데이터의 왼/오른 쪽으로부터 바 갯수 카운트, 자체 날짜 포맷 쓰기, 오토 스케일 레인지 오버라이드 등의 기능을 넣었습니다. 이들 업데이트 각각에 대해 하나씩 들여다 보면서 최신 라이트웨이트 차트 버전을 써 보도록 하겠습니다.

주요 바뀐 것들

첫째로, 다음과 같은 주요한 것들이 바뀌었습니다:

  • subscribeVisibleTimeRangeChange 와 unsubscribeVisibleTimeRangeChange 메쏘드가 ChartApi 로부터 TimeScaleApi 로 옮겨졌음;
  • 3.0 릴리즈에서는 프라이스 축을 어느 쪽에 넣을지 정할 수 있습니다. 프라이스 스케일 사이에서 시리즈를 옮기는데에도 마찬가지입니다.

여러분이 부드럽게 옮겨갈 수 있도록 하기 위한 가이드인 주요 바뀐 것들을 읽어보시기 바랍니다.

두개의 프라이스 스케일

지금까지는 (왼쪽 또는 오른쪽에서) 한번에 하나의 프라이스 스케일만 보여줄 수 있었습니다. 버전 3.0 부터는 한번에 두 개의 프라이스 스케일을 넣을 수 있습니다. 이 말은 차트에 서로 다른 두 개의 시리즈를 넣고 각각 서로 다른 프라이스 스케일을 (하나는 왼쪽, 다른 하나는 오른쪽) 넣을 수 있다는 말입니다. 게다가 같은 프라이스 스케일에 여러 시리즈를 넣을 수 있습니다. 이렇게 하면 여러 아웃풋을 가진 나만의 스터디를 만들고 모든 아웃풋을 각각 별도 시리즈로 만들어 같은 프라이스 스케일로 볼 수 있습니다.

바 카운팅 및 보기

앱을 개발하는데 유저가 왼쪽 스크롤할 때 히스토리 데이터를 이어서 로딩할 필요가 있습니다. 차팅 솔루션이 갖춰야 할 기본 기능입니다.

라이브러리 3.0은 이와 관해 많은 개선을 했습니다. 보기로 왼쪽/오른쪽 끝 바로부터 바의 갯수 정보를 얻을 수 있습니다. 또한 미리 셈하여 새 바를 로드함으로써 유저가 아무런 딜레이를 느끼지 않도록 할 수 있습니다. 유저가 왼쪽 스크롤때 필요한 데이터를 로드하여 50-100 바만 남겨 놓을 수 있습니다.

그리고,  여러 차트사이에서 눈에 보이는 레인지가 부드럽게 싱크가 되도록 API 를 적용할 수도 있습니다 (보기: 트레이딩뷰 멀티차트처럼). 하나의 차트가 움직이면 다른 차트도 함께 움직입니다.

날짜 포맷

지금까지는 하드 코딩된 19 가지 날짜 포맷만 쓸 수 있었기 때문에 자신만의 커스텀 포맷을 쓸 수 없었습니다.

3.0 에서는 이를 바꿔 모든 커스텀 스트링을 데이트 포맷으로 쓸 수 있습니다. 보기로 `yyyy-dd` 또는 `yyyy` 등의 포맷도 쓸 수 있습니다

커스텀 포맷은 데이트 플레이스홀더를 포함한 스트링으로 그에 맞는 날짜값으로 바뀌게 됩니다:

  • `yyyy` – 4자리 해 (보기: 2020)
  • `yy` – 2자리 해 (보기: 20)
  • `MMMM` – 긴 달 (보기: July)
  • `MMM` – 짧은 달 (보기: Feb)
  • `MM` – 숫자 (필요시 리딩 제로와 함께) 달 (보기: 03)
  • `dd` – 날짜 (필요시 리딩 제로와 함께) (보기: 15)

시리즈 프라이스 레인지 오버라이딩

오토 스케일 모드에서는 디폴트로 라이브러리에서 프라이스 레인지를 셈하기 위해 차트에 보이는 모든 데이터를 씁니다. 하지만 그걸 바꾸고 싶다면, 보기로, 시리즈에 네거티브 값이 오지 않도록 하고 싶다면 프라이스 레인지를 네거티브가 되지 않도록 조절하면 라이브러리가 프라이스 레인지를 적절히 조절합니다.

시리즈 마커에 텍스트 넣기

시리즈 마커는 차트 UX 를 더 좋게 해 주는 쓸모가 있습니다. 시리즈 바옆에 (애로우, 써클, 스퀘어 등) 마커를 보여줄 수 있습니다. 새 라이브러리 버전에서는 각 마커의 시그니처나 텍스트를 정할 수도 있어 캡션이나 메모 등을 넣을 수도 있습니다.

타임과 좌표 변환 API

때로는 차트의 특정 시간대에 라이브러리 탑에 힌트나 텍스트를 넣을 필요가 있습니다.. 3.0 버전에서는 타임을  좌표로 또는 그 반대로 바꿀 수 있게 되었습니다. 그리고 (왼쪽 또는 오른쪽) 프라이스 스케일의 너비를 얻을 수 있습니다. 보기로, 왼쪽 프라이스 스케일이 있을 때 차트안에서 정확한 좌표를 구하고자 할때 쓸모가 있습니다.

프라이스 스케일 틱마크 감추기

프라이스 스케일 틱마크는 마이너스 사인처럼 보여 가끔 헷갈릴수가 있습니다. 이제는 이 심볼을 꺼서 라이브러리에서 더 이상 보이지 않게 할 수 있습니다. 이 말은 더 이상 헷갈리는 심볼로 차트를 채우지 않는 다는 뜻입니다.

그 밖의 기능들

“라이트웨이트” 라는 말은 사이즈에 대한 뜻도 가지고 있습니다. 라이브러리 최초 버전은 ~43.7KB 로 min.gz 값입니다. 그 뒤로 이어서 새로운 기능들을 늘려왔으므로 그에 따라 라이브러리 사이즈도 커졌을 것이라 생각하겠지만 사실은 그렇지 않습니다.

이번 릴리즈에서는 라이브러리 사이즈를 줄이기 위해 여러 가지 테크닉을 썼습니다.  그래서 3.0 사이즈는 42.4KB 이며 min.gz 값입니다.  오히려 예전보다 사이즈가 더 줄었습니다.

라이브러리 사이즈 줄이기 하이라이트가 GH #436 및 GH #432 에 나오므로 이를 여러분의 프로젝트에서도 쓸 수 있습니다. 최대 30% 까지 줄일 수 있습니다.

커뮤니티에 대한 특별한 고마움

트레이딩뷰는 인베스터, 트레이더 및 프로그래머 커뮤니티입니다. 모든 컨트리뷰터에게 고마움의 말씀을 드리고자 합니다:

앞으로 더 많은 것을 보여 드리겠습니다

이번 포스팅을 통해 라이트웨이트 차트 3.0 의 새로운 기능에 대해 살짝 맛만 보여 드렸습니다. 모든 리스트를 보려면당사 Github notes 에 좀 더 자세히 나옵니다. 라이트웨이트에 대한 알아보려면 당사 Charting Library.를 읽어 보시기 바랍니다.

 

앞으로도 코멘트/피드백/써제스쳔을 보내 주시기 바랍니다

고맙습니다

Look first / Then leap

차트 시작