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 informazioni ipotetiche sulle vendite trimestrali per alcuni brand. Per prima cosa filtreremo la query per brand specifici, quindi imposteremo i risultati in base al trimestre di vendita. Consulta la tabella di seguito per un esempio.

Nota: la rotazione è una funzionalità di Looker che ti consente di raggruppare i risultati in base a una determinata dimensione. Per saperne di più sulla creazione di pivot, consulta la pagina della documentazione Esplorazione dei dati in Looker. Per scoprire di più su come filtrare i dati, consulta la pagina della documentazione Applicazione di filtri e limitazione dei dati.

In seguito, useremo i componenti della visualizzazione per creare una visualizzazione personalizzata che mostri l'andamento dei prodotti di ciascun brand nell'ultimo trimestre. Il risultato sarà un nuovo tipo di visualizzazione composta da una serie di sparkline nidificati all'interno di una tabella, simile all'esempio seguente:

Oltre a mostrare come creare una visualizzazione personalizzata, questo esempio illustra alcune best practice per lavorare con l'API Looker all'interno di un'applicazione React.

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

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

L'utilizzo dei componenti di visualizzazione per creare una visualizzazione personalizzata è appropriato quando la visualizzazione personalizzata è 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 nella pagina della documentazione visualization. Se vuoi sviluppare una visualizzazione personalizzata e caricarla su Looker Marketplace, segui le istruzioni nella pagina della documentazione Sviluppare 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 di Looker e avere accesso all'oggetto SDK di Looker. Per saperne di più, leggi l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensioni.
• Assicurati di aver installato il pacchetto NPM dei componenti di visualizzazione di 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 dati di vendita trimestrali ipotetici per i brand che monitoriamo nel tempo.

Eseguiremo il pivot di questi dati, poiché la modalità 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 nativa di Looker. Il grafico fornisce molte informazioni, ma è difficile analizzare a colpo d'occhio l'andamento dei prodotti di ciascun brand:

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

Passaggio 2: passa i dati a un componente di visualizzazione personalizzato

Per iniziare, passa 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, anziché eseguire il rendering di una visualizzazione Looker nativa tramite il componente Visualization, creeremo il nostro componente personalizzato CustomVis.

Il componente Query può accettare qualsiasi elemento React come elemento secondario e si limita a trasferire i valori config, data, fields e totals come proprietà per 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: crea il componente CustomVis

A questo punto, 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 dovrebbero 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 memorizza metadati aggiuntivi sui valori di misura e dimensione restituiti dalla query, ad esempio il modo in cui i valori dovrebbero essere formattati o cosa etichettare ogni asse.
• data è la risposta chiave-valore restituita dalla query.
• pivots descrive la dimensione in base alla quale viene eseguita la rotazione della query.
• totals fa riferimento ai totali delle righe di Looker per utilizzarli nelle visualizzazioni basate su tabelle.

Possiamo passare 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 che vengono restituiti direttamente dall'SDK. Nella risposta visualizzata, c'è una riga per ogni brand con i risultati raggruppati, o ruotati, per trimestre.

Passaggio 4: trasforma i dati normalizzati

Per convertire questi dati sottoposti a pivot da visualizzare con sparkline nidificati, isoliamo tutti i valori delle misure e li passiamo ai grafici secondari. Nel grafico che segue vengono evidenziati i dati pertinenti per una singola riga per illustrare i dati che comprimiamo e visualizziamo con una visualizzazione secondaria:

Per farlo, creeremo una trasformazione personalizzata. Di seguito è riportato un esempio specifico per 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.
    // 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: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

La funzione viene creata seguendo questi passaggi:

1. Riduci l'utilizzo del set di dati per isolare il nome del brand dai dati dell'ordine trimestrale per ogni riga.
2. Aggiorna ogni riga in modo da 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 chiamata 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 avrà l'aspetto di una tabella con singoli grafici sparkline per ogni riga:

L'intero codice necessario per eseguire il rendering di questa visualizzazione è il 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.
    // 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 di visualizzazione e la proprietà dashboard per eseguire una visualizzazione semplice
• Utilizzare i componenti di visualizzazione e la proprietà query per eseguire una visualizzazione semplice
• Utilizzare i componenti di visualizzazione per eseguire il rendering di visualizzazioni personalizzate
• Tabelle delle proprietà di visualizzazione e query