Referencia de postMessage de las visualizaciones comunitarias

En esta página se documenta el atributo data de postMessage que Data Studio proporciona al iframe.

Referencia del objeto postMessage.data

{
      type: string,
      config: object,
      fields: Array(field),
      dataResponse: object
    }

    
Campo Tipo Descripción
type string Tipo de mensaje. En estos momentos, es siempre la cadena RENDER.
config object Objeto que asocia campos definidos en la configuración con valores.
fields Array(field) Matriz de objetos field
dataResponse object Objeto que contiene tables

Objeto config

{
      data: Array(dataSection),
      style: Array(styleSection),
      themeStyle: object

    }
    
Campo Tipo Descripción
data Array(dataSection) Matriz de objetos dataSection
style Array(styleSection) Matriz de objetos styleSection
themeStyle object Objeto

Objeto dataSection

{
      id: string,
      label: string,
      elements: Array(dataField)
    }
    
Campo Tipo Descripción
id string ID de sección que el desarrollador ha definido en la configuración.
label string Etiqueta de sección que el desarrollador ha definido en la configuración.
elements Array(dataField) Matriz de dataFields

dataField Object

{
      type: enum(DataElement),
      id: string,
      label: string,
      options: object(dataElementOptions),
      value: array(string)
    }
    
Campo Tipo Descripción
type enum(DataElement) Tipo de DataField: "DIMENSION", "METRIC" o "MAX_RESULTS"
id string ID de campo que el desarrollador ha definido en la configuración.
label string Etiqueta de campo que el desarrollador ha definido en la configuración.
options object(dataElementOptions) Opciones que corresponden al tipo dataElement de este campo
values Array(string) Matriz de IDs de campo que corresponden a los datos que el usuario final ha seleccionado.

Objeto styleSection

{
      id: string,
      label: string,
      elements: array(styleField)
    }
    
Campo Tipo Descripción
id string ID de sección que el desarrollador ha definido en la configuración.
label string Etiqueta de sección que el desarrollador ha definido en la configuración.
elements Array(styleField) Es un conjunto de styleField

Objeto styleField

{
      type: enum(StyleElement),
      id: string,
      label: string,
      defaultValue: string | number | boolean,
      value: string
    }
    
Campo Tipo Descripción
type enum(StyleElement) Tipo de StyleField
id string ID de campo que el desarrollador ha definido en la configuración.
label string Etiqueta de campo que el desarrollador ha definido en la configuración.
defaultValue string Valor predeterminado que el desarrollador ha asignado a este estilo en la configuración.
value string defaultValue o valor de estilo seleccionado por el usuario final

La enumeración styleElement es el valor que el desarrollador define en la configuración de visualización. En la referencia de configuración se especifican los posibles valores.

Objeto themeStyle

{
      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
        }
      ]
    }
    
Campo Tipo Descripción
fillColor object Objeto con el formato {color: string, opacity: number}.
fontColor object Objeto con el formato {color: string, opacity: number}.
accentFillColor object Objeto con el formato {color: string, opacity: number}.
accentFontColor object Objeto con el formato {color: string, opacity: number}.
fontFamily string Cadena que describe el conjunto de fuentes.
accentFontFamily string Cadena que describe el conjunto de fuentes con acento.
increaseColor object Objeto con el formato {color: string, opacity: number}.
decreaseColor object Objeto con el formato {color: string, opacity: number}.
gridColor object Objeto con el formato {color: string, opacity: number}.
seriesColor Array(object) Matriz de objetos con el formato {color: string, opacity: number}.

Objeto field

{
      id: string,
      name: string,
      description: string,
      type: enum(semanticType)
    }
    
Campo Tipo Descripción
id string ID que ha generado Data Studio del campo de datos.
name string Nombre del campo.
description string Descripción del campo.
type enum(semanticType) semanticType del campo.

Objeto dataResponse

{
      tables: `array(table)`
    }
    
Campo Tipo Descripción
tables array(table) Matriz de tablas de datos.

Objeto table

{
      id: string
      fields: Array(string),
      rows: Array(Array(string | bool | int))

    }
    
Campo Tipo Descripción
id enum(TableType) Tipo de tabla.
fields Array(string) Matriz de fieldIds
rows Array(Array(string OR bool OR int)) Matriz de matrices de filas de datos.

Los valores de TableType pueden ser uno de los siguientes:

Valor de enumeración Descripción
"DEFAULT" El tipo dataField que corresponde a una "DIMENSION"
"COMPARISON" Identifica una tabla de comparación.

Ejemplo postMessage

{
      config: {
        data: [
          {
            id: "dimension",
            label: "Dimension",
            elements: [
              {
                "id": "dimension1",
                "label": "first dimension",
                "type": "DIMENSION",
                "options": {
                  "min": 1,
                  "max": 2
                },
                fields: ["qt_1234", "qt_4321"]
              },
            ],
          },
          {
            id: "metric",
            label: "Metric",
            elements: [
              {
                type: "METRIC",
                id: "metSelector",
                label: "Metric X",
                options: {
                  min: 1,
                  max: 1
                },
                fields: ["qt_6789"]
              }
            ]
          }
        ],
        style: [
          {
            id: "tableHeaderSection",
            label: "Table Header",
            elements: [
              {
                type: "FONT_COLOR",
                id: "fontColor1",
                label: "Table header font color",
                defaultValue: "#888888",
                value: "#cccccc"
              }
            ]
          }
        ],
        themeStyle: {
          <themeStyle properties - see table above.>
        }
      },
      fields: [
        {
          id: "qt_1234",
          name: "Source",
          description: "The source.",
          type: "TEXT"
        },
        {
          id: "qt_4321",
          name: "Country",
          description: "The country.",
          type: "COUNTRY"
        },
        {
          id: "qt_6789",
          name: "Sessions",
          description: "Number of sessions.",
          type: "NUMBER"
        }
      ],
      dataResponse: {
        tables: [
          {
            id: "DEFAULT",
            fields: ["qt_1234", "qt_4321", "qt_6789"],
            rows: [
              ["google", "Canada", 324234],
              ["google images", "USA", 5345]
            ]
          },
          {
            id: "COMPARISON",
            fields: ["qt_1234", "qt_4321", "qt_6789"],
            rows: [
              ["google", "Canada", 343434],
              ["google images", "USA", 6645]
            ]
          }
        ]
      }
    }