Tablas de propiedades de visualización y consulta

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) Es el 100% predeterminado cuando la propiedad no está definida.
height número (en píxeles) Es 500 px de forma predeterminada 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 visibilidad para que se combinen con la respuesta de la API y que todos los datos se carguen 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 una exploración, (3fdrdE0b3ATltUvXBaSOPN), o bien un ID de consulta numérico (1234). Si tienes acceso al ID de consulta numérico, empezar desde este valor puede guardar una solicitud de servidor adicional.

Query acepta la propiedad query o la dashboard, pero no ambas.
dashboard número Puede aceptar un ID de panel numérico (1234). Si tienes acceso al ID del panel numérico, empezar desde este valor puede guardar 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_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 del componente Acepta la referencia de un componente desactivado. 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 al establecerla en 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 de serie para ver las 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 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 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 del punto. Valor predeterminado: 'circle'
style 'none' | 'filled' | 'outline' Establece el estilo del punto. Valor predeterminado: 'none' (puntos inhabilitados)
visible booleano Oculta o muestra las series 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, 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) | cadena (valor para renderizar) Establece el valor que se renderizará como la etiqueta del eje x. Valor 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, 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) | string (valor para procesar) 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 min en 'auto', el valor predeterminado es 0, y si estableces max 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 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 al establecerla en false. Predeterminada: { position: 'bottom' }
positioning 'grouped' | 'stacked' | 'percent' Modo de apilamiento 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 de serie para ver las 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 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 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
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, 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. Valor predeterminado: false (sin etiqueta)
reversed booleano Invierte el orden de los datos. Valor predeterminado: false
values booleano 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

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) | string (valor para procesar) 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 dato del conjunto. Valor predeterminado: ['auto' | 'auto'].
values booleano 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 config de 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 si la configuras como 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 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. Valor predeterminado: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Establece la forma del punto. Valor predeterminado: 'circle'
style 'none' | 'filled' | 'outline' Establece el estilo del punto. Valor predeterminado: 'none' (puntos inhabilitados)
visible booleano Oculta o muestra las series 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 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. Valor predeterminado: false (sin etiqueta)
reversed booleano Invierte el orden de los datos. Valor predeterminado: false
values booleano 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

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 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 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 dato del conjunto. Valor predeterminado: ['auto' | 'auto'].
values booleano 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 gráfico de dispersión

Las siguientes son las propiedades config para los gráficos 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 si la configuras como 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 de serie para ver las 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 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 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' Establece la forma del punto. Valor predeterminado: 'circle'
style 'none' | 'filled' | 'outline' Establece el estilo del punto. Valor predeterminado: 'none' (puntos inhabilitados)
size_by false | cadena Nombre de la serie para la que se 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 las series 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, 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. Valor predeterminado: false (sin etiqueta)
reversed booleano Invierte el orden de los datos. Valor predeterminado: false
values booleano 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

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) | string (valor para procesar) 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 dato del conjunto. Valor predeterminado: ['auto' | 'auto'].
values booleano 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 de 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 minigráfico

Las siguientes son las propiedades config de los gráficos de líneas de tendencia.

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, 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
range [número (mín.) | '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 dato 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 series para obtener 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 Activar o desactivar la visualización de la fila de totales en la parte inferior de la tabla. Valor predeterminado: true
show_totals boolean Activar o desactivar 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 true, las etiquetas de encabezado de la tabla se limitan a una sola línea y el desbordamiento de contenido se trunca con una elipsis. 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 medida y false para las demás.
color string Especifica el color que se usa para renderizar la visualización de la celda de la tabla.
value_format string Una cadena de formato de número que indica si los valores se deben renderizar como monedas, la precisión de punto flotante, si se deben usar comas o puntos para definir 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 config de 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 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' 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 del gráfico cartesiano, 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>