Looker 시각화 구성요소는 오픈소스 @looker/visualizations
패키지에서 제공되는 React 기반 구성요소 집합입니다.
시각화 구성요소는 Looker Explore의 Query.client_id
값 또는 쿼리 ID 또는 Looker 대시보드의 대시보드 ID를 수락하고 iframe 없이 클라이언트 측 시각화를 렌더링합니다.
이러한 구성요소는 즉시 사용하거나, 맞춤설정하거나, 자체 맞춤설정된 시각화를 쉽게 빌드할 수 있도록 Looker Explore에서 정리된 데이터를 전달하기 위한 순수 데이터 형식 지정 도구로 취급될 수 있습니다.
Looker 시각화 구성요소는 TypeScript/자바스크립트 SDK를 사용하여 Looker의 API로 인증된 React 환경에서 사용하도록 설계되었습니다. 이 단계는 Looker 확장 프레임워크로 빌드할 때 자동으로 처리됩니다.
Looker 시각화 구성요소로 시각화 만들기
Looker의 시각화 구성요소 모음은 데이터 작업을 위한 두 가지 상위 수준 구성요소를 제공합니다.
Query
— 데이터 가져오기를 처리하고 응답을 React 컨텍스트에 로드합니다.Visualization
—Query
로 반환된 데이터를 수락하고 구성 어댑터를 사용하여 페이지에서 적절하게 맞춤설정된 차트를 렌더링합니다.
현재는 데이터를 다음 차트 유형으로 렌더링할 수 있습니다.
- 선
- 영역
- 분산형
- 스파크라인
- 단일 값
- 막대
- 열
- 테이블
- 원형
더 많은 차트 유형이 개발 중입니다.
각 차트 유형에 대한 속성 테이블을 보려면 시각화 및 쿼리 속성 테이블 문서 페이지를 참조하세요.
각 차트 유형에 사용 가능한 구성 옵션을 보려면 Looker 개발자 포털에서 시각화 플레이그라운드를 확인합니다.
시각화 구성요소를 사용하는 이유는 무엇인가요?
시각화 구성요소는 애플리케이션 내에서 Looker에서 시각화를 렌더링하는 프로세스를 개선 및 단순화하고, 개발자 시간을 절약하고, Looker에서 시각화를 맞춤설정 및 확장할 수 있는 더 많은 옵션을 개발자에게 제공합니다.
- 향상된 삽입 — 시각화 구성요소를 사용하면 개발자가 iframe 없이 애플리케이션에서 Looker 시각화를 삽입할 수 있습니다. 이를 통해 성능, 모니터링 및 맞춤설정 기능을 개선할 수 있습니다.
- 손쉬운 통합 — 그런 후 시각화 구성요소를
@looker/components
의 다른 구성요소와 결합하여 완전히 새로운 구성 및 프런트엔드 환경을 만들 수 있습니다. - 맞춤설정 — iframe을 사용할 때보다 시각화 구성요소를 사용할 때 삽입된 시각화를 더 쉽게 맞춤설정할 수 있습니다. 또한 시각화 구성요소를 통해 개발자가 처음부터 시각화 레이어를 만들 필요 없이 고도로 맞춤설정된 애플리케이션을 훨씬 빠르게 만들 수 있습니다.
- 단순화 — 시각화 구성요소는 Looker 시각화의 이동성을 개선하고 Looker API와의 상호작용을 단순화합니다.
시각화 구성요소 설치
시작하려면 Looker 시각화 구성요소 NPM 패키지를 추가합니다.
- NPM:
npm install @looker/visualizations
- YARN:
yarn add @looker/visualizations
또한 Looker/구성요소, React, 스타일 지정 구성요소와 같은 몇 가지 피어 종속 항목을 충족해야 합니다.
- NPM:
npm install @looker/components react react-dom styled-components
- YARN:
yarn add @looker/components react react-dom styled-components
시각화 구성요소 패키지 설치 및 사용에 대한 자세한 내용은 GitHub 및 NPM에서 제공되는 README 문서에서 찾을 수 있습니다.
다음 단계
- 시각화 구성요소 및
dashboard
속성을 사용하여 간단한 시각화 렌더링 - 시각화 구성요소 및
query
속성을 사용하여 간단한 시각화 렌더링 - 시각화 구성요소를 사용하여 커스텀 시각화 렌더링
- 시각화 구성요소를 사용하여 커스텀 시각화 빌드
- 시각화 및 쿼리 속성 표