이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Looker Studio 커뮤니티 구성요소 (dscc) 라이브러리 참조

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"
      ]
    }
  }
}

Looker Studio 커뮤니티 구성요소 (dscc) 라이브러리 참조

API 개요

getWidth()

getWidth() 사용

getHeight()

getHeight() 사용

sendInteraction()

InteractionType

sendInteraction 사용

interactionData

clearInteraction()

clearInteraction() 사용

subscribeToData(callback, options)

subscribeToData() 사용

data

fieldsByConfigId

필드

styleById

styleValue

interactionsById

interactionField

interactionValue

테마

tablesById

dateRangesById

dateRange

tableFormat 참조

tableObject

샘플 tableFormat 데이터

objectFormat 참조

objectRow

샘플 objectFormat 데이터

`getWidth()`

`getWidth()` 사용

`getHeight()`

`getHeight()` 사용

`InteractionType`

`sendInteraction` 사용

`interactionData`

`clearInteraction()` 사용

`subscribeToData(callback, options)`

`subscribeToData()` 사용

`data`

`tableFormat` 참조

샘플 `tableFormat` 데이터