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.