Visualização e consulta de tabelas de propriedades

Visualization

Este componente obtém os dados e a configuração do contexto da consulta e renderiza a visualização adequada. Pode personalizar a largura e a altura transmitindo valores numéricos de píxeis a essas propriedades.

Propriedade Valores Notas
width número (em píxeis) A predefinição é 100% quando a propriedade não está definida.
height número (em píxeis) A predefinição é 500 px quando a propriedade não está definida.
chartTypeMap objeto chave/valor Aceita um objeto de chave/valor que define que componente renderizar quando o sistema do adaptador encontra valores de tipo de gráfico específicos. Pode usar esta opção para substituir os gráficos predefinidos do Looker ou adicionar novos tipos de gráficos ao sistema de adaptadores.

Exemplo de utilização:

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 integra-se com a nossa API JavaScript para processar o ciclo de pedido/resposta e obter uma resposta de consulta pelo ID da consulta ou pelo valor qid. Pode transmitir substituições de configuração de visualização para serem unidas com a resposta da API e ter todos os dados carregados no contexto do React.

Propriedade Valores Notas
query number | string Pode aceitar o Query.client_id, que aparece após a propriedade qid no URL de uma exploração (3fdrdE0b3ATltUvXBaSOPN), ou um ID de consulta numérico (1234). Se tiver acesso ao ID de consulta numérico, começar por este valor pode poupar um pedido adicional ao servidor.

Query aceita a propriedade query ou a propriedade dashboard, mas não ambas.
dashboard número Pode aceitar um ID do painel de controlo numérico (1234). Se tiver acesso ao ID do painel de controlo numérico, começar a partir deste valor pode poupar um pedido adicional ao servidor.

dashboard não aceita os IDs de strings dos painéis de controlo 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 suportados. 		Defina e substitua as definições de configuração dos gráficos.
LoadingIndicator referência de componente Aceita uma referência de componente não montada. Predefiniçã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 áreas

Seguem-se as propriedades config para gráficos de áreas.

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

Predefinição: { position: 'bottom' }
positioning 'overlay' | 'stacked' | 'percent' Modo de sobreposição de gráficos. Predefinição: 'overlay'
render_null_values booleano Trata os valores nulos como 0. Predefinição: false
tooltips booleano Ative ou desative a apresentação de sugestões quando passa o cursor do rato sobre os pontos de dados. Predefinição: true
series série no formato view_name.field_name Consulte a secção série para ver opções de configuração e exemplos de utilização.
x_axis Configuração do eixo X Consulte a secção Eixo X para ver opções de configuração e exemplos de utilização.
y_axis Configuração do eixo Y Consulte a secção do eixo Y para ver opções de configuração e exemplos de utilização.

Exemplo de utilização:

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éries ou um objeto com nome que substitua uma série específica na sua resposta.

Propriedade Valores Notas
color de string Código hexadecimal
label de string
line_width número Defina a largura do traço da linha em píxeis. Predefinição: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Defina a forma do ponto. Predefinição: 'circle'
style 'none' | 'filled' | 'outline' Definir estilo do ponto. Predefinição: 'none' (pontos desativados)
visible booleano Mostrar ou ocultar a série de dados. Predefinição: true

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo x, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
gridlines booleano Mostrar ou ocultar linhas de grelha verticais. Predefinição: false
label false (para ocultar a etiqueta) | string (valor a renderizar) Define o valor a renderizar como a etiqueta do eixo x. Predefinição: false (sem etiqueta)
reversed booleano Inverte a ordem dos pontos de dados. Predefinição: false
values booleano Mostrar ou ocultar os valores renderizados ao longo do eixo. Predefinição: true

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo Y, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
gridlines booleano Mostrar ou ocultar linhas de grelha verticais. Predefinição: false.
label false (para ocultar a etiqueta) | string (valor a renderizar) Define o valor a renderizar como a etiqueta do eixo Y. Predefinição: false (sem etiqueta)
range [number (min) | 'auto', number (max) | 'auto'] Define o valor mínimo e máximo do eixo Y. Se definir o valor mínimo como 'auto', este é predefinido como 0. Se definir o valor máximo como 'auto', este é predefinido como o valor máximo do ponto de dados no conjunto. Predefinição: ['auto' | 'auto']
values booleano Mostrar ou ocultar os valores renderizados ao longo do eixo. Predefinição: true

Exemplo de utilização:

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 de colunas

Seguem-se as propriedades config para gráficos de barras e de colunas.

Propriedade Valores Notas
type 'bar' | 'column'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou desativa-a definindo-a como false. Predefinição: { position: 'bottom' }
positioning 'grouped' | 'stacked' | 'percent' Modo de sobreposição de gráficos. Predefinição: 'overlay'
tooltips booleano Ative ou desative a apresentação de sugestões quando passa o cursor do rato sobre os pontos de dados.

Predefinição: true
series série no formato view_name.field_name Consulte a secção série para ver opções de configuração e exemplos de utilização.
x_axis Configuração do eixo X Consulte a secção Eixo X para ver opções de configuração e exemplos de utilização.
y_axis Configuração do eixo Y Consulte a secção do eixo Y para ver opções de configuração e exemplos de utilização.

Exemplo de utilização:

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éries ou um objeto com nome que substitua uma série específica na sua resposta.

Propriedade Valores Notas
color de string Código hexadecimal
label de string
visible booleano Mostrar ou ocultar a série de dados. Predefinição: true

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo x, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
gridlines booleano Mostrar ou ocultar linhas de grelha verticais. Predefinição: false.
label false (para ocultar a etiqueta) | string (valor a renderizar) Define o valor a renderizar como a etiqueta do eixo x. Predefinição: false (sem etiqueta)
reversed booleano Inverte a ordem dos pontos de dados. Predefinição: false
values booleano Mostrar ou ocultar os valores renderizados ao longo do eixo. Predefinição: true

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo Y, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
gridlines booleano Mostrar ou ocultar linhas de grelha verticais. Predefinição: false.
label false (para ocultar a etiqueta) | string (valor a renderizar) Define o valor a renderizar como a etiqueta do eixo Y. Predefinição: false (sem etiqueta)
range [number (min) | 'auto', number (max) | 'auto'] Define o valor mínimo e máximo do eixo Y. Se definir o valor mínimo como "auto", o valor predefinido é 0. Se definir o valor máximo como "auto", o valor predefinido é o valor máximo do ponto de dados no conjunto. Predefinição: ['auto' | 'auto'].
values booleano Mostrar ou ocultar os valores renderizados ao longo do eixo. Predefinição: true

Exemplo de utilização:

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

Seguem-se as config propriedades dos gráficos de linhas.

Propriedade Valores Notas
type 'line'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou desativa-a definindo-a como false. Predefinição: { position: 'bottom' }
render_null_values booleano Trata os valores nulos como 0. Predefinição: false
tooltips booleano Ative ou desative a apresentação de sugestões quando passa o cursor do rato sobre os pontos de dados. Predefinição: true
series série no formato view_name.field_name Consulte a secção série para ver opções de configuração e exemplos de utilização.
x_axis Configuração do eixo X Consulte a secção Eixo X para ver opções de configuração e exemplos de utilização.
y_axis Configuração do eixo Y Consulte a secção do eixo Y para ver opções de configuração e exemplos de utilização.

Exemplo de utilização:

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éries ou um objeto com nome que substitua uma série específica na sua resposta.

Propriedade Valores Notas
color de string Código hexadecimal
label de string
line_width número Defina a largura do traço da linha em píxeis. Predefinição: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Defina a forma do ponto. Predefinição: 'circle'
style 'none' | 'filled' | 'outline' Definir estilo do ponto. Predefinição: 'none' (pontos desativados)
visible booleano Mostrar ou ocultar a série de dados. Predefinição: true

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo x, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
gridlines booleano Mostrar ou ocultar linhas de grelha verticais. Predefinição: false.
label false (para ocultar a etiqueta) | string (valor a renderizar) Define o valor a renderizar como a etiqueta do eixo x. Predefinição: false (sem etiqueta)
reversed booleano Inverte a ordem dos pontos de dados. Predefinição: false
values booleano Mostrar ou ocultar os valores renderizados ao longo do eixo. Predefinição: true

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo Y, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
gridlines booleano Mostrar ou ocultar linhas de grelha verticais. Predefinição: false
label false (para ocultar a etiqueta) | string (valor a renderizar) Define o valor a renderizar como a etiqueta do eixo Y. Predefinição: false (sem etiqueta)
range [number (min) | 'auto', number (max) | 'auto'] Define o valor mínimo e máximo do eixo Y. Se definir o valor mínimo como "auto", o valor predefinido é 0. Se definir o valor máximo como "auto", o valor predefinido é o valor máximo do ponto de dados no conjunto. Predefinição: ['auto' | 'auto'].
values booleano Mostrar ou ocultar os valores renderizados ao longo do eixo. Predefinição: true

Exemplo de utilização:

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

Seguem-se as config propriedades dos gráficos de dispersão.

Propriedade Valores Notas
type 'scatter'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou desativa-a definindo-a como false. Predefinição: { position: 'bottom' }
render_null_values booleano Trata os valores nulos como 0. Predefinição: false
tooltips booleano Ative ou desative a apresentação de sugestões quando passa o cursor do rato sobre os pontos de dados. Predefinição: true
series série no formato view_name.field_name Consulte a secção série para ver opções de configuração e exemplos de utilização.
x_axis Configuração do eixo X Consulte a secção Eixo X para ver opções de configuração e exemplos de utilização.
y_axis Configuração do eixo Y Consulte a secção do eixo Y para ver opções de configuração e exemplos de utilização.

Exemplo de utilização:

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éries ou um objeto com nome que substitua uma série específica na sua resposta.

Propriedade Valores Notas
color de string Código hexadecimal
label de string
line_width número Usado para definir o tamanho dos pontos num gráfico de dispersão. Pense nisso como o valor de contorno de cada ponto. Predefinição: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Defina a forma do ponto. Predefinição: 'circle'
style 'none' | 'filled' | 'outline' Definir estilo do ponto. Predefinição: 'none' (pontos desativados)
size_by false | string Nome da série para a qual calibrar o tamanho de cada ponto. Defina false para desativar o dimensionamento dinâmico de pontos. Predefinição: false
visible booleano Mostrar ou ocultar a série de dados. Predefinição: true

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo x, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
gridlines booleano Mostrar ou ocultar linhas de grelha verticais. Predefinição: false.
label false (para ocultar a etiqueta) | string (valor a renderizar) Define o valor a renderizar como a etiqueta do eixo x. Predefinição: false (sem etiqueta)
reversed booleano Inverte a ordem dos pontos de dados. Predefinição: false
values booleano Mostrar ou ocultar os valores renderizados ao longo do eixo. Predefinição: true

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo Y, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
gridlines booleano Mostrar ou ocultar linhas de grelha verticais. Predefinição: false.
label false (para ocultar a etiqueta) | string (valor a renderizar) Define o valor a renderizar como a etiqueta do eixo Y. Predefinição: false (sem etiqueta)
range [number (min) | 'auto', number (max) | 'auto'] Define o valor mínimo e máximo do eixo Y. Se definir o valor mínimo como "auto", o valor predefinido é 0. Se definir o valor máximo como "auto", o valor predefinido é o valor máximo do ponto de dados no conjunto. Predefinição: ['auto' | 'auto'].
values booleano Mostrar ou ocultar os valores renderizados ao longo do eixo. Predefinição: true

Exemplo de utilização:

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

Seguem-se as propriedades config para gráficos de valor único.

Propriedade Valores Notas
type 'single_value'

Exemplo de utilização:

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

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

Propriedades do gráfico sparkline

Seguem-se as propriedades config para gráficos de linhas.

Propriedade Valores Notas
type 'sparkline'
render_null_values booleano Trata os valores nulos como 0. Predefinição: false
series série no formato view_name.field_name Consulte a secção série para ver opções de configuração e exemplos de utilização.
y_axis Configuração do eixo Y Consulte a secção do eixo Y para ver opções de configuração e exemplos de utilização.

Exemplo de utilização:

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

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

series

Embora o gráfico de linhas em miniatura suporte inerentemente apenas uma série, mantemos um padrão de API que envolve 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 Notas
color de string Código hexadecimal
line_width número Defina a largura do traço da linha em píxeis. Predefinição: 3

Exemplo de utilização:

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 nossos gráficos só suportem atualmente um único eixo Y, a nossa API está preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Notas
range [number (min) | 'auto', number (max) | 'auto'] Define o valor mínimo e máximo do eixo Y. Se definir o valor mínimo como "auto", o valor predefinido é 0. Se definir o valor máximo como "auto", o valor predefinido é o valor máximo do ponto de dados no conjunto. Predefinição: ['auto' | 'auto'].

Exemplo de utilização:

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

Seguem-se as propriedades config para gráficos de tabelas.

Propriedade Valores Notas
type 'table'
series série no formato view_name.field_name Consulte a secção série para ver opções de configuração e exemplos de utilização.
column_order string[] Uma matriz de nomes de séries (por exemplo, 'orders.count') que indica como quer que as colunas da tabela sejam ordenadas da esquerda para a direita.
show_row_numbers boolean Ative/desative a apresentação da linha de totais na parte inferior da tabela. Predefinição: true
show_totals boolean Ative/desative a apresentação da linha de totais na parte inferior da tabela. Predefinição: true
show_row_totals boolean Ativar/desativar a apresentação dos totais das linhas no lado direito da tabela. Predefinição: true
truncate_text boolean Quando true, o texto das células da tabela está limitado a uma única linha e o conteúdo em excesso é truncado com reticências. Quando false, o conteúdo pode ser dividido em várias linhas. Predefinição: true
truncate_header boolean Quando true, as etiquetas do cabeçalho da tabela estão limitadas a uma única linha e o conteúdo em excesso é truncado com reticências. Quando a opção false está ativada, os cabeçalhos podem ser divididos em várias linhas. Predefinição: true

Exemplo de utilização:

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 com nome que substitua uma série específica na sua resposta.

Propriedade Valores Notas
cell_visualization boolean Ativa ou desativa a visualização de células inline. A predefinição é true para a primeira medida e false para as restantes.
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 devem ser renderizados como moeda, a precisão de ponto flutuante, se devem ser usadas vírgulas ou pontos para delimitar milhares, etc.

Exemplo de utilização:

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 circular

Seguem-se as propriedades config para gráficos circulares.

Propriedade Valores Notas
type 'pie'
legend false (para desativar) | configuração da legenda Se definir como false, a legenda é desativada. Predefinição: ativada. Consulte a secção Legenda para ver as opções de configuração e exemplos de utilização quando ativada.
tooltips booleano Ative ou desative a apresentação de sugestões quando passa o cursor do rato sobre os pontos de dados. Predefinição: true
series série no formato view_name.field_name Consulte a secção série para ver opções de configuração e exemplos de utilização.

Exemplo de utilização:

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 Notas
type 'labels' | 'legend' labels coloca etiquetas que apontam diretamente para cada segmento. legend coloca uma legenda separada. Predefinição: 'legend'
position 'top' | 'bottom' | 'left' | 'right' Posicione a legenda quando type: 'legend'. Predefinição: 'right'
width número Largura máxima da legenda em píxeis quando type: 'legend'. Predefinição: 300
value 'label' | 'label_value' | 'value' | 'percent' | 'label_percent' Define o conteúdo da legenda: etiqueta, etiqueta e valor, valor, percentagem, etiqueta e percentagem. Predefinição: 'label_percent'

Exemplo de utilização:

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 num gráfico circular é tratado como uma nova série:

Propriedade Valores Notas
color de string Código hexadecimal

Exemplo de utilização:

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>