ヘルパー ライブラリの使用

データポータルでは、postMessage インターフェースを使用して、コミュニティ ビジュアリゼーションを含む iframe にデータとスタイル情報が提供されます。このガイドでは、ヘルパー ライブラリの使用について詳しく説明します。

コミュニティ ビジュアリゼーションでは、ds-component に 2 つの機能があります。

  1. iframe のディメンションを取得する
  2. データポータルとの通信を管理する

イベントへの登録

選択したフィールドおよびスタイルの変更、コンポーネントのサイズ変更など、ユーザーがビジュアリゼーションを操作すると、ビジュアリゼーションにイベントが送信されます。

dscc.subscribeToData により、データポータルから postMessage イベントごとに呼び出されるコールバックが登録されます。コールバックには data オブジェクトが渡されます。

function drawViz(data){
      // obtain the height and width to scale your visualization appropriately
      var height = dscc.getHeight();
      var width = dscc.getWidth();
      // write your visualization code here
      console.log("I'm the callback and I was passed this data: " + JSON.stringify(data, null, '  '));
    }

    // call drawViz every time Data Studio sends a new postMessage
    dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
    

返されるデータ

両方のデータ変換により、5 つのキーを持つオブジェクトが返されます。

キー 目的
style ユーザーが選択したデフォルトのスタイル情報
fields ユーザーが選択したフィールド情報
interactions ユーザーが選択したインタラクション
theme レポートのテーマ情報
tables データの行

データの形式:

{
      fields: object(fieldsByConfigId),
      style: object(styleById),
      interactions: object(interactionsById),
      theme: object(themeStyle),
      tables: object(tablesById)
    }
    

ビジュアリゼーションごとに必要なデータ形式は異なります。2 つの一般的な形式は、配列の配列またはオブジェクトの配列です。ds-component ライブラリでは、これらのデータ形式に直接アクセスできるように設計された 2 つの変換が提供されています。

2 つの変換は library-reference で説明されています。これらの変換は、JavaScript ビジュアリゼーション ライブラリで一般的に想定されるデータ形式に簡単にマッピングされます。サポートされている 2 つの変換は、オブジェクトの配列を返す objectTransform、および配列の配列を返す tableTransform です。

dscc.objectTransform

一部のビジュアリゼーションでは、オブジェクトの配列としてデータが必要とされます。

例:

var data = [
      {'colA': 'hello', 'colB', 'world'},
      {'colA': 'hello', 'colB', 'world'}
    ];
    

次のコードは、dscc.objectTransform 形式からオブジェクトの配列にアクセスする方法を示しています。


    function drawViz(data){
      // what the object transform could look like
      // [
      //  {'configId1': ['hello'], 'configId2': [1] },
      //  {'configId1': ['world'], 'configId2': [2] }
      // ]
      var dsccObjectTransformData = data.tables.DEFAULT;

      // creating an array of objects
      var arrayOfObjects = dscc.ObjectTransformData.rows.map(function(d){
        return {
          'configId1': d.configId1[0],
          'configId2': d.configId2[0]
        };
      };

    }

    

ユーザーが複数のフィールドを入力できるようにデータ セクションが定義されている場合(たとえば、サンキー ダイアグラムに 2 つのディメンションが定義されている場合)、変換はユースケースによって異なり、データポータルによって返されるデータ形式は次のようになります。


    var dsccObjectTransformData = [
    {'configId1': ['hello', 'there'], 'configId2': [1] },
    {'configId1': ['world', 'globe'], 'configId2': [2] }
    ]

    

dscc.tableTransform

一部のビジュアリゼーション ライブラリでは、配列の配列が必要となります。

例:

var data = [
      ['hello', 1],
      ['world', 2]
    ];
    

次のコードは、dscc.tableTransform 形式から行の中の特定の行にアクセスする方法を示しています。


    function drawViz(data);
      // what the below object looks like
      // {
      //    headers: [{
      //      "id": "qt_ky8sltutsb",
      //      "name": "dimension",
      //      "type": "TEXT",
      //      "concept": "DIMENSION",
      //      "configId": "configId1"
      //    }, {
      //      "id": "qt_m9dtntutsb",
      //      "name": "metric",
      //      "type": "NUMBER",
      //      "concept": "METRIC",
      //      "configId": "configId2"
      //    }],
      //  rows: [
      //    ['hello', 1],
      //    ['world', 2]
      //  ];
      // }
      var dsccTableTransformObject = data.tables.DEFAULT;

      // accessing the row of rows
      var rowOfRows = dsccTableTransformObject.rows;

      // accessing the header row
      var headers = dsccTableTransformObject.headers;
    }

    dscc.subscribeToData(drawViz, {transform: tableTransform});