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

La configuración de visualización define los atributos de datos y 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 Es el ID de la sección de datos. Debe ser una cadena que no esté vacía y no tenga espacios.
data[].label string Es la etiqueta de la sección de datos.
data[].elements[] string Los elementos de datos que se renderizarán.
data[].elements[].type Enumeración string(DataElement) El tipo de elemento de datos que se renderizará.
data[].elements[].id string El ID del elemento de datos. Debe ser una cadena que no esté vacía y no tenga espacios.
data[].elements[].label string Es la etiqueta de información para el elemento de datos.
data[].elements[].options object(DataElementOptions) Son las opciones de datos del elemento. Esto depende del tipo de Elemento de datos.
style[] Array(object) 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 que se renderizarán.
style[].id string El ID de la sección de estilo. Debe ser una cadena que no esté vacía y no tenga espacios.
style[].label string 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 diseño. Debe ser una cadena que no esté vacía y no tenga espacios.
style[].elements[].type Enumeración string(StyleElement) Es el tipo de elemento de diseño. P.ej., selector de fuentes.
style[].elements[].label string Información sobre la herramienta o etiqueta del elemento de diseño. Este es el texto de la etiqueta de un elemento de 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 elementos de diseño SELECT_SINGLE y SELECT_RADIO.
style[].elements[].defaultValue string OR object Es el valor predeterminado del elemento de diseño. Se ignorarán los valores no válidos.*
interactions[] Array(object) La configuración de interacciones de la visualización. Esta configuración determina si puede actuar o no como un filtro.
interactions[].id string El ID del elemento de interacción. Debe ser una cadena que no esté vacía y no tenga espacios.
interactions[].supportedActions Array (enum.(InteractionType) Las posibles interacciones admitidas
features object Las funciones que quieres habilitar o inhabilitar en tu visualización.
features.enableComparisonDateRange boolean Habilite 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. Para 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 enumerado Descripción
MÉTRICA 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 enumerado Tipo de opción Opciones disponibles
MÉTRICA Objeto max: number: la cantidad máxima de métricas
min: number (la cantidad mínima de métricas requeridas)
DIMENSIÓN Objeto max: number: La cantidad máxima de dimensiones admitidas.
mín.: Número (la cantidad mínima de dimensiones requeridas) Se admite
: la lista de tipos admitidos. supportedTypes puede incluir TIME, GEO o DEFAULT.
MAX_RESULTS Objeto max: number: La cantidad máxima de filas que la visualización puede solicitar. Valor predeterminado: 2500

StyleElement

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

Valor enumerado Descripción defaultValue Tipo de datos (configuración) value Tipo de datos (mensaje) Valor predeterminado
FONT_COLOR Renderiza el selector de color de la fuente. Los valores válidos son códigos de color hexadecimales. STRING | OBJECT<Color> STRING | OBJECT<Color> Determinado por 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 y 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, Locali STRING STRING Determinado por tema.
CASILLA DE VERIFICACIÓN Representa una casilla de verificación. BOOLEAN BOOLEAN false
TEXTINPUT Renderiza una casilla de entrada de texto. STRING STRING ""
TEXTAREA Renderiza un área de entrada de texto grande. STRING STRING ""
SELECT_SINGLE Renderiza un menú desplegable con valores predefinidos. STRING (para defaultValue y options.label y options.value) STRING indefinido
SELECT_RADIO Renderiza un selector de radio con valores predefinidos. STRING (para defaultValue y 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> Determinado por 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> Determinado por 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> Determinado por 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> Determinado por tema.
OPACIDAD 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 de 0 a 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 y 100. NUMBER NUMBER Determinado por tema.
INTERVAL Renderiza un selector de intervalos. Los valores son números enteros. NUMBER NUMBER 0

Los elementos de diseño configuran los íconos que se muestran en la pestaña Style de la propiedad. Panel.

Opciones de estilo del elemento

Algunos elementos de estilo admiten opciones

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

Tipos de datos

Objeto<Color>

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

STRING&lt;Color&gt;

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

Ejemplo

"color": "#0000ff"

NUMBER<Opacidad>

Un valor numérico de 0 a 1 en incrementos de 0.10

Ejemplo

"opacity": 0.2

InteractionType

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

Valor enumerado 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
  }
}