可視化コンポーネントとクエリ プロパティを使用して単純なビジュアリゼーションをレンダリングする

Query 可視化コンポーネントの query プロパティを使用することが、Looker 可視化コンポーネントを使用して埋め込み可能な可視化をレンダリングする最も簡単な方法です。（dashboard プロパティではなく）query プロパティを使用すると、次のようなメリットがあります。

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

Looker UI 内で変更に応答し、アプリ デベロッパー以外の Looker ユーザーが更新できる、埋め込み可能な可視化を作成する場合は、可視化コンポーネントとダッシュボード ID を使用して単純なビジュアリゼーションをレンダリングするドキュメント ページの手順に従います。

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

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

要件

始める前に必要なものがいくつかあります。

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

ステップ 1: データ探索でクエリを作成し、Query.client_id 値をコピーする

Explore を使用して、Looker UI 内のクエリを作成します。サポートされている可視化機能を Explore に追加し、必要に応じて可視化データの [Settings] メニューで構成します。

ブラウザのアドレスバーで qid URL プロパティを確認します。プロパティに割り当てられる英数字の値は Query.client_id です。

たとえば、URL が https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse の場合、Query.client_id は evomfl66xHx1jZk2Hzvv1R です。

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

Query.client_id をメモします。これは次の手順で使用します。

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

これで、Query.client_id を取得して React アプリケーションに埋め込むことができます。

次のコードは、架空の React アプリケーションのものです。この例は Looker の拡張フレームワークで作成され、Looker SDK オブジェクトは拡張コンテキスト プロバイダから取得されています。

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 オブジェクトは拡張機能コンテキストから取得されます。
• 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 プロパティを使用して設定をカスタマイズする

Query コンポーネントの config プロパティを使用して、SDK から返された可視化設定をオーバーライドします。このプロパティを使用すると、可視化のタイプから各データシリーズのレンダリング方法の詳細まで、サポートされている機能を変更できます。

次のサンプルコードでは、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 プロパティで使用可能なサブプロパティの完全なリストについては、可視化とクエリのプロパティ テーブルのリファレンス ドキュメントをご覧ください。

次のステップ

• 可視化コンポーネントと dashboard プロパティを使用して単純なビジュアリゼーションをレンダリングする
• 可視化コンポーネントを使用してカスタムのビジュアリゼーションをレンダリングする
• 可視化コンポーネントを使用してカスタムのビジュアリゼーションを構築する
• ビジュアリゼーションとクエリのプロパティ テーブル