Visualization
Esse componente coleta os dados e configurações do contexto da consulta e renderiza a visualização apropriada. Você pode personalizar a largura e a altura enviando valores numéricos de pixel para essas propriedades.
| Propriedade | Valores | Observações |
|---|---|---|
width
|
número (em pixels) | O padrão é 100% quando a proposta é indefinida. |
height
|
número (em pixels) | O padrão de 500 pixels é indefinido. |
chartTypeMap
|
objeto de chave-valor | Aceita um objeto de chave-valor que define qual componente renderizar quando o sistema de adaptador encontra 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 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
Query se integra à API JavaScript para processar o ciclo de solicitações/respostas e capturar uma resposta de consulta pelo ID da consulta ou valor de qid. Você pode transmitir as substituições de configuração do vis para serem mescladas com a resposta da API e ter todos os dados carregados no contexto do React.
| Propriedade | Valores | Observações |
|---|---|---|
query
|
número | string | Query.client_id
|
dashboard
|
number | Pode aceitar um ID de painel numérico (1234). Se você tiver acesso ao ID do painel numérico, a partir desse valor poderá salvar uma solicitação adicional de servidor.dashboard não aceita os IDs de string de painéis do LookML.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, y_axisConsulte a documentação específica do gráfico posteriormente nesta página para ver os valores compatíveis. |
Defina e modifique as configurações de gráficos. |
LoadingIndicator
|
Referência de componente | 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
Veja 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 desativa a legenda ao defini-la como false.Padrão: { position: 'bottom' }
|
positioning
|
'overlay' | 'stacked' | 'percent'
|
Modo de empilhamento de gráficos. Padrão: 'overlay'
|
render_null_values
|
boolean | Trata valores nulos como 0. Padrão: false
|
tooltips
|
boolean | 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 ver opções de configuração e uso de exemplo. |
x_axis
|
configuração do eixo X | Consulte a seção eixo x para ver opções de configuração e uso de exemplo. |
y_axis
|
configuração do eixo y | Consulte a seção eixo y para ver opções de configuração e uso de exemplo. |
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 que substitua 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'
|
Defina a forma do ponto. Padrão: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Defina o estilo dos pontos. Padrão: 'none' (pontos desativados)
|
visible
|
boolean | Exiba 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 ofereçam suporte a um único eixo x, nossa API é moderna e estruturada para oferecer suporte à 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 rótulo) | 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 | Mostre ou oculte 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 ofereçam suporte a um único eixo y, nossa API é preparada para o futuro e estruturada para oferecer suporte à 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 rótulo) | 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. Definir o valor mínimo como 'auto' é 0 por padrão, e o máximo como 'auto' é definido como o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto']
|
values
|
boolean | Mostre ou oculte 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 do gráfico de barras e de colunas
Veja 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 desativa a legenda ao defini-la como false. Padrão: { position: 'bottom' }
|
positioning
|
'grouped' | 'stacked' | 'percent'
|
Modo de empilhamento de gráficos. Padrão: 'overlay'
|
tooltips
|
boolean | 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 ver opções de configuração e uso de exemplo. |
x_axis
|
configuração do eixo X | Consulte a seção eixo x para ver opções de configuração e uso de exemplo. |
y_axis
|
configuração do eixo y | Consulte a seção eixo y para ver opções de configuração e uso de exemplo. |
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 que substitua uma série específica na sua resposta.
| Propriedade | Valores | Observações |
|---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
visible
|
boolean | Exiba 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 ofereçam suporte a um único eixo x, nossa API é moderna e estruturada para oferecer suporte à 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 rótulo) | 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 | Mostre ou oculte 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 ofereçam suporte a um único eixo y, nossa API é preparada para o futuro e estruturada para oferecer suporte à 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 rótulo) | 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. Definir mín. como 'auto' assume como padrão 0 e o máximo como 'auto' assume como padrão o valor máximo de ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
|
values
|
boolean | Mostre ou oculte 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
Veja a seguir as propriedades config dos 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 desativa a legenda ao defini-la 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 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 ver opções de configuração e uso de exemplo. |
x_axis
|
configuração do eixo X | Consulte a seção eixo x para ver opções de configuração e uso de exemplo. |
y_axis
|
configuração do eixo y | Consulte a seção eixo y para ver opções de configuração e uso de exemplo. |
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 que substitua 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'
|
Defina a forma do ponto. Padrão: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Defina o estilo dos pontos. Padrão: 'none' (pontos desativados)
|
visible
|
boolean | Exiba 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 ofereçam suporte a um único eixo x, nossa API é moderna e estruturada para oferecer suporte à 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 rótulo) | 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 | Mostre ou oculte 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 ofereçam suporte a um único eixo y, nossa API é preparada para o futuro e estruturada para oferecer suporte à 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 rótulo) | 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. Definir mín. como 'auto' assume como padrão 0 e o máximo como 'auto' assume como padrão o valor máximo de ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
|
values
|
boolean | Mostre ou oculte 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
Veja a seguir as propriedades config dos 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 desativa a legenda ao defini-la 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 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 ver opções de configuração e uso de exemplo. |
x_axis
|
configuração do eixo X | Consulte a seção eixo x para ver opções de configuração e uso de exemplo. |
y_axis
|
configuração do eixo y | Consulte a seção eixo y para ver opções de configuração e uso de exemplo. |
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 substitua 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 nela como o valor de contorno de cada ponto. Padrão: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Defina a forma do ponto. Padrão: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Defina o estilo dos pontos. Padrão: 'none' (pontos desativados)
|
size_by
|
false | string
|
Nome da série em que você deve calibrar o tamanho de cada ponto. Defina false para desativar o dimensionamento dinâmico de pontos. Padrão: false
|
visible
|
boolean | Exiba 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 ofereçam suporte a um único eixo x, nossa API é moderna e estruturada para oferecer suporte à 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 rótulo) | 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 | Mostre ou oculte 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 ofereçam suporte a um único eixo y, nossa API é preparada para o futuro e estruturada para oferecer suporte à 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 rótulo) | 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. Definir mín. como 'auto' assume como padrão 0 e o máximo como 'auto' assume como padrão o valor máximo de ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
|
values
|
boolean | Mostre ou oculte 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
Veja 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 gráfico do minigráfico
Veja a seguir as propriedades config para gráficos de gráficos sparkline.
| 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 ver opções de configuração e uso de exemplo. |
y_axis
|
configuração do eixo y | Consulte a seção eixo y para ver opções de configuração e uso de exemplo. |
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 naturalmente compatível com apenas uma única série, mantemos um padrão de API envolvendo substituições de séries nomeadas ou de matrizes para permanecer consistente com os outros tipos de gráficos na nossa 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 ofereçam suporte a um único eixo y, nossa API é preparada para o futuro e estruturada para oferecer suporte à 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. Definir mín. como 'auto' assume como padrão 0 e o máximo como 'auto' assume como padrão o valor máximo de 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
Veja a seguir as propriedades config dos 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 ver opções de configuração e uso de exemplo. |
column_order
|
string[]
|
Uma matriz de nomes de série (por exemplo, 'orders.count') indicando 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 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 de conteúdo é truncado com reticências. Quando false, o conteúdo pode ser dividido 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 agrupados 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 da série pode aceitar uma matriz de configurações 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 da célula 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 da célula 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 do ponto flutuante, se é necessário usar vírgulas ou pontos para delimitar 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
Veja a seguir as propriedades config dos gráficos de pizza.
| Propriedade | Valores | Observações |
|---|---|---|
type
|
'pie'
|
|
legend
|
false (para desativar) | Configuração de legenda
|
Configurar como false desativa a legenda. Padrão: ativada. Consulte a seção legend para ver as opções de configuração e o uso de exemplos quando ativados.
|
tooltips
|
boolean | 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 ver opções de configuração e uso de exemplo. |
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 posiciona rótulos apontando 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: label, label and value, value, percentage, label and percentage. 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>