表示されているのは 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 の拡張フレームワーク内で構築され、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 プロパティに割り当てる
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>
    )
}

これで、Query コンポーネントが、可視化タイプが line に設定されたクエリに遭遇すると、Looker のデフォルトではなくカスタム実装がレンダリングされます。

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

背景

要件

新しいグラフタイプの追加

次のステップ