Visualization
Este componente toma los datos y la configuración del contexto de la consulta y renderiza la visualización adecuada. Para personalizar el ancho y la altura, pasa valores de píxeles numéricos a esas propiedades.
| Propiedad | Valores | Notas |
|---|---|---|
width
|
número (en píxeles) | El valor predeterminado es 100% cuando la propiedad no está definida. |
height
|
número (en píxeles) | El valor predeterminado es de 500 px cuando la propiedad no está definida. |
chartTypeMap
|
objeto de par clave-valor | Acepta un objeto de clave-valor que define qué componente renderizar cuando el sistema de adaptador encuentra valores de tipo de gráfico específicos. Se puede usar para anular los gráficos predeterminados de Looker o agregar nuevos tipos de gráficos al sistema de adaptadores. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'
<Query query='12345' config={{ type: 'radar'}}>
<Visualization
width={1000}
height={500}
chartTypeMap={{ radar: MyCustomRadar}}
/>
</Query>
Query
Query se integra en nuestra API de JavaScript para controlar el ciclo de solicitud y respuesta, y para obtener una respuesta de consulta por el ID de consulta o el valor qid. Puedes pasar anulaciones de configuración de visualización para combinarlas con la respuesta de la API y cargar todos los datos en el contexto de React.
| Propiedad | Valores | Notas |
|---|---|---|
query
|
number | string | Puede aceptar Query.client_id, que aparece después de la propiedad qid en la URL de Explorar (3fdrdE0b3ATltUvXBaSOPN), o un ID de consulta numérico (1234). Si tienes acceso al ID de consulta numérico, comenzar desde este valor puede ahorrar una solicitud de servidor adicional.Query acepta la propiedad query o la propiedad dashboard, pero no ambas.
|
dashboard
|
número | Puede aceptar un ID de panel numérico (1234). Si tienes acceso al ID de panel numérico, comenzar desde este valor puede ahorrar una solicitud de servidor adicional.dashboard no acepta los IDs de cadena de los paneles de LookML.Query acepta la propiedad query o la propiedad dashboard, pero no ambas.
|
config
|
Según el valor de type, se aceptan las siguientes propiedades:type, legend, positioning, render_null_values, tooltips, series, x_axis y y_axis Consulta la documentación específica del gráfico más adelante en esta página para conocer los valores admitidos.
|
Establece y anula la configuración de los gráficos. |
LoadingIndicator
|
referencia de componente | Acepta una referencia de componente no activado. Valor predeterminado: ProgressCircular
|
import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'
<Query
query='12345'
config={{
/* specific properties described later on this page */
}}
LoadingIndicator={ProgressCircular}
>
<Visualization />
</Query>
Propiedades del gráfico de áreas
A continuación, se muestran las propiedades de config para los gráficos de áreas.
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'area'
|
|
legend
|
false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' }
|
Establece la posición de la leyenda o la inhabilita si la configuras como false.Valor predeterminado: { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Modo de apilamiento de gráficos. Valor predeterminado: 'overlay'
|
render_null_values
|
booleano | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección series para obtener opciones de configuración y ejemplos de uso. |
x_axis
|
configuración del eje x | Consulta la sección eje x para ver las opciones de configuración y ejemplos de uso. |
y_axis
|
Configuración del eje Y | Consulta la sección Eje Y para ver las opciones de configuración y los ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
legend: { position: 'left' },
positioning: 'stacked',
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propiedad series puede aceptar un array de configuraciones de series o un objeto con nombre que anule una serie específica en tu respuesta.
| Propiedad | Valores | Notas |
|---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
line_width
|
número | Establece el ancho del trazo de la línea en píxeles. Predeterminado: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establecer forma de punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Establece el estilo del punto. Predeterminado: 'none' (puntos inhabilitados)
|
visible
|
booleano | Oculta o muestra la serie de datos. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'area',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
}
}
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'area',
series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
}}
>
<Visualization />
</Query>
x_axis
Si bien por el momento nuestros gráficos solo admiten un eje x, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false
|
label
|
false (para ocultar la etiqueta) | string (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje x. Predeterminado: false (sin etiqueta)
|
reversed
|
booleano | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Configuración predeterminada: true |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Si bien por el momento nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar la etiqueta) | cadena (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Valor predeterminado: false (sin etiqueta)
|
range
|
[número (min) | 'auto', número (máx.) | 'auto' |
Establece el valor mínimo y máximo del eje Y. Si estableces el valor mínimo en 'auto', el valor predeterminado es 0, y si estableces el valor máximo en 'auto', el valor predeterminado es el valor máximo del punto de datos en el conjunto. Predeterminada: ['auto' | 'auto'].
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'area',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propiedades del gráfico de barras y columnas
Las siguientes son las propiedades de config para los gráficos de barras y columnas.
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'bar' | 'column'
|
|
legend
|
false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' }
|
Establece la posición de la leyenda o la inhabilita al establecerla en false. Predeterminada: { position: 'bottom' }
|
positioning
|
'grouped' | 'stacked' | 'percent'
|
Modo de apilado de gráficos. Valor predeterminado: 'overlay'
|
tooltips
|
booleano | Habilita o inhabilita las herramientas de ayuda que aparecen cuando colocas el cursor sobre los datos.Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección series para obtener opciones de configuración y ejemplos de uso. |
x_axis
|
Configuración del eje X | Consulta la sección Eje x para ver las opciones de configuración y los ejemplos de uso. |
y_axis
|
configuración del eje Y | Consulta la sección Eje Y para ver las opciones de configuración y los ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'bar',
legend: { position: 'left' },
positioning: 'stacked',
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propiedad series puede aceptar un array de configuraciones de serie o un objeto con nombre que anule una serie específica en tu respuesta.
| Propiedad | Valores | Notas |
|---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
visible
|
booleano | Oculta o muestra la serie de datos. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'column',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
visible: false,
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'column',
series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
}}
>
<Visualization />
</Query>
x_axis
Si bien por el momento nuestros gráficos solo admiten un eje x, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar la etiqueta) | string (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje x. Predeterminado: false (sin etiqueta)
|
reversed
|
booleano | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'column',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Si bien, en la actualidad, nuestros gráficos solo admiten un solo eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar la etiqueta) | cadena (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Valor predeterminado: false (sin etiqueta)
|
range
|
[número (min) | 'auto', número (máx.) | 'auto' |
Establece los valores mínimos y máximos del eje Y. Si estableces el valor mínimo en "auto", el valor predeterminado es 0, y si estableces el valor máximo en "auto", el valor predeterminado es el valor máximo del dato del conjunto. Valor predeterminado: ['auto' | 'auto'].
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'bar',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propiedades del gráfico de líneas
A continuación, se muestran las propiedades de config para los gráficos de líneas.
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'line'
|
|
legend
|
false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' }
|
Establece la posición de la leyenda o la inhabilita al establecerla en false. Predeterminada: { position: 'bottom' }
|
render_null_values
|
booleano | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección series para obtener opciones de configuración y ejemplos de uso. |
x_axis
|
Configuración del eje X | Consulta la sección Eje x para ver las opciones de configuración y los ejemplos de uso. |
y_axis
|
configuración del eje Y | Consulta la sección Eje Y para ver las opciones de configuración y los ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
legend: { position: 'left' },
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propiedad series puede aceptar un array de configuraciones de serie o un objeto con nombre que anule una serie específica en tu respuesta.
| Propiedad | Valores | Notas |
|---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
line_width
|
número | Establece el ancho del trazo de la línea en píxeles. Predeterminado: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establecer forma de punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Establece el estilo del punto. Predeterminado: 'none' (puntos inhabilitados)
|
visible
|
booleano | Oculta o muestra la serie de datos. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'line',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'line',
series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
}}
>
<Visualization />
</Query>
x_axis
Si bien, en la actualidad, nuestros gráficos solo admiten un solo eje X, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar la etiqueta) | string (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje x. Predeterminado: false (sin etiqueta)
|
reversed
|
booleano | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Si bien por el momento nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false
|
label
|
false (para ocultar la etiqueta) | cadena (valor para renderizar)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Valor predeterminado: false (sin etiqueta)
|
range
|
[número (min) | 'auto', número (máx.) | 'auto' |
Establece los valores mínimos y máximos del eje Y. Si estableces el valor mínimo en "auto", el valor predeterminado es 0, y si estableces el valor máximo en "auto", el valor predeterminado es el valor máximo del dato del conjunto. Valor predeterminado: ['auto' | 'auto'].
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'line',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propiedades del diagrama de dispersión
Las siguientes son las propiedades de config para los diagramas de dispersión.
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'scatter'
|
|
legend
|
false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' }
|
Establece la posición de la leyenda o la inhabilita al establecerla en false. Predeterminada: { position: 'bottom' }
|
render_null_values
|
booleano | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección series para obtener opciones de configuración y ejemplos de uso. |
x_axis
|
configuración del eje x | Consulta la sección eje x para ver las opciones de configuración y ejemplos de uso. |
y_axis
|
configuración del eje Y | Consulta la sección Eje Y para ver las opciones de configuración y los ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
legend: { position: 'left' },
render_null_values: true,
tooltips: true,
}}
>
<Visualization />
</Query>
series
La propiedad series puede aceptar un array de configuraciones de serie o un objeto con nombre que anule una serie específica en tu respuesta.
| Propiedad | Valores | Notas |
|---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
line_width
|
número | Se usa para establecer el tamaño de los puntos en un diagrama de dispersión. Piensa en ello como el valor del esquema de cada punto. Valor predeterminado: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establecer forma de punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Establece el estilo del punto. Valor predeterminado: 'none' (puntos inhabilitados)
|
size_by
|
false | cadena
|
Es el nombre de la serie para la que se debe calibrar el tamaño de cada punto. Establece false para inhabilitar el ajuste de tamaño dinámico de los puntos. Predeterminada: false
|
visible
|
booleano | Oculta o muestra la serie de datos. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: {
'orders.count': {
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
size_by: 'orders.count',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: [
{
color: '#4285F4',
label: 'Total Orders',
shape: 'square',
size_by: 'orders.count',
},
],
}}
>
<Visualization />
</Query>
x_axis
Si bien por el momento nuestros gráficos solo admiten un eje x, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar la etiqueta) | string (valor para procesar)
|
Establece el valor que se renderizará como la etiqueta del eje x. Predeterminado: false (sin etiqueta)
|
reversed
|
booleano | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
}}
>
<Visualization />
</Query>
y_axis
Si bien por el momento nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
booleano | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar la etiqueta) | cadena (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Valor predeterminado: false (sin etiqueta)
|
range
|
[número (min) | 'auto', número (máx.) | 'auto' |
Establece los valores mínimos y máximos del eje Y. Si estableces el valor mínimo en "auto", el valor predeterminado es 0, y si estableces el valor máximo en "auto", el valor predeterminado es el valor máximo del dato del conjunto. Valor predeterminado: ['auto' | 'auto'].
|
values
|
booleano | Oculta o muestra los valores renderizados junto con el eje. Valor predeterminado: true
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'scatter',
y_axis: [
{ gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propiedades del gráfico de valor único
Las siguientes son las propiedades de config para los gráficos de un solo valor.
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'single_value'
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query query='12345' config={{ type: 'single_value' }}>
<Visualization />
</Query>
Propiedades del minigráfico
A continuación, se muestran las propiedades de config para los minigráficos.
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'sparkline'
|
|
render_null_values
|
booleano | Trata los valores nulos como 0. Valor predeterminado: false
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de serie para ver las opciones de configuración y ejemplos de uso. |
y_axis
|
Configuración del eje Y | Consulta la sección Eje Y para ver las opciones de configuración y los ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query="12345"
config={{ type: 'sparkline', render_null_values: true }}
>
<Visualization />
</Query>
series
Aunque, de forma inherente, los gráficos Sparkline solo admiten una sola serie, mantenemos un patrón de API que incluye anulaciones de series nombradas o de array para mantener la coherencia con los otros tipos de gráficos de nuestra biblioteca.
| Propiedad | Valores | Notas |
|---|---|---|
color
|
string | Código hexadecimal |
line_width
|
número | Establece el ancho del trazo de la línea en píxeles. Valor predeterminado: 3
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
/* named series overrides */
<Query
query='12345'
config={{
type: 'sparkline',
series: {
'orders.count': {
color: '#4285F4',
line_width: 10,
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'scatter',
series: [
{
color: '#4285F4',
line_width: 10,
},
],
}}
>
<Visualization />
</Query>
y_axis
Si bien por el momento nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
range
|
[número (mín.) | 'auto', número (máx.) | 'auto' |
Establece los valores mínimos y máximos del eje Y. Configurando el mínimo como “automático” la configuración predeterminada es 0 y establecer el máximo en “automático” se establece de forma predeterminada en el valor máximo de datos del conjunto. Valor predeterminado: ['auto' | 'auto'].
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'sparkline',
y_axis: [
{ range: [50, 'auto'] },
],
}}
>
<Visualization />
</Query>
Propiedades del gráfico de tabla
A continuación, se muestran las propiedades de config para los gráficos de tabla.
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'table'
|
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de serie para ver las opciones de configuración y ejemplos de uso. |
column_order
|
string[]
|
Es un array de nombres de series (por ejemplo, 'orders.count') que indica cómo deseas que se ordenen las columnas de la tabla de izquierda a derecha.
|
show_row_numbers
|
boolean
|
Activa o desactiva la visualización de la fila de totales en la parte inferior de la tabla. Valor predeterminado: true
|
show_totals
|
boolean
|
Activa o desactiva la visualización de la fila de totales en la parte inferior de la tabla. Valor predeterminado: true
|
show_row_totals
|
boolean
|
Activa o desactiva la visualización de los totales de las filas en el lado derecho de la tabla. Valor predeterminado: true
|
truncate_text
|
boolean
|
Cuando es true, el texto de las celdas de la tabla se limita a una sola línea y el desbordamiento de contenido se trunca con puntos suspensivos. Cuando es false, el contenido se puede unir en varias líneas. Predeterminada: true.
|
truncate_header
|
boolean
|
Cuando es true, las etiquetas del encabezado de la tabla se limitan a una sola línea y el desbordamiento de contenido se trunca con puntos suspensivos. Cuando es false, los encabezados pueden unirse a varias líneas. Predeterminada: true.
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'table',
column_order: ['orders.count', 'users.city'],
show_row_numbers: true,
show_totals: true,
show_row_totals: true,
truncate_text: true,
truncate_header: true
}}
>
<Visualization />
</Query>
series
La propiedad series puede aceptar un array de configuraciones de series o un objeto con nombre que anule una serie específica en tu respuesta.
| Propiedad | Valores | Notas |
|---|---|---|
cell_visualization
|
boolean
|
Activa o desactiva la visualización de celda intercalada. El valor predeterminado es true para la primera medición y false para las demás.
|
color
|
string
|
Especifica el color que se usa para renderizar la visualización de celdas de la tabla. |
value_format
|
string
|
Es una cadena de formato de número que indica si se deben renderizar los valores como moneda, la precisión de punto flotante, si se deben usar comas o puntos para delinear miles, etcétera. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'table',
series: {
'orders.count': {
color: '#4285F4',
cell_visualization: true,
value_format: '$#,##0.00',
},
},
}}
>
<Visualization />
</Query>
/* ordered list series overrides */
<Query
query='12345'
config={{
type: 'table',
series: [{
color: '#4285F4',
cell_visualization: true,
value_format: '$#,##0.00',
}]
}}
>
<Visualization />
</Query>
Propiedades del gráfico circular
A continuación, se muestran las propiedades de config para los gráficos circulares.
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'pie'
|
|
legend
|
false (para inhabilitar) | configuración de la leyenda
|
Si se establece en false, se inhabilita la leyenda. Configuración predeterminada: Habilitada. Consulta la sección Leyenda para conocer las opciones de configuración y ejemplos de uso cuando están habilitados.
|
tooltips
|
booleano | Habilita o inhabilita los cuadros de información que aparecen cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de serie para ver las opciones de configuración y ejemplos de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
legend: false,
tooltips: true,
}}
>
<Visualization />
</Query>
legend
La propiedad legend puede aceptar las siguientes configuraciones de leyendas:
| Propiedad | Valores | Notas |
|---|---|---|
type
|
'labels' | 'legend'
|
labels coloca las etiquetas que apuntan directamente a cada porción. legend coloca una leyenda independiente. Predeterminada: 'legend'.
|
position
|
'top' | 'bottom' | 'left' | 'right'
|
Posiciona la leyenda cuando type: 'legend'. Predeterminada: 'right'
|
width
|
número | Ancho máximo de la leyenda en píxeles cuando es type: 'legend'. Predeterminada: 300
|
value
|
'label' | 'label_value' | 'value' | 'percent' | 'label_percent'
|
Establece el contenido de la leyenda: etiqueta, etiqueta y valor, valor, porcentaje, etiqueta y porcentaje. Valor predeterminado: 'label_percent'
|
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
legend: {
type: 'legend'
position: 'right'
width: 200,
value: 'label_value',
},
}}
>
<Visualization />
</Query>
series
A diferencia de los gráficos cartesianos, cada dato de un gráfico circular se considera una serie nueva:
| Propiedad | Valores | Notas |
|---|---|---|
color
|
string | Código hexadecimal |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query='12345'
config={{
type: 'pie',
series: {
'New York': {
color: '#4285F4',
},
'Los Angeles': {
color: '#b73ec3',
},
'Chicago': {
color: '#db4da8',
},
},
}}
>
<Visualization />
</Query>