-
Notifications
You must be signed in to change notification settings - Fork 9
개발 가이드
개발 시에는 src/layouts 폴더의 내용을 중심으로 개발을 진행하면 된다.
레이아웃 유형들은 공통으로 사용하는 인터페이스를 담은 core를 개별 유형들이 상속받아 정의 한다. 유형에는 bar, combo, line, marker-map, par-coords, pie, scatter, treemap, xy-heatmap이 있다.
-
rectLinear의 경우 직각형태의 xy축을 사용하는 유형들이 공통으로 상속받는다.facet은 이를 상속받아 small-multiples 기능이 있는 유형에 상속된다. -
brushMixin, fitLineMixin, paddingMixin, seriesMixin, shapeMixin, sortMixin, stackMixin, stackMixin, streamMixin, zoomMixin같은 mixin 클래스들은 유형마다 필요한 경우 상속 받는다.
개별 클래스 모듈은 폴더로 구성되어 있으며 index.js에 클래스가 정의되어 있고, 메소드들은 대부분 개별 파일로 분리하여 import 한후 prototype에 추가하는 형태로 구성되어 있다.
클래스 모듈은 index.js에 _attrs 변수를 가지고 있는데 여기에 외부에서 변경 가능한 설정 값들의 목록과 기본 값이 정의되어 있다. 그리고 해당 클래스는 이러한 _attrs의 속성 이름 값과 동일한 메소드를 가지고 있어 해당 메소드에 인자를 전달하면 기본 값이 변경되고(setter) 인자를 전달하지 않을 경우 해당 설정 값을 반환(getter)받는 형태이다. (예 core.data)
이러한 개별 attr 값에 대한 메소드는 개별 파일에 정의되어 있거나 (예 core.aggregate), 단순히 값만 변경하는 경우 modules/util의 attrFunc를 통해 자동으로 생성(예 core.aggregated)된다. 만약 기본 값이 특정한 키를 가진 object 형태를 가져야 할 경우 setMethodFromDefaultObj를 통해 자동 getter/setter를 생성한다 (예 core.defaultFont).
레이아웃 유형들의 경우에는 core.setAttrs 함수를 통해 _attrs를 이용하여 constructor 안에서 getter/setter를 한번에 정의하기도 한다 (예 bar).
이러한 _attrs 속성들은 인스턴스의 __attrs__에 오브젝트의 형태로 저장되어 this.attrs[attrName]형태로 접근이 가능하다.
_attrs 속성이 __attrs__에 저장된다면, 외부에서 설정하는 값이 아닌 렌더링 도중 내부적으로 정의하는 값들의 경우 __execs__에 오브젝트 형태로 저장되는 것을 확인할 수 있다. 특히 __execs__는 커스텀 이벤트를 dispatch 하는 경우 이벤트 변수들을 저장해두는데 사용된다(예 core).
bar, combo, line, marker-map, par-coords, pie, scatter, treemap, xy-heatmap 와 같은 실제 차트 유형의 클래스 정의를 보면, constructor 함수에 this.process를 통해 레이아웃이 그려지는 절차를 정의한다 (예 bar).
core.process의 첫번째 type인자는 해당 프로세스의 이름이 되며, call인자에 실행되어야 할 함수를 전달한다. option에는 {isPre, allow} 형태의 오브젝트를 전달한다. isPre의 경우 프레임 설정전에 먼저 실행되어야 하는 절차를 정의할 때 true 값을 설정한다(예시). allow는 특정 조건을 만족하는 경우에만 해당 프로세스가 실행 되도록 설정하고 싶을 때 콜백 함수를 전달하여 사용한다(예시).
이렇게 정의된 process들은 core.render가 실행될 때 순서대로 실행되는 것을 확인할 수 있다. isPre가 설정된 process는 core.renderFrame이 실행되기 전에 실행되는 것을 확인할 수 있다.
개별 process에 실행될 함수들은 유형별 폴더에 _[process] 형태로 저장되어, index.js에 import 되어 불려진다. 일반적으로 munge, domain, range, axis, region, mark, legend, tooltip의 순서로 실행되며 유형에 따라 추가적인 process들을 가지게 된다.
- munge: 입력된 dimension과 measure 갯수를 보고 세부 유형을 판단하고, 이에 따라 데이터를 aggregate 한다.
- domain: 세부 유형에 따라 필요한 x,y,color 등의 스케일 함수를 생성하고 데이터의 domain을 계산한다. rectLinear 유형의 경우 축의 두께 역시 자동으로 계산한다.
- range: 스케일 함수 사용 시에 mark가 놓일 영역 range를 계산한다.
- axis: rectLinear의 경우 스케일 함수를 이용하여 축을 설정한다.
- region: 개별 mark가 그려질 구획region을 구분한다. 구획의 구분이 필요 없더라도 단일한 구획을 그려 이 위에 mark를 그린다.
- mark: region 위에 mark를 그린다. 특히 처음 mark가 생성될 때와 업데이트 될 때를 구별하여 값을 설정한다.
- legend: color 스케일 함수를 통해 범례를 생성한다.
- tooltip: 포인터 인터액션 시에 위에 그려질 툴팁을 설정한다.
유형별 process의 자세한 내용은 아래에서 유형별로 설명하겠다.
core는 모든 유형이 상속받아 사용하며, aggregate나 reder 관련한 기본 메소드들이 정의되어 있는 영역이다. 여러 설정이 더해진 상태에서 render가 실행되면 해당 설정의 순서에 따라 렌더링이 시작된다.
... (TODO: 주요 메소드 설명 필요)
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...