Ringkasan API
dscc
(Komponen Komunitas Looker Studio) adalah library untuk membantu membuat
komponen komunitas untuk Looker Studio. Kode sumber dapat ditemukan di GitHub.
dscc
menampilkan tiga fungsi: getWidth()
, getHeight()
, dan
subscribeToData()
.
getWidth()
Nama | Parameter | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|---|
getWidth() | Tidak ada | number
|
Menampilkan lebar iframe, dalam piksel |
Menggunakan getWidth()
// to get the width of the iframe
var width = dscc.getWidth();
getHeight()
Nama | Parameter | Jenis Nilai yang Ditampilkan | Deskripsi |
---|---|---|---|
getHeight() | Tidak ada | int
|
Menampilkan tinggi iframe, dalam piksel |
Menggunakan getHeight()
// to get the height of the iframe
var height = dscc.getHeight();
sendInteraction()
Fungsi sendInteraction()
mengirim pesan ke Looker Studio dengan data untuk filter.
Parameter:
Nama | Jenis | Deskripsi |
---|---|---|
actionID | string
|
String yang terkait dengan actionId dalam konfigurasi |
interaksi | enum(InteractionType)
|
Memberi tahu Looker Studio tentang interaksi |
data | object(InteractionData)
|
Menyediakan data yang diperlukan untuk interaksi |
InteractionType
Saat ini, satu-satunya InteractionType
yang valid adalah FILTER
.
Nama | Jenis | Deskripsi |
---|---|---|
dscc.InteractionType.FILTER | Enum | Menjelaskan interaksi FILTER |
Menggunakan sendInteraction
// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";
// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;
var fieldID = "qt_m9dtntutsb";
var dataValue = "Asia";
// sendInteraction expects data that tells you the concepts and the values of
// those concepts to use in constructing a filter.
var interactionData = {
"concepts": [fieldId],
"values": [[dataValue]]
}
dscc.sendInteraction(actionId, FILTER, interactionData);
interactionData
var interactionData = {
"concepts": array(fieldId),
"values": array(array(dataValue))
}
Kolom | Jenis | Deskripsi |
---|---|---|
konsep | Array |
Array fieldIds |
nilai | Array<Array>
|
Array nilai data bertingkat. Setiap subarray harus sesuai dengan panjang array concepts .
Setiap nilai dalam subarray sesuai dengan nilai dimensi. |
Contoh interactionData
:
var interactionData = {
"concepts": ["dim1Id", "dim2Id"],
"values": [
["dim1Val1", "dim2Val1"],
["dim1Val2", "dim2Val2"]
]
}
Menggunakan dscc.sendInteraction
dengan interactionData
di atas setara dengan
pernyataan SQL berikut:
SELECT data WHERE
(dim1 == dim1Val1 AND dim2 == dim2Val1)
OR
(dim1 == dim1Val2 AND dim2 == dim2Val2);
clearInteraction()
Fungsi clearInteraction()
mengirim pesan ke Looker Studio untuk menghapus
filter yang sebelumnya ditetapkan oleh visualisasi ini.
Parameter:
Nama | Jenis | Deskripsi |
---|---|---|
actionID | string
|
String yang sesuai dengan actionId dalam konfigurasi |
interaksi | enum(InteractionType)
|
Memberi tahu Looker Studio tentang interaksi |
Menggunakan clearInteraction()
// the actionID can either be hardcoded or parsed from the returned data
var actionId = "interactionConfigId";
// dscc provides enums for the interaction types
var FILTER = dscc.InteractionType.FILTER;
dscc.clearInteraction(actionId, FILTER);
subscribeToData(callback, options)
Fungsi subscribeToData()
berlangganan pesan dari Looker Studio.
Parameter:
Nama | Jenis | Deskripsi |
---|---|---|
callback(data) | function
|
Fungsi yang mengambil data yang ditampilkan oleh subscribeToData . |
opsi | object |
Menentukan format pengembalian data yang diinginkan |
Objek opsi terlihat seperti:
{
transform: dscc.tableTransform | dscc.objectTransform
}
Nilai yang ditampilkan:
Jenis | Deskripsi |
---|---|
function |
Menghentikan langganan callback dari pesan lebih lanjut dari Looker Studio |
Menggunakan subscribeToData()
// define and use a callback
var unsubscribe = dscc.subscribeToData(function(data){
// console.log the returned data
console.log(data);
}, {transform: dscc.tableTransform});
// to unsubscribe
unsubscribe();
data
Ini adalah objek yang diteruskan ke callback
yang terdaftar dengan
dscc.subscribeToData
. Berikut adalah kolom yang digunakan bersama antara
dscc.objectFormat
dan dscc.tableFormat
.
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById)
}
Kolom | Jenis | Deskripsi |
---|---|---|
fields | object(fieldsByConfigId)
|
Objek yang berisi kolom yang diindeks oleh configId-nya |
gaya | object(styleById)
|
Objek yang berisi objek gaya yang diindeks oleh configId-nya |
interaksi | object(interactionsById)
|
Objek yang berisi objek interaksi |
tema | themeStyle
|
Objek themeStyle yang berisi informasi gaya visual tema untuk laporan |
tabel | object(tablesById)
|
Objek yang berisi tableObjects |
dateRanges | object(dateRangesById)
|
Objek yang berisi dateRanges |
fieldsByConfigId
{
configId: array(field)
}
Objek fieldsByConfigId
berisi array objek kolom yang diindeks
oleh "id" yang ditentukan dalam
konfigurasi visualisasi. Ada
satu entri dalam objek ini untuk setiap dataField
yang ditentukan dalam konfigurasi.
Kolom | Jenis | Deskripsi |
---|---|---|
configId | Array<field> |
Array kolom yang terkait dengan dataField |
medan
{
id: fieldId,
name: string,
description: string,
type: fieldType,
concept: enum(conceptType)
}
Objek field
memberikan informasi tentang kolom yang dipilih pengguna di panel properti.
Kolom | Jenis | Deskripsi |
---|---|---|
id | string |
ID yang dibuat Looker Studio untuk kolom |
name | string |
Nama kolom yang dapat dibaca manusia |
deskripsi | string |
Deskripsi kolom |
tipe | enum(fieldType) |
semanticType untuk kolom |
konsep | enum(conceptType) |
conceptType kolom |
styleById
{
configId: styleValue
}
Objek styleById
memberikan informasi gaya yang diindeks oleh "id" yang ditentukan dalam
konfigurasi visualisasi.
Kolom | Jenis | Deskripsi |
---|---|---|
configId | styleValue
|
Objek yang berisi nilai gaya dan nilai gaya default yang ditentukan dengan konfigurasi |
styleValue
{
value: string | object | bool | number,
defaultValue: string | object | bool | number
}
Objek styleValue
memberikan nilai gaya yang dipilih pengguna dan nilai default yang ditentukan dalam konfigurasi. Jenis value
dan defaultValue
bergantung pada elemen gaya.
Kolom | Jenis | Deskripsi |
---|---|---|
value | string OR object OR bool OR
number
|
Nilai elemen gaya yang ditampilkan dari pemilihan pengguna di panel properti |
defaultValue | string OR object OR bool OR
number
|
Nilai default elemen gaya yang ditentukan dalam konfigurasi visualisasi |
interactionsById
{
}
Objek interactionsById
menyediakan data interaksi yang diindeks oleh
konfigurasi visualisasi
interactionId
.
Indeks | Jenis | Deskripsi |
---|---|---|
configId | interaction
|
Objek yang berisi data yang terkait dengan interaksi |
interactionField
{
value: object(interactionValue),
supportedActions: array(InteractionType)
}
Objek interactionField
berisi array supportedActions yang ditentukan dalam
konfigurasi, serta nilai yang dipilih pengguna untuk interaksi.
Kolom | Jenis | Deskripsi |
---|---|---|
value | string OR object OR
bool OR number
|
Nilai elemen gaya yang ditampilkan dari pemilihan pengguna di panel properti |
supportedActions | Array<InteractionType>
|
Tindakan yang didukung oleh interaksi ini, seperti yang ditentukan dalam konfigurasi |
interactionValue
Objek interactionValue
memberikan nilai yang dipilih pengguna untuk jenis
interaksi. Jika kunci data
ada, objek InteractionData
akan mencerminkan
status filter saat ini. Jika kunci data
tidak ada, visualisasi
saat ini tidak dikonfigurasi sebagai filter.
{
type: enum(InteractionType)
data: object(interactionData) | None
}
Kolom | Jenis | Deskripsi |
---|---|---|
tipe | enum(InteractionType)
|
InteractionType yang dipilih pengguna |
data | object(InteractionData)
|
Data yang terkait dengan status filter saat ini. Kunci ini tidak ada jika filter saat ini dihapus. |
tema
{
fillColor: {
color: string,
opacity: number
},
fontColor: {
color: string,
opacity: number
},
accentFillColor: {
color: string,
opacity: number
},
accentFontColor: {
color: string,
opacity: number
},
fontFamily: string,
accentFontFamily: string,
increaseColor: {
color: string,
opacity: number
},
decreaseColor: {
color: string,
opacity: number
},
gridColor: {
color: string,
opacity: number
},
seriesColor: [
{
color: string,
opacity: number
}
]
}
Objek themeStyle
meneruskan informasi tema laporan ke visualisasi.
Kolom | Jenis | Deskripsi |
---|---|---|
fillColor | object
|
Objek dengan format {color:
string, opacity: number} |
fontColor | object
|
Objek dengan format {color:
string, opacity: number} |
accentFillColor | object
|
Objek dengan format {color:
string, opacity: number} |
accentFontColor | object
|
Objek dengan format {color:
string, opacity: number} |
fontFamily | string |
String yang menjelaskan jenis font |
accentFontFamily | string
|
Sebuah {i>string<i} yang menjelaskan jenis font aksen |
increaseColor | object
|
Objek dengan format {color:
string, opacity: number} |
decreaseColor | object
|
Objek dengan format {color:
string, opacity: number} |
gridColor | object
|
Objek dengan format {color:
string, opacity: number} |
seriesColor | Array<object>
|
Array objek dengan
format{color: string, opacity:
number} |
tablesById
{
"DEFAULT": object(tableObject),
"COMPARISON": object(tableObject) | undefined
}
tableObject
menyediakan informasi judul dan data untuk setiap baris. "DEFAULT"
akan selalu menampilkan data, dan "COMPARISON" hanya akan diisi jika pengguna
mengonfigurasi data dengan baris perbandingan.
Format tableObject adalah satu-satunya perbedaan antara dscc.tableFormat
dan dscc.objectFormat
.
Kolom | Jenis | Deskripsi |
---|---|---|
"DEFAULT" | object(tableObject) OR
Array<objectRow>
|
tableObject yang terkait dengan
data yang ditambahkan pengguna ke
visualisasi |
"PERBANDINGAN" | object(tableObject) OR
Array<objectRow>
|
tableObject yang terkait dengan
data perbandingan tanggal, jika
berlaku |
dateRangesById
{
"DEFAULT": object(dateRange),
"COMPARISON": object(dateRange)
}
Objek dateRangesById
memberikan informasi tentang rentang tanggal default dan perbandingan. Jika tidak ada rentang tanggal, objek akan kosong. DEFAULT
dan COMPARISON
hanya akan diisi jika rentang tanggal masing-masing dikonfigurasi oleh pengguna. Data dalam rentang tanggal terkait dengan data default dan perbandingan seperti yang ditetapkan dalam tablesById.
Kolom | Jenis | Deskripsi |
---|---|---|
"DEFAULT" | object(dateRange)
|
dateRange yang terkait dengan rentang tanggal default, jika berlaku. |
"PERBANDINGAN" | object(dateRange)
|
dateRange yang terkait dengan rentang tanggal perbandingan, jika berlaku. |
dateRange
{
start: string,
end: string
}
Objek dateRange
memberikan informasi tentang tanggal mulai dan akhir dari rentang tanggal default atau perbandingan.
Kolom | Jenis | Deskripsi |
---|---|---|
mulai | string |
Tanggal mulai rentang tanggal dalam format YYYYMMDD. |
selesai | string |
Tanggal akhir rentang tanggal dalam format YYYYMMDD. |
Referensi tableFormat
tableObject
{
headers: array(object),
rows: array(array)
}
Kolom | Jenis | Deskripsi |
---|---|---|
headers | Array
|
Array objek fields. Objek kolom ini juga memiliki properti configId yang sesuai dengan ID dari konfigurasi. |
baris | Array<Array> |
Array dari array: setiap array adalah baris data |
Contoh data tableFormat
Ini adalah contoh data
yang ditampilkan menggunakan dscc.subscribeToData()
dengan opsi
dscc.tableFormat
.
{
"tables": {
"DEFAULT": {
"headers": [{
"id": "qt_ky8sltutsb",
"name": "dimension",
"type": "TEXT",
"concept": "DIMENSION",
"configId": "configId1"
}, {
"id": "qt_b5bvmtutsb",
"name": "second dim",
"type": "TEXT",
"concept": "DIMENSION"
"configId": "configId1"
}, {
"id": "qt_m9dtntutsb",
"name": "metric",
"type": "NUMBER",
"concept": "METRIC",
"configId": "configId2"
}],
"rows": [
["Week 4", "lm", 55]
]
},
"COMPARISON": {
"headers": [{
"id": "qt_ky8sltutsb",
"name": "dimension",
"type": "TEXT",
"concept": "DIMENSION",
"configId": "configId1"
}, {
"id": "qt_b5bvmtutsb",
"name": "second dim",
"type": "TEXT",
"concept": "DIMENSION"
"configId": "configId1"
}, {
"id": "qt_m9dtntutsb",
"name": "metric",
"type": "NUMBER",
"concept": "METRIC",
"configId": "configId2"
}],
"rows": [
["Week 5", "no", 123]
]
}
},
"fields": {
"configId1": [
{
"id": "qt_ky8sltutsb",
"name": "week",
"type": "TEXT",
"concept": "DIMENSION"
},
{
"id": "qt_b5bvmtutsb",
"name": "textId",
"type": "TEXT",
"concept": "DIMENSION"
}
],
"configId2": [
{
"id": "qt_m9dtntutsb",
"name": "orders",
"type": "NUMBER",
"concept": "METRIC"
}
]
},
"style": {
"nodeColor": {
"value": {
"color": "#000000"
}
}
},
"theme": {},
"dateRanges": {
"DEFAULT": {
"start": "20210501",
"end": "20210531"
},
"COMPARISON": {
"start": "20200501",
"end": "20200531"
}
},
"interactions": {
"onClick": {
"value": {
"type": "FILTER",
"data": {
"concepts": [
"qt_h6oibrb6wb",
"qt_i6oibrb6wb"
],
"values": [
[
"Afternoon",
"Sunday"
],
[
"Afternoon",
"Thursday"
],
[
"Morning",
"Tuesday"
]
]
}
},
"supportedActions": [
"FILTER"
]
}
}
}
Referensi objectFormat
objectRow
{
configId1: array(string | bool | number),
configId2: array(string | bool | number)
}
Kolom | Jenis | Deskripsi |
---|---|---|
configId | array | array nilai yang terkait dengan ID konfigurasi tertentu |
Contoh data objectFormat
Ini adalah contoh data
yang ditampilkan menggunakan dscc.subscribeToData()
dengan opsi
dscc.objectFormat
.
{
"tables": {
"COMPARISON": [
{
"configId1": ["Week 5", "cd"],
"configId2": [123]
}
],
"DEFAULT": [
{
"configId1": ["Week 1", "ab"],
"configId2": [24]
}
]
},
"fields": {
"configId1": [
{
"id": "qt_h6oibrb6wb",
"name": "time of day",
"type": "TEXT",
"concept": "DIMENSION"
},
{
"id": "qt_i6oibrb6wb",
"name": "day",
"type": "TEXT",
"concept": "DIMENSION"
}
],
"configId2": [
{
"id": "qt_m9dtntutsb",
"name": "metric",
"type": "NUMBER",
"concept": "METRIC"
}
]
},
"style": {
"nodeColor": {
"value": {
"color": "#000000"
}
}
},
"theme": {},
"dateRanges": {
"DEFAULT": {
"start": "20210501",
"end": "20210531"
},
"COMPARISON": {
"start": "20200501",
"end": "20200531"
}
},
"interactions": {
"onClick": {
"value": {
"type": "FILTER",
"data": {
"concepts": [
"qt_h6oibrb6wb",
"qt_i6oibrb6wb"
],
"values": [
[
"Afternoon",
"Sunday"
],
[
"Afternoon",
"Thursday"
],
[
"Morning",
"Tuesday"
]
]
}
},
"supportedActions": [
"FILTER"
]
}
}
}