Uso de componentes de visualização e a propriedade de consulta para renderizar uma visualização simples

Usar a propriedade query do componente de visualização Query é a maneira mais simples de renderizar uma visualização incorporável com os componentes de visualização do Looker. O uso da propriedade query, em vez da propriedade dashboard, oferece os seguintes benefícios:

  • Você só precisa criar uma consulta no Looker. Não é necessário criar um painel.
  • Os valores aceitos por query (Query.client_id ou o ID da consulta) são imutáveis. A menos que o modelo mude, nenhuma mudança na instância do Looker vai afetar a visualização incorporada.

Se você quiser criar uma visualização incorporável que responda a mudanças na interface do Looker e, portanto, possa ser atualizada por usuários do Looker que não sejam desenvolvedores de apps, siga as instruções na página de documentação Como usar componentes de visualização e um ID de painel para renderizar uma visualização simples.

Para renderizar uma visualização incorporável usando os componentes de visualização do Looker e a propriedade query, verifique se a configuração atende aos requisitos e siga estas etapas:

  1. Crie uma consulta em uma Análise e copie o valor Query.client_id.
  2. Incorpore a consulta em um aplicativo React.
  3. Adicione o componente Visualization.
  4. Personalize as configurações com a propriedade config.

Requisitos

Antes de começar, alguns elementos são necessários:

  • Você precisa ter acesso a uma instância do Looker.
  • Se você está criando no framework de extensão ou no seu próprio aplicativo React independente, é importante fazer a autenticação com a API do Looker e ter acesso ao objeto do SDK do Looker. Leia sobre a autenticação da API Looker ou nosso framework de extensões para mais informações.
  • Verifique se você instalou o pacote NPM dos componentes de visualização do Looker e o pacote NPM @looker/components-data (links em inglês). As informações sobre como instalar e usar o pacote de componentes de visualização podem ser encontradas no documento README, disponível no GitHub e no NPM (links em inglês).

Etapa 1: criar uma consulta em um Explore e copiar o valor Query.client_id

Use uma opção Explore para criar uma consulta na interface do Looker. Adicione uma visualização compatível ao painel "Explorar" e, se quiser, defina as definições no menu Configurações da visualização.

Encontre a propriedade do URL qid na barra de endereço do navegador. O valor alfanumérico atribuído a essa propriedade é o Query.client_id.

Por exemplo, se o URL for https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse, Query.client_id será evomfl66xHx1jZk2Hzvv1R.

A Query.client_id é uma string exclusiva que representa a consulta e as configurações de visualização. Se você mudar algo na consulta ou nas configurações, o Query.client_id mudará.

Copie o Query.client_id para usar na próxima etapa.

Etapa 2: incorporar a consulta em um aplicativo React

Agora, você pode pegar o Query.client_id e incorporá-lo a um aplicativo React.

Confira abaixo o código de um aplicativo hipotético do React. Este exemplo foi criado no framework de extensão do Looker, e o objeto do SDK do Looker foi extraído do provedor de contexto de extensão.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return null
}

Para começar, vamos usar os componentes DataProvider e Query. O DataProvider armazena a referência do SDK no contexto, e o Query envia nossas solicitações de rede e formata a renderização da resposta.

Além disso, você precisa informar dois itens:

  • Um objeto do SDK. O objeto do SDK é extraído do contexto da extensão.
  • O Query.client_id. O Query.client_id é atribuído à propriedade query.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    {/* pass the sdk object to DataProvider */}
    <DataProvider sdk={core40SDK}>
      {/* the value referenced by the `query` prop is
          unique to your looker instance. */}
      <Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
    </DataProvider>
  )
}

Etapa 3: adicionar o componente Visualization

Em seguida, adicione o componente Visualization, que interpreta os dados e as definições de configuração retornados por Query para renderizar o gráfico esperado.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query="evomfl66xHx1jZk2Hzvv1R">
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Esta etapa gera uma visualização parecida com o exemplo a seguir:

Visualização de gráfico de linhas.

Etapa 4: personalizar as configurações com a propriedade config

Use a propriedade config do componente Query para substituir as configurações de visualização retornadas pelo SDK. Esta propriedade pode alterar qualquer recurso suportado, desde o tipo de visualização até os detalhes de como cada série de dados é renderizada.

No exemplo de código abaixo, a propriedade config muda o tipo de gráfico para sparkline e atribui uma nova cor à série de dados.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query
        query={'evomfl66xHx1jZk2Hzvv1R'}
        config={{
          type: 'sparkline',
          series: [{ color: '#F4B400' }],
        }}
      >
        <Visualization />
      </Query>
    </DataProvider>
  )
}

A etapa anterior renderiza este minigráfico laranja:

Uma visualização em um minigráfico.

Para ver uma lista completa das subpropriedades que estão disponíveis na propriedade config, acesse a documentação de referência das tabelas de propriedades de visualização e consulta.

Próximas etapas