API 개요
dscc
(Looker Studio 커뮤니티 구성요소)는 Looker Studio용 커뮤니티 구성요소를 빌드하는 데 도움이 되는 라이브러리입니다. 소스 코드는 GitHub에서 찾을 수 있습니다.
dscc
는 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에 전송합니다.
매개변수:
이름 | 유형 | 설명 |
---|---|---|
actionID | string
|
구성의 actionId에 해당하는 문자열입니다. |
상호작용 | enum(InteractionType)
|
Looker Studio에 상호작용과 관련된 |
데이터 | object(InteractionData)
|
상호작용에 필요한 데이터 제공 |
InteractionType
현재 유일하게 유효한 InteractionType
는 FILTER
입니다.
이름 | 유형 | 설명 |
---|---|---|
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))
}
필드 | 유형 | 설명 |
---|---|---|
개념 | Array |
fieldIds 의 배열 |
값 | Array<Array>
|
데이터 값의 중첩 배열입니다. 각 하위 배열은 concepts 배열의 길이여야 합니다.
하위 배열의 각 값은 측정기준 값에 해당합니다. |
샘플 interactionData
:
var interactionData = {
"concepts": ["dim1Id", "dim2Id"],
"values": [
["dim1Val1", "dim2Val1"],
["dim1Val2", "dim2Val2"]
]
}
위의 interactionData
와 함께 dscc.sendInteraction
를 사용하는 것은 다음 SQL 문과 같습니다.
SELECT data WHERE
(dim1 == dim1Val1 AND dim2 == dim2Val1)
OR
(dim1 == dim1Val2 AND dim2 == dim2Val2);
clearInteraction()
clearInteraction()
함수는 이전에 이 시각화에서 설정한 필터를 지우라는 메시지를 Looker Studio에 전송합니다.
매개변수:
이름 | 유형 | 설명 |
---|---|---|
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의 메시지를 구독합니다.
매개변수:
이름 | 유형 | 설명 |
---|---|---|
콜백(데이터) | function
|
subscribeToData 에서 반환된 데이터를 가져오는 함수 |
옵션 | object |
원하는 데이터 반환 형식 정의 |
옵션 객체는 다음과 같습니다.
{
transform: dscc.tableTransform | dscc.objectTransform
}
반환 값:
유형 | 설명 |
---|---|
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
dscc.subscribeToData
에 등록된 callback
에 전달되는 객체입니다. 다음은 dscc.objectFormat
와 dscc.tableFormat
간에 공유되는 필드입니다.
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById)
}
필드 | 유형 | 설명 |
---|---|---|
필드 | object(fieldsByConfigId)
|
configId로 색인이 생성된 필드가 포함된 객체 |
스타일 | object(styleById)
|
configId로 색인이 생성된 스타일 객체가 포함된 객체 |
상호작용 | object(interactionsById)
|
상호작용 객체가 포함된 객체 |
테마 | themeStyle
|
보고서의 테마 스타일 지정 정보가 포함된 themeStyle 객체 |
테이블 | object(tablesById)
|
tableObjects를 포함하는 객체 |
dateRanges | object(dateRangesById)
|
dateRanges를 포함하는 객체 |
fieldsByConfigId
{
configId: array(field)
}
fieldsByConfigId
객체에는 시각화 구성에 정의된 'id'로 색인이 생성된 필드 객체의 배열이 포함됩니다. 이 객체에는 구성에서 정의된 각 dataField
의 항목이 하나씩 있습니다.
필드 | 유형 | 설명 |
---|---|---|
configId | Array<field> |
dataField와 연결된 필드의 배열 |
필드
{
id: fieldId,
name: string,
description: string,
type: fieldType,
concept: enum(conceptType)
}
field
객체는 사용자가 속성 패널에서 선택하는 필드에 대한 정보를 제공합니다.
필드 | 유형 | 설명 |
---|---|---|
id | string |
Looker Studio에서 생성한 필드의 ID |
이름 | string |
사람이 읽을 수 있는 필드 이름입니다. |
설명 | string |
필드에 대한 설명 |
유형 | enum(fieldType) |
필드의 semanticType |
개념 | enum(conceptType) |
필드의 conceptType |
styleById
{
configId: styleValue
}
styleById
객체는 시각화 구성에 정의된 'id'로 색인이 생성된 스타일 정보를 제공합니다.
필드 | 유형 | 설명 |
---|---|---|
configId | styleValue
|
스타일 값 및 구성에 정의된 기본 스타일 값이 포함된 객체 |
styleValue
{
value: string | object | bool | number,
defaultValue: string | object | bool | number
}
styleValue
객체는 사용자가 선택한 스타일 값과 구성에 정의된 기본값을 모두 제공합니다. value
및 defaultValue
의 유형은 스타일 요소에 따라 다릅니다.
필드 | 유형 | 설명 |
---|---|---|
값 | string OR object OR bool OR
number
|
속성 패널의 사용자 선택에서 반환된 스타일 요소의 값 |
defaultValue | string OR object OR bool OR
number
|
시각화 구성에 정의된 스타일 요소의 기본값 |
interactionsById
{
}
interactionsById
객체는 interactionId
시각화 구성으로 색인이 생성된 상호작용 데이터를 제공합니다.
색인 | 유형 | 설명 |
---|---|---|
configId | interaction
|
상호작용과 연결된 데이터가 포함된 객체입니다. |
interactionField
{
value: object(interactionValue),
supportedActions: array(InteractionType)
}
interactionField
객체에는 구성에 정의된 supportedActions 배열과 상호작용에 대해 사용자가 선택한 값이 포함됩니다.
필드 | 유형 | 설명 |
---|---|---|
값 | string OR object OR
bool OR number
|
속성 패널의 사용자 선택에서 반환된 스타일 요소의 값 |
supportedActions | Array<InteractionType>
|
구성에 정의된 대로 이 상호작용에서 지원하는 작업 |
interactionValue
interactionValue
객체는 상호작용 유형에 대해 사용자가 선택한 값을 제공합니다. data
키가 있으면 InteractionData
객체에 필터의 현재 상태가 반영됩니다. data
키가 없으면 시각화가 현재 필터로 구성되지 않은 것입니다.
{
type: enum(InteractionType)
data: object(interactionData) | None
}
필드 | 유형 | 설명 |
---|---|---|
유형 | enum(InteractionType)
|
사용자가 선택한 InteractionType |
데이터 | object(InteractionData)
|
필터의 현재 상태와 관련된 데이터입니다. 현재 필터가 지워진 경우 이 키는 존재하지 않습니다. |
테마
{
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
객체는 보고서 테마 정보를 시각화에 전달합니다.
필드 | 유형 | 설명 |
---|---|---|
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
는 각 행의 제목과 데이터 정보를 제공합니다. 'DEFAULT'는 항상 데이터를 반환하고 'COMPARISON'은 사용자가 비교 행으로 데이터를 구성하는 경우에만 채워집니다.
tableObject의 형식은 dscc.tableFormat
과 dscc.objectFormat
의 유일한 차이점입니다.
필드 | 유형 | 설명 |
---|---|---|
"DEFAULT" | object(tableObject) OR
Array<objectRow>
|
사용자가 시각화에 추가하는 데이터와 연결된 tableObject |
'비교' | object(tableObject) OR
Array<objectRow>
|
해당하는 경우 날짜 비교 데이터와 연결된 tableObject 입니다. |
dateRangesById
{
"DEFAULT": object(dateRange),
"COMPARISON": object(dateRange)
}
dateRangesById
객체는 기본 및 비교 기간에 대한 정보를 제공합니다. 기간이 없으면 객체가 비어 있게 됩니다. DEFAULT
및 COMPARISON
는 각 기간을 사용자가 구성한 경우에만 채워집니다. 기간의 데이터는 tablesById에 정의된 기본 및 비교 데이터와 관련이 있습니다.
필드 | 유형 | 설명 |
---|---|---|
"DEFAULT" | object(dateRange)
|
해당하는 경우 기본 기간과 연결된 dateRange 입니다. |
'비교' | object(dateRange)
|
해당하는 경우 비교 기간과 연결된 dateRange 입니다. |
dateRange
{
start: string,
end: string
}
dateRange
객체는 기본 또는 비교 기간의 시작일과 종료일에 대한 정보를 제공합니다.
필드 | 유형 | 설명 |
---|---|---|
start | string |
YYYYMMDD 형식의 날짜 범위입니다. |
end | string |
YYYYMMDD 형식의 기간 종료일 |
tableFormat
참조
tableObject
{
headers: array(object),
rows: array(array)
}
필드 | 유형 | 설명 |
---|---|---|
headers | Array
|
필드 객체의 배열. 이러한 필드 객체에는 구성의 ID에 해당하는 configId 속성이 추가로 있습니다. |
행 | Array<Array> |
배열의 배열: 각 배열은 데이터의 행입니다. |
샘플 tableFormat
데이터
다음은 dscc.subscribeToData()
를 dscc.tableFormat
옵션과 함께 사용하여 반환된 샘플 data
입니다.
{
"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)
}
필드 | 유형 | 설명 |
---|---|---|
configId | 배열 | 특정 구성 ID와 연결된 값의 배열 |
샘플 objectFormat 데이터
다음은 dscc.subscribeToData()
를 dscc.objectFormat
옵션과 함께 사용하여 반환된 샘플 data
입니다.
{
"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"
]
}
}
}