Se usó la API de Cloud Translation para traducir esta página.

Referencia de la biblioteca del componente de la comunidad de Looker Studio (dscc)

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

Referencia de la biblioteca del componente de la comunidad de Looker Studio (dscc)

Descripción general de la API

getWidth()

Usa getWidth()

getHeight()

Usa getHeight()

sendInteraction()

InteractionType

Usa sendInteraction

interactionData

clearInteraction()

Usa clearInteraction()

subscribeToData(callback, options)

Usa subscribeToData()

data

fieldsByConfigId

campo

styleById

styleValue

interactionsById

interactionField

interactionValue

tema

tablesById

dateRangesById

dateRange

Referencia de tableFormat

tableObject

Datos de muestra de tableFormat

Referencia de objectFormat

objectRow

Datos de objectFormat de muestra

`getWidth()`

Usa `getWidth()`

`getHeight()`

Usa `getHeight()`

`InteractionType`

Usa `sendInteraction`

`interactionData`

Usa `clearInteraction()`

`subscribeToData(callback, options)`

Usa `subscribeToData()`

`data`

Referencia de `tableFormat`

Datos de muestra de `tableFormat`