可視化コンポーネントとクエリ プロパティを使用して簡単な可視化をレンダリングする

Query ビジュアリゼーション コンポーネントの query プロパティを使用すると、Looker のビジュアリゼーション コンポーネントを使用して埋め込みビジュアリゼーションを最も簡単にレンダリングできます。（dashboard プロパティではなく）query プロパティを使用すると、次のようなメリットがあります。

  • Looker でクエリを作成するだけでよく、ダッシュボードを作成する必要はありません。
  • query が受け入れる値（Query.client_id またはクエリ ID）は不変です。基になるモデルが変更されない限り、Looker インスタンスに対する変更が埋め込みの可視化に影響することはありません。

Looker UI 内での変更に応答する埋め込み可能なビジュアリゼーション（したがって、アプリ デベロッパー以外の Looker ユーザーが更新できるもの）を作成する場合は、可視化コンポーネントとダッシュボード ID を使用してシンプルなビジュアリゼーションを表示するをご覧ください。

Looker の可視化コンポーネントと query プロパティを使用して、埋め込み可能な可視化をレンダリングするには、設定が要件を満たしていることを確認してから、次の手順を行います。

  1. Explore でクエリを作成し、Query.client_id 値をコピーします。
  2. クエリを React アプリケーションに埋め込む。
  3. Visualization コンポーネントを追加します。
  4. config プロパティで設定をカスタマイズする

要件

手順を始める前に、以下の要素が必要です。

  • Looker インスタンスにアクセスできる必要があります。
  • 拡張フレームワークでビルドする場合でも、独自のスタンドアロン React アプリケーションでビルドする場合でも、Looker の API で認証を行い、Looker SDK オブジェクトにアクセスできることが重要です。詳細については、Looker API 認証または 拡張フレームワークをご覧ください。
  • Looker 可視化コンポーネントの NPM パッケージと @looker/components-data NPM パッケージがインストールされていることを確認します。可視化コンポーネント パッケージのインストールと使用については、README ドキュメント（GitHub および NPM）をご覧ください。

ステップ 1: Explore でクエリを作成して Query.client_id 値をコピーする

Explore を使用して、Looker UI 内でクエリを作成します。サポートされているビジュアリゼーションを Explore に追加し、必要に応じてビジュアリゼーションの [Settings] メニューで設定を構成します。

ブラウザの URL バーにある qid URL プロパティに注目してください。このプロパティに割り当てられた英数字の値は Query.client_id です。

Query.client_id は、クエリと可視化設定を表す一意の文字列です。クエリや設定のいずれかを変更すると、Query.client_id が変わります。

Query.client_id をコピーして、次の手順で使用します。

ステップ 2: React アプリケーションにクエリを埋め込む

これで、Query.client_id を React アプリケーションに組み込むことができます。

以下は、架空の React アプリケーションのコードです。このサンプルは Looker 拡張機能フレームワークで構築されており、Looker SDK オブジェクトを拡張機能のコンテキスト プロバイダから pull しています。

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return null
}

まず、DataProvider コンポーネントと Query コンポーネントを利用します。DataProvider はコンテキストで SDK リファレンスを格納し、Query はネットワーク リクエストをディスパッチしてレスポンス レンダリングをフォーマットします。

また、次の 2 つを指定する必要があります。

  • SDK オブジェクト。SDK オブジェクトは拡張機能のコンテキストから pull されます。
  • Query.client_id。Query.client_id は、query プロパティに代入されます。
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    {/* pass the sdk object to DataProvider */}
    <DataProvider sdk={core40SDK}>
      {/* the value referenced by the `query` prop is
          unique to your looker instance. */}
      <Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
    </DataProvider>
  )
}

ステップ 3: Visualization コンポーネントを追加する

次に、Visualization コンポーネントを追加します。このコンポーネントは、Query によって返されたデータと構成設定を解釈して、想定されるグラフをレンダリングします。

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query="evomfl66xHx1jZk2Hzvv1R">
        <Visualization />
      </Query>
    </DataProvider>
  )
}

このステップでは、次の例のような可視化が出力されます。

ステップ 4: config プロパティを使用して設定をカスタマイズする

SDK から返される可視化設定をオーバーライドするには、Query コンポーネントの config プロパティを使用します。このプロパティを使用すると、ビジュアリゼーションのタイプから、各データ系列のレンダリング方法まで、サポートされている任意の機能を変更できます。

以下のサンプルコードでは、config プロパティによってグラフの種類が sparkline に変更され、データ系列に新しい色が割り当てられます。

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query
        query={'evomfl66xHx1jZk2Hzvv1R'}
        config={{
          type: 'sparkline',
          series: [{ color: '#F4B400' }],
        }}
      >
        <Visualization />
      </Query>
    </DataProvider>
  )
}

前のステップでは、このオレンジ色のスパークラインをレンダリングします。

config プロパティで使用できるサブプロパティの全一覧については、可視化とクエリのプロパティ テーブルのリファレンス ドキュメントをご覧いただくか、可視化コンポーネントのプレイグラウンドで実際に動作するプロパティを確認してください。

次のステップ