Uso de componentes de visualização e da 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. Usar a 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 seja alterado, 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 possa ser atualizada por usuários do Looker que não sejam desenvolvedores de apps, siga as instruções da página de documentação Como usar componentes de visualização e um ID do 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.
  • Não importa 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 Looker e ter acesso ao objeto do SDK do Looker. Leia sobre a autenticação da API Looker ou nosso framework de extensão para mais informações.
  • Verifique se você instalou o pacote NPM e o @looker/components-data pacote NPM de componentes de visualização do Looker. 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.

Etapa 1: criar uma consulta em uma Análise e copiar o valor Query.client_id

Use uma Análise para criar uma consulta na interface do Looker. Adicione uma visualização compatível à guia "Explorar" e defina as configurações dela no menu Configurações.

Encontre a propriedade de URL qid na barra de endereço do navegador. O valor alfanumérico atribuído a essa propriedade é 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.

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

Copie o Query.client_id para usar na etapa a seguir.

Etapa 2: incorporar a consulta em um aplicativo React

Agora, você pode incorporar o Query.client_id a um aplicativo React.

O código a seguir é para um aplicativo React hipotético. Esse exemplo foi criado no framework de extensão do Looker, e o objeto do SDK do Looker foi extraído do provedor de contexto da 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, usaremos 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 fornecer duas coisas:

  • 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 configurações retornadas 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>
  )
}

Essa etapa gera uma visualização semelhante ao exemplo a seguir:

Visualização de um 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 do SDK. Essa propriedade pode alterar qualquer recurso compatível, desde o tipo de visualização até os detalhes de como cada série de dados é renderizada.

No exemplo de código a seguir, 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 minigráfico.

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

Próximas etapas