시각화 구성요소를 사용해 맞춤 시각화 렌더링

이 예에서는 Looker Marketplace에서 사용할 수 있는 맞춤 시각화가 아니라 개발 중인 앱에 로컬인 맞춤 시각화를 렌더링합니다.

Looker 시각화 구성요소에는 개발자가 기존 차트 유형을 재정의하거나 완전히 새로운 차트 유형 옵션을 추가할 수 있는 어댑터 시스템이 있습니다.

이 옵션은 다음 상황에서 유용할 수 있습니다.

  • Looker 구성요소와 함께 사용할 맞춤 React 시각화를 빌드했습니다.
  • 기존의 기본 Looker 시각화를 다른 라이브러리에 빌드된 시각화로 대체하려고 합니다.

차트를 재정의하거나 추가하는 기능은 세션 중에 사용자가 차트 시각화 유형을 변경할 수 있는 애플리케이션을 빌드하는 경우 특히 관련이 있을 수 있습니다.

백그라운드

Looker의 탐색 인터페이스에서 쿼리를 렌더링하고 Query.client_id를 Looker의 시각화 구성요소로 전달한 후 config 속성의 type 속성을 업데이트하여 차트 유형을 수정할 수 있습니다.

type 속성에서 허용하는 각 값은 특정 React 구성요소에 매핑됩니다. 따라서 type가 line로 설정되면 Line 구성요소가 렌더링되고 type가 area로 설정되면 Area 구성요소가 렌더링됩니다.

Visualization 구성요소의 chartTypeMap 속성을 사용하면 각 type 값을 특정 구성요소와 연결하는 유형/구성요소 맵에 새 항목을 추가하거나 기존 항목을 대체할 수 있습니다.

요구사항

시각화 구성요소와 query 속성을 사용하여 간단한 시각화 렌더링 예시와 마찬가지로 먼저 DataProvider 구성요소를 가져오고 인증된 SDK 인스턴스를 제공해야 합니다. 다음 예는 Looker의 확장 프레임워크에서 빌드되었으며 SDK는 ExtensionContext에서 가져옵니다.

DataProvider 내에서 Query 및 Visualization 구성요소를 렌더링하여 Looker SDK에 데이터를 요청하고 애플리케이션 내에서 예상되는 시각화를 렌더링할 수 있습니다.

설정은 다음과 같습니다 (query 속성에서 값을 쿼리의 Query.client_id로 바꿉니다).

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization />
            </Query>
        </DataProvider>
    )
}

새 차트 유형 추가

간단한 시각화 예와 마찬가지로, 구성 재정의를 Query 구성요소에 전달하여 렌더링된 차트 유형을 수정할 수 있습니다.

<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
    <Visualization />
</Query>

이 경우 type는 Looker 구성요소가 기본적으로 제공하는 차트인 pie로 설정되었습니다. 하지만 기본적으로 제공되지 않는 차트를 사용하려면 어떻게 해야 할까요? 이 경우 Visualization의 chartTypeMap 속성을 사용하여 어댑터 시스템의 유형/구성요소 지도에서 차트 구성요소를 추가하거나 대체할 수 있습니다.

예를 들어 유형/구성요소 맵에 새 방사형 차트를 추가하려면 다음과 같이 chartTypeMap에 추가합니다.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'radar'}}>
                <Visualization chartTypeMap={{ radar: MyCustomRadar }} />
            </Query>
        </DataProvider>
    )
}

이 코드는 다음 작업을 실행합니다.

  • MyCustomRadar React 구성요소를 가져옵니다.
  • config.type 속성에 radar 키 할당
  • 유형 매핑 시스템이 radar의 type에 렌더링할 항목을 알 수 있도록 chartTypeMap 속성을 업데이트합니다.

Looker 시각화 놀이터에서 렌더링되는 방식은 다음과 같습니다.

시각화 놀이터에 레이더 지도가 표시됩니다.

마찬가지로 자체 버전을 렌더링하려는 경우 기존 차트를 대체할 수 있습니다. 다음 예시는 기본 Looker 구성요소 '차트'가 맞춤 선 차트 구성요소로 재정의된 경우

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomLine } from '../MyCustomLine'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization chartTypeMap={{ line: MyCustomLine }} />
            </Query>
        </DataProvider>
    )
}

이제 Query 구성요소가 시각화 유형이 line로 설정된 쿼리를 발견할 때마다 Looker 기본값 대신 맞춤 구현을 렌더링합니다.

다음 단계