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