Descripción general de la API
dscc
(el componente de la comunidad de Looker Studio) es una biblioteca que ayuda a compilar componentes de la comunidad para Looker Studio. Puedes encontrar el código fuente en GitHub.
dscc
expone tres funciones: getWidth()
, getHeight()
y subscribeToData()
.
getWidth()
Nombre | Parámetros | Tipo de datos que se muestra | Descripción |
---|---|---|---|
getWidth() | Ninguna | number
|
Muestra el ancho del iframe, en píxeles |
Usa getWidth()
// to get the width of the iframe
var width = dscc.getWidth();
getHeight()
Nombre | Parámetros | Tipo de datos que se muestra | Descripción |
---|---|---|---|
getHeight() | Ninguna | int
|
Devuelve la altura del iframe, en píxeles |
Usa getHeight()
// to get the height of the iframe
var height = dscc.getHeight();
sendInteraction()
La función sendInteraction()
envía un mensaje a Looker Studio con los datos
de un filtro.
Parámetros:
Nombre | Tipo | Descripción |
---|---|---|
actionID | string
|
La cadena que corresponde al actionId de la configuración |
interacción | enum(InteractionType)
|
Le informa a Looker Studio sobre la interacción |
datos | object(InteractionData)
|
Proporciona los datos requeridos para una interacción |
InteractionType
Actualmente, el único elemento InteractionType
válido es FILTER
.
Nombre | Tipo | Descripción |
---|---|---|
dscc.InteractionType.FILTER | Enum | Describe la interacción FILTER |
Usa 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))
}
Campo | Tipo | Descripción |
---|---|---|
conceptos | Array |
Array de fieldIds |
valores | Array<Array>
|
Array anidado de valores de datos. Cada subarray debe tener la longitud del array concepts .
Cada valor en el subarreglo corresponde a un valor de dimensión. |
Muestra de interactionData
:
var interactionData = {
"concepts": ["dim1Id", "dim2Id"],
"values": [
["dim1Val1", "dim2Val1"],
["dim1Val2", "dim2Val2"]
]
}
Usar dscc.sendInteraction
con el interactionData
anterior equivale a la siguiente instrucción de SQL:
SELECT data WHERE
(dim1 == dim1Val1 AND dim2 == dim2Val1)
OR
(dim1 == dim1Val2 AND dim2 == dim2Val2);
clearInteraction()
La función clearInteraction()
envía un mensaje a Looker Studio para borrar un
filtro que esta visualización estableció anteriormente.
Parámetros:
Nombre | Tipo | Descripción |
---|---|---|
actionID | string
|
La string que corresponde al actionId en la configuración |
interacción | enum(InteractionType)
|
Le informa a Looker Studio sobre la interacción |
Usa 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)
La función subscribeToData()
se suscribe a los mensajes de Looker Studio.
Parámetros:
Nombre | Tipo | Descripción |
---|---|---|
devolución de llamada(datos) | function
|
Una función que toma los datos que muestra subscribeToData . |
Opciones | object |
Definir el formato de retorno de datos deseado |
El objeto options se ve de la siguiente manera:
{
transform: dscc.tableTransform | dscc.objectTransform
}
Valor de muestra:
Tipo | Descripción |
---|---|
function |
Se anula la suscripción de callback a más mensajes de Looker Studio. |
Usa 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
Este es el objeto que se pasa al callback
registrado en dscc.subscribeToData
. Estos son los campos que se comparten entre dscc.objectFormat
y dscc.tableFormat
.
{
fields: object(fieldsByConfigId),
style: object(styleById),
interactions: object(interactionsById),
theme: object(themeStyle),
tables: object(tablesById),
dateRanges: object(dateRangesById)
}
Campo | Tipo | Descripción |
---|---|---|
campos | object(fieldsByConfigId)
|
Un objeto que contiene campos que indexó su configId |
estilo | object(styleById)
|
Un objeto que contiene objetos de estilo indexados por su configId |
interacciones | object(interactionsById)
|
Un objeto que contiene objetos de interacción |
tema | themeStyle
|
Un objetothemeStyle que contiene información de diseño de temas para el informe |
tablas | object(tablesById)
|
Un objeto que contiene tableObjects |
dateRanges | object(dateRangesById)
|
Un objeto que contiene dateRanges |
fieldsByConfigId
{
configId: array(field)
}
El objeto fieldsByConfigId
contiene arrays de objetos field indexados por el "id" definido en la configuración de visualización. Hay una entrada en este objeto por cada dataField
definido en la configuración.
Campo | Tipo | Descripción |
---|---|---|
configId | Array<field> |
Un array de campos asociados con dataField |
campo
{
id: fieldId,
name: string,
description: string,
type: fieldType,
concept: enum(conceptType)
}
El objeto field
proporciona información sobre el campo que el usuario selecciona en el panel de propiedades.
Campo | Tipo | Descripción |
---|---|---|
id | string |
El ID generado de Looker Studio para el campo |
name | string |
El nombre del campo legible |
descripción | string |
La descripción del campo |
tipo | enum(fieldType) |
El semanticType del campo |
concepto | enum(conceptType) |
El conceptType del campo |
styleById
{
configId: styleValue
}
El objeto styleById
proporciona información de estilo que indexa el "id" definido en la configuración de visualización.
Campo | Tipo | Descripción |
---|---|---|
configId | styleValue
|
Un objeto que contiene el valor de estilo y el valor de estilo predeterminado que define la configuración |
styleValue
{
value: string | object | bool | number,
defaultValue: string | object | bool | number
}
El objeto styleValue
proporciona el valor de estilo seleccionado por el usuario y el valor predeterminado definido en la configuración. El tipo de value
y defaultValue
depende del elemento de diseño.
Campo | Tipo | Descripción |
---|---|---|
valor | string OR object OR bool OR
number
|
El valor del elemento de estilo que muestra la selección del usuario en el panel de propiedades |
defaultValue | string OR object OR bool OR
number
|
El valor predeterminado del elemento de diseño definido en la configuración de visualización |
interactionsById
{
}
El objeto interactionsById
proporciona datos de interacción indexados por la configuración de visualización interactionId
.
Índice | Tipo | Descripción |
---|---|---|
configId | interaction
|
Un objeto que contiene datos asociados con una interacción |
interactionField
{
value: object(interactionValue),
supportedActions: array(InteractionType)
}
El objeto interactionField
contiene el array de supportedActions definido en la configuración, así como los valores seleccionados por el usuario para la interacción.
Campo | Tipo | Descripción |
---|---|---|
valor | string OR object OR
bool OR number
|
El valor del elemento de estilo que muestra la selección del usuario en el panel de propiedades |
supportedActions | Array<InteractionType>
|
Las acciones admitidas por esta interacción, como se definen en el archivo de configuración, |
interactionValue
El objeto interactionValue
proporciona valores seleccionados por el usuario para el tipo de interacción. Si la clave data
existe, el objeto InteractionData
refleja el estado actual del filtro. Si la clave data
no existe, la visualización no está configurada actualmente como un filtro.
{
type: enum(InteractionType)
data: object(interactionData) | None
}
Campo | Tipo | Descripción |
---|---|---|
tipo | enum(InteractionType)
|
El InteractionType seleccionado por el usuario |
datos | object(InteractionData)
|
Son los datos asociados con el estado actual del filtro. Esta clave no existe si se borra el filtro. |
tema
{
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
}
]
}
El objeto themeStyle
pasa información del tema del informe a la visualización.
Campo | Tipo | Descripción |
---|---|---|
fillColor | object
|
Un objeto con el formato {color:
string, opacity: number} |
fontColor | object
|
Un objeto con el formato {color:
string, opacity: number} |
accentFillColor | object
|
Un objeto con el formato {color:
string, opacity: number} |
accentFontColor | object
|
Un objeto con el formato {color:
string, opacity: number} |
fontFamily | string |
Es una cadena que describe la familia de fuentes. |
accentFontFamily | string
|
Una cadena que describe la familia de fuentes de acento |
increaseColor | object
|
Un objeto con el formato {color:
string, opacity: number} |
decreaseColor | object
|
Un objeto con el formato {color:
string, opacity: number} |
gridColor | object
|
Un objeto con el formato {color:
string, opacity: number} |
seriesColor | Array<object>
|
Un array de objetos con el formato{color: string, opacity:
number} |
tablesById
{
"DEFAULT": object(tableObject),
"COMPARISON": object(tableObject) | undefined
}
El elemento tableObject
proporciona información sobre los encabezados y los datos para cada fila. "DEFAULT" siempre mostrará datos y "COMPARISON" solo se propagará si el usuario configura los datos con filas de comparación.
El formato de tableObject es la única diferencia entre dscc.tableFormat
y dscc.objectFormat
.
Campo | Tipo | Descripción |
---|---|---|
"DEFAULT" | object(tableObject) OR
Array<objectRow>
|
El tableObject asociado con los datos que un usuario agrega a una visualización |
"COMPARACIÓN" | object(tableObject) OR
Array<objectRow>
|
El tableObject asociado con los datos de comparación de fechas, si corresponde |
dateRangesById
{
"DEFAULT": object(dateRange),
"COMPARISON": object(dateRange)
}
El objeto dateRangesById
proporciona información sobre los períodos predeterminados y de comparación. Si no hay períodos, el objeto estará vacío. DEFAULT
y COMPARISON
solo se propagarán si el usuario configura los períodos respectivos. Los datos de los períodos están relacionados con los datos predeterminados y de comparación, como se define en tablesById.
Campo | Tipo | Descripción |
---|---|---|
"DEFAULT" | object(dateRange)
|
El dateRange asociado con el período predeterminado, si corresponde. |
"COMPARACIÓN" | object(dateRange)
|
El dateRange asociado con una comparación de período, si corresponde. |
dateRange
{
start: string,
end: string
}
El objeto dateRange
proporciona información sobre las fechas de inicio y finalización de un período predeterminado o de comparación.
Campo | Tipo | Descripción |
---|---|---|
start | string |
Es la fecha de inicio del período en formato AAAAMMDD. |
end | string |
Es la fecha de finalización del período en formato AAAAMMDD. |
Referencia de tableFormat
tableObject
{
headers: array(object),
rows: array(array)
}
Campo | Tipo | Descripción |
---|---|---|
headers | Array
|
Un arreglo de objetos fields. Además, estos objetos de campo tienen una propiedad configId que corresponde a los ID de la configuración. |
filas | Array<Array> |
Un array de arrays: cada array es una fila de datos |
Datos de muestra de tableFormat
Este es un data
de muestra que se muestra mediante dscc.subscribeToData()
con la opción 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"
]
}
}
}
Referencia de objectFormat
objectRow
{
configId1: array(string | bool | number),
configId2: array(string | bool | number)
}
Campo | Tipo | Descripción |
---|---|---|
configId | arreglo | array de valores asociados con un ID de configuración particular |
Datos de objectFormat de muestra
Este es un data
de muestra que se muestra mediante dscc.subscribeToData()
con la opción 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"
]
}
}
}