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 コンテキストに読み込みます。
  • Visualization - Query によって返されたデータを受け取り、構成アダプタを使用して、適切にカスタマイズされたグラフをページにレンダリングします。

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

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

その他の種類のグラフも作成中です。

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

グラフの種類ごとに使用可能な構成オプションを確認するには、Looker Developer Portal で可視化プレイグラウンドをご覧ください。

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

可視化コンポーネントにより、アプリケーション内の 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）をご覧ください。

次のステップ