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. você não precisa 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 subjacente 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 Usar componentes de visualização e um ID de 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 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. As informações sobre a instalação e o uso do pacote de componentes de visualização estão disponíveis no documento README, disponível no GitHub e no NPM.

Etapa 1: criar uma consulta em uma Análise detalhada 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 próxima etapa.

Etapa 2: incorporar a consulta a 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, 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 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>
  )
}

Esta 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 pelo 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