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의 메시지를 구독합니다.

매개변수:

이름	유형	설명
callback(data)	`function`	`subscribeToData`에서 반환된 데이터를 사용하는 함수
옵션	`object`	원하는 데이터 반환 형식을 정의합니다.

옵션 객체는 다음과 같습니다.

{
  transform: dscc.tableTransform | dscc.objectTransform
}

반환 값:

유형	설명
`function`	Looker Studio의 추가 메시지 수신을 거부합니다.`callback`

`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'로 색인이 지정된 field 객체의 배열이 포함됩니다. 이 객체에는 구성에 정의된 각 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`
'COMPARISON'	`object(tableObject) OR Array<objectRow>`	해당하는 경우 날짜 비교 데이터와 연결된 `tableObject`

dateRangesById

{
  "DEFAULT": object(dateRange),
  "COMPARISON": object(dateRange)
}

dateRangesById 객체는 기본 기간 및 비교 기간에 관한 정보를 제공합니다. 날짜 범위가 없으면 객체가 비어 있습니다. DEFAULT 및 COMPARISON은 사용자가 해당 기간을 구성한 경우에만 채워집니다. 기간의 데이터는 tablesById에 정의된 기본 데이터 및 비교 데이터와 관련이 있습니다.

필드	유형	설명
'DEFAULT'	`object(dateRange)`	기본 기간과 연결된 `dateRange`입니다(해당하는 경우).
'COMPARISON'	`object(dateRange)`	비교 기간과 연결된 `dateRange`입니다(해당하는 경우).

dateRange

{
  start: string,
  end: string
}

dateRange 객체는 기본 또는 비교 기간의 시작일과 종료일에 관한 정보를 제공합니다.

필드	유형	설명
start	`string`	YYYYMMDD 형식의 기간 시작일입니다.
end	`string`	YYYYMMDD 형식의 기간 종료일입니다.

`tableFormat` 참조

tableObject

{
  headers: array(object),
  rows: array(array)
}

필드	유형	설명
헤더	`Array`	fields 객체의 배열입니다. 이러한 필드 객체에는 구성의 ID에 해당하는 `configId` 속성도 있습니다.
행	`Array<Array>`	배열의 배열: 각 배열은 데이터 행입니다.

샘플 `tableFormat` 데이터

dscc.tableFormat 옵션과 함께 dscc.subscribeToData()을 사용하여 반환된 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.objectFormat 옵션과 함께 dscc.subscribeToData()을 사용하여 반환된 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 데이터

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

`getWidth()`

`getWidth()` 사용

`getHeight()`

`getHeight()` 사용

`InteractionType`

`sendInteraction` 사용

`interactionData`

`clearInteraction()` 사용

`subscribeToData(callback, options)`

`subscribeToData()` 사용

`data`

`tableFormat` 참조

샘플 `tableFormat` 데이터