Looker の可視化コンポーネント

Looker の可視化コンポーネントは、オープンソースの @looker/visualizations パッケージで利用可能な React ベースのコンポーネント スイートです。

可視化コンポーネントは、Looker Explore からの Query.client_id 値またはクエリ ID または Looker ダッシュボードのダッシュボード ID を受け入れ、iframe なしでクライアント側の可視化をレンダリングします。

これらのコンポーネントは、そのまま使用できるだけでなく、カスタマイズすることも、純粋なデータ フォーマッタとして扱い、Looker Explore からクリーンアップされたデータを渡すことで、独自のビジュアリゼーションを構築することも可能です。

Looker 可視化コンポーネントは、TypeScript/JavaScript SDK を使用して Looker の API で認証された React 環境で使用するように設計されています。このステップは、Looker の拡張機能フレームワークでビルドすると自動的に処理されます。

Looker の可視化コンポーネントを使用した可視化の作成

Looker の可視化コンポーネント スイートは、データを操作するための大まかなコンポーネントとして次の 2 つを提供します。

  • Query - データの取得を処理し、React コンテキストにレスポンスを読み込みます。
  • Visualization - Query から返されるデータを受け入れ、設定アダプタを使用して適切にカスタマイズしたグラフをページにレンダリングします。

現在、データは次のグラフタイプでレンダリングできます。

  • 行
  • 地域
  • 散布
  • スパークライン
  • 単一の値
  • 棒グラフ
  • Column
  • Table
  • 円

今後、他の種類のグラフも開発中です。

各グラフタイプのプロパティ テーブルを表示するには、可視化とクエリのプロパティ テーブルのドキュメント ページをご覧ください。

利用可能なチャート タイプの各構成オプションを表示するには、Looker デベロッパー ポータルで可視化のプレイグラウンドを表示します。

可視化コンポーネントを使用する理由

可視化コンポーネントによって、アプリケーション内で Looker からビジュアリゼーションをレンダリングするプロセスが改善され、簡素化されます。これにより、デベロッパーの時間が節約され、デベロッパーは Looker からビジュアリゼーションをカスタマイズおよび拡張するためのオプションを増やすことができます。

  • 埋め込みの改善 - デベロッパーが iframe なしで Looker ビジュアリゼーションをアプリケーションに埋め込むことができる可視化コンポーネントです。これにより、パフォーマンス、モニタリング、カスタマイズ機能が向上します。
  • 簡単な統合 - 可視化コンポーネントを @looker/components の他のコンポーネントと組み合わせて、まったく新しいコンポジションとフロントエンド エクスペリエンスを作成できます。
  • カスタマイズ - iframe を使用するよりも、可視化コンポーネントを使用するほうが埋め込みのビジュアリゼーションを簡単にカスタマイズできます。また、可視化コンポーネントを使用すると、可視化レイヤをゼロから作成しなくても、高度にカスタマイズされたアプリケーションを迅速に作成できます。
  • 簡素化 - 可視化コンポーネントによって、Looker の可視化のポータビリティが向上し、Looker API の操作が簡素化されます。

可視化コンポーネントのインストール

まず、Looker 可視化コンポーネントの NPM パッケージを追加します。

  • NPM: npm install @looker/visualizations
  • YARN: yarn add @looker/visualizations

また、いくつかのピアの依存関係（Looker/コンポーネント、React、スタイル付きコンポーネント）も満たす必要があります。

  • NPM:npm install @looker/components react react-dom styled-components
  • YARN: yarn add @looker/components react react-dom styled-components

可視化コンポーネント パッケージのインストールと使用については、README ドキュメント（GitHub および NPM）をご覧ください。

次のステップ