Menggunakan library helper

Looker Studio menggunakan antarmuka postMessage untuk memberikan informasi data dan gaya ke iframe yang berisi visualisasi komunitas. Panduan ini memberikan detail selengkapnya tentang penggunaan library pembantu.

Untuk visualisasi komunitas, ds-component memiliki dua fungsi.

  1. Mendapatkan dimensi iframe
  2. Mengelola komunikasi dengan Looker Studio

Berlangganan peristiwa

Saat pengguna berinteraksi dengan visualisasi Anda, seperti mengubah kolom yang dipilih, gaya, atau mengubah ukuran komponen, Looker Studio akan mengirim peristiwa ke visualisasi Anda.

dscc.subscribeToData mendaftarkan callback yang akan dipanggil untuk setiap peristiwa postMessage dari Looker Studio. Callback meneruskan objek 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 Looker Studio sends a new postMessage
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});

Data yang ditampilkan

Kedua transformasi data menampilkan objek dengan lima kunci.

Kunci Tujuan
style Informasi gaya default dan yang dipilih pengguna
fields Informasi kolom yang dipilih pengguna
interactions Interaksi yang dipilih pengguna
theme Melaporkan informasi tema
tables Baris data
dateRanges Rentang tanggal default dan perbandingan

Format data:

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

Visualisasi yang berbeda memerlukan format data yang berbeda. Dua format umum adalah array array atau array objek. Library ds-component menyediakan dua transformasi, yang dirancang untuk langsung membawa Anda ke format data ini.

Kedua transformasi didokumentasikan dalam library-reference. Transformasi ini dipetakan dengan mudah ke format data yang biasanya diharapkan oleh library visualisasi JavaScript. Dua transformasi yang didukung adalah: objectTransform, yang menampilkan array objek, dan tableTransform, yang menampilkan array array.

dscc.objectTransform

Beberapa visualisasi mengharapkan data sebagai array objek.

Contoh:

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

Kode berikut menunjukkan cara mengakses array objek dari format 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]
    };
  };

}

Jika bagian data ditentukan sehingga pengguna dapat memasukkan beberapa kolom (misalnya, jika ada dua dimensi yang ditentukan untuk diagram sankey), maka transformasi akan bergantung pada kasus penggunaan Anda, karena format data yang ditampilkan oleh Looker Studio akan terlihat lebih seperti:


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

dscc.tableTransform

Beberapa pustaka visualisasi mengharapkan array array.

Contoh:

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

Kode berikut menunjukkan cara mengakses baris dari baris dalam format 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});