表示されているのは Looker のドキュメントです。Looker Studio のドキュメントについては、https://support.google.com/looker-studio をご覧ください。

可視化コンポーネントを使用してカスタムの可視化をレンダリングする

この例では、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 の拡張機能フレームワーク内に構築されており、ExtensionContext から SDK が作成されています。

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 プロパティに割り当てる
chartTypeMap プロパティを更新して、型マッピングシステムが radar の type のレンダリング対象を認識できるようにする

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>
    )
}

これで、可視化タイプが line に設定されているクエリが Query コンポーネントで発生するたびに、Looker のデフォルトに代わってカスタム実装がレンダリングされるようになりました。

可視化コンポーネントを使用してカスタムの可視化をレンダリングする

背景

要件

新しいグラフタイプを追加する

次のステップ