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

Descripción general de la API

dscc (Componente de la comunidad de Looker Studio) es una biblioteca que ayuda a crear componentes de la comunidad para Looker Studio. El código fuente se puede encontrar en GitHub.

dscc expone tres funciones: getWidth(), getHeight() y subscribeToData().

`getWidth()`

Nombre	Parámetros	Tipo de datos que se muestra	Descripción
getWidth()	Ninguno	`number`	Devuelve 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()	Ninguno	`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`	Es la cadena que corresponde al actionId en la configuración.
interacción	`enum(InteractionType)`	Informa a Looker Studio sobre la interacción.
datos	`object(InteractionData)`	Proporciona los datos necesarios para una interacción

`InteractionType`

Actualmente, el único InteractionType válido es FILTER.

Nombre	Tipo	Descripción
dscc.InteractionType.FILTER	Enum	Describe la interacción de `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
concepto	`Array`	Es un array de `fieldIds`.
valores	`Array<Array>`	Es un array anidado de valores de datos. Cada submatriz debe tener la longitud de la matriz `concepts`. Cada valor del 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 se estableció previamente en esta visualización.

Parámetros:

Nombre	Tipo	Descripción
actionID	`string`	Es la cadena que corresponde al actionId en la configuración.
interacción	`enum(InteractionType)`	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
callback(data)	`function`	Es una función que toma los datos que devuelve `subscribeToData`.
opciones	`object`	Define el formato de devolución de datos deseado.

El objeto de opciones se ve de la siguiente manera:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Valor de muestra:

Tipo	Descripción
`function`	Anula la suscripción de `callback` para no recibir 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 con dscc.subscribeToData. Los siguientes 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)`	Objeto que contiene campos indexados por su configId
estilo	`object(styleById)`	Objeto que contiene objetos de estilo indexados por su configId
interacciones	`object(interactionsById)`	Objeto que contiene objetos de interacción
tema	`themeStyle`	Un objeto themeStyle que contiene información de diseño del tema para el informe
tablas	`object(tablesById)`	Objeto que contiene tableObjects
dateRanges	`object(dateRangesById)`	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 para cada dataField definido en la configuración.

Campo	Tipo	Descripción
configId	`Array<field>`	Es un array de campos asociados con el campo dataField.

campo

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

El objeto field proporciona información sobre el campo que selecciona el usuario en el panel de propiedades.

Campo	Tipo	Descripción
id	`string`	ID generado por Looker Studio para el campo
nombre	`string`	Nombre del campo legible por humanos
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 indexada por el "id" definido en la configuración de visualización.

Campo	Tipo	Descripción
configId	`styleValue`	Objeto que contiene el valor de estilo y el valor de estilo predeterminado definido por la configuración

styleValue

{
  value: string | object | bool | number,
  defaultValue: string | object | bool | number
}

El objeto styleValue proporciona tanto el valor de estilo seleccionado por el usuario como el valor predeterminado definido en la configuración. El tipo de value y defaultValue depende del elemento de estilo.

Campo	Tipo	Descripción
valor	`string OR object OR bool OR number`	El valor del elemento de estilo que se devolvió a partir de la selección del usuario en el panel de propiedades
defaultValue	`string OR object OR bool OR number`	El valor predeterminado del elemento de estilo 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 de interactionId.

Índice	Tipo	Descripción
configId	`interaction`	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 se devolvió a partir de la selección del usuario en el panel de propiedades
supportedActions	`Array<InteractionType>`	Son las acciones que admite esta interacción, según se definen en la configuración.

interactionValue

El objeto interactionValue proporciona los valores seleccionados por el usuario para el tipo de interacción. Si existe la clave data, el objeto InteractionData refleja el estado actual del filtro. Si la clave data no existe, la visualización no está configurada actualmente como 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 el filtro está borrado actualmente.

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`	Cadena que describe la familia de fuentes
accentFontFamily	`string`	Cadena que describe la familia de fuentes de los elementos destacados
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 tableObject proporciona información de encabezado y datos para cada fila. "DEFAULT" siempre devolverá datos, y "COMPARISON" solo se completará 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
"COMPARISON"	`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 rangos de fechas, 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 se relacionan con los datos predeterminados y de comparación, como se definen en tablesById.

Campo	Tipo	Descripción
"DEFAULT"	`object(dateRange)`	Es el `dateRange` asociado con el período predeterminado, si corresponde.
"COMPARISON"	`object(dateRange)`	Es el `dateRange` asociado a un período de comparación, 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`	Fecha de inicio del período en formato AAAAMMDD.
end	`string`	Fecha de finalización del período en formato AAAAMMDD.

Referencia de `tableFormat`

tableObject

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

Campo	Tipo	Descripción
encabezados	`Array`	Es un array de objetos fields. Estos objetos de campo también tienen una propiedad `configId` que corresponde a los IDs de la configuración.
filas	`Array<Array>`	Es un array de arrays, en el que cada array es una fila de datos.

Datos de muestra de `tableFormat`

Este es un ejemplo de data que se devuelve cuando se usa 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	array	Es un array de valores asociados con un ID de configuración en particular.

Datos de muestra de objectFormat

Este es un ejemplo de data que se devuelve cuando se usa 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) Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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 muestra de objectFormat

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

`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`