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.
- Mendapatkan dimensi iframe
- 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] }
]
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});