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

Nota: La función Visualización de la comunidad se encuentra en la "Versión preliminar para desarrolladores". Para aprender para obtener más información sobre las próximas funciones y mejoras durante este período, visita el Página de Versión preliminar para desarrolladores.

Descripción general de la API

dscc (componente de la comunidad de Looker Studio) es una biblioteca para ayudar con la compilación 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()	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 para un filtro.

Parámetros:

Nombre	Tipo	Descripción
actionID	string	La cadena que corresponde a el actionId en la configuración
interacción	enum(InteractionType)	Le dice a Looker Acerca de Studio la interacción
datos	object(InteractionData)	Proporciona lo siguiente: datos requeridos durante un interacción

InteractionType

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

Nombre	Tipo	Descripción
dscc.InteractionType.FILTER	Enum	Describe la interacción con 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 submatriz debe ser la longitud del array concepts. Cada valor del subarray corresponde a un valor de la dimensión.

Muestra de interactionData:

var interactionData = {
  "concepts": ["dim1Id", "dim2Id"],
  "values": [
    ["dim1Val1", "dim2Val1"],
    ["dim1Val2", "dim2Val2"]
    ]
}

Usar dscc.sendInteraction con el interactionData anterior equivale a lo siguiente: 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 establecido previamente por esta visualización.

Parámetros:

Nombre	Tipo	Descripción
actionID	string	La cadena 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 devuelve subscribeToData
opciones	object	Define el formato de devolución de datos deseado.

El objeto options se ve así:

{
  transform: dscc.tableTransform | dscc.objectTransform
}

Valor de muestra:

Tipo	Descripción
function	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 pasó a la callback registrada con dscc.subscribeToData Estos son los campos que se comparten 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 indexados por su configId
estilo	object(styleById)	Un objeto que contiene objetos de diseño indexada por su configId
interacciones	object(interactionsById)	Un objeto que contiene interacción objetos
tema	themeStyle	Un objetothemeStyle que contiene estilos de temas información 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 de field indexados. por el "id" definidos en las 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 por Looker Studio para el campo
nombre	string	El 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 "id" definidos 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 definido por config.

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 el valor predeterminado definido en la configuración. El tipo de value y defaultValue dependerán del elemento de estilo.

Campo	Tipo	Descripción
valor	string OR object OR bool OR number	El valor del elemento de diseño devueltos por la selección del usuario en el panel de propiedades
defaultValue	string OR object OR bool OR number	El valor predeterminado del diseño definido en el configuración de visualización

interactionsById

{

}

El objeto interactionsById proporciona datos de interacción que indexa el interactionId la configuración de visualización.

Í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 que seleccionó el usuario para la interacción.

Campo	Tipo	Descripción
valor	string OR object OR bool OR number	El valor del elemento de diseño devueltos por la selección del usuario en el panel de propiedades
supportedActions	Array<InteractionType>	Las acciones compatibles con este interacción, tal como se define en el config.

interactionValue

El objeto interactionValue proporciona valores que selecciona el usuario para la interacción. el tipo de letra. 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á configurado actualmente como filtro.

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

Campo	Tipo	Descripción
tipo	enum(InteractionType)	El valor seleccionado por el usuario InteractionType
datos	object(InteractionData)	Los datos asociados con el estado actual de el filtro. Esta clave no existe si el filtro está borrado.

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 sobre el 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	Una cadena que describe la familia de fuentes
accentFontFamily	string	Una cadena que describe la fuente de acento familia
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 del formato{color: string, opacity: number}

tablesById

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

tableObject proporciona información sobre el encabezado y los datos de cada fila. “PREDETERMINADO” siempre se mostrarán los datos, y "COMPARISON" solo se completarán 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
“PREDETERMINADO”	object(tableObject) OR Array<objectRow>	El tableObject asociado con los datos que un usuario agrega al visualización
“COMPARISON”	object(tableObject) OR Array<objectRow>	El tableObject asociado con los datos de comparación de fechas, si correspondiente

dateRangesById

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

El objeto dateRangesById proporciona información sobre valores predeterminados y de comparación. períodos. Si no hay períodos, el objeto será vacío. DEFAULT y COMPARISON solo se propagarán si la fecha respectiva el usuario configura los rangos. 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
“PREDETERMINADO”	object(dateRange)	El objeto dateRange asociado con el el período predeterminado, si corresponde.
“COMPARISON”	object(dateRange)	El dateRange asociado con un el período de comparación, si corresponde.

dateRange

{
  start: string,
  end: string
}

El objeto dateRange brinda información sobre las fechas de inicio y finalización de un el 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
encabezados	Array	Un array de objetos fields. Estos campos Además, los objetos tienen una propiedad configId. que corresponda a los IDs 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 ejemplo de data que se muestra usando 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	array de valores asociados con un ID de configuración específico

Datos de muestra de objectFormat

Este es un ejemplo de data que se muestra usando 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"
      ]
    }
  }
}