Ringkasan API
dscc
(Komponen Komunitas Looker Studio) adalah library untuk membantu membangun
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, di {i>pixel<i} |
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()
mengirimkan pesan ke Looker Studio beserta data
untuk filter.
Parameter:
Nama | Jenis | Deskripsi |
---|---|---|
actionID | string
|
{i>String<i} yang sesuai dengan actionId di 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 panjang array concepts .
Setiap nilai dalam sub-array 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()
mengirimkan pesan ke Looker Studio untuk menghapus
sebelumnya yang ditetapkan
oleh visualisasi ini.
Parameter:
Nama | Jenis | Deskripsi |
---|---|---|
actionID | string
|
String yang sesuai dengan actionId di 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
|
Sebuah fungsi yang mengambil
data yang ditampilkan oleh
subscribeToData . |
opsi | object |
Menentukan format pengembalian data yang diinginkan |
Objek opsi terlihat seperti ini:
{
transform: dscc.tableTransform | dscc.objectTransform
}
Nilai yang ditampilkan:
Jenis | Deskripsi |
---|---|
function |
Menghentikan langganan callback dari pesan berikutnya 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 ini adalah {i>field<i} yang digunakan bersama oleh
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 diindeks oleh configId-nya |
interaksi | object(interactionsById)
|
Objek yang berisi interaksi objek |
tema | themeStyle
|
Objek themeStyle yang berisi gaya visual tema informasi 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
menurut "id" didefinisikan 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
panel {i>Property<i}.
Kolom | Jenis | Deskripsi |
---|---|---|
id | string |
ID yang dibuat Looker Studio untuk kolom |
nama | string |
Nama kolom yang dapat dibaca manusia |
deskripsi | string |
Deskripsi kolom |
jenis | enum(fieldType) |
semanticType kolom |
konsep | enum(conceptType) |
conceptType kolom |
styleById
{
configId: styleValue
}
Objek styleById
memberikan informasi gaya yang diindeks oleh "id" didefinisikan dalam
konfigurasi visualisasi.
Kolom | Jenis | Deskripsi |
---|---|---|
configId | styleValue
|
Objek yang berisi nilai gaya dan atribut nilai gaya default config-defined |
styleValue
{
value: string | object | bool | number,
defaultValue: string | object | bool | number
}
Objek styleValue
memberikan nilai gaya yang dipilih pengguna dan
yang ditentukan dalam konfigurasi. Jenis value
dan defaultValue
bergantung pada elemen gaya.
Kolom | Jenis | Deskripsi |
---|---|---|
nilai | string OR object OR bool OR
number
|
Nilai elemen gaya ditampilkan dari pilihan pengguna di panel properti |
defaultValue | string OR object OR bool OR
number
|
Nilai default gaya yang didefinisikan dalam konfigurasi visualisasi |
interactionsById
{
}
Objek interactionsById
memberikan data interaksi yang diindeks oleh
interactionId
konfigurasi visualisasi.
Indeks | Jenis | Deskripsi |
---|---|---|
configId | interaction
|
Sebuah 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 |
---|---|---|
nilai | string OR object OR
bool OR number
|
Nilai elemen gaya ditampilkan dari pilihan pengguna di panel properti |
supportedActions | Array<InteractionType>
|
Tindakan yang didukung oleh interaksi, seperti yang didefinisikan dalam konfigurasi |
interactionValue
Objek interactionValue
memberikan nilai yang dipilih pengguna untuk interaksi
. Jika kunci data
ada, objek InteractionData
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 |
---|---|---|
jenis | enum(InteractionType)
|
Dipilih oleh pengguna InteractionType |
data | object(InteractionData)
|
Data yang terkait dengan kondisi saat ini, {i>filter<i}. 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
|
String yang menjelaskan font aksen keluarga |
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 dari
format{color: string, opacity:
number} |
tablesById
{
"DEFAULT": object(tableObject),
"COMPARISON": object(tableObject) | undefined
}
tableObject
memberikan 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 default dan perbandingan
rentang tanggal. Jika tidak ada rentang tanggal, objek akan
kosong. DEFAULT
dan COMPARISON
hanya akan diisi jika tanggal masing-masing
rentang dikonfigurasi oleh pengguna. Data dalam rentang tanggal
berkaitan dengan
data default dan perbandingan seperti yang ditentukan 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. |
end | 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. Kolom ini
objek juga memiliki properti configId
yang sesuai dengan ID dari konfigurasi. |
baris | Array<Array> |
Array 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"
]
}
}
}