시각화 구성요소를 사용하여 커스텀 시각화 렌더링

이 예시에서는 Looker Marketplace에서 사용할 수 있는 커스텀 시각화가 아니라 개발 중인 앱에 해당하는 커스텀 시각화를 렌더링합니다.

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

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

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

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

배경

Looker의 Explore 인터페이스에서 쿼리를 렌더링하고 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은 pie(Looker 구성요소가 기본적으로 제공하는 차트)로 설정되었습니다. 하지만 기본적으로 제공되지 않는 차트를 사용하려면 어떻게 해야 할까요? 이런 경우 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 구성요소를 가져옵니다.
  • radar 키를 config.type 속성에 할당합니다.
  • 유형 매핑 시스템이 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 기본 구현 대신 커스텀 구현을 렌더링합니다.

다음 단계