Usar componentes de visualização para criar uma visualização personalizada

Este tutorial destina-se a programadores de JavaScript experientes e pressupõe alguma familiaridade com técnicas de programação funcional.

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

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

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

Para criar uma visualização personalizada com componentes do Looker, certifique-se de que a configuração cumpre os requisitos e, em seguida, siga estes passos:

1. Crie uma consulta numa exploração e copie o qid valor
2. Transmita os dados a um componente de visualização personalizado
3. Crie o componente CustomVis
4. Transforme os dados normalizados
5. Insira os dados transformados no CustomVis
6. Gere a visualização personalizada

A utilização de componentes de visualização para criar uma visualização personalizada é adequada quando a visualização personalizada se destina a uma aplicação ou extensão incorporada. Se quiser disponibilizar a visualização personalizada aos utilizadores do Looker numa instância do Looker, siga as instruções na página de documentação visualization. Se quiser desenvolver uma visualização personalizada e carregá-la para o Looker Marketplace, siga as instruções na página de documentação Desenvolver uma visualização personalizada para o Looker Marketplace.

Requisitos

Antes de começar, precisa de alguns elementos:

• Tem de ter acesso a uma instância do Looker.
• Quer esteja a criar no framework de extensões ou na sua própria aplicação React autónoma, é importante fazer a autenticação com a API Looker e ter acesso ao objeto do SDK Looker. Leia acerca da autenticação da API Looker ou da nossa estrutura de extensões para mais informações.
• Certifique-se de que instalou o pacote NPM dos componentes de visualização do Looker e o @looker/components-data pacote NPM. Pode encontrar informações sobre a instalação e a utilização do pacote de componentes de visualização no documento README, disponível no GitHub e no NPM.

Passo 1: crie uma consulta numa análise detalhada e copie o ID da consulta

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

Vamos dinamizar estes dados, uma vez que a dinamização é a forma integrada do Looker de agrupar os resultados da consulta. Numa exploração, podemos executar uma consulta e criar um gráfico dos dados usando um dos tipos de visualização nativos do Looker. O gráfico fornece muitas informações, mas é difícil analisar rapidamente a tendência dos produtos de cada marca:

O passo seguinte é copiar o valor qid da barra de URL do Explore. Para efeitos deste exemplo, o valor qid é Uijcav7pCA4MZY2MompsPZ, mas esse valor é específico da nossa instância de teste. O seu valor será diferente.

Passo 2: transmita os dados a um componente de visualização personalizado

Para começar, transmita o valor qid retirado do URL do Explore para o componente Query e o objeto SDK autenticado 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 através do componente Visualization, vamos criar o nosso próprio componente personalizado denominado CustomVis.

O componente Query pode aceitar qualquer elemento React como subordinado e simplesmente transmite os valores config, data, fields e totals como propriedades para renderizar os seus próprios componentes de visualização. Vamos renderizar CustomVis como filho de Query, para que 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>
  )
}

Passo 3: crie 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 como os dados devem ser renderizados num gráfico, como a espessura da linha numa minigráfico ou o tamanho e a forma dos pontos de um gráfico de dispersão.
• fields armazena metadados adicionais acerca dos valores de métricas e dimensões devolvidos pela consulta, como a forma como os valores devem ser formatados ou o que etiquetar em cada eixo.
• data é a resposta de chave/valor devolvida pela consulta.
• pivots descreve a dimensão pela qual a consulta é dinamizada.
• totals faz referência aos totais das linhas do Looker para utilização em visualizações baseadas em tabelas.

Podemos transmitir estas 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} />
}

Isto dá-nos uma ideia dos dados à medida que são devolvidos diretamente do SDK. Na resposta renderizada, existe uma linha para cada marca com resultados agrupados ou invertidos por trimestre.

Passo 4: transforme os dados normalizados

Para converter estes dados dinâmicos de modo a serem renderizados com minigráficos aninhados, isolamos todos os valores de medidas e transmitimo-los aos subgráficos. No gráfico seguinte, os dados relevantes para uma única linha são realçados para ilustrar os dados que vamos comprimir e renderizar com uma visualização secundária:

Vamos criar uma transformação personalizada para este efeito. Segue-se um exemplo específico deste cenário. Tem de analisar os seus próprios dados em conformidade.

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 através dos seguintes passos:

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

Passo 5: insira os dados transformados no CustomVis

Agora, transforme os dados com a nossa nova função e atribua o resultado a uma nova variável denominada 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}
    />
  )
}

Passo 6: gere a visualização personalizada

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

O código completo necessário para renderizar esta 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>
  )
}

Passos seguintes

• Usar componentes de visualização e a propriedade dashboard para renderizar uma visualização simples
• Usar componentes de visualização para renderizar visualizações personalizadas
• Visualizar e consultar tabelas de propriedades