Utilizzo dei componenti di visualizzazione per creare una visualizzazione personalizzata

Questo tutorial è destinato a sviluppatori JavaScript esperti e presuppone una certa familiarità con le tecniche di programmazione funzionale.

In questo esempio, iniziamo con una query correlata a ipotetiche informazioni di vendita trimestrali per alcuni brand. Prima filtreremo la query per brand specifici, quindi passeremo i risultati in base al trimestre di vendita. Puoi vedere un esempio nella tabella che segue.

Successivamente, utilizzeremo i componenti di visualizzazione per creare una visualizzazione personalizzata che mostri l'andamento dei prodotti di ogni brand nell'ultimo trimestre. Il risultato sarà un nuovo tipo di visualizzazione composto da una serie di sparkline nidificate all'interno di una tabella, simile al seguente esempio:

Oltre a mostrarti come creare una visualizzazione personalizzata, questo esempio illustra alcune best practice per l'utilizzo dell'API Looker in un'applicazione React.

Per creare una visualizzazione personalizzata con i componenti di Looker, assicurati che la configurazione soddisfi i requisiti, quindi segui questi passaggi:

1. Crea una query in un'esplorazione e copia il valore qid
2. Trasmettere i dati a un componente di visualizzazione personalizzata
3. Crea il componente CustomVis
4. Trasformare i dati normalizzati
5. Inserisci i dati trasformati in CustomVis
6. Generare la visualizzazione personalizzata

L'utilizzo dei componenti di visualizzazione per creare una visualizzazione personalizzata è appropriato quando questa è destinata a un'applicazione o un'estensione incorporata. Se vuoi rendere la visualizzazione personalizzata disponibile agli utenti di Looker in un'istanza di Looker, segui le istruzioni riportate nella pagina della documentazione di visualization. Se vuoi sviluppare una visualizzazione personalizzata e caricarla in Looker Marketplace, segui le istruzioni nella pagina della documentazione relativa allo sviluppo di una visualizzazione personalizzata per Looker Marketplace.

Requisiti

Prima di iniziare, sono necessari alcuni elementi:

• Devi avere accesso a un'istanza di Looker.
• Che tu stia creando nel framework di estensione o nella tua applicazione React autonoma, è importante eseguire l'autenticazione con l'API Looker e avere accesso all'oggetto SDK Looker. Per saperne di più, consulta l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensioni.
• Assicurati di aver installato il pacchetto NPM dei componenti di visualizzazione Looker e il pacchetto NPM @looker/components-data. Le informazioni sull'installazione e sull'utilizzo del pacchetto dei componenti di visualizzazione sono disponibili nel documento README, disponibile in GitHub e NPM.

Passaggio 1: crea una query in un'esplorazione e copia l'ID query

In questo esempio, utilizziamo ipotetiche informazioni di vendita trimestrali per i brand che monitoriamo nel tempo.

Eseguiremo il pivot di questi dati, poiché il pivot è il modo integrato di Looker per raggruppare i risultati delle query. In un'esplorazione, possiamo eseguire una query e creare un grafico dei dati utilizzando uno dei tipi di visualizzazione nativi di Looker. Il grafico fornisce molte informazioni, ma è difficile analizzare a colpo d'occhio l'andamento dei prodotti di ogni brand:

Come nell'esempio di rendering di una visualizzazione semplice, il passaggio successivo consiste nel copiare il valore qid dalla barra degli URL dell'esplorazione. Ai fini di questo esempio, il valore di qid sarà Uijcav7pCA4MZY2MompsPZ, ma è specifico per la nostra istanza di test; il valore sarà diverso.

Passaggio 2: trasmetti i dati a un componente di visualizzazione personalizzata

Per iniziare, trasmetti il valore qid preso dall'URL dell'esplorazione al componente Query e l'oggetto SDK autenticato a 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>
  )
}

Successivamente, invece di eseguire il rendering di una visualizzazione Looker nativa tramite il componente Visualization, creeremo il nostro componente personalizzato, chiamato CustomVis.

Il componente Query può accettare qualsiasi elemento React come elemento secondario e trasmette semplicemente i valori config, data, fields e totals come proprietà per eseguire il rendering dei tuoi componenti di visualizzazione. Eseguiremo il rendering di CustomVis come elemento secondario di Query, in modo che possa ricevere tutti i dati pertinenti come proprietà.

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>
  )
}

Passaggio 3: sviluppa il componente CustomVis

Ora creiamo il componente CustomVis. Le proprietà ereditate dal componente Query sono config, fields, data, pivots e totals:

• config descrive tutti i modi in cui i dati devono essere visualizzati in un grafico, ad esempio lo spessore della linea in uno sparkline o le dimensioni e la forma dei punti di un grafico a dispersione.
• fields archivia metadati aggiuntivi sui valori di misura e dimensione restituiti dalla query, ad esempio il modo in cui devono essere formattati i valori o cosa assegnare un'etichetta a ogni asse.
• data è la risposta chiave-valore restituita dalla query.
• pivots descrive la dimensione in base alla quale viene eseguito il pivot della query.
• totals fa riferimento ai totali delle righe di Looker per utilizzarli nelle visualizzazioni basate su tabelle.

Possiamo trasferire queste proprietà non modificate a una visualizzazione tabella inserendo un 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} />
}

Questo ci dà un'idea dei dati in quanto vengono restituiti direttamente dall'SDK. Nella risposta visualizzata è presente una riga per ogni brand con i risultati raggruppati o sottoposti a pivot per trimestre.

Passaggio 4: trasforma i dati normalizzati

Per convertire questi dati sottoposti a pivot in modo che vengano visualizzati con grafici sparkline nidificati, blocchiamo tutti i valori delle misurazioni e li passiamo ai grafici secondari. Nel grafico seguente, sono evidenziati i dati pertinenti relativi a una singola riga per illustrare i dati che comprimiremo e mostreremo con una visualizzazione secondaria:

Creeremo una trasformazione personalizzata. Di seguito è riportato un esempio specifico di questo scenario; dovrai analizzare i tuoi dati di conseguenza.

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 above.
    // 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: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

Per creare la funzione, segui questi passaggi:

1. Riduci il set di dati per isolare il nome del brand dai dati degli ordini trimestrali per ogni riga.
2. Aggiorna ogni riga per includere la dimensione e un componente React visualizzato che può rappresentare i valori per ogni riga della tabella.

Passaggio 5: inserisci i dati trasformati in CustomVis

Ora trasforma i dati utilizzando la nostra nuova funzione e assegna l'output a una nuova variabile denominata 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}
    />
  )
}

Passaggio 6: genera la visualizzazione personalizzata

Dopo aver inserito i dati trasformati e configurato il grafico, la visualizzazione apparirà come questo esempio di tabella con singoli grafici sparkline per ogni riga:

L'intero codice necessario per rendere la visualizzazione di cui sopra è la seguente:

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 above.
    // 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>
  )
}

Passaggi successivi

• Utilizzare i componenti della visualizzazione e la proprietà dashboard per eseguire una semplice visualizzazione
• Utilizzare i componenti della visualizzazione e la proprietà query per eseguire una semplice visualizzazione
• Utilizzare i componenti di visualizzazione per eseguire visualizzazioni personalizzate
• Tabelle delle proprietà di visualizzazione e query