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

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 パッケージがインストールされていることを確認します。可視化コンポーネント パッケージのインストールと使用方法については、GitHub と NPM にある README ドキュメントをご覧ください。

ステップ 1: Explore でクエリを作成して 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 オブジェクトが拡張コンテキスト プロバイダから 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 プロパティを使用して設定をカスタマイズする

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 プロパティで使用可能なサブプロパティの完全なリストについては、可視化とクエリのプロパティ テーブルのリファレンス ドキュメントにアクセスするか、可視化コンポーネントで実行中のプロパティを参照 Playgroundを参照します。

次のステップ

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