things-scene-data-transform

things-scene-data-transform에는 보드에서 표현되기 용이한 형태로 데이터를 가공해주는 컴포넌트들이 있다.

data-accessor

properties: accessor

데이터의 입력받은 accessor를 key로 갖고 있거나, Array의 경우 해당 index 값의 데이터를 리턴해주는 컴포넌트이다.

data-enhancer

properties: accessor-target, index-name, index-type

Object내 accessor-target에 해당되는 Array에 입력 받은 index-name값으로 index 역할을 해주는 property를 추가하여 주는 컴포넌트이다.

data-paginator

properties: page-size, duration

한 페이지에 표시될 갯수를 page-size으로 설정하여 해당 갯수만큼, duration에 입력된 초의 시간 동안 데이터를 표시해주는 컴포넌트이다. 또한 탭을 이용해 처음 페이지로 이동, 마지막 페이지로 이동, 전 페이지, 다음 페이지 이동이 가능하며, 직접 입력받은 페이지 이동또한 가능하다.

탭을 이용한 페이지 이동

1. 사용할 paginator을 생성한다.
2. 클릭 이벤트를 받을 컴포넌트를 생성한다.
3. 해당 컴포넌트의 탭 이벤트의 action을 set value to target component로 설정한다. 대상은 1에서 생성한 data-paginator의 아이디를 입력해준다.
4. 값은 first(처음 페이지로 이동), last(마지막 페이지로 이동), back(전 페이지로 이동), next(다음 페이지로 이동) 중에서 원하는 값을 입력해준다.

입력받은 페이지 번호를 통한 이동

1. 사용할 paginator을 생성한다.
2. Input-Number 컴포넌트를 생성한다.
3. 2에서 생성한 컴포넌트의 키값매핑에서 대상을 1의 paginator ID로 설정해주고, 속성을 value로 설정해준다.

data-queue

properties: max-size, min-size

입력받은 데이터를 Queue에 추가하고, Queue의 길이가 max-size 를 초과할 경우, 먼저 들어온 데이터부터 순차적으로 삭제해주는 기능을 제공하는 컴포넌트이다. Queue의 길이가 min-size사이즈 이상일 때만 표시하여 준다.

data-reducer

properties: accessor-target, accessor-item, reducing-propname, reducing-type

입력한 accessor-target에 해당되는 Array 형식의 데이터 중 accessor-item로 입력된 데이터들의 값을 처리해주는 기능이다. 총합, 평균값, 표준편차, 분산 값 등 원하는 reducing-type을 선택하면, 입력한 reducing-propname을 key 값으로 처리된 값을 제공하는 컴포넌트이다.

data-splitter

Array 형식의 데이터를 한 인덱스씩 잘라서 전달하는 역할을 한다.

data-wrapper

properties: property-name

Array 형식의 데이터를 property-name 필드의 입력받은 값을 key값으로한 Object로 바꿔주는 컴포넌트이다.

node package를 설치한다.

$ yarn

실행

$ yarn serve $ yarn serve:dev

포트를 바꾸려면, -p 3001 식으로 추가해준다.

$ yarn serve $ yarn serve -p 3001

test in browser

http://localhost:3000

build

$ yarn build

| type | filename | for | tested | | ---- | --------------------------------- | -------------- | ------ | | UMD | things-scene-data-transform.js | modern browser | O | | UMD | things-scene-data-transform-ie.js | ie 11 | O | | ESM | things-scene-data-transform.mjs | modern browser | O |

publish

$ yarn publish