Referencia de configuración de las visualizaciones comunitarias

La configuración de visualización define los datos y los atributos de estilo necesarios para crear visualizaciones.

La configuración se espera como un archivo JSON con la siguiente estructura:

{
      "data": [
        {
          "id": string,
          "label": string,
          "elements": [
            {
              "type": enum(DataElement),
              "id": string,
              "label": string,
              "options": object(DataElementOptions)
            }
          ]
        }
      ],
      "style": [
        {
          "id": string,
          "label": string,
          "elements": [
            {
              "type": enum(StyleElement),
              "id": string,
              "label": string,
              "defaultValue": string | object
            }
          ]
        }
      ]
      "interactions": [
        {
          "id": string,
          "supportedActions": array(enum(InteractionType))
        }
      ]
    }
    
Nombre del campo Tipo Descripción
data[] Array(object) Configuración de datos de la visualización. Esta configuración afecta al panel Datos del panel de propiedades.
data[].id string ID de la sección de datos. Esta cadena no puede estar vacía ni contener espacios.
data[].label string Etiqueta de la sección de datos.
data[].elements[] string Elementos de datos que se deben renderizar.
data[].elements[].type string enum(DataElement) Tipo de elemento de datos que se debe renderizar.
data[].elements[].id string ID del elemento de datos. Esta cadena no puede estar vacía ni contener espacios.
data[].elements[].label string Etiqueta de descripción emergente del elemento de datos.
data[].elements[].options object(DataElementOptions) Opciones de datos del elemento. Depende del tipo de elemento de datos.
style[] Array(object) Configuración de estilo que requiere la visualización. Esta configuración afecta al panel Estilo del panel de propiedades. Cada objeto de la matriz representa el elemento de estilo que se debe renderizar. El orden de los elementos determina el orden en el que se renderizarán.
style[].id string ID de la sección de estilo. Esta cadena no puede estar vacía ni contener espacios.
style[].label string Etiqueta de la sección de estilo.
style[].elements Array(object) Elementos de estilo que se deben renderizar.
style[].elements[].id string ID del elemento de estilo. Esta cadena no puede estar vacía ni contener espacios.
style[].elements[].type string enum(StyleElement) Tipo de elemento de estilo. Por ejemplo, selector de fuente.
style[].elements[].label string Descripción emergente o etiqueta del elemento de estilo. Es el texto de etiqueta de un elemento de casilla y el texto de descripción emergente de otros tipos de elementos.
style[].elements[].options Array(object) Opciones (options) del elemento. Solo es válido para los tipos de elemento de estilo SELECT_SINGLE y SELECT_RADIO.
style[].elements[].defaultValue string OR object Valor predeterminado del elemento de estilo. Se ignorarán los valores no válidos.*
interactions[] Array(object) Configuración de las interacciones de la visualización. Esta configuración determina si la visualización puede actuar como filtro o no.
interactions[].id string ID del elemento de interacción. Esta cadena no puede estar vacía ni contener espacios.
interactions[].supportedActions Array (enum(InteractionType) Posibles interacciones admitidas.

defaultValue es una cadena válida para todo, excepto para selectores de color. En el caso de los colores, defaultValue debe ser un objeto con el siguiente formato:

{
        color: `string`
    }
    

DataElement

Los valores de los elementos de datos pueden ser uno de los siguientes:

Valor de enumeración Descripción
"METRIC" Renderiza un elemento de campo de métrica.
"DIMENSION" Renderiza un elemento de campo de dimensión.
"MAX_RESULTS" Define la cantidad máxima de filas de datos que esta visualización puede solicitar.

Opciones de DataElement

Los valores de los elementos de datos pueden ser uno de los siguientes:

Valor de enumeración Tipo de opción Opciones disponibles
"METRIC" Objeto max: número máximo de métricas admitidas.
min: número mínimo de métricas requeridas.
"DIMENSION" Objeto max: número máximo de dimensiones admitidas.
min: número mínimo de métricas requeridas.
supportedTypes: lista de tipos admitidos. supportedTypes puede incluir TIME, GEO o DEFAULT.
"MAX_RESULTS" Objeto max: número máximo de filas que puede solicitar la visualización. Valor predeterminado: 2500.

StyleElement

Los valores de los elementos de estilo pueden ser uno de los siguientes:

Valor de enumeración Descripción
"FONT_COLOR" Renderiza el selector de color de fuente.
"FONT_SIZE" Renderiza el selector de tamaño de fuente. Valor predeterminado: 10px.
"FONT_FAMILY" Renderiza el selector de conjunto de fuentes. Valor predeterminado: auto.
"CHECKBOX" Renderiza una casilla. Valor predeterminado: "false".
"TEXTINPUT" Renderiza un cuadro de entrada de texto.
"TEXTAREA" Renderiza un área grande de introducción de texto.
"SELECT_SINGLE" Renderiza un menú desplegable con valores predefinidos.
"SELECT_RADIO" Renderiza un botón de selección con valores predefinidos.
"FILL_COLOR" Renderiza un selector de color de relleno.
"BORDER_COLOR" Renderiza un selector de color de borde.
"AXIS_COLOR" Renderiza un selector de color de eje.
"GRID_COLOR" Renderiza un selector de color de cuadrícula.
"OPACITY" Renderiza un selector de opacidad.
"LINE_WEIGHT" Renderiza un selector de grosor de línea.
"LINE_STYLE" Renderiza un selector de estilo de línea. Valores predeterminados aceptables: solid, dashed, dotted y double.
"BORDER_RADIUS" Renderiza un selector de radio de borde.
"INTERVAL" Renderiza un selector de intervalo.

Los elementos de estilo configuran los iconos que se muestran en la pestaña Style del panel de propiedades.

options: array(options)
    

Objeto options

{
        label: `string`,
        value: `string`
    }
    

InteractionType

Los tipos de interacción permiten configurar las opciones de interacción disponibles en el estilo Data del panel de propiedades. De momento, solo se admite "FILTER".

Valor de enumeración Descripción
"FILTER" Permite a los usuarios utilizar la visualización como un filtro.

Configuración de ejemplo

{
      "data": [
        {
          "id": "concepts",
          "label": "concepts",
          "elements": [
            {
              "id": "dimension1",
              "label": "first dimension",
              "type": "DIMENSION",
              "options": {
                "min": 1,
                "max": 3,
                "supportedTypes": ["GEO"]
              }
            },
            {
              "id": "metric",
              "label": "metric",
              "type": "METRIC",
              "options": {
                "min": 1,
                "max": 3
              }
            }
          ]
        }
      ],
      "style": [
        {
          "id": "colors",
          "label": "Highlight Colors",
          "elements": [
            {
              "id": "accentColor",
              "label": "Accent Color",
              "type": "SELECT_SINGLE",
              "defaultValue": "rain",
              "options": [
                {
                  "label": "Summer",
                  "value": "summer"
                },
                {
                  "label": "Fall",
                  "value": "fall"
                }
              ]
            },
            {
              "id": "reverseColor",
              "label": "Show reverse color",
              "defaultValue": "false",
              "type": "CHECKBOX"
            },
            {
              "id": "fillColor",
              "label": "Fill Color",
              "defaultValue": {
                "color": "#0000ff"
              },
              "type": "FILL_COLOR"
            },
            {
              "id": "textOpacity",
              "label": "Text Opacity",
              "defaultValue": "0.2",
              "type": "OPACITY"
            },
            {
              "id": "customText",
              "label": "Custom Text",
              "defaultValue": "0.2",
              "type": "TEXTINPUT"
            }
          ]
        },
        {
          "id": "text",
          "label": "Highlight Text",
          "elements": [
            {
              "id": "textFontSize",
              "label": "Font size",
              "defaultValue": "10",
              "type": "FONT_SIZE"
            },
            {
              "id": "font",
              "label": "Font family",
              "defaultValue": "auto",
              "type": "FONT_FAMILY"
            }
          ]
        }
      ],
      "interactions": [
        {
          "id": "interactionsConfigId",
          "supportedActions": ["FILTER"]
        }
      ]
    }