Visualization
Esse componente coleta os dados e a configuração do contexto da consulta e renderiza a visualização apropriada. 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) | O padrão é 100% quando a propriedade é indefinida. |
height
|
número (em pixels) | O padrão é 500 pixels 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 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áfico 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 capturar uma resposta da consulta pelo ID da consulta ou pelo valor qid
. Você pode transmitir as substituições de configuração do vis para serem mesclados com a resposta da API e carregar todos os dados no contexto do React.
Propriedade | Valores | Observações |
---|---|---|
query
|
número | string | Pode aceitar a Query.client_id , que vem depois da propriedade qid no URL de uma exploração (3fdrdE0b3ATltUvXBaSOPN ) ou um ID numérico de consulta (1234 ). Se você tiver acesso ao ID da consulta numérica, a partir desse valor poderá salvar uma solicitação de servidor adicional.Query aceita a propriedade query ou dashboard , mas não ambas.
|
dashboard
|
número | Aceita um ID de painel numérico (1234 ). Se você tiver acesso ao ID do painel numérico, a partir desse valor, será possível salvar uma solicitação de servidor adicional.dashboard não aceita os IDs de string de painéis do LookML.Query aceita a propriedade query ou a propriedade 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_axis Consulte a documentação específica do gráfico mais adiante nesta página para ver os valores compatíveis. |
Defina e modifique as configurações dos gráficos. |
LoadingIndicator
|
referência do componente | Aceita uma referência de componente não montado. 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 como 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 | Para ativar ou desativar as dicas de ferramentas, passe o mouse 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 exemplos de uso. |
x_axis
|
configuração do eixo x | Consulte a seção eixo x para ver 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 ver 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 que substitui 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 do ponto. Padrão: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Definir estilo do ponto. Padrão: 'none' (pontos desativados)
|
visible
|
booleano | Mostrar ou ocultar 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo x, nossa API está 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 rótulo) | string (valor para renderizar)
|
Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem marcador)
|
reversed
|
booleano | Reverte a ordem dos pontos de dados. Padrão: false
|
values
|
booleano | 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e 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 rótulo) | string (valor para renderizar)
|
Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem marcador)
|
range
|
[número (min) | 'auto' , número (máximo) | 'auto' |
Define os valores mínimo e máximo do eixo y. O valor mínimo para 'auto' é 0, e o máximo para 'auto' é o valor máximo padrão em pontos de dados. Padrão: ['auto' | 'auto']
|
values
|
booleano | 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 colunas
Veja a seguir as propriedades config
dos 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
|
booleano | Ative ou desative as dicas 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 exemplos de uso. |
x_axis
|
configuração do eixo x | Consulte a seção eixo x para ver 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 ver 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 que substitui uma série específica na sua resposta.
Propriedade | Valores | Observações |
---|---|---|
color
|
string | Código hexadecimal |
label
|
string | |
visible
|
booleano | Mostrar ou ocultar 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo x, nossa API está 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 rótulo) | string (valor para renderizar)
|
Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem marcador)
|
reversed
|
booleano | Reverte a ordem dos pontos de dados. Padrão: false
|
values
|
booleano | 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e 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 rótulo) | string (valor para renderizar)
|
Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem marcador)
|
range
|
[número (min) | 'auto' , número (máximo) | 'auto' |
Define os valores mínimo e máximo do eixo y. Definir "mín" como "auto" assume o padrão 0 e "max" como "auto" assume como padrão o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'] .
|
values
|
booleano | 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 linha.
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
|
booleano | Trata valores nulos como 0. Padrão: false
|
tooltips
|
booleano | Para ativar ou desativar as dicas de ferramentas, passe o mouse 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 exemplos de uso. |
x_axis
|
configuração do eixo x | Consulte a seção eixo x para ver 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 ver 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 que substitui 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 do ponto. Padrão: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Definir estilo do ponto. Padrão: 'none' (pontos desativados)
|
visible
|
booleano | Mostrar ou ocultar 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo x, nossa API está 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 rótulo) | string (valor para renderizar)
|
Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem marcador)
|
reversed
|
booleano | Reverte a ordem dos pontos de dados. Padrão: false
|
values
|
booleano | 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e 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 rótulo) | string (valor para renderizar)
|
Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem marcador)
|
range
|
[número (min) | 'auto' , número (máximo) | 'auto' |
Define os valores mínimo e máximo do eixo y. Definir "mín" como "auto" assume o padrão 0 e "max" como "auto" assume como padrão o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'] .
|
values
|
booleano | 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 a desativa definindo-a como false . Padrão: { position: 'bottom' }
|
render_null_values
|
booleano | Trata valores nulos como 0. Padrão: false
|
tooltips
|
booleano | Para ativar ou desativar as dicas de ferramentas, passe o mouse 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 exemplos de uso. |
x_axis
|
configuração do eixo x | Consulte a seção eixo x para ver 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 ver 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 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 do contorno de cada ponto. Padrão: 3
|
shape
|
'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down'
|
Definir forma do ponto. Padrão: 'circle'
|
style
|
'none' | 'filled' | 'outline'
|
Definir estilo do 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 ponto dinâmico. Padrão: false
|
visible
|
booleano | Mostrar ou ocultar 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo x, nossa API está 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 rótulo) | string (valor para renderizar)
|
Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem marcador)
|
reversed
|
booleano | Reverte a ordem dos pontos de dados. Padrão: false
|
values
|
booleano | 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e 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 rótulo) | string (valor para renderizar)
|
Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem marcador)
|
range
|
[número (min) | 'auto' , número (máximo) | 'auto' |
Define os valores mínimo e máximo do eixo y. Definir "mín" como "auto" assume o padrão 0 e "max" como "auto" assume como padrão o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'] .
|
values
|
booleano | 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
dos 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 sparkline
Veja a seguir as propriedades config
dos gráficos de gráficos sparkline.
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 ver opções de configuração e exemplos de uso. |
y_axis
|
configuração do eixo y | Consulte a seção do eixo y para ver 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
Embora o Sparkline ofereça suporte inerentemente a uma única série, mantemos um padrão de API envolvendo substituições de séries nomeadas ou de matrizes para manter a consistência com os outros tipos de gráficos na nossa 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 nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e estruturada para suportar a configuração de vários eixos.
Propriedade | Valores | Observações |
---|---|---|
range
|
[número (min) | 'auto' , número (máximo) | 'auto' |
Define os valores mínimo e máximo do eixo y. Definir "mín" como "auto" assume o padrão 0 e "max" como "auto" assume como 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
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 exemplos de uso. |
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 da série ou um objeto nomeado que substitui uma série específica em sua resposta.
Propriedade | Valores | Observações |
---|---|---|
cell_visualization
|
boolean
|
Ativa ou desativa a visualização 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 das 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 do 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
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
|
Definir como false desativa a legenda. Padrão: ativada. Consulte a seção legend para ver as opções de configuração e exemplos de uso quando ativados.
|
tooltips
|
booleano | Para ativar ou desativar as dicas de ferramentas, passe o mouse 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 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 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
|
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: label, label and value, value, percent, label e percent. 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>