이 페이지는 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`	는 액션 ID 구성
상호작용	`enum(InteractionType)`	Looker에 알림 스튜디오 정보 상호작용
데이터	`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`

등록된 callback에 전달되는 객체입니다. dscc.subscribeToData 다음은 Google과 사용자 간에 공유되는 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 객체에는 색인이 생성된 field 객체의 배열이 포함됩니다. 'id' 에 정의된 시각화 구성 현재 구성에서 정의된 dataField마다 이 객체에 항목이 1개 있습니다.

필드	유형	설명
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`	스타일 값과 config 정의 기본 스타일 값

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`	Google 애널리틱스 4와 연결된 데이터가 포함된 상호작용

interactionField

{
  value: object(interactionValue),
  supportedActions: array(InteractionType)
}

interactionField 객체에는 다음에 정의된 supportedActions의 배열이 포함됩니다. 구성, 상호작용에 대해 사용자가 선택한 값이 포함됩니다.

필드	유형	설명
값	`string OR object OR bool OR number`	스타일 요소의 값입니다. 사용자 선택에서 반환됨 속성 패널에서
supportedActions	`Array<InteractionType>`	이 유형에서 지원하는 작업은 'API 약관'의 구성

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 객체는 기본 또는 비교 기간입니다.

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

`tableFormat` 참조

tableObject

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

필드	유형	설명
헤더	`Array`	fields 객체의 배열입니다. 이 필드 객체에 추가로 `configId` 속성이 있음 ID를 생성합니다.
행	`Array<Array>`	배열의 배열: 각 배열은 데이터 행입니다.

샘플 `tableFormat` 데이터

다음은 옵션과 함께 dscc.subscribeToData()를 사용하여 반환된 샘플 data입니다. 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"
      ]
    }
  }
}

객체 형식 참조

objectRow

{
  configId1: array(string | bool | number),
  configId2: array(string | bool | number)
}

필드	유형	설명
configId	배열	특정 구성 ID와 연결된 값의 배열

샘플 객체 형식 데이터

다음은 옵션과 함께 dscc.subscribeToData()를 사용하여 반환된 샘플 data입니다. 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"
      ]
    }
  }
}

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 데이터

객체 형식 참조

objectRow

샘플 객체 형식 데이터

`getWidth()`

`getWidth()` 사용

`getHeight()`

`getHeight()` 사용

`InteractionType`

`sendInteraction` 사용

`interactionData`

`clearInteraction()` 사용

`subscribeToData(callback, options)`

`subscribeToData()` 사용

`data`

`tableFormat` 참조

샘플 `tableFormat` 데이터