ภาพรวมของ API
dscc
(คอมโพเนนต์ของชุมชน Looker Studio) เป็นไลบรารีที่จะช่วยสร้างคอมโพเนนต์ของชุมชนสำหรับ Looker Studio ดูซอร์สโค้ดได้ใน GitHub
dscc
แสดงฟังก์ชัน 3 อย่าง ได้แก่ getWidth()
, getHeight()
และ subscribeToData()
getWidth()
ชื่อ | พารามิเตอร์ | ประเภทการแสดงผล | คำอธิบาย |
---|---|---|---|
getWidth() | ไม่มี | number
|
แสดงความกว้างของ iframe เป็นพิกเซล |
ใช้ไป getWidth()
// to get the width of the iframe
var width = dscc.getWidth();
getHeight()
ชื่อ | พารามิเตอร์ | ประเภทการแสดงผล | คำอธิบาย |
---|---|---|---|
getHeight() | ไม่มี | int
|
แสดงความสูงของ iframe เป็นพิกเซล |
ใช้ไป getHeight()
// to get the height of the iframe
var height = dscc.getHeight();
sendInteraction()
ฟังก์ชัน sendInteraction()
จะส่งข้อความไปยัง Looker Studio พร้อมข้อมูลสำหรับตัวกรอง
พารามิเตอร์ ได้แก่
ชื่อ | Type | คำอธิบาย |
---|---|---|
actionID | string
|
สตริงที่ตรงกับ actionId ในการกำหนดค่า |
การโต้ตอบ | enum(InteractionType)
|
บอก Looker Studio เกี่ยวกับ การโต้ตอบ |
ข้อมูล | object(InteractionData)
|
ให้ข้อมูลที่จำเป็น สำหรับการโต้ตอบ |
InteractionType
ขณะนี้ InteractionType
เพียงรายการเดียวที่ใช้ได้คือ FILTER
ชื่อ | Type | คำอธิบาย |
---|---|---|
dscc.InteractionType.FILTER | ค่าแจกแจง | อธิบายการโต้ตอบ FILTER |
ใช้ไป 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))
}
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
แนวคิด | Array |
อาร์เรย์ของ fieldIds |
ค่า | Array<Array>
|
อาร์เรย์ของค่าข้อมูลแบบซ้อน อาร์เรย์ย่อยแต่ละรายการควรเป็นความยาวของอาร์เรย์ concepts
แต่ละค่าในอาร์เรย์ย่อยจะสอดคล้องกับค่ามิติข้อมูล |
ตัวอย่าง interactionData
:
var interactionData = {
"concepts": ["dim1Id", "dim2Id"],
"values": [
["dim1Val1", "dim2Val1"],
["dim1Val2", "dim2Val2"]
]
}
การใช้ dscc.sendInteraction
กับ interactionData
ข้างต้นจะเทียบเท่ากับคำสั่ง SQL ต่อไปนี้
SELECT data WHERE
(dim1 == dim1Val1 AND dim2 == dim2Val1)
OR
(dim1 == dim1Val2 AND dim2 == dim2Val2);
clearInteraction()
ฟังก์ชัน clearInteraction()
จะส่งข้อความไปยัง Looker Studio เพื่อล้างตัวกรองที่การแสดงภาพนี้กำหนดไว้ก่อนหน้านี้
พารามิเตอร์ ได้แก่
ชื่อ | Type | คำอธิบาย |
---|---|---|
actionID | string
|
สตริงที่สอดคล้องกับ actionId ในการกำหนดค่า |
การโต้ตอบ | enum(InteractionType)
|
บอก Looker Studio เกี่ยวกับการโต้ตอบ |
ใช้ไป 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)
ฟังก์ชัน subscribeToData()
จะติดตามข้อความจาก Looker Studio
พารามิเตอร์ ได้แก่
ชื่อ | Type | คำอธิบาย |
---|---|---|
โค้ดเรียกกลับ(ข้อมูล) | function
|
ฟังก์ชันที่รับข้อมูลที่ subscribeToData แสดงผล |
ตัวเลือก | object |
กำหนดรูปแบบการแสดงผลข้อมูลที่ต้องการ |
ออบเจ็กต์ตัวเลือกจะมีลักษณะดังนี้
{
transform: dscc.tableTransform | dscc.objectTransform
}
ผลลัพธ์:
Type | คำอธิบาย |
---|---|
function |
ยกเลิกการสมัครรับ callback ไม่ให้รับข้อความเพิ่มเติมจาก Looker Studio |
ใช้ไป 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
นี่คือออบเจ็กต์ที่ส่งไปยัง callback
ที่ลงทะเบียนกับ dscc.subscribeToData
ช่องต่อไปนี้เป็นช่องที่แชร์ระหว่าง dscc.objectFormat
และ dscc.tableFormat
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById)
}
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
Fields | object(fieldsByConfigId)
|
ออบเจ็กต์ที่มีช่องที่จัดทำดัชนีโดย configId |
รูปแบบ | object(styleById)
|
ออบเจ็กต์ที่มีออบเจ็กต์รูปแบบที่จัดทำดัชนีโดย configId |
การโต้ตอบ | object(interactionsById)
|
ออบเจ็กต์ที่มีออบเจ็กต์การโต้ตอบ |
ธีม [theme] | themeStyle
|
ออบเจ็กต์ themeStyle ที่มีข้อมูลการจัดรูปแบบธีมสำหรับรายงาน |
ตาราง | object(tablesById)
|
ออบเจ็กต์ที่มี tableObjects |
dateRanges | object(dateRangesById)
|
ออบเจ็กต์ที่มี dateRanges |
fieldsByConfigId
{
configId: array(field)
}
ออบเจ็กต์ fieldsByConfigId
มีอาร์เรย์ของออบเจ็กต์ field ที่จัดทำดัชนีตาม "id" ที่กำหนดไว้ในการกำหนดค่าการแสดงภาพ ออบเจ็กต์นี้มี 1 รายการในออบเจ็กต์นี้สำหรับ dataField
แต่ละรายการที่กำหนดไว้ในการกำหนดค่า
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
configId | Array<field> |
อาร์เรย์ของช่องที่เชื่อมโยงกับ dataField |
พื้นที่
{
id: fieldId,
name: string,
description: string,
type: fieldType,
concept: enum(conceptType)
}
ออบเจ็กต์ field
ให้ข้อมูลเกี่ยวกับช่องที่ผู้ใช้เลือกในแผงพร็อพเพอร์ตี้
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
id | string |
Looker Studio สร้างรหัสสําหรับช่องนี้ |
ชื่อ | string |
ชื่อช่องที่มนุษย์อ่านได้ |
คำอธิบาย | string |
คำอธิบายของช่อง |
ประเภท | enum(fieldType) |
semanticType ของช่อง |
แนวคิด | enum(conceptType) |
conceptType ของช่อง |
styleById
{
configId: styleValue
}
ออบเจ็กต์ styleById
มีข้อมูลรูปแบบที่จัดทำดัชนีโดย "id" ที่กำหนดไว้ในการกำหนดค่าการแสดงภาพ
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
configId | styleValue
|
ออบเจ็กต์ที่มีค่าสไตล์และสไตล์เริ่มต้นที่กำหนดค่า |
styleValue
{
value: string | object | bool | number,
defaultValue: string | object | bool | number
}
ออบเจ็กต์ styleValue
ให้ทั้งค่าสไตล์ที่ผู้ใช้เลือกและค่าเริ่มต้นที่กําหนดไว้ในการกําหนดค่า ประเภทของ value
และ defaultValue
ขึ้นอยู่กับองค์ประกอบของรูปแบบ
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
value | string OR object OR bool OR
number
|
ค่าขององค์ประกอบรูปแบบ ที่แสดงผลจากการเลือกของผู้ใช้ ในแผงคุณสมบัติ |
defaultValue | string OR object OR bool OR
number
|
ค่าเริ่มต้นขององค์ประกอบรูปแบบ ที่กำหนดในการกำหนดค่าภาพ |
interactionsById
{
}
ออบเจ็กต์ interactionsById
ให้ข้อมูลการโต้ตอบที่จัดทำดัชนีโดยการกำหนดค่าภาพ interactionId
ดัชนี | Type | คำอธิบาย |
---|---|---|
configId | interaction
|
ออบเจ็กต์ที่มีข้อมูลที่เชื่อมโยงกับการโต้ตอบ |
interactionField
{
value: object(interactionValue),
supportedActions: array(InteractionType)
}
ออบเจ็กต์ interactionField
มีอาร์เรย์ของ supportedActions ที่ระบุไว้ในการกำหนดค่า รวมถึงค่าที่ผู้ใช้เลือกสำหรับการโต้ตอบด้วย
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
value | string OR object OR
bool OR number
|
ค่าขององค์ประกอบรูปแบบ ที่แสดงผลจากการเลือกของผู้ใช้ ในแผงคุณสมบัติ |
supportedActions | Array<InteractionType>
|
การทำงานที่การโต้ตอบนี้รองรับ ตามที่ระบุไว้ในการกำหนดค่า |
interactionValue
ออบเจ็กต์ interactionValue
มีค่าที่ผู้ใช้เลือกสำหรับประเภทการโต้ตอบ หากมีคีย์ data
อยู่ ออบเจ็กต์ InteractionData
จะแสดงสถานะปัจจุบันของตัวกรอง หากไม่มีคีย์ data
แสดงว่าไม่ได้กำหนดค่าการแสดงภาพเป็นตัวกรองในขณะนี้
{
type: enum(InteractionType)
data: object(interactionData) | None
}
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
ประเภท | enum(InteractionType)
|
InteractionType ที่ผู้ใช้เลือก |
ข้อมูล | object(InteractionData)
|
ข้อมูลที่เชื่อมโยงกับสถานะปัจจุบันของตัวกรอง คีย์นี้ไม่มีอยู่ หากล้างตัวกรองอยู่ในขณะนี้ |
ธีม [theme]
{
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
}
]
}
ออบเจ็กต์ themeStyle
ส่งผ่านข้อมูลธีมรายงานไปยังการแสดงภาพ
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
fillColor | object
|
ออบเจ็กต์ของรูปแบบ {color:
string, opacity: number} |
fontColor | object
|
ออบเจ็กต์ของรูปแบบ {color:
string, opacity: number} |
accentFillColor | object
|
ออบเจ็กต์ของรูปแบบ {color:
string, opacity: number} |
accentFontColor | object
|
ออบเจ็กต์ของรูปแบบ {color:
string, opacity: number} |
fontFamily | string |
สตริงที่อธิบายชุดแบบอักษร |
accentFontFamily | string
|
สตริงที่อธิบายชุดแบบอักษร เฉพาะจุด |
increaseColor | object
|
ออบเจ็กต์ของรูปแบบ {color:
string, opacity: number} |
decreaseColor | object
|
ออบเจ็กต์ของรูปแบบ {color:
string, opacity: number} |
gridColor | object
|
ออบเจ็กต์ของรูปแบบ {color:
string, opacity: number} |
seriesColor | Array<object>
|
อาร์เรย์ของออบเจ็กต์
รูปแบบ{color: string, opacity:
number} |
tablesById
{
"DEFAULT": object(tableObject),
"COMPARISON": object(tableObject) | undefined
}
tableObject
จะแสดงข้อมูลส่วนหัวและข้อมูลสำหรับแต่ละแถว "ค่าเริ่มต้น" จะแสดงผลข้อมูลเสมอ และ "เปรียบเทียบ" จะป้อนข้อมูลเฉพาะในกรณีที่ผู้ใช้กำหนดค่าข้อมูลด้วยแถวการเปรียบเทียบ
รูปแบบของ TableObject คือความแตกต่างเพียงอย่างเดียวระหว่าง dscc.tableFormat
กับ dscc.objectFormat
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
"DEFAULT" | object(tableObject) OR
Array<objectRow>
|
tableObject ที่เชื่อมโยงกับข้อมูลที่ผู้ใช้เพิ่มลงในการแสดงภาพ |
"การเปรียบเทียบ" | object(tableObject) OR
Array<objectRow>
|
tableObject ที่เชื่อมโยงกับข้อมูลการเปรียบเทียบวันที่ หากมี |
dateRangesById
{
"DEFAULT": object(dateRange),
"COMPARISON": object(dateRange)
}
ออบเจ็กต์ dateRangesById
ให้ข้อมูลเกี่ยวกับช่วงวันที่เริ่มต้นและการเปรียบเทียบ หากไม่มีช่วงวันที่ ออบเจ็กต์จะว่างเปล่า ระบบจะป้อนข้อมูล DEFAULT
และ COMPARISON
ก็ต่อเมื่อผู้ใช้กำหนดค่าช่วงวันที่ที่เกี่ยวข้องไว้เท่านั้น ข้อมูลในช่วงวันที่จะเกี่ยวข้องกับข้อมูลเริ่มต้นและข้อมูลการเปรียบเทียบตามที่ระบุไว้ใน tablesById
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
"DEFAULT" | object(dateRange)
|
dateRange ที่เชื่อมโยงกับช่วงวันที่เริ่มต้น หากมี |
"การเปรียบเทียบ" | object(dateRange)
|
dateRange ที่เชื่อมโยงกับช่วงวันที่เปรียบเทียบ (หากมี) |
dateRange
{
start: string,
end: string
}
ออบเจ็กต์ dateRange
ให้ข้อมูลเกี่ยวกับวันที่เริ่มต้นและวันที่สิ้นสุดของช่วงวันที่เริ่มต้นหรือการเปรียบเทียบ
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
เริ่มต้น | string |
วันที่เริ่มต้นของช่วงวันที่ในรูปแบบ ปปปปดดวว |
สิ้นสุด | string |
วันที่สิ้นสุดของช่วงวันที่ในรูปแบบ ปปปปดดวว |
การอ้างอิง tableFormat
รายการ
tableObject
{
headers: array(object),
rows: array(array)
}
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
headers | Array
|
อาร์เรย์ของออบเจ็กต์ฟิลด์ นอกจากนี้ ออบเจ็กต์ในช่องเหล่านี้ยังมีพร็อพเพอร์ตี้ configId ที่สอดคล้องกับรหัสจากการกำหนดค่าด้วย |
แถว | Array<Array> |
อาร์เรย์ของอาร์เรย์: แต่ละอาร์เรย์คือแถวข้อมูล |
ข้อมูลตัวอย่าง tableFormat
ตัวอย่างนี้คือตัวอย่าง data
ที่แสดงผลโดยใช้ dscc.subscribeToData()
ที่มีตัวเลือก 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"
]
}
}
}
การอ้างอิง objectFormat
objectRow
{
configId1: array(string | bool | number),
configId2: array(string | bool | number)
}
ฟิลด์ | Type | คำอธิบาย |
---|---|---|
configId | อาร์เรย์ | อาร์เรย์ของค่าที่เชื่อมโยงกับรหัสการกำหนดค่าหนึ่งๆ |
ตัวอย่างข้อมูล objectFormat
ตัวอย่างนี้คือตัวอย่าง data
ที่แสดงผลโดยใช้ dscc.subscribeToData()
ที่มีตัวเลือก 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"
]
}
}
}