Visualizar y consultar tablas de propiedades

Visualization

Este componente obtiene los datos y la configuración del contexto de la consulta y renderiza la visualización adecuada. Puedes personalizar la anchura y la altura asignando valores numéricos de píxeles a esas propiedades.

Propiedad Valores Notas
width Número (en píxeles) El valor predeterminado es 100% cuando la propiedad no está definida.
height Número (en píxeles) El valor predeterminado es 500 px cuando la propiedad no está definida.
chartTypeMap Objeto clave-valor Acepta un objeto clave/valor que define qué componente se debe renderizar cuando el sistema de adaptadores detecta valores de tipo de gráfico específicos. Se puede usar para anular los gráficos predeterminados de Looker o para añadir 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 gestionar el ciclo de solicitud/respuesta y obtener una respuesta de consulta por el ID de consulta o el valor qid. Puedes transferir anulaciones de configuración de visualización 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 se encuentra después de la propiedad qid en la URL de un Exploración (3fdrdE0b3ATltUvXBaSOPN), o un ID de consulta numérico (1234). Si tiene acceso al ID de consulta numérico, puede ahorrar una solicitud de servidor adicional.

Query acepta la propiedad query o la propiedad dashboard, pero no ambas.
dashboard número Puede aceptar un ID de panel de control numérico (1234). Si tienes acceso al ID de panel de control numérico, empezar por este valor puede ahorrar una solicitud de servidor adicional.

dashboard no acepta los IDs de cadena de los paneles de control de LookML.

Query acepta la propiedad query o la propiedad dashboard, pero no ambas.
config En función del valor de type, acepta las siguientes propiedades:

type, legend, positioning, render_null_values, tooltips, series, x_axis, y_axis

Consulta la documentación específica de cada gráfico más adelante en esta página para ver los valores admitidos. 		Definir y anular la configuración de los gráficos.
LoadingIndicator referencia del componente Acepta una referencia a un componente sin montar. 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 de los gráficos de áreas

A continuación, se indican las propiedades de config de los gráficos de áreas.

Propiedad Valores Notas
type 'area'
legend false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' } Define la posición de la leyenda o la inhabilita asignándole el valor false.

Predeterminado: { position: 'bottom' }
positioning 'overlay' | 'stacked' | 'percent' Modo de apilamiento de gráficos. Predeterminado: 'overlay'
render_null_values booleano Trata los valores nulos como 0. Predeterminado: false
tooltips booleano Habilita o inhabilita las descripciones emergentes que aparecen al colocar el cursor sobre los puntos de datos. Predeterminado: true
series series en formato view_name.field_name Consulta la sección 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 un ejemplo de uso.
y_axis Configuración del eje Y Consulta la sección 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 una matriz de configuraciones de series o un objeto con nombre que anule una serie específica de tu respuesta.

Propiedad Valores Notas
color cadena Código hexadecimal
label cadena
line_width número Define el ancho del trazo de la línea en píxeles. Valor predeterminado: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Define la forma del punto. Predeterminado: 'circle'
style 'none' | 'filled' | 'outline' Define el estilo del punto. Valor predeterminado: 'none' (puntos inhabilitados)
visible booleano Mostrar u ocultar la serie de datos. 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 nuestros gráficos solo admiten un eje X, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
gridlines booleano Mostrar u ocultar las líneas de división verticales. Predeterminado: false
label false (para ocultar la etiqueta) | cadena (valor que se va a renderizar) Define el valor que se va a representar como etiqueta del eje X. Predeterminado: false (sin etiqueta)
reversed booleano Invierte el orden de los puntos de datos. Predeterminado: false
values booleano Muestra u oculta los valores representados a lo largo del eje. Predeterminado: "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 nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
gridlines booleano Mostrar u ocultar las líneas de división verticales. Valor predeterminado: false.
label false (para ocultar la etiqueta) | cadena (valor que se va a renderizar) Define el valor que se va a representar como etiqueta del eje Y. Predeterminado: false (sin etiqueta)
range [número (mín.) | 'auto', número (máx.) | 'auto'] Define los valores mínimo y máximo del eje Y. Si se asigna el valor 'auto' al mínimo, se usará el valor predeterminado 0. Si se asigna el valor 'auto' al máximo, se usará el valor predeterminado del punto de datos máximo del conjunto. Predeterminado: ['auto' | 'auto']
values booleano Muestra u oculta los valores representados a lo largo del eje. 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 de los gráficos de barras y de columnas

A continuación, se indican las propiedades de config de los gráficos de barras y de columnas.

Propiedad Valores Notas
type 'bar' | 'column'
legend false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' } Define la posición de la leyenda o la inhabilita asignándole el valor false. Predeterminado: { position: 'bottom' }
positioning 'grouped' | 'stacked' | 'percent' Modo de apilamiento de gráficos. Predeterminado: 'overlay'
tooltips booleano Habilita o inhabilita las descripciones emergentes que aparecen al colocar el cursor sobre los puntos de datos.

Predeterminado: true
series series en formato view_name.field_name Consulta la sección 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 un ejemplo de uso.
y_axis Configuración del eje Y Consulta la sección 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 una matriz de configuraciones de series o un objeto con nombre que anule una serie específica de tu respuesta.

Propiedad Valores Notas
color cadena Código hexadecimal
label cadena
visible booleano Mostrar u ocultar la serie de datos. 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 nuestros gráficos solo admiten un eje X, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
gridlines booleano Mostrar u ocultar las líneas de división verticales. Valor predeterminado: false.
label false (para ocultar la etiqueta) | cadena (valor que se va a renderizar) Define el valor que se va a representar como etiqueta del eje X. Predeterminado: false (sin etiqueta)
reversed booleano Invierte el orden de los puntos de datos. Predeterminado: false
values booleano Muestra u oculta los valores representados a lo largo del eje. 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 nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
gridlines booleano Mostrar u ocultar las líneas de división verticales. Valor predeterminado: false.
label false (para ocultar la etiqueta) | cadena (valor que se va a renderizar) Define el valor que se va a representar como etiqueta del eje Y. Predeterminado: false (sin etiqueta)
range [número (mín.) | 'auto', número (máx.) | 'auto'] Define los valores mínimo y máximo del eje Y. Si se define el valor mínimo como "automático", se asigna el valor predeterminado 0. Si se define el valor máximo como "automático", se asigna el valor predeterminado del punto de datos máximo del conjunto. Valor predeterminado: ['auto' | 'auto'].
values booleano Muestra u oculta los valores representados a lo largo del eje. Predeterminado: true

Ejemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'bar',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Propiedades del gráfico de líneas

A continuación, se indican las propiedades de config de los gráficos de líneas.

Propiedad Valores Notas
type 'line'
legend false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' } Define la posición de la leyenda o la inhabilita asignándole el valor false. Predeterminado: { position: 'bottom' }
render_null_values booleano Trata los valores nulos como 0. Predeterminado: false
tooltips booleano Habilita o inhabilita las descripciones emergentes que aparecen al colocar el cursor sobre los puntos de datos. Predeterminado: true
series series en formato view_name.field_name Consulta la sección 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 un ejemplo de uso.
y_axis Configuración del eje Y Consulta la sección 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 una matriz de configuraciones de series o un objeto con nombre que anule una serie específica de tu respuesta.

Propiedad Valores Notas
color cadena Código hexadecimal
label cadena
line_width número Define el ancho del trazo de la línea en píxeles. Valor predeterminado: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Define la forma del punto. Predeterminado: 'circle'
style 'none' | 'filled' | 'outline' Define el estilo del punto. Valor predeterminado: 'none' (puntos inhabilitados)
visible booleano Mostrar u ocultar la serie de datos. 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 nuestros gráficos solo admiten un eje X, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
gridlines booleano Mostrar u ocultar las líneas de división verticales. Valor predeterminado: false.
label false (para ocultar la etiqueta) | cadena (valor que se va a renderizar) Define el valor que se va a representar como etiqueta del eje X. Predeterminado: false (sin etiqueta)
reversed booleano Invierte el orden de los puntos de datos. Predeterminado: false
values booleano Muestra u oculta los valores representados a lo largo del eje. 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 nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
gridlines booleano Mostrar u ocultar las líneas de división verticales. Predeterminado: false
label false (para ocultar la etiqueta) | cadena (valor que se va a renderizar) Define el valor que se va a representar como etiqueta del eje Y. Predeterminado: false (sin etiqueta)
range [número (mín.) | 'auto', número (máx.) | 'auto'] Define los valores mínimo y máximo del eje Y. Si se define el valor mínimo como "automático", se asigna el valor predeterminado 0. Si se define el valor máximo como "automático", se asigna el valor predeterminado del punto de datos máximo del conjunto. Valor predeterminado: ['auto' | 'auto'].
values booleano Muestra u oculta los valores representados a lo largo del eje. 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 de los gráficos de dispersión

A continuación, se indican las propiedades de config de los gráficos de dispersión.

Propiedad Valores Notas
type 'scatter'
legend false (para inhabilitar) O { position: 'left' | 'bottom' | 'right' | 'top' } Define la posición de la leyenda o la inhabilita asignándole el valor false. Predeterminado: { position: 'bottom' }
render_null_values booleano Trata los valores nulos como 0. Predeterminado: false
tooltips booleano Habilita o inhabilita las descripciones emergentes que aparecen al colocar el cursor sobre los puntos de datos. Predeterminado: true
series series en formato view_name.field_name Consulta la sección 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 un ejemplo de uso.
y_axis Configuración del eje Y Consulta la sección 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 una matriz de configuraciones de series o un objeto con nombre que anule una serie específica de tu respuesta.

Propiedad Valores Notas
color cadena Código hexadecimal
label cadena
line_width número Se usa para definir el tamaño de los puntos de un gráfico de dispersión. Piensa en él como el valor de contorno de cada punto. Predeterminado: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Define la forma del punto. Predeterminado: 'circle'
style 'none' | 'filled' | 'outline' Define el estilo del punto. Valor predeterminado: 'none' (puntos inhabilitados)
size_by false | string Nombre de la serie para la que se va a calibrar el tamaño de cada punto. Define false para inhabilitar el tamaño de punto dinámico. Predeterminado: false
visible booleano Mostrar u ocultar la serie de datos. 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 nuestros gráficos solo admiten un eje X, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
gridlines booleano Mostrar u ocultar las líneas de división verticales. Valor predeterminado: false.
label false (para ocultar la etiqueta) | cadena (valor que se va a renderizar) Define el valor que se va a representar como etiqueta del eje X. Predeterminado: false (sin etiqueta)
reversed booleano Invierte el orden de los puntos de datos. Predeterminado: false
values booleano Muestra u oculta los valores representados a lo largo del eje. 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 nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
gridlines booleano Mostrar u ocultar las líneas de división verticales. Valor predeterminado: false.
label false (para ocultar la etiqueta) | cadena (valor que se va a renderizar) Define el valor que se va a representar como etiqueta del eje Y. Predeterminado: false (sin etiqueta)
range [número (mín.) | 'auto', número (máx.) | 'auto'] Define los valores mínimo y máximo del eje Y. Si se define el valor mínimo como "automático", se asigna el valor predeterminado 0. Si se define el valor máximo como "automático", se asigna el valor predeterminado del punto de datos máximo del conjunto. Valor predeterminado: ['auto' | 'auto'].
values booleano Muestra u oculta los valores representados a lo largo del eje. 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 de los gráficos de un solo valor

A continuación, se indican las propiedades de config de los gráficos de un solo valor.

Propiedad Valores Notas
type 'single_value'

Ejemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query query='12345' config={{ type: 'single_value' }}>
  <Visualization />
 </Query>

Propiedades de los minigráficos

A continuación, se indican las propiedades de config de los gráficos de minilíneas.

Propiedad Valores Notas
type 'sparkline'
render_null_values booleano Trata los valores nulos como 0. Predeterminado: false
series series en formato view_name.field_name Consulta la sección 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 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

Aunque Sparkline solo admite una serie, mantenemos un patrón de API que incluye sustituciones de series con nombre o de matriz para mantener la coherencia con los demás tipos de gráficos de nuestra biblioteca.

Propiedad Valores Notas
color cadena Código hexadecimal
line_width número Define el ancho del trazo de la línea en píxeles. 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 nuestros gráficos solo admiten un eje Y, nuestra API está preparada para el futuro y estructurada para admitir la configuración de varios ejes.

Propiedad Valores Notas
range [número (mín.) | 'auto', número (máx.) | 'auto'] Define los valores mínimo y máximo del eje Y. Si se define el valor mínimo como "automático", se asigna el valor predeterminado 0. Si se define el valor máximo como "automático", se asigna el valor predeterminado del punto de datos máximo 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 de los gráficos de tabla

A continuación, se indican las propiedades de config de los gráficos de tabla.

Propiedad Valores Notas
type 'table'
series series en formato view_name.field_name Consulta la sección Serie para ver las opciones de configuración y ejemplos de uso.
column_order string[] Una matriz 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. Predeterminado: true
show_totals boolean Activa o desactiva la visualización de la fila de totales en la parte inferior de la tabla. Predeterminado: true
show_row_totals boolean Activa o desactiva la visualización de los totales de las filas en la parte derecha de la tabla. Predeterminado: true
truncate_text boolean Cuando true, el texto de las celdas de la tabla se limita a una sola línea y el contenido que se desborda se trunca con puntos suspensivos. Si es false, el contenido puede ocupar varias líneas. Predeterminado: true
truncate_header boolean Cuando se usa true, las etiquetas de encabezado de tabla se limitan a una sola línea y el contenido que se desborda se trunca con puntos suspensivos. Si está false, los encabezados pueden ocupar varias líneas. Predeterminado: 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 de tu respuesta.

Propiedad Valores Notas
cell_visualization boolean Activa o desactiva la visualización de celdas insertada. El valor predeterminado es true para la primera métrica 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 representar como moneda, la precisión de punto flotante, si se deben usar comas o puntos para delimitar los millares, etc.

Ejemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    series: {
      'orders.count': {
        color: '#4285F4',
        cell_visualization: true,
        value_format: '$#,##0.00',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'table',
    series: [{
      color: '#4285F4',
      cell_visualization: true,
      value_format: '$#,##0.00',
    }]
  }}
>
 <Visualization />
</Query>

Propiedades del gráfico circular

A continuación, se indican las propiedades de config para los gráficos circulares.

Propiedad Valores Notas
type 'pie'
legend false (para inhabilitar) | configuración de la leyenda Si se le asigna el valor false, se inhabilita la leyenda. Valor predeterminado: habilitado. Consulta la sección Leyenda para ver las opciones de configuración y un ejemplo de uso cuando está habilitada.
tooltips booleano Habilita o inhabilita las descripciones emergentes que aparecen al colocar el cursor sobre los puntos de datos. Predeterminado: true
series series en formato view_name.field_name Consulta la sección 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. Predeterminado: 'legend'
position 'top' | 'bottom' | 'left' | 'right' Coloca la leyenda cuando type: 'legend'. Predeterminado: 'right'
width número Anchura máxima de la leyenda en píxeles cuando type: 'legend'. Predeterminado: 300
value 'label' | 'label_value' | 'value' | 'percent' | 'label_percent' Define el contenido de la leyenda: etiqueta, etiqueta y valor, valor, porcentaje, etiqueta y porcentaje. 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 de un gráfico circular se trata como una serie nueva:

Propiedad Valores Notas
color cadena 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>