Tabelas de propriedades de consulta e visualização

Visualization

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

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

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

O Query se integra à nossa API JavaScript para processar o ciclo de solicitação/resposta e coletar uma resposta de consulta pelo ID da consulta ou pelo valor qid. É possível transmitir as substituições de configuração de visualização para que elas sejam mescladas com a resposta da API e ter todos os dados carregados no contexto do React.

Propriedade	Valores	Observações
query	número | corda	Pode aceitar Query.client_id, que vem depois da propriedade qid no URL de uma Análise (3fdrdE0b3ATltUvXBaSOPN), ou um ID numérico de consulta (1234). Se você tiver acesso ao ID numérico da consulta, comece por esse valor para salvar uma solicitação adicional do servidor. Query aceita a propriedade query ou dashboard, mas não ambas.
dashboard	número	Aceita um ID numérico do painel (1234). Se você tiver acesso ao ID numérico do painel, a partir desse valor pode salvar uma solicitação adicional do servidor. dashboard não aceita os IDs de string dos painéis do LookML. Query aceita a propriedade 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 conferir os valores compatíveis.	Definir e substituir as configurações 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 later on this page */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

Propriedades do gráfico de área

Confira a seguir as propriedades de config para 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 por meio de false. Padrão: { position: 'bottom' }
positioning	'overlay' | 'stacked' | 'percent'	Modo de empilhamento do gráfico. Padrão: 'overlay'
render_null_values	booleano	Trata valores nulos como 0. Padrão: false
tooltips	booleano	Ative ou desative as dicas que aparecem ao passar 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 exemplos de uso.
x_axis	configuração do eixo x	Consulte a seção Eixo x para conferir as opções de configuração e exemplos de uso.
y_axis	configuração do eixo y	Consulte a seção do eixo y para conferir as 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	número	Defina a largura do traço da linha em pixels. Padrão: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	Definir forma de ponto. Padrão: 'circle'
style	'none' | 'filled' | 'outline'	Definir estilo de ponto. Padrão: 'none' (pontos desativados)
visible	booleano	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 atualmente nossos gráficos suportem apenas um eixo x, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
gridlines	booleano	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	booleano	Inverte a ordem dos pontos de dados. Padrão: false
values	booleano	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 atualmente nossos gráficos suportem apenas um eixo y, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
gridlines	booleano	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 (min) | 'auto', número (máx.) | 'auto']	Define os valores mínimo e máximo do eixo y. Se o valor mínimo for 'auto', o valor padrão será 0, e o máximo será 'auto', o pontuação de dados máximo definido. Padrão: ['auto' | 'auto']
values	booleano	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 por meio de false. Padrão: { position: 'bottom' }
positioning	'grouped' | 'stacked' | 'percent'	Modo de empilhamento do gráfico. Padrão: 'overlay'
tooltips	booleano	Ative ou desative as dicas que aparecem ao passar 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 exemplos de uso.
x_axis	configuração do eixo x	Consulte a seção Eixo x para conferir as opções de configuração e exemplos de uso.
y_axis	configuração do eixo y	Consulte a seção do eixo y para conferir as 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	booleano	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 atualmente nossos gráficos suportem apenas um eixo x, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
gridlines	booleano	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	booleano	Inverte a ordem dos pontos de dados. Padrão: false
values	booleano	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 atualmente nossos gráficos suportem apenas um eixo y, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
gridlines	booleano	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 (min) | 'auto', número (máx.) | 'auto']	Define os valores mínimo e máximo do eixo y. Definindo min como "auto" o valor padrão é 0, e o máximo é "auto" o padrão é o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
values	booleano	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 a seguir 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 por meio de false. Padrão: { position: 'bottom' }
render_null_values	booleano	Trata valores nulos como 0. Padrão: false
tooltips	booleano	Ative ou desative as dicas que aparecem ao passar 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 exemplos de uso.
x_axis	configuração do eixo x	Consulte a seção Eixo x para conferir as opções de configuração e exemplos de uso.
y_axis	configuração do eixo y	Consulte a seção do eixo y para conferir as 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	número	Defina a largura do traço da linha em pixels. Padrão: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	Definir forma de ponto. Padrão: 'circle'
style	'none' | 'filled' | 'outline'	Definir estilo de ponto. Padrão: 'none' (pontos desativados)
visible	booleano	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 atualmente nossos gráficos suportem apenas um eixo x, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
gridlines	booleano	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	booleano	Inverte a ordem dos pontos de dados. Padrão: false
values	booleano	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 atualmente nossos gráficos suportem apenas um eixo y, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
gridlines	booleano	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 (min) | 'auto', número (máx.) | 'auto']	Define os valores mínimo e máximo do eixo y. Definindo min como "auto" o valor padrão é 0, e o máximo é "auto" o padrão é o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
values	booleano	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 a seguir 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 por meio de false. Padrão: { position: 'bottom' }
render_null_values	booleano	Trata valores nulos como 0. Padrão: false
tooltips	booleano	Ative ou desative as dicas que aparecem ao passar 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 exemplos de uso.
x_axis	configuração do eixo x	Consulte a seção Eixo x para conferir as opções de configuração e exemplos de uso.
y_axis	configuração do eixo y	Consulte a seção do eixo y para conferir as 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	número	Usado para definir o tamanho dos pontos em um gráfico de dispersão. Pense nela como o valor geral de cada ponto. Padrão: 3
shape	'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'	Definir forma de ponto. Padrão: 'circle'
style	'none' | 'filled' | 'outline'	Definir estilo de ponto. Padrão: 'none' (pontos desativados)
size_by	false | corda	Nome da série para a qual calibrar o tamanho de cada ponto. Defina false para desativar o dimensionamento de pontos dinâmicos. Padrão: false
visible	booleano	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 atualmente nossos gráficos suportem apenas um eixo x, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
gridlines	booleano	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	booleano	Inverte a ordem dos pontos de dados. Padrão: false
values	booleano	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 atualmente nossos gráficos suportem apenas um eixo y, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
gridlines	booleano	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 (min) | 'auto', número (máx.) | 'auto']	Define os valores mínimo e máximo do eixo y. Definindo min como "auto" o valor padrão é 0, e o máximo é "auto" o padrão é o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
values	booleano	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 para minigráficos.

Propriedade	Valores	Observações
type	'sparkline'
render_null_values	booleano	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 exemplos de uso.
y_axis	configuração do eixo y	Consulte a seção do eixo y para conferir as 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

Apesar de o minigráfico ser compatível com apenas 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áficos da biblioteca.

Propriedade	Valores	Observações
color	string	Código hexadecimal
line_width	número	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 atualmente nossos gráficos suportem apenas um eixo y, nossa API é preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade	Valores	Observações
range	[número (min) | 'auto', número (máx.) | 'auto']	Define os valores mínimo e máximo do eixo y. Definindo min como "auto" o valor padrão é 0, e o máximo é "auto" o padrão é o valor máximo do ponto de dados no conjunto. 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 exemplos 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 excesso de 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 do cabeçalho da tabela são limitados a uma única linha, e o excesso 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 na sua resposta.

Propriedade	Valores	Observações
cell_visualization	boolean	Ativa ou desativa a visualização de células in-line. O padrão é true para a primeira medida 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 serão renderizados como moeda, a precisão de ponto flutuante, se serão usadas 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 de legendas	Definir como false desativa a legenda. Padrão: ativada. Consulte a seção legend para ver opções de configuração e exemplos de uso quando ativado.
tooltips	booleano	Ative ou desative as dicas que aparecem ao passar 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 exemplos 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 pode aceitar as seguintes configurações de legenda:

Propriedade	Valores	Observações
type	'labels' | 'legend'	labels coloca rótulos que apontam diretamente para cada fatia. legend coloca uma legenda separada. Padrão: 'legend'
position	'top' | 'bottom' | 'left' | 'right'	Posicione a legenda quando usar type: 'legend'. Padrão: 'right'
width	número	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>