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

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

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

これらのコンポーネントは、すぐに使用できる、カスタマイズされる、または純粋なデータ フォーマッタとして扱われ、Looker Explore からクリーニングされたデータを渡すことで、独自のカスタム ビジュアリゼーションを構築できます。

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

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

Looker の可視化コンポーネント スイートは、データを操作する 2 つの高レベル コンポーネントを備えています。

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

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

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

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

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

各グラフタイプで使用可能な構成オプションを確認するには、Looker UI コンポーネントのリファレンス ドキュメントをご覧ください。

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

可視化コンポーネントにより、アプリケーション内で Looker から可視化をレンダリングするプロセスが改善され、簡素化されます。また、デベロッパーの時間が解放され、デベロッパーは Looker による可視化をカスタマイズし、拡張する選択肢が増えます。

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

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

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

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

また、いくつかのピア依存関係（Looker/コンポーネント、React、Styled コンポーネント）を満たす必要があります。

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

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

次のステップ