ビジュアリゼーション コンポーネントとダッシュボード プロパティを使用して、シンプルなビジュアリゼーションをレンダリングする

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

  • ビジュアリゼーションは、ダッシュボードの編集権限がある Looker ユーザーが更新できます。
  • 埋め込まれたビジュアリゼーションを更新しても、デプロイした拡張機能や React アプリケーションに変更を加える必要はありません。

Looker UI 内での変更に応答しない埋め込み可能な可視化を作成する場合は、可視化コンポーネントと query プロパティを使用したシンプルな可視化のレンダリングの手順を実施します。

Looker の可視化コンポーネントと数値ダッシュボード ID を使用して埋め込み可能な可視化をレンダリングするには、設定が要件を満たしていることを確認してから、次の手順を行います。

  1. クエリを作成してダッシュボードに追加します。
  2. ダッシュボード ID を使用して、クエリを React アプリケーションに埋め込みます。
  3. 必要に応じて、ビジュアル表示を変更します。

要件

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

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

ステップ 1: クエリを作成してダッシュボードに追加する

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

このクエリを使用して新しいダッシュボードを作成します。または、作成済みの空のダッシュボードにクエリを追加することもできます。

Query コンポーネントは、ダッシュボード レイアウト内のタイルがどこにあるかに関係なく、関連付けられたダッシュボードに時系列で最初に追加されたタイルからビジュアリゼーションを読み込みます。このため、クエリタイルには単一タイルのダッシュボードのみを使用することをおすすめします。

Query コンポーネントでは、タイルのビジュアリゼーションのみが表示されます。タイルのタイトル、ダッシュボードのタイトル、その他のダッシュボード要素は表示されません。タイルに適用されているダッシュボード フィルタは、埋め込まれた可視化には影響しません。

ダッシュボードを作成したら、ダッシュボードを表示します。

ダッシュボードの URL の dashboards/ より後の数字がダッシュボード ID です。この ID をコピーして、次のステップで使用します。

Query コンポーネントの dashboard プロパティは、数値 ID のみを受け付けます。LookML ダッシュボードの文字列 ID は入力できません。

ステップ 2: ダッシュボード ID を使用して React アプリケーションにクエリを埋め込む

これで、Query コンポーネントの dashboard プロパティにダッシュボード ID を渡すことで、React アプリケーションにクエリを埋め込むことができます。

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)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

拡張機能または React アプリケーション内では、可視化が次のように表示されます。

ステップ 3: 必要に応じてビジュアル表示を変更する

これで、ダッシュボードの編集権限がある Looker ユーザーは、ダッシュボードに埋め込まれたビジュアリゼーションに変更を加えることができ、コードを変更しなくても、React アプリケーション内でその変更が反映されます。

編集アクセス権を得るには、ダッシュボードが配置されているフォルダに対する [Manage Access, Edit] アクセスレベル、クエリのベースとなっているモデルのモデル アクセス、ダッシュボードを編集するための適切な Looker 権限が必要です。

埋め込みビジュアリゼーションを変更する方法は 2 つあります。

  • ダッシュボードのクエリタイルを編集する。
  • ダッシュボードに新しいクエリタイルを追加し、元のタイルを削除します。

クエリタイルを編集するには、ユーザー定義ダッシュボードの編集のドキュメント ページでタイルの編集の手順に沿って、変更を保存し、ダッシュボードで編集モードを終了します。

新しいタイルを追加して元のタイルを削除するには、クエリタイルの追加に従って新しいタイルを追加します。次に、タイルを削除する手順に沿って、不要なビジュアル表示を削除します。変更を適用するには、ダッシュボードにタイルが 1 つしかないことを確認してから、変更を保存してダッシュボードの編集モードを終了してください。

ダッシュボードに変更を加えて保存すると、コードを変更しなくても、ビジュアリゼーションの変更が拡張機能または React アプリケーションに反映されます。

次のステップ