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 からアプリケーション内に可視化をレンダリングするプロセスが改善され、簡素化されます。これにより、デベロッパーの時間を節約し、Looker から可視化をカスタマイズして拡張するためのオプションを増やすことができます。

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

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

使用を開始するには、Looker 可視化コンポーネントの NPM パッケージを追加します。

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

また、Looker/コンポーネント、React、Styled Components などのピア依存関係も満たす必要があります。

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

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

次のステップ