Menggunakan library helper

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

Untuk visualisasi komunitas, ds-component memiliki dua fungsi.

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

Berlangganan peristiwa

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

dscc.subscribeToData mendaftarkan callback yang akan dipanggil untuk setiap peristiwa postMessage dari Data Studio. Callback akan meneruskan data objek.

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});

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

Kedua transformasi didokumentasikan dalam referensi library. 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), transformasi akan bergantung pada kasus penggunaan Anda, karena format data yang ditampilkan oleh Data Studio akan terlihat lebih seperti:


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

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});