Menggunakan library helper

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

Untuk visualisasi komunitas, ds-component memiliki dua fungsi.

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

Berlangganan acara

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

dscc.subscribeToData mendaftarkan callback yang akan dipanggil untuk setiap callback Peristiwa postMessage dari Looker Studio. Callback mendapatkan 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	Laporkan 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 membutuhkan format data yang berbeda pula. Dua format yang umum adalah satu array atau satu array objek. Library ds-component menyediakan dua yang dirancang untuk membantu Anda langsung ke format data ini.

Kedua transformasi tersebut didokumentasikan dalam library-reference. Ini mengubah peta dengan mudah ke format data yang umumnya diharapkan oleh JavaScript perpustakaan visualisasi. Dua transformasi yang didukung adalah: objectTransform, yang menampilkan array objek, dan tableTransform, yang menampilkan array dari 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 ditetapkan sedemikian rupa sehingga pengguna bisa memasukkan beberapa {i>field<i} (untuk misalnya, jika ada dua dimensi yang ditentukan untuk diagram sankey), maka akan bergantung pada kasus penggunaan Anda, karena format data yang ditampilkan oleh Looker Studio akan terlihat seperti:

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 memerlukan array array.

Contoh:

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

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