Definir la configuración de las visualizaciones

Las opciones de estilo y datos de una visualización comunitaria se definen en una configuración JSON. La configuración de data define el número de dimensiones y métricas que admitirá la visualización. La configuración de style define los selectores de estilos disponibles en el panel de propiedades.

Configuración de datos

En la configuración de data, se definen los elementos DIMENSION y METRIC que Data Studio renderizará en el panel de propiedades. Cada elemento corresponde a los campos de dimensión y de elemento que el usuario final proporciona como entradas a la visualización.

Elemento de datos de muestra:

{
  "id": "twoDimensionsPlease",
  "label": "Dimension Element Heading",
  "type": "DIMENSION",
  "options": {
    "min": 2,
    "max": 2,
  }
}

El valor que definas en el campo id se incluye en la información con la que Data Studio responde. En label se define el texto que los usuarios ven encima de la sección de datos y en type se define si se trata de un dimensión o de una métrica. En el objeto options, se define el número mínimo y máximo de campos que un usuario puede añadir al elemento de datos.

En un elemento de datos DIMENSION, el objeto options admite una clave supportedTypes opcional. Si se define esta clave, Data Studio restringe el tipo de campos de dimensión que se puede añadir al elemento. El valor de supportedTypes es una matriz que puede contener cualquier combinación de "DEFAULT", "TIME" y "GEO".

Las secciones de datos agrupan varios elementos de datos. Data Studio renderiza el valor de label como un encabezado en varios elementos de datos.

Sección de datos de muestra:

{
  "id": "dimensionSection1",
  "label": "Dimension Section Heading",
  "elements":[
    // array of data elements
  ]
}

En esta captura de pantalla, se muestra cómo Data Studio renderiza la sección de datos y el elemento de datos anteriores:

Captura de pantalla del elemento de datos en el panel de propiedades

Configuración de estilos

En la configuración de estilos se definen los selectores de estilos que se renderizarán en el panel de propiedades.

Elemento de estilo de muestra:

{
  "id": "linkOpacity",
  "label": "Link opacity",
  "type": "OPACITY",
  "defaultValue": "0.2"
}

Mediante label se define el texto que los usuarios verán como descripción emergente y en type se define el tipo de selector de estilos que Data Studio renderizará. De manera opcional, con defaultValue se define un valor predeterminado de cada elemento de estilo.

De manera similar a los elementos de datos, los elementos de estilo se definen dentro de secciones, de forma que proporcionan encabezados y agrupaciones lógicas. Para ver la lista completa de selectores disponibles, consulta el artículo sobre la referencia de configuración.

Sección de estilos de muestra:

{
  "id": "styleGroup1",
  "label": "Header for style group",
  "elements": [
    // insert Style Elements here
  ]
}

En la siguiente captura de pantalla, se muestra un ejemplo de un panel de estilos con un selector de opacidad y la descripción emergente "Link Opacity" (Opacidad de enlace) correspondiente al valor de label del elemento de estilo.

Captura de pantalla del selector de estilos

Configuración de interacciones

En la configuración de interaction, se define cómo funcionan las interacciones de gráficos de las visualizaciones comunitarias. Esta configuración es opcional.

Ejemplo:

{
  "id": "onClick",
  "supportedActions": ["FILTER"]
}

Actualmente, solo se admite FILTER. Si configuras interacciones, aparecerá una casilla en el panel de propiedades.

Captura de pantalla del selector de estilos

Configuración de funciones

La configuración de features puede activar o desactivar distintas funciones en tu visualización comunitaria. Esta sección es opcional. En la referencia de configuración se incluye una lista con las funciones.

Ejemplo:

  "features": {
    "enableComparisonDateRange": true
  }

Ejemplo

Para ver un ejemplo de una configuración de visualización, consulta la configuración de muestra.

Pasos siguientes

Una vez que hayas definido la configuración, escribe la visualización.