Эта страница переведена с помощью Cloud Translation API.

Справочник по библиотеке компонентов сообщества Looker Studio (dscc)

Обзор API

dscc (Looker Studio Community Component) — это библиотека, помогающая создавать компоненты сообщества для 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"]
    ]
}

Использование dscc.sendInteraction с указанными выше interactionData эквивалентно следующему 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`	Функция обратного вызова отменяет `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)
}

Поле	Тип	Описание
поля	`object(fieldsByConfigId)`	Объект, содержащий поля , индексированные по их configId.
стиль	`object(styleById)`	Объект, содержащий объекты стилей , индексированные по их configId.
взаимодействия	`object(interactionsById)`	Объект, содержащий объекты взаимодействия.
тема	`themeStyle`	Объект themeStyle , содержащий информацию о стиле оформления отчета.
таблицы	`object(tablesById)`	Объект, содержащий объекты таблиц (tableObjects) .
диапазоны дат	`object(dateRangesById)`	Объект, содержащий диапазоны дат.

fieldsByConfigId

{
   configId: array(field)
}

Объект fieldsByConfigId содержит массивы объектов полей , индексированных по "id", определенному в конфигурации визуализации . В этом объекте содержится одна запись для каждого dataField определенного в конфигурации.

Поле	Тип	Описание
configId	`Array<field>`	Массив полей, связанных с dataField

поле

{
  id: fieldId,
  name: string,
  description: string,
  type: fieldType,
  concept: enum(conceptType)
}

Объект field предоставляет информацию о поле, которое пользователь выбирает на панели свойств.

Поле	Тип	Описание
идентификатор	`string`	Идентификатор для поля был сгенерирован Looker Studio.
имя	`string`	Удобочитаемое название поля
описание	`string`	Описание поля
тип	`enum(fieldType)`	Семантический тип поля
концепция	`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 предоставляет данные о взаимодействиях, индексированные в конфигурации визуализации interactionId .

Индекс	Тип	Описание
configId	`interaction`	Объект, содержащий данные, связанные с взаимодействием.

interactionField

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

Объект interactionField содержит массив поддерживаемых действий, определенных в конфигурации, а также значения, выбранные пользователем для взаимодействия.

Поле	Тип	Описание
ценить	`string OR object OR bool OR number`	Значение элемента стиля, возвращаемое на основе выбора пользователя в панели свойств.
поддерживаемые действия	`Array<InteractionType>`	Действия, поддерживаемые этим взаимодействием, определены в конфигурации.

interactionValue

Объект interactionValue предоставляет выбранные пользователем значения для типа взаимодействия. Если ключ data существует, объект InteractionData отражает текущее состояние фильтра. Если ключ data не существует, визуализация в данный момент не настроена как фильтр.

{
  type: enum(InteractionType)
  data: object(interactionData) | None
}

Поле	Тип	Описание
тип	`enum(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 передает информацию о теме отчета в визуализацию.

Поле	Тип	Описание
заливкаЦвет	`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`	Строка, описывающая семейство шрифтов с диакритическими знаками.
увеличить цвет	`object`	Объект формата `{color: string, opacity: number}`
уменьшение цвета	`object`	Объект формата `{color: string, opacity: number}`
gridColor	`object`	Объект формата `{color: string, opacity: number}`
серияЦвет	`Array<object>`	Массив объектов формата `{color: string, opacity: number}`

tablesById

{
  "DEFAULT": object(tableObject),
  "COMPARISON": object(tableObject) | undefined
}

tableObject предоставляет заголовок и информацию о данных для каждой строки. Значение "DEFAULT" всегда возвращает данные, а значение "COMPARISON" заполняется только в том случае, если пользователь настроил данные с учетом строк сравнения.

Единственное различие между dscc.tableFormat и dscc.objectFormat заключается в формате объекта tableObject.

Поле	Тип	Описание
"ПО УМОЛЧАНИЮ"	`object(tableObject) OR Array<objectRow>`	`tableObject` связанный с данными, которые пользователь добавляет в визуализацию.
"СРАВНЕНИЕ"	`object(tableObject) OR Array<objectRow>`	Объект `tableObject` связанный с данными для сравнения дат , если таковой имеется.

dateRangesById

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

Объект dateRangesById предоставляет информацию о диапазонах дат по умолчанию и для сравнения. Если диапазоны дат отсутствуют, объект будет пустым. DEFAULT и COMPARISON будут заполнены только в том случае, если соответствующие диапазоны дат заданы пользователем. Данные в диапазонах дат связаны с данными по умолчанию и для сравнения, определенными в tablesById .

Поле	Тип	Описание
"ПО УМОЛЧАНИЮ"	`object(dateRange)`	Диапазон `dateRange` связанный с диапазоном дат по умолчанию, если таковой имеется.
"СРАВНЕНИЕ"	`object(dateRange)`	Диапазон `dateRange` связанный с диапазоном дат сравнения, если таковой имеется.

диапазон дат

{
  start: string,
  end: string
}

Объект dateRange предоставляет информацию о начальной и конечной датах диапазона дат по умолчанию или диапазона сравнения.

Поле	Тип	Описание
начинать	`string`	Начальная дата диапазона дат в формате ГГГГММДД.
конец	`string`	Конечная дата диапазона дат в формате ГГГГММДД.

справочник `tableFormat`

tableObject

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

Поле	Тип	Описание
заголовки	`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)
}

Поле	Тип	Описание
configId	множество	массив значений, связанных с конкретным идентификатором конфигурации

Пример данных в формате объекта

Это пример 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"
      ]
    }
  }
}

Обзор API

getWidth()

Использование функции getWidth()

getHeight()

Использование функции getHeight()

sendInteraction()

InteractionType

Использование sendInteraction

interactionData

clearInteraction()

Использование clearInteraction()

subscribeToData(callback, options)

Использование функции subscribeToData()

data

fieldsByConfigId

поле

styleById

styleValue

взаимодействия по идентификатору

interactionField

interactionValue

тема

tablesById

dateRangesById

диапазон дат

справочник tableFormat

tableObject

Пример tableFormat данных

Справочник по objectFormat

objectRow

Пример данных в формате объекта

`getWidth()`

Использование функции `getWidth()`

`getHeight()`

Использование функции `getHeight()`

`InteractionType`

Использование `sendInteraction`

`interactionData`

Использование `clearInteraction()`

`subscribeToData(callback, options)`

Использование функции `subscribeToData()`

`data`

справочник `tableFormat`

Пример `tableFormat` данных