Menggunakan library helper

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

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 mengirimkan peristiwa ke visualisasi Anda.

dscc.subscribeToData mendaftarkan callback yang akan dipanggil untuk setiap peristiwa postMessage dari Looker Studio. Callback mendapatkan 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 dikembalikan

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	Informasi tema laporan
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 dari array atau array objek. Library ds-component menyediakan dua transformasi, yang dirancang untuk membawa Anda langsung ke format data ini.

Kedua transformasi ini didokumentasikan dalam library-reference. Transformasi ini mudah dipetakan 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 sedemikian rupa sehingga pengguna dapat memasukkan beberapa kolom (misalnya, jika ada dua dimensi yang ditentukan untuk diagram sankey), transformasi tersebut akan bergantung pada kasus penggunaan Anda, karena format data yang ditampilkan oleh Looker Studio akan terlihat seperti ini:

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

Catatan: Transformasi data yang diperlukan akan bergantung pada konfigurasi visualisasi Anda.

dscc.tableTransform

Beberapa library visualisasi mengharapkan array array.

Contoh:

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

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