Referencia de configuración de visualización de la comunidad

La configuración de visualización define los datos y atributos de estilo que requiere una visualización.

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))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}
Nombre del campo Tipo Descripción
data[] Array(object) Es la configuración de datos de la visualización. Esta configuración afecta el panel Datos del panel de propiedades.
data[].id string El ID de la sección de datos. Debe ser una string que no esté vacía ni espacios.
data[].label string La etiqueta de la sección de datos.
data[].elements[] string Los elementos de datos que se renderizarán.
data[].elements[].type Enum string(DataElement) El tipo de elemento de datos que se renderizará.
data[].elements[].id string El ID del elemento de datos. Debe ser una string que no esté vacía ni espacios.
data[].elements[].label string La etiqueta de información sobre la herramienta para el elemento de datos.
data[].elements[].options object(DataElementOptions) Las opciones de datos para el elemento. Depende del tipo de elemento de datos.
style[] Array(object) Es la configuración de estilo que requiere la visualización. Esta configuración afecta el panel Estilo del panel de propiedades. Cada objeto del array representa un elemento de estilo que se renderizará. El orden de los elementos determina el orden en el que se renderizarán.
style[].id string El ID de la sección de estilo. Debe ser una string que no esté vacía ni espacios.
style[].label string Es la etiqueta de la sección de estilo.
style[].elements Array(object) Los elementos de estilo que se renderizarán.
style[].elements[].id string El ID del elemento de estilo. Debe ser una cadena que no esté vacía y sin espacios.
style[].elements[].type Enumeración string(StyleElement) Es el tipo de elemento de estilo. P.ej., el selector de fuentes.
style[].elements[].label string La información o la etiqueta del elemento de estilo. Este es el texto de la etiqueta para un elemento de la casilla de verificación y el texto de la información sobre la herramienta para otros tipos de elementos.
style[].elements[].options Array(object) El options del elemento. Esto solo es válido para los tipos de elemento de estilo SELECT_SINGLE y SELECT_RADIO.
style[].elements[].defaultValue string OR object El valor predeterminado del elemento de estilo. Se ignorarán los valores no válidos.*
interactions[] Array(object) Es la configuración de las interacciones de la visualización. Esta configuración determina si puede actuar como filtro o no.
interactions[].id string El ID del elemento de interacción. Debe ser una string que no esté vacía ni espacios.
interactions[].supportedActions Array (enumeración(InteractionType) Las posibles interacciones admitidas
features object Las funciones que quieres habilitar o inhabilitar en tu visualización.
features.enableComparisonDateRange boolean Habilita la comparación de períodos. Si no se especifica, el valor predeterminado es false.

*defaultValue es una cadena para todo, excepto los 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 enum Descripción
MÉTRICA (METRIC) Renderiza un elemento de campo de métrica.
DIMENSIÓN Renderiza un elemento de campo de dimensión.
MAX_RESULTS Define la cantidad máxima de filas de datos que puede solicitar esta visualización

Opciones de DataElement

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

Valor enum Tipo de opción Opciones disponibles
MÉTRICA (METRIC) Objeto máx.: número; cantidad máxima de métricas;
mín.: número; cantidad mínima de métricas requeridas
DIMENSIÓN Objeto max: número: la cantidad máxima de dimensiones admitidas.
mín.: Número; la cantidad mínima de dimensiones requeridas
supportedTypes: Es la lista de tipos admitidos. supportedTypes puede incluir TIME, GEO o DEFAULT
MAX_RESULTS Objeto max: número; la cantidad máxima de filas que la visualización puede solicitar Valor predeterminado: 2,500

StyleElement

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

Valor enum Descripción Tipo de datos (configuración) de defaultValue Tipo de datos de value (mensaje) Valor predeterminado
FONT_COLOR Renderiza el selector de color de la fuente. Los valores válidos son códigos de color hexadecimal. STRING | OBJECT<Color> STRING | OBJECT<Color> Determinada por el tema.
FONT_SIZE Renderiza el selector de tamaño de fuente. Los valores válidos son los siguientes píxeles: 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 44, 48, 60, 72, 84, 96. NUMBER NUMBER 12
FONT_FAMILY Renderiza el selector de familia de fuentes. Los valores válidos son las siguientes fuentes: Arial, Boogaloo, Bubblegum Sans, Chewy, Comic Sans MS, coming Soon, Cormorant Unicase, Courier New, Droid, Droid Sans, Eater, Georgia, Google Sans, Great Vibes, Indie Flower, Lato, Lora, Montserrat, Oleo Script, Open Sans, Ordenseie STRING STRING Determinada por el tema.
CASILLA DE VERIFICACIÓN Renderiza una casilla de verificación. BOOLEAN BOOLEAN false
ENTRADA DE TEXTO Renderiza una casilla de entrada de texto. STRING STRING ""
ÁREA DE TEXTO Renderiza un área de entrada de texto grande. STRING STRING ""
SELECT_SINGLE Renderiza un menú desplegable con valores predefinidos. STRING (para defaultValue, options.label y options.value) STRING indefinido
SELECT_RADIO Renderiza un selector de selección con valores predefinidos. STRING (para defaultValue, options.label y options.value) STRING indefinido
FILL_COLOR Renderiza un selector de color de relleno. Los valores válidos son códigos de color hexadecimales. STRING | OBJECT<Color> OBJECT<Color> Determinada por el tema.
BORDER_COLOR Renderiza un selector de color de borde. Los valores válidos son códigos de color hexadecimales. STRING | OBJECT<Color> OBJECT<Color> Determinada por el tema.
AXIS_COLOR Renderiza un selector de color de eje. Los valores válidos son códigos de color hexadecimales. STRING | OBJECT<Color> OBJECT<Color> Determinada por el tema.
GRID_COLOR Renderiza un selector de color de cuadrícula. Los valores válidos son códigos de color hexadecimales. STRING | OBJECT<Color> OBJECT<Color> Determinada por el tema.
OPORTUNIDAD Renderiza un selector de opacidad, la unidad es %. Los valores válidos van de 0 a 1 en incrementos de 0.1 NUMBER NUMBER 1
LINE_WEIGHT Renderiza un selector de grosor de línea. Los valores válidos van del 0 al 5. 0 se renderizará como None en el menú desplegable. NUMBER NUMBER
LINE_STYLE Renderiza un selector de estilo de línea. Valores predeterminados aceptables: solid, dashed, dotted, double. STRING STRING "solid"
BORDER_RADIUS Renderiza un selector de radio de borde. Los valores válidos son 0, 1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 40, 50, 60, 70, 80, 90, 100. NUMBER NUMBER Determinada por el tema.
INTERVAL Renderiza un selector de intervalo. Los valores son números enteros. NUMBER NUMBER 0

Los elementos de estilo configuran los íconos que se muestran en la pestaña Style del panel Propiedad.

Opciones de elemento de estilo

Algunos elementos de estilo admiten opciones

options: array(options)
Valor enum Objeto de opciones
SELECT_SINGLE
        {
            label: `string`,
            value: `string`
        }
        
SELECT_RADIO
        {
            label: `string`,
            value: `string`
        }
        
INTERVAL
        {
            max: `number`,
            min: `number`
        }
        

Data Types

Objeto<Color>

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING<Color>

Un valor de cadena que contiene un código de color hexadecimal.

Ejemplo

"color": "#0000ff"

NUMBER<Opacity>

Un valor numérico del 0 al 1 en incrementos de 0.10

Ejemplo

"opacity": 0.2

InteractionType

InteractionTypes configuran las opciones de interacción disponibles en el estilo Data del panel Property. Por el momento, solo se admite "FILTER".

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

Configuración de ejemplo

{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "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": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}