Visualization
Este componente toma los datos y la configuración del contexto de la consulta y renderiza la visualización adecuada. Puedes pasar los valores de píxeles numéricos a esas propiedades para personalizar el ancho y la altura.
Propiedad | Valores | Notas |
---|---|---|
width
|
número (en píxeles) | El valor predeterminado es del 100% cuando la prop no está definida. |
height
|
número (en píxeles) | El valor predeterminado es de 500 px cuando la prop no está definida. |
chartTypeMap
|
objeto de par clave-valor | Acepta un objeto de par clave-valor que define qué componente se debe renderizar cuando el sistema adaptador encuentra valores de tipo de gráfico específicos. Se puede usar para anular los gráficos predeterminados de Looker o para agregar nuevos tipos de gráficos al sistema adaptador. |
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 a nuestra API de JavaScript para controlar el ciclo de solicitud/respuesta y obtener una respuesta a la consulta según 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 tener todos los datos cargados en el contexto de React.
Propiedad | Valores | Notas |
---|---|---|
query
|
número | cadena | Puede aceptar el Query.client_id , que aparece después de la propiedad qid en la URL de una exploración, (3fdrdE0b3ATltUvXBaSOPN ), o un ID de consulta numérico (1234 ). Si tienes acceso al ID de consulta numérico, a partir de este valor se puede guardar una solicitud de servidor adicional.Query acepta la prop query o la prop dashboard , pero no ambas.
|
dashboard
|
número | Puede aceptar un ID numérico del panel (1234 ). Si tienes acceso al ID numérico del panel, puedes guardar una solicitud de servidor adicional a partir de este valor.dashboard no acepta los IDs de string de los paneles de Looker.Query acepta la prop query o la prop dashboard , pero no ambas.
|
config
|
Según el valor de type , acepta 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.
|
Establecer y anular la configuración de los gráficos |
LoadingIndicator
|
referencia de componente | Acepta una referencia de componente desactivado. Valor predeterminado: ProgressCircular
|
import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'
<Query
query='12345'
config={{
/* specific properties described below */
}}
LoadingIndicator={ProgressCircular}
>
<Visualization />
</Query>
Propiedades del gráfico de áreas
Las siguientes son 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 mediante su configuración en false .Valor predeterminado: { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Modo de apilado de gráficos Valor predeterminado: 'overlay'
|
render_null_values
|
boolean | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
boolean | Habilita o inhabilita la información sobre la herramienta que aparece cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de series para ver las opciones de configuración y ejemplos de uso. |
x_axis
|
configuración del eje x | Consulta la sección del eje x para ver las opciones de configuración y un ejemplo de uso. |
y_axis
|
configuración del eje Y | Consulta la sección del eje y para ver las opciones de configuración y un ejemplo 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 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. Valor predeterminado: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establece la forma de un punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Establecer estilo de punto Valor predeterminado: 'none' (puntos inhabilitados)
|
visible
|
boolean | Muestra u oculta 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
Aunque actualmente 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 múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
boolean | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false
|
label
|
false (para ocultar la etiqueta) | string (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje x. Valor predeterminado: false (sin etiqueta)
|
reversed
|
boolean | Invierte el orden de los puntos de datos. Valor predeterminado: false
|
values
|
boolean | Oculta o muestra los valores renderizados a lo largo del 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
Aunque actualmente nuestros gráficos solo admiten un eje Y único, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
boolean | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | string (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Valor predeterminado: false (sin etiqueta)
|
range
|
[número (mín.) | 'auto' , número (máx.) | 'auto' |
Fija el valor mínimo y máximo del eje Y. Si se establece el valor mínimo como 'auto' , el valor predeterminado es 0, y el máximo, en 'auto' , se establece de forma predeterminada en el valor máximo de datos del conjunto. Predeterminada: ['auto' | 'auto'] .
|
values
|
boolean | Oculta o muestra los valores renderizados a lo largo del 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 mediante su configuración en false . Predeterminada: { position: 'bottom' }
|
positioning
|
'grouped' | 'stacked' | 'percent'
|
Modo de apilado de gráficos Valor predeterminado: 'overlay'
|
tooltips
|
boolean | Habilita o inhabilita la información sobre la herramienta que aparece cuando se coloca el cursor sobre los datos.Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de series para ver las opciones de configuración y ejemplos de uso. |
x_axis
|
configuración del eje x | Consulta la sección del eje x para ver las opciones de configuración y un ejemplo de uso. |
y_axis
|
configuración del eje Y | Consulta la sección del eje y para ver las opciones de configuración y un ejemplo 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
|
boolean | Muestra u oculta 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
Aunque actualmente 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 múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
boolean | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | string (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje x. Valor predeterminado: false (sin etiqueta)
|
reversed
|
boolean | Invierte el orden de los puntos de datos. Valor predeterminado: false
|
values
|
boolean | Oculta o muestra los valores renderizados a lo largo del 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
Aunque actualmente nuestros gráficos solo admiten un eje Y único, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
boolean | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | string (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Valor predeterminado: false (sin etiqueta)
|
range
|
[número (mín.) | 'auto' , número (máx.) | 'auto' |
Fija el valor mínimo y máximo del eje Y. Si se establece el valor de mín. en 'auto', se establece el valor predeterminado 0 y si se establece el valor máximo en 'auto', se establece el valor máximo de datos del conjunto. Valor predeterminado: ['auto' | 'auto'] .
|
values
|
boolean | Oculta o muestra los valores renderizados a lo largo del 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
Las siguientes son 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 mediante su configuración en false . Predeterminada: { position: 'bottom' }
|
render_null_values
|
boolean | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
boolean | Habilita o inhabilita la información sobre la herramienta que aparece cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de series para ver las opciones de configuración y ejemplos de uso. |
x_axis
|
configuración del eje x | Consulta la sección del eje x para ver las opciones de configuración y un ejemplo de uso. |
y_axis
|
configuración del eje Y | Consulta la sección del eje y para ver las opciones de configuración y un ejemplo 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. Valor predeterminado: 3 |
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establece la forma de un punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Establecer estilo de punto Valor predeterminado: 'none' (puntos inhabilitados)
|
visible
|
boolean | Muestra u oculta 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
Aunque actualmente 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 múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
boolean | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | string (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje x. Valor predeterminado: false (sin etiqueta)
|
reversed
|
boolean | Invierte el orden de los puntos de datos. Valor predeterminado: false
|
values
|
boolean | Oculta o muestra los valores renderizados a lo largo del 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
Aunque actualmente nuestros gráficos solo admiten un eje Y único, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
boolean | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false
|
label
|
false (para ocultar la etiqueta) | string (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Valor predeterminado: false (sin etiqueta)
|
range
|
[número (mín.) | 'auto' , número (máx.) | 'auto' |
Fija el valor mínimo y máximo del eje Y. Si se establece el valor de mín. en 'auto', se establece el valor predeterminado 0 y si se establece el valor máximo en 'auto', se establece el valor máximo de datos del conjunto. Valor predeterminado: ['auto' | 'auto'] .
|
values
|
boolean | Oculta o muestra los valores renderizados a lo largo del 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
de 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 mediante su configuración en false . Predeterminada: { position: 'bottom' }
|
render_null_values
|
boolean | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
boolean | Habilita o inhabilita la información sobre la herramienta que aparece cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de series para ver las opciones de configuración y ejemplos de uso. |
x_axis
|
configuración del eje x | Consulta la sección del eje x para ver las opciones de configuración y un ejemplo de uso. |
y_axis
|
configuración del eje Y | Consulta la sección del eje y para ver las opciones de configuración y un ejemplo 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 contorno de cada punto. Valor predeterminado: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establece la forma de un punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Establecer estilo de punto Valor predeterminado: 'none' (puntos inhabilitados)
|
size_by
|
false | cadena
|
Nombre de serie para la que se calibra el tamaño de cada punto. Configura false para inhabilitar el tamaño de puntos dinámicos. Predeterminada: false
|
visible
|
boolean | Muestra u oculta 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
Aunque actualmente 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 múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
boolean | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | string (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje x. Valor predeterminado: false (sin etiqueta)
|
reversed
|
boolean | Invierte el orden de los puntos de datos. Valor predeterminado: false
|
values
|
boolean | Oculta o muestra los valores renderizados a lo largo del 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
Aunque actualmente nuestros gráficos solo admiten un eje Y único, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
gridlines
|
boolean | Oculta o muestra las líneas de cuadrícula verticales. Valor predeterminado: false .
|
label
|
false (para ocultar la etiqueta) | string (valor que se renderizará)
|
Establece el valor que se renderizará como la etiqueta del eje Y. Valor predeterminado: false (sin etiqueta)
|
range
|
[número (mín.) | 'auto' , número (máx.) | 'auto' |
Fija el valor mínimo y máximo del eje Y. Si se establece el valor de mín. en 'auto', se establece el valor predeterminado 0 y si se establece el valor máximo en 'auto', se establece el valor máximo de datos del conjunto. Valor predeterminado: ['auto' | 'auto'] .
|
values
|
boolean | Oculta o muestra los valores renderizados a lo largo del 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 config
para los gráficos de valor único.
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 gráfico de minigráfico
Las siguientes son las propiedades de config
para los minigráficos.
Propiedad | Valores | Notas |
---|---|---|
type
|
'sparkline'
|
|
render_null_values
|
boolean | Trata los valores nulos como 0. Valor predeterminado: false
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de series para ver las opciones de configuración y ejemplos de uso. |
y_axis
|
configuración del eje Y | Consulta la sección del eje y para ver las opciones de configuración y un ejemplo de uso. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query="12345"
config={{ type: 'sparkline', render_null_values: true }}
>
<Visualization />
</Query>
series
Si bien Sparkline es compatible por sí solo con una serie, mantenemos un patrón de API que incluya anulaciones de series con nombre o 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
Aunque actualmente nuestros gráficos solo admiten un eje Y único, nuestra API está preparada para el futuro y está estructurada para admitir la configuración de múltiples ejes.
Propiedad | Valores | Notas |
---|---|---|
range
|
[número (mín.) | 'auto' , número (máx.) | 'auto' |
Fija el valor mínimo y máximo del eje Y. Si se establece el valor de mín. en 'auto', se establece el valor predeterminado 0 y si se establece el valor máximo en 'auto', se establece 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
Las siguientes son 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 series para ver las opciones de configuración y ejemplos de uso. |
column_order
|
string[]
|
Un array de nombres de series (por ejemplo, 'orders.count' ) que indica cómo quieres 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 la fila en el lado derecho de la tabla. Valor predeterminado: true
|
truncate_text
|
boolean
|
Cuando es true , el texto de la celda 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 puede ajustarse a varias líneas. Predeterminada: true .
|
truncate_header
|
boolean
|
Cuando es true , las etiquetas de 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 ajustarse 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 de serie 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 |
---|---|---|
cell_visualization
|
boolean
|
Activa o desactiva la visualización de celdas intercalada. La configuración predeterminada 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
|
Una string de formato de número que indica si los valores se deben renderizar 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
Las siguientes son las propiedades de config
para los gráficos circulares.
Propiedad | Valores | Notas |
---|---|---|
type
|
'pie'
|
|
legend
|
false (para inhabilitar) | Configuración de leyenda
|
Si se establece en false , se inhabilita la leyenda. Valor predeterminado: habilitado. Consulta la sección Leyenda para conocer las opciones de configuración y el ejemplo de uso cuando está habilitado.
|
tooltips
|
boolean | Habilita o inhabilita la información sobre la herramienta que aparece cuando se coloca el cursor sobre los datos. Valor predeterminado: true
|
series
|
serie en formato view_name.field_name
|
Consulta la sección de series 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 leyenda:
Propiedad | Valores | Notas |
---|---|---|
type
|
'labels' | 'legend'
|
labels coloca etiquetas que apuntan directamente a cada porción. legend coloca una leyenda independiente. Predeterminada: 'legend' .
|
position
|
'top' | 'bottom' | 'left' | 'right'
|
Coloca la leyenda cuando type: 'legend' . Predeterminada: 'right'
|
width
|
número | Es el ancho máximo de la leyenda en píxeles cuando type: 'legend' . Predeterminada: 300
|
value
|
'label' | 'label_value' | 'value' | 'percent' | 'label_percent'
|
Configura 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 punto de datos en un gráfico circular se trata como 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>