Como usar componentes de visualização para criar uma visualização personalizada

Este tutorial é destinado a desenvolvedores experientes de JavaScript e pressupõe alguma familiaridade com as técnicas de programação funcional.

Neste exemplo, começamos com uma consulta relacionada a informações de vendas trimestrais hipotéticas de algumas marcas. Primeiro, vamos filtrar a consulta por marcas específicas e depois mudar os resultados por trimestre de vendas. Consulte a tabela abaixo para ver um exemplo.

Observação :a rotação é um recurso do Looker que permite agrupar resultados por uma determinada dimensão. Saiba mais sobre a rotação na página de documentação Análise de dados no Looker. Leia mais sobre como filtrar dados na página de documentação Como filtrar e limitar dados.

Em seguida, vamos usar os componentes de visualização para criar uma visualização personalizada que mostra a tendência dos produtos de cada marca no último trimestre. O resultado será um novo tipo de visualização composta por uma série de minigráficos aninhados em uma tabela, semelhante a este exemplo:

Além de mostrar como criar uma visualização personalizada, este exemplo demonstra algumas práticas recomendadas para trabalhar com a API Looker em um aplicativo React.

Para criar uma visualização personalizada com os componentes do Looker, verifique se a sua configuração atende aos requisitos e siga estas etapas:

1. Crie uma consulta em uma Análise e copie o valor qid
2. Transmitir os dados para um componente de visualização personalizado
3. Criar o componente CustomVis
4. Transformar os dados normalizados
5. Inserir os dados transformados em CustomVis
6. Gerar a visualização personalizada

O uso de componentes de visualização para criar uma visualização personalizada é apropriado quando ela se destina a um aplicativo ou extensão incorporada. Se você quiser disponibilizar a visualização personalizada para os usuários do Looker em uma instância do Looker, siga as instruções na página de documentação do visualization. Se você quiser desenvolver uma visualização personalizada e fazer upload dela no Marketplace do Looker, siga as instruções da página de documentação Como desenvolver uma visualização personalizada para o Marketplace do Looker.

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 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 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 ID da consulta

Neste exemplo, usamos informações de vendas trimestrais hipotéticas para marcas que estamos acompanhando ao longo do tempo.

Vamos mudar esses dados porque a dinamização é a forma integrada do Looker de agrupar os resultados da consulta. Em uma Análise, podemos executar uma consulta e criar um gráfico dos dados usando um dos tipos de visualização nativa do Looker. O gráfico fornece muitas informações, mas é difícil analisar rapidamente a tendência dos produtos de cada marca:

Assim como no exemplo de renderização de uma visualização simples, a próxima etapa é copiar o valor qid da barra de URL em "Explorar". Para este exemplo, o valor qid será Uijcav7pCA4MZY2MompsPZ, mas esse valor é específico para nossa instância de teste. Seu valor será diferente.

Etapa 2: transmitir os dados para um componente de visualização personalizado

Para começar, transmita o valor qid do URL da Análise para o componente Query e o objeto autenticado do SDK para DataProvider.

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 (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'></Query>
    </DataProvider>
  )
}

Em seguida, em vez de renderizar uma visualização nativa do Looker usando o componente Visualization, criaremos nosso próprio componente personalizado chamado CustomVis.

O componente Query pode aceitar qualquer elemento do React como um filho e simplesmente transmitir os valores config, data, fields e totals como propriedades para renderizar seus próprios componentes de visualização. Renderizamos CustomVis como um filho de Query para que ele possa receber todos os dados relevantes como propriedades.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'
import { CustomVis } from '../path/to/MyCustomVis'

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

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'>
        <CustomVis />
      </Query>
    </DataProvider>
  )
}

Etapa 3: criar o componente CustomVis

Em seguida, vamos criar o componente CustomVis. As propriedades herdadas do componente Query são config, fields, data, pivots e totals:

• config descreve todas as formas de renderização dos dados em um gráfico, como a espessura da linha em um minigráfico ou o tamanho e a forma dos pontos de um gráfico de dispersão.
• O fields armazena outros metadados sobre os valores de medição e dimensão retornados da consulta, por exemplo, como os valores precisam ser formatados ou o que rotular cada eixo.
• data é a resposta de chave-valor retornada da consulta.
• pivots descreve a dimensão de rotação da consulta.
• totals faz referência aos totais de linhas do Looker para uso em visualizações baseadas em tabela.

É possível transmitir essas propriedades não modificadas para uma visualização de tabela inserindo um componente Table.

import React from 'react'
import { Table } from '@looker/visualizations'

export const CustomVis = ({ config, fields, data, pivots }) => {
  return <Table config={config} data={data} fields={fields} pivots={pivots} />
}

Isso nos dá uma ideia dos dados quando eles são retornados diretamente do SDK. Na resposta renderizada, há uma linha para cada marca com os resultados agrupados ou dinamizados por trimestre.

Etapa 4: transformar os dados normalizados

Para converter esses dados dinâmicos para renderização com minigráficos aninhados, isolamos todos os valores de medição e os passamos para os subgráficos. No gráfico a seguir, os dados relevantes de uma única linha estão destacados para ilustrar os dados que vamos recolher e renderizar com uma visualização filha:

Para isso, vamos criar uma transformação personalizada. O exemplo a seguir é específico para este cenário. Você precisará analisar seus próprios dados de acordo.

import React from 'react'
import { Table, Sparkline } from '@looker/visualizations'

// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'

const nestSparklines = (data) => {
  return data.reduce((acc, d) => {
    // the first entry is the dimension (brand name), and the rest of the rows are the
    // quarterly sales information we want to pass to the Sparkline.
    const [parentDimension, ...measurePairs] = Object.entries(d)

    // `nonPivotedData` represents a single data row.
    // e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
    const nonPivotedData: SDKRecord[] = measurePairs.map(([_, value], i) => {
      return { entry: i, [NESTED_DATA_KEY]: value }
    })

    // now for each row in the table we render a Sparkline using the `nonPivotedData`
    // that we built.
    // E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
    return [
      ...acc,
      {
        [parentDimension[0]]: parentDimension[1],
        [NESTED_DATA_KEY]: () => (
          <Sparkline
            height={75}
            data={nonPivotedData}
            fields={{
              measures: [{ name: NESTED_DATA_KEY }],
              dimensions: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

A função é criada seguindo estas etapas:

1. Reduza o conjunto de dados para isolar o nome da marca dos dados trimestrais de pedidos de cada linha.
2. Atualize cada linha para incluir a dimensão e um componente do React renderizado que possa representar os valores de cada linha na tabela.

Etapa 5: inserir os dados transformados em CustomVis

Agora, transforme os dados usando nossa nova função e atribua a saída a uma nova variável com o nome nestedData:

export const CustomVis =({
  fields,
  data,
  config,
  pivots,
}) => {
  const nestedData = nestSparklines(data)

  return (
    <Table
      fields={{
        measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
        dimensions: fields.dimensions,
        pivots: [],
      }}
      config={config}
      data={nestedData}
      pivots={pivots}
    />
  )
}

Etapa 6: gerar a visualização personalizada

Depois de inserir os dados transformados e configurar o gráfico, a visualização será semelhante a este exemplo de tabela com minigráficos individuais para cada linha:

Todo o código necessário para renderizar essa visualização é o seguinte:

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

// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'
const ROW_HEIGHT = 75

const nestSparklines = data => {
  return data.reduce((acc, d) => {
    // the first entry is the dimension (brand name), and the rest of the rows are the
    // quarterly sales information we want to pass to the Sparkline.
    const [parentDimension, ...measurePairs] = Object.entries(d)

    // `nonPivotedData` represents a single data row.
    // e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
    const nonPivotedData = measurePairs.map(([_, value], i) => {
      return { entry: i, [NESTED_DATA_KEY]: value }
    })

    // now for each row in the table we render a Sparkline using the `nonPivotedData`
    // that we built.
    // E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
    return [
      ...acc,
      {
        [parentDimension[0]]: parentDimension[1],
        [NESTED_DATA_KEY]: () => (
          <Sparkline
            height={ROW_HEIGHT}
            data={nonPivotedData}
            fields={{
              measures: [{ name: NESTED_DATA_KEY }],
              dimensions: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

const CustomVis = ({ fields, data, pivots, config }) => {
  const nestedData = nestSparklines(data)

  return (
    <Table
      config={config}
      height={500}
      fields={{
        measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
        dimensions: fields.dimensions,
        pivots: [],
      }}
      data={nestedData}
      pivots={pivots}
      defaultRowHeight={ROW_HEIGHT}
    />
  )
}

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

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'>
        <CustomVis />
      </Query>
    </DataProvider>
  )
}

Próximas etapas

• Como usar componentes de visualização e a propriedade dashboard para renderizar uma visualização simples
• Como usar componentes de visualização e a propriedade query para renderizar uma visualização simples
• Como usar componentes de visualização para renderizar visualizações personalizadas
• Tabelas de propriedades de consulta e visualização