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

この例では、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 のデフォルトではなくカスタム実装がレンダリングされます。

次のステップ