Referência de postMessage da visualização da comunidade

Esta página documenta o atributo data de postMessage que o Data Studio fornece ao iframe.

Referência do objeto postMessage.data

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

    
Campo Tipo Descrição
type string Tipo da mensagem. Atualmente, é sempre a string RENDER.
config object Objeto que associa campos definidos na configuração a valores.
fields Array(field) Uma matriz de objetos field
dataResponse object Um objeto que contém tables

Objeto config

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

    }
    
Campo Tipo Descrição
data Array(dataSection) Uma matriz de objetos dataSection
style Array(styleSection) Uma matriz de objetos styleSection
themeStyle object Um objeto

Objeto dataSection

{
      id: string,
      label: string,
      elements: Array(dataField)
    }
    
Campo Tipo Descrição
id string Código da seção definido pelo desenvolvedor na configuração.
label string Etiqueta da seção definida pelo desenvolvedor na configuração.
elements Array(dataField) Uma matriz de dataFields

Objeto dataField

{
      type: enum(DataElement),
      id: string,
      label: string,
      options: object(dataElementOptions),
      value: array(string)
    }
    
Campo Tipo Descrição
type enum(DataElement) O tipo do DataField: "DIMENSION", "METRIC" ou "MAX_RESULTS"
id string Código do campo definido pelo desenvolvedor na configuração.
label string Etiqueta do campo definida pelo desenvolvedor na configuração.
options object(dataElementOptions) As opções que correspondem ao tipo do dataElement desse campo
values Array(string) Matriz de códigos de campo que correspondem aos dados selecionados pelo usuário final.

Objeto styleSection

{
      id: string,
      label: string,
      elements: array(styleField)
    }
    
Campo Tipo Descrição
id string Código da seção definido pelo desenvolvedor na configuração.
label string Etiqueta da seção definida pelo desenvolvedor na configuração.
elements Array(styleField) Uma matriz de styleFields.

Objeto styleField

{
      type: enum(StyleElement),
      id: string,
      label: string,
      defaultValue: string | number | boolean,
      value: string
    }
    
Campo Tipo Descrição
type enum(StyleElement) O tipo de StyleField
id string Código do campo definido pelo desenvolvedor na configuração.
label string Etiqueta do campo definida pelo desenvolvedor na configuração.
defaultValue string Valor padrão definido pelo desenvolvedor para esse estilo na configuração.
value string Ou o defaultValue ou o valor de estilo selecionado pelo usuário final.

A enum styleElement é o valor que o desenvolvedor define na configuração da visualização. Confira os possíveis valores na referência da configuração (em inglês).

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 Descrição
fillColor object Objeto com o formato {color: string, opacity: number}.
fontColor object Objeto com o formato {color: string, opacity: number}.
accentFillColor object Objeto com o formato {color: string, opacity: number}.
accentFontColor object Objeto com o formato {color: string, opacity: number}.
fontFamily string String que descreve a família de fontes.
accentFontFamily string String que descreve a família de fontes de destaque.
increaseColor object Objeto com o formato {color: string, opacity: number}.
decreaseColor object Objeto com o formato {color: string, opacity: number}.
gridColor object Objeto com o formato {color: string, opacity: number}.
seriesColor Array(object) Matriz de objetos do formato {color: string, opacity: number}

Objeto field

{
      id: string,
      name: string,
      description: string,
      type: enum(semanticType)
    }
    
Campo Tipo Descrição
id string Código gerado pelo Data Studio referente ao campo de dados.
name string Nome do campo.
description string Descrição do campo.
type enum(semanticType) O semanticType do campo.

Objeto dataResponse

{
      tables: `array(table)`
    }
    
Campo Tipo Descrição
tables array(table) Matriz das tabelas de dados.

Objeto table

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

    }
    
Campo Tipo Descrição
id enum(TableType) Tipo da tabela.
fields Array(string) Uma matriz de fieldIds
rows Array(Array(string OR bool OR int)) Matriz de matrizes de linhas de dados

Os valores de TableType podem ser um dos seguintes:

Valor de enum Descrição
DEFAULT O tipo de dataField que corresponde a uma DIMENSION.
COMPARISON Identifica uma tabela de comparação.

Exemplo de 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]
            ]
          }
        ]
      }
    }