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
|
number | 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 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
|
number | 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
|
number | 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 que substitui uma série específica na 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 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 | string
|
Nome da série para 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
|
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 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 de linha 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 quebrado 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 "series" pode aceitar uma matriz de configurações de séries ou um objeto nomeado que substitui uma série específica na 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
|
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>