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