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 utilería es indefinida. |
height
|
número (en píxeles) | 500 px cuando la utilería es indefinida. |
chartTypeMap
|
objeto clave-valor | Acepta un objeto de clave-valor que define qué componente se debe procesar cuando el sistema del 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 del 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 con nuestra API de JavaScript para controlar el ciclo de solicitud/respuesta y obtener una respuesta de consulta mediante el ID de consulta o el valor qid. Puede pasar las anulaciones de configuración de vis 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 | string | Puede aceptar la Query.client_id, que aparece después de la propiedad qid en una URL de Explorar (3fdrdE0b3ATltUvXBaSOPN), o un ID de consulta numérico (1234). Si tienes acceso al ID de la consulta numérica, a partir de este valor puedes guardar una solicitud de servidor adicional.Query acepta la propulación query o la dashboard, pero no ambas.
|
dashboard
|
número | Se puede aceptar un ID de panel numérico (1234). Si tienes acceso al ID de panel numérico, a partir de este valor se puede guardar una solicitud de servidor adicional.dashboard no acepta los ID de string de los paneles de LookML.Query acepta los props de query o dashboard, pero no ambos.
|
config
|
Según el valor type, se aceptan las siguientes propiedades:type, legend, positioning, render_null_values, tooltips, series, x_axis, y_axisConsulta la documentación específica del gráfico más adelante en esta página para conocer los valores admitidos. |
Establece y anula los ajustes de configuración para los gráficos. |
LoadingIndicator
|
referencia del componente | Acepta una referencia de componente desactivada. 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 área.
| 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 configurándola en false.Configuración predeterminada: { 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 | Habilitar o inhabilitar la información sobre la herramienta que aparece cuando se desplaza el cursor sobre los datos Valor predeterminado: true
|
series
|
series en formato view_name.field_name
|
Consulta la sección series para ver las opciones de configuración y el uso de ejemplo. |
x_axis
|
configuración del eje x | Consulta la sección del eje x para ver las opciones de configuración y el uso de ejemplo. |
y_axis
|
configuración del eje y | Consulta la sección del eje y para ver las opciones de configuración y el uso de ejemplo. |
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 arreglo 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 | Establezca 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'
|
Establecer estilo de punto 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 a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
boolean | Muestra u oculta las líneas de cuadrícula verticales. Valor predeterminado: false
|
label
|
false (para ocultar etiqueta) | string (valor para procesar)
|
Establece el valor para renderizar como la etiqueta del eje x. Predeterminado: false (sin etiqueta)
|
reversed
|
boolean | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
boolean | Muestra u oculta 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 solo eje Y, nuestra API está preparada para el futuro y está estructurada a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
boolean | Muestra u oculta las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar etiqueta) | string (valor para procesar)
|
Establece el valor para renderizar como la etiqueta del eje y. 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' en 0, el valor máximo en 'auto' se establece en la puntuación máxima de datos del conjunto. Predeterminada: ['auto' | 'auto'].
|
values
|
boolean | Muestra u oculta 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 con la configuración 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 desplaza el cursor sobre los datos. Configuración predeterminada: true
|
series
|
series en formato view_name.field_name
|
Consulta la sección series para ver las opciones de configuración y el uso de ejemplo. |
x_axis
|
configuración del eje x | Consulta la sección del eje x para ver las opciones de configuración y el uso de ejemplo. |
y_axis
|
configuración del eje y | Consulta la sección del eje y para ver las opciones de configuración y el uso de ejemplo. |
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 arreglo 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 a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
boolean | Muestra u oculta las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar etiqueta) | string (valor para procesar)
|
Establece el valor para renderizar como la etiqueta del eje x. Predeterminado: false (sin etiqueta)
|
reversed
|
boolean | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
boolean | Muestra u oculta 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 solo eje Y, nuestra API está preparada para el futuro y está estructurada a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
boolean | Muestra u oculta las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar etiqueta) | string (valor para procesar)
|
Establece el valor para renderizar como la etiqueta del eje y. 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 &auto3, el valor predeterminado es 0 y el valor máximo en “auto” se establece en la puntuación máxima de datos del conjunto. Valor predeterminado: ['auto' | 'auto'].
|
values
|
boolean | Muestra u oculta 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 con la configuración false. Predeterminada: { position: 'bottom' }
|
render_null_values
|
boolean | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
boolean | Habilitar o inhabilitar la información sobre la herramienta que aparece cuando se desplaza el cursor sobre los datos Valor predeterminado: true
|
series
|
series en formato view_name.field_name
|
Consulta la sección series para ver las opciones de configuración y el uso de ejemplo. |
x_axis
|
configuración del eje x | Consulta la sección del eje x para ver las opciones de configuración y el uso de ejemplo. |
y_axis
|
configuración del eje y | Consulta la sección del eje y para ver las opciones de configuración y el uso de ejemplo. |
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 arreglo 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 | Establezca 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'
|
Establecer estilo de punto 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 a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
boolean | Muestra u oculta las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar etiqueta) | string (valor para procesar)
|
Establece el valor para renderizar como la etiqueta del eje x. Predeterminado: false (sin etiqueta)
|
reversed
|
boolean | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
boolean | Muestra u oculta 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 solo eje Y, nuestra API está preparada para el futuro y está estructurada a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
boolean | Muestra u oculta las líneas de cuadrícula verticales. Valor predeterminado: false
|
label
|
false (para ocultar etiqueta) | string (valor para procesar)
|
Establece el valor para renderizar como la etiqueta del eje y. 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 &auto3, el valor predeterminado es 0 y el valor máximo en “auto” se establece en la puntuación máxima de datos del conjunto. Valor predeterminado: ['auto' | 'auto'].
|
values
|
boolean | Muestra u oculta 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 gráfico 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 con la configuración false. Predeterminada: { position: 'bottom' }
|
render_null_values
|
boolean | Trata los valores nulos como 0. Valor predeterminado: false
|
tooltips
|
boolean | Habilitar o inhabilitar la información sobre la herramienta que aparece cuando se desplaza el cursor sobre los datos Valor predeterminado: true
|
series
|
series en formato view_name.field_name
|
Consulta la sección series para ver las opciones de configuración y el uso de ejemplo. |
x_axis
|
configuración del eje x | Consulta la sección del eje x para ver las opciones de configuración y el uso de ejemplo. |
y_axis
|
configuración del eje y | Consulta la sección del eje y para ver las opciones de configuración y el uso de ejemplo. |
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 arreglo 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. Considérelo como el valor resumido de cada punto. Valor predeterminado: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Establecer forma de punto. Valor predeterminado: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Establecer estilo de punto Predeterminado: 'none' (puntos inhabilitados)
|
size_by
|
false | string
|
Nombre de la serie para el que se debe calibrar el tamaño de cada punto. Configura false para inhabilitar el tamaño de puntos dinámico. 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 a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
boolean | Muestra u oculta las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar etiqueta) | string (valor para procesar)
|
Establece el valor para renderizar como la etiqueta del eje x. Predeterminado: false (sin etiqueta)
|
reversed
|
boolean | Invierte el orden de los datos. Valor predeterminado: false
|
values
|
boolean | Muestra u oculta 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 solo eje Y, nuestra API está preparada para el futuro y está estructurada a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
gridlines
|
boolean | Muestra u oculta las líneas de cuadrícula verticales. Valor predeterminado: false.
|
label
|
false (para ocultar etiqueta) | string (valor para procesar)
|
Establece el valor para renderizar como la etiqueta del eje y. 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 &auto3, el valor predeterminado es 0 y el valor máximo en “auto” se establece en la puntuación máxima de datos del conjunto. Valor predeterminado: ['auto' | 'auto'].
|
values
|
boolean | Muestra u oculta 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 de config para 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 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
|
series en formato view_name.field_name
|
Consulta la sección series para ver las opciones de configuración y el uso de ejemplo. |
y_axis
|
configuración del eje y | Consulta la sección del eje y para ver las opciones de configuración y el uso de ejemplo. |
Ejemplo de uso:
import { Visualization, Query } from '@looker/visualizations'
<Query
query="12345"
config={{ type: 'sparkline', render_null_values: true }}
>
<Visualization />
</Query>
series
Aunque Sparkline inherentemente solo admite una serie, mantenemos un patrón de API que implica anulaciones de series con nombre o arreglo para mantener la coherencia con los otros tipos de gráficos en nuestra biblioteca.
| Propiedad | Valores | Notas |
|---|---|---|
color
|
string | Código hexadecimal |
line_width
|
número | Establezca 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 solo eje Y, nuestra API está preparada para el futuro y está estructurada a fin de admitir la configuración de varios ejes.
| Propiedad | Valores | Notas |
|---|---|---|
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 &auto3, el valor predeterminado es 0 y el valor máximo en “auto” se establece en la puntuación máxima 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
|
series en formato view_name.field_name
|
Consulta la sección series para ver las opciones de configuración y el uso de ejemplo. |
column_order
|
string[]
|
Un arreglo de nombres de series (por ejemplo, 'orders.count') que indica cómo te gustaría que las columnas de la tabla se ordenen 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 opción de mostrar 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 una elipsis. Cuando el valor es false, el contenido puede ajustarse a varias líneas. Predeterminada: true.
|
truncate_header
|
boolean
|
Cuando es true, las etiquetas del encabezado de 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 arreglo 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 medida y false para las otras.
|
color
|
string
|
Especifica el color que se usará para renderizar la visualización de celda de la tabla. |
value_format
|
string
|
Una string de formato numérico que indica si los valores se procesan como moneda, la precisión de punto flotante, si se usan comas o puntos para delimitar 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. Predeterminado: habilitado Consulta la sección Leyenda para ver las opciones de configuración y el uso de ejemplo cuando esté habilitado.
|
tooltips
|
boolean | Habilitar o inhabilitar la información sobre la herramienta que aparece cuando se desplaza el cursor sobre los datos Valor predeterminado: true
|
series
|
series en formato view_name.field_name
|
Consulta la sección series para ver las opciones de configuración y el uso de ejemplo. |
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 etiquetas que apuntan directamente a cada segmento. legend coloca una leyenda independiente. Predeterminada: 'legend'.
|
position
|
'top' | 'bottom' | 'left' | 'right'
|
Coloca la leyenda cuando type: 'legend'. Predeterminada: 'right'
|
width
|
número | Ancho máximo de la leyenda en píxeles cuando 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 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>