Tabelas de propriedades de consulta e visualização

Visualization

Esse componente coleta os dados e a configuração do contexto da consulta e renderiza a visualização adequada. Você pode personalizar a largura e a altura passando valores numéricos de pixels para essas propriedades.

Propriedade Valores Observações
width número (em pixels) Padrão de 100% quando a proposta é indefinida.
height número (em pixels) 500 pixels padrão quando a proposta é indefinida.
chartTypeMap objeto de chave-valor Aceita um objeto de chave/valor que define qual componente será renderizado quando o sistema de adaptadores encontrar valores de tipo de gráfico específicos. Isso pode ser usado para substituir os gráficos padrão do Looker ou para adicionar novos tipos de gráficos ao sistema de adaptadores.

Exemplo 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 à nossa API JavaScript para processar o ciclo de solicitação/resposta e capturar uma resposta de consulta pelo ID da consulta ou pelo valor qid. É possível transmitir substituições de configuração de visualizações para serem mescladas com a resposta da API e carregar todos os dados no contexto do React.

Propriedade Valores Observações
query número | string Pode aceitar Query.client_id, que vem depois da propriedade qid no URL de uma Análise, (3fdrdE0b3ATltUvXBaSOPN) ou um ID de consulta numérico (1234). Se você tiver acesso ao ID numérico da consulta, começar com esse valor pode salvar uma solicitação adicional do servidor.

Query aceita as propriedades query ou dashboard, mas não ambas.
dashboard number Pode aceitar um ID numérico de painel (1234). Se você tiver acesso ao ID numérico de painel, a partir desse valor poderá salvar uma solicitação adicional do servidor.

dashboard não aceita os IDs de string de painéis do LookerML.

Query aceita as propriedades query ou dashboard, mas não ambas.
config Dependendo do valor de type, aceita as seguintes propriedades:

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

Consulte a documentação específica para gráficos mais adiante nesta página para ver os valores compatíveis.
Define e substitui as definições de configuração dos gráficos.
LoadingIndicator Referência de componentes Aceita uma referência de componente desconectado. Padrão: ProgressCircular

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

<Query
  query='12345'
  config={{
      /* specific properties described below */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

Propriedades do gráfico de área

Confira a seguir as propriedades config dos gráficos de área.

Propriedade Valores Observações
type 'area'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou a desativa, definindo-a como false.

Padrão: { position: 'bottom' }
positioning 'overlay' | 'stacked' | 'percent' Modo de empilhamento do gráfico. Padrão: 'overlay'
render_null_values boolean Trata valores nulos como 0. Padrão: false
tooltips boolean Ative ou desative as dicas que aparecem quando você passa o cursor sobre os pontos de dados. Padrão: true
series série no formato view_name.field_name Consulte a seção série para opções de configuração e exemplo de uso.
x_axis configuração do eixo x Consulte a seção Eixo x para opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção eixo y para opções de configuração e exemplos de uso.

Exemplo 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

A propriedade series pode aceitar uma matriz de configurações de série ou um objeto nomeado substituindo uma série específica na sua resposta.

Propriedade Valores Observações
color string Código hexadecimal
label string
line_width number Defina a largura do traço da linha em pixels. Padrão: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Definir forma do ponto. Padrão: 'circle'
style 'none' | 'filled' | 'outline' Estilo do ponto de definição. Padrão: 'none' (pontos desativados)
visible boolean Mostre ou oculte a série de dados. Padrão: true

Exemplo 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

Embora os gráficos atualmente ofereçam suporte apenas a um único eixo x, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
gridlines boolean Mostrar ou ocultar linhas de grade verticais. Padrão: false
label false (para ocultar o marcador) | string (valor a ser renderizado) Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem rótulo)
reversed boolean Inverte a ordem dos pontos de dados. Padrão: false
values boolean Mostra ou oculta os valores renderizados ao longo do eixo. Padrão: true

Exemplo 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

Embora os gráficos atualmente aceitem apenas um único eixo y, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
gridlines boolean Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o marcador) | string (valor a ser renderizado) Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem rótulo)
range [número (mín.) | 'auto', número (máx) | 'auto'] Define os valores mínimo e máximo do eixo Y. Quando o valor mínimo é 'auto', o padrão é 0, e o máximo é definido como 'auto', por padrão, o valor máximo dos pontos de dados no conjunto é definido. Padrão: ['auto' | 'auto']
values boolean Mostra ou oculta os valores renderizados ao longo do eixo. Padrão: true

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

Propriedades dos gráficos de barras e colunas

Confira a seguir as propriedades config para gráficos de barras e colunas.

Propriedade Valores Observações
type 'bar' | 'column'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou a desativa, definindo-a como false. Padrão: { position: 'bottom' }
positioning 'grouped' | 'stacked' | 'percent' Modo de empilhamento do gráfico. Padrão: 'overlay'
tooltips boolean Ative ou desative as dicas que aparecem quando você passa o cursor sobre os pontos de dados.

Padrão: true
series série no formato view_name.field_name Consulte a seção série para opções de configuração e exemplo de uso.
x_axis configuração do eixo x Consulte a seção Eixo x para opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção eixo y para opções de configuração e exemplos de uso.

Exemplo de uso:

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

<Query
  query='12345'
  config={{
    type: 'bar',
    legend: { position: 'left' },
    positioning: 'stacked',
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

A propriedade series pode aceitar uma matriz de configurações de série ou um objeto nomeado substituindo uma série específica na sua resposta.

Propriedade Valores Observações
color string Código hexadecimal
label string
visible boolean Mostre ou oculte a série de dados. Padrão: true

Exemplo 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

Embora os gráficos atualmente ofereçam suporte apenas a um único eixo x, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
gridlines boolean Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o marcador) | string (valor a ser renderizado) Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem rótulo)
reversed boolean Inverte a ordem dos pontos de dados. Padrão: false
values boolean Mostra ou oculta os valores renderizados ao longo do eixo. Padrão: true

Exemplo 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

Embora os gráficos atualmente aceitem apenas um único eixo y, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
gridlines boolean Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o marcador) | string (valor a ser renderizado) Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem rótulo)
range [número (mín.) | 'auto', número (máx) | 'auto'] Define os valores mínimo e máximo do eixo Y. Quando o valor mínimo é definido como "automático", o padrão é "0", e o máximo é definido como "automático" como o valor máximo do ponto de dados definido. Padrão: ['auto' | 'auto'].
values boolean Mostra ou oculta os valores renderizados ao longo do eixo. Padrão: true

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

Propriedades do gráfico de linhas

Confira abaixo as propriedades config para gráficos de linhas.

Propriedade Valores Observações
type 'line'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou a desativa, definindo-a como false. Padrão: { position: 'bottom' }
render_null_values boolean Trata valores nulos como 0. Padrão: false
tooltips boolean Ative ou desative as dicas que aparecem quando você passa o cursor sobre os pontos de dados. Padrão: true
series série no formato view_name.field_name Consulte a seção série para opções de configuração e exemplo de uso.
x_axis configuração do eixo x Consulte a seção Eixo x para opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção eixo y para opções de configuração e exemplos de uso.

Exemplo 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

A propriedade series pode aceitar uma matriz de configurações de série ou um objeto nomeado substituindo uma série específica na sua resposta.

Propriedade Valores Observações
color string Código hexadecimal
label string
line_width number Defina a largura do traço da linha em pixels. Padrão: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Definir forma do ponto. Padrão: 'circle'
style 'none' | 'filled' | 'outline' Estilo do ponto de definição. Padrão: 'none' (pontos desativados)
visible boolean Mostre ou oculte a série de dados. Padrão: true

Exemplo 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

Embora os gráficos atualmente ofereçam suporte apenas a um único eixo x, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
gridlines boolean Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o marcador) | string (valor a ser renderizado) Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem rótulo)
reversed boolean Inverte a ordem dos pontos de dados. Padrão: false
values boolean Mostra ou oculta os valores renderizados ao longo do eixo. Padrão: true

Exemplo 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

Embora os gráficos atualmente aceitem apenas um único eixo y, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
gridlines boolean Mostrar ou ocultar linhas de grade verticais. Padrão: false
label false (para ocultar o marcador) | string (valor a ser renderizado) Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem rótulo)
range [número (mín.) | 'auto', número (máx) | 'auto'] Define os valores mínimo e máximo do eixo Y. Quando o valor mínimo é definido como "automático", o padrão é "0", e o máximo é definido como "automático" como o valor máximo do ponto de dados definido. Padrão: ['auto' | 'auto'].
values boolean Mostra ou oculta os valores renderizados ao longo do eixo. Padrão: true

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

Propriedades do gráfico de dispersão

Confira abaixo as propriedades config para gráficos de dispersão.

Propriedade Valores Observações
type 'scatter'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou a desativa, definindo-a como false. Padrão: { position: 'bottom' }
render_null_values boolean Trata valores nulos como 0. Padrão: false
tooltips boolean Ative ou desative as dicas que aparecem quando você passa o cursor sobre os pontos de dados. Padrão: true
series série no formato view_name.field_name Consulte a seção série para opções de configuração e exemplo de uso.
x_axis configuração do eixo x Consulte a seção Eixo x para opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção eixo y para opções de configuração e exemplos de uso.

Exemplo 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

A propriedade series pode aceitar uma matriz de configurações de série ou um objeto nomeado substituindo uma série específica na sua resposta.

Propriedade Valores Observações
color string Código hexadecimal
label string
line_width number Usado para definir o tamanho dos pontos em um gráfico de dispersão. Pense nisso como o valor do esboço de cada ponto. Padrão: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Definir forma do ponto. Padrão: 'circle'
style 'none' | 'filled' | 'outline' Estilo do ponto de definição. Padrão: 'none' (pontos desativados)
size_by false | string Nome da série para calibrar o tamanho de cada ponto. Defina false para desativar o dimensionamento dinâmico de pontos. Padrão: false
visible boolean Mostre ou oculte a série de dados. Padrão: true

Exemplo 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

Embora os gráficos atualmente ofereçam suporte apenas a um único eixo x, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
gridlines boolean Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o marcador) | string (valor a ser renderizado) Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem rótulo)
reversed boolean Inverte a ordem dos pontos de dados. Padrão: false
values boolean Mostra ou oculta os valores renderizados ao longo do eixo. Padrão: true

Exemplo 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

Embora os gráficos atualmente aceitem apenas um único eixo y, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
gridlines boolean Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o marcador) | string (valor a ser renderizado) Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem rótulo)
range [número (mín.) | 'auto', número (máx) | 'auto'] Define os valores mínimo e máximo do eixo Y. Quando o valor mínimo é definido como "automático", o padrão é "0", e o máximo é definido como "automático" como o valor máximo do ponto de dados definido. Padrão: ['auto' | 'auto'].
values boolean Mostra ou oculta os valores renderizados ao longo do eixo. Padrão: true

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

Propriedades do gráfico de valor único

Confira a seguir as propriedades config para gráficos de valor único.

Propriedade Valores Observações
type 'single_value'

Exemplo de uso:

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

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

Propriedades do minigráfico

Confira a seguir as propriedades config dos minigráficos.

Propriedade Valores Observações
type 'sparkline'
render_null_values boolean Trata valores nulos como 0. Padrão: false
series série no formato view_name.field_name Consulte a seção série para opções de configuração e exemplo de uso.
y_axis configuração do eixo y Consulte a seção eixo y para opções de configuração e exemplos de uso.

Exemplo de uso:

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

<Query
  query="12345"
  config={{ type: 'sparkline', render_null_values: true }}
>
  <Visualization />
</Query>

series

Embora o Sparkline seja compatível apenas com uma série, mantemos um padrão de API que envolve substituições de séries nomeadas ou de matriz para manter a consistência com os outros tipos de gráfico da biblioteca.

Propriedade Valores Observações
color string Código hexadecimal
line_width number Defina a largura do traço da linha em pixels. Padrão: 3

Exemplo 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

Embora os gráficos atualmente aceitem apenas um único eixo y, nossa API está preparada para o futuro e está estruturada para aceitar a configuração de vários eixos.

Propriedade Valores Observações
range [número (mín.) | 'auto', número (máx) | 'auto'] Define os valores mínimo e máximo do eixo Y. Quando o valor mínimo é definido como "automático", o padrão é "0", e o máximo é definido como "automático" como o valor máximo do ponto de dados definido. Padrão: ['auto' | 'auto'].

Exemplo de uso:

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

<Query
  query='12345'
  config={{
    type: 'sparkline',
    y_axis: [
      { range: [50, 'auto'] },
    ],
  }}
>
  <Visualization />
</Query>

Propriedades do gráfico de tabela

Confira a seguir as propriedades config para gráficos de tabela.

Propriedade Valores Observações
type 'table'
series série no formato view_name.field_name Consulte a seção série para opções de configuração e exemplo de uso.
column_order string[] Uma matriz de nomes de séries (por exemplo, 'orders.count') que indica como você quer que as colunas da tabela sejam ordenadas da esquerda para a direita.
show_row_numbers boolean Alterne a exibição da linha de totais na parte inferior da tabela. Padrão: true
show_totals boolean Alterne a exibição da linha de totais na parte inferior da tabela. Padrão: true
show_row_totals boolean Alterne a exibição dos totais das linhas no lado direito da tabela. Padrão: true
truncate_text boolean Quando true, o texto da célula da tabela é limitado a uma única linha, e o estouro do conteúdo é truncado com reticências. Quando false, o conteúdo pode ser ajustado em várias linhas. Padrão: true
truncate_header boolean Quando true, os rótulos de cabeçalho da tabela são limitados a uma única linha, e o estouro de conteúdo é truncado com reticências. Quando false, os cabeçalhos podem ser ajustados em várias linhas. Padrão: true

Exemplo 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

A propriedade de série pode aceitar uma matriz de configurações de série ou um objeto nomeado substituindo uma série específica em sua resposta.

Propriedade Valores Observações
cell_visualization boolean Ativa ou desativa a visualização de células inline. O padrão é true para a primeira medição e false para as outras.
color string Especifique a cor usada para renderizar a visualização de células da tabela.
value_format string Uma string de formatação de números que indica se os valores devem ser renderizados como moeda, a precisão do ponto flutuante, o uso de vírgulas ou pontos para delinear milhares e assim por diante.

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

Propriedades do gráfico de pizza

Confira a seguir as propriedades config para gráficos de pizza.

Propriedade Valores Observações
type 'pie'
legend false (para desativar) | configuração da legenda Definir como false desativa a legenda. Padrão: ativada. Consulte a seção legend para opções de configuração e exemplo de uso quando ativado.
tooltips boolean Ative ou desative as dicas que aparecem quando você passa o cursor sobre os pontos de dados. Padrão: true
series série no formato view_name.field_name Consulte a seção série para opções de configuração e exemplo de uso.

Exemplo de uso:

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

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: false,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

legend

A propriedade legend aceita as seguintes configurações de legenda:

Propriedade Valores Observações
type 'labels' | 'legend' O labels coloca rótulos apontando diretamente para cada fatia. legend coloca uma legenda separada. Padrão: 'legend'
position 'top' | 'bottom' | 'left' | 'right' Posicione a legenda quando type: 'legend'. Padrão: 'right'
width number Largura máxima da legenda em pixels quando type: 'legend'. Padrão: 300
value 'label' | 'label_value' | 'value' | 'percent' | 'label_percent' Define o conteúdo da legenda: rótulo, rótulo e valor, valor, porcentagem, rótulo e porcentagem. Padrão: 'label_percent'

Exemplo 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

Ao contrário dos gráficos cartesianos, cada ponto de dados em um gráfico de pizza é tratado como uma nova série:

Propriedade Valores Observações
color string Código hexadecimal

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