Como usar 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 (e não a 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 pelo query (Query.client_id ou ID da consulta) são imutáveis. A menos que o modelo em questão mude, nenhuma alteração na instância do Looker afetará a visualização incorporada.

Se você quiser criar uma visualização incorporável que responda às mudanças na IU do Looker e, portanto, possa ser atualizada pelos usuários do Looker, exceto os desenvolvedores de apps, siga as instruções na 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 componentes de visualização do Looker e a propriedade query, verifique se sua configuração atende aos requisitos e siga estas etapas:

  1. Crie uma consulta em um Explorar e copie o valor Query.client_id.
  2. Incorporar a consulta a um aplicativo do React.
  3. Adicione o componente Visualization.
  4. Personalizar 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 autônomo, é importante autenticar 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 de NPM e os pacotes do NPM @looker/components-data dos 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: crie uma consulta em um Explore e copie o valor Query.client_id

Use Explorar para criar uma consulta na IU do Looker. Adicione uma visualização compatível ao "Explorar" e, como opção, defina as configurações no menu Configurações da visualização.

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

O Query.client_id é uma string única que representa as configurações de consulta e 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 etapa a seguir.

Etapa 2: incorporar a consulta em um aplicativo do React

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

Veja abaixo o código de 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, 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, é necessário fornecer duas informações:

  • Um objeto 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 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 semelhante ao exemplo a seguir:

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 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:

Para ver uma lista completa das subpropriedades disponíveis na propriedade config, acesse a documentação de referência das tabelas de visualização e consulta de propriedade ou veja as propriedades em ação no Playground de componentes de visualização.

Próximas etapas