ビジュアリゼーション コンポーネントを使用してカスタムのビジュアリゼーションをレンダリングする

この例では、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>
    )
}

新しいグラフの種類を追加する

シンプルな可視化の例と同様に、config のオーバーライドを 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 のデフォルトの代わりにカスタム実装がレンダリングされるようになりました。

次のステップ