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"]
}
]
}