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

이 예시에서는 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 값을 특정 구성요소와 연결하는 유형/구성요소 맵에 새 항목을 추가하거나 기존 항목을 대체할 수 있습니다.

요구사항

먼저 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 기본 구현 대신 커스텀 구현을 렌더링합니다.

다음 단계