Stai visualizzando la documentazione per Looker 22.16. La documentazione più recente è disponibile qui.

Utilizzare i componenti di visualizzazione per creare una visualizzazione personalizzata

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

In questo esempio inizieremo con un grafico a barre, una visualizzazione nativa di Looker che mostra informazioni ipotetiche sulle vendite settimanali:

Poi, utilizzeremo i componenti di visualizzazione per creare una visualizzazione personalizzata che mostra le tendenze di ogni prodotto del brand nell'ultimo trimestre. Il risultato sarà un nuovo tipo di visualizzazione composto da una serie di sparkline nidificate all'interno di una tabella, che assomiglia a questo esempio:

Oltre a mostrare come creare una visualizzazione personalizzata, questo esempio mostra 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, quindi segui questi passaggi:

Crea una query in un'esplorazione e copia il valore qid
Trasmettere i dati a un componente di visualizzazione personalizzato
Creare il componente CustomVis
Trasforma i dati normalizzati
Inserisci i dati trasformati in CustomVis
Generare la visualizzazione personalizzata

L'uso dei componenti di visualizzazione per creare una visualizzazione personalizzata è appropriato quando la visualizzazione personalizzata è destinata a un'applicazione o 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 di visualization. Se vuoi sviluppare una visualizzazione personalizzata e caricarla su Looker Marketplace, segui le istruzioni riportate 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 il framework di estensione o la tua applicazione autonoma React, è importante eseguire l'autenticazione con l'API di Looker e accedere all'oggetto dell'SDK Looker. Per ulteriori informazioni, consulta la sezione Autenticazione API Looker o il nostro framework delle estensioni.
Assicurati di aver installato il pacchetto NPM dei componenti di visualizzazione Looker e il pacchetto NPM @looker/components-data. Puoi trovare informazioni sull'installazione e sull'utilizzo del pacchetto dei componenti di visualizzazione 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 informazioni ipotetiche sulle vendite settimanali dei brand che monitoriamo per un trimestre completo.

In Esplora, 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 di ciascun prodotto del brand:

Come nell'esempio di rendering di una visualizzazione semplice, il passaggio successivo consiste nel copiare il valore qid dalla barra dell'URL di Explore. Ai fini di questo esempio, qid sarà 4tQKzCBOwBGNWTskQyEpG8.

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

Per iniziare, passa il valore qid estratto dall'URL di Explore 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='4tQKzCBOwBGNWTskQyEpG8'></Query>
    </DataProvider>
  )
}

Ora, anziché eseguire il rendering di una visualizzazione nativa di Looker tramite il componente Visualization, creeremo il nostro componente personalizzato CustomVis.

Il componente Query può accettare qualsiasi elemento React come elemento secondario e trasmetterà semplicemente i valori config, data, fields e totals come proprietà per eseguire il rendering dei componenti di visualizzazione. Il rendering di CustomVis verrà eseguito 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='4tQKzCBOwBGNWTskQyEpG8'>
        <CustomVis />
      </Query>
    </DataProvider>
  )
}

Passaggio 3: crea il componente `CustomVis`

Ora creiamo il componente CustomVis. Le proprietà ereditate dal componente Query sono config, fields, data 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 memorizza metadati aggiuntivi sui valori di misurazione e dimensione restituiti dalla query, ad esempio come devono essere formattati i valori o cosa etichettare ogni asse.
data è la risposta con una coppia chiave-valore restituita dalla query.
totals fa riferimento ai totali di righe di Looker da utilizzare nelle visualizzazioni basate su tabelle.

Possiamo trasferire queste proprietà non modificate in una visualizzazione tabella inserendo un componente Table.

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

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

Questo ci dà un'idea dei dati che vengono restituiti direttamente dall'SDK. Nella risposta visualizzata, è presente una riga per ogni brand, ogni settimana:

Passaggio 4: trasforma i dati normalizzati

Per ottenere informazioni sulle tendenze delle serie temporali da questi dati, dobbiamo raggruppare le righe in base al nome del brand. Anziché avere una nuova riga per ogni brand e per ogni brand, vogliamo ottenere una singola riga per ogni nome del brand e nidificata al suo interno, con un elenco delle date e dei conteggi degli ordini.

Creeremo una trasformazione personalizzata per raggruppare i valori in questo modo. Di seguito è riportato un esempio specifico di questo scenario: dovrai analizzare i tuoi dati di conseguenza.

import React from 'react'
import { Table } from '@looker/visualizations'
import { filter, pick } from 'lodash'

const transformData = data => {
  const brandKey = 'products.brand_name'

  // create a unique set of brand names
  const uniqueBrands = new Set(data.map(d => d[brandKey]))

  // convert the Set back to an array and nest values below each brand name
  // sample output:
  // [{
  //     products.brand_name: "Looker",
  //     orders.count: { orders.created_week: '2019-09-30', orders.count: 17 }
  //  }, ...]
  return Array.from(uniqueBrands).map(brand => {
    const values = filter(data, { [brandKey]: brand }).map(d =>
      pick(d, ['orders.created_week', 'orders.count'])
    )

    return { [brandKey]: brand, 'orders.count': values }
  })
}

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

I passaggi seguenti creano questa funzione:

Assegna prima il riferimento products.brand_name a una variabile denominata brandKey. Questo è il modo in cui la serie è etichettata nella risposta dei dati ed è il modo in cui puoi raggruppare le informazioni.
Quindi, crea un elenco univoco di nomi di brand mappando la risposta e restituendo solo i valori assegnati a products.brand_name. Questi vengono quindi passati al costruttore Set. In JavaScript, un Set è un elenco in cui i valori possono verificarsi una sola volta, creando automaticamente un elenco di valori univoci.
Quindi converti la Set di brand unici in un array per utilizzare le utilità di trasformazione degli elenchi, come map.
Per ogni brand univoco, filtra la risposta di dati originale in base solo alle righe delle serie temporali pertinenti al nome di quel brand.
Infine, per ogni nome del brand, nidifica questi valori sotto la chiave dell'oggetto orders.count. Anche in questo caso, puoi vedere un esempio di come viene restituito qui, dove il nome del brand viene impostato sul valore della stringa e orders.count viene impostato sull'elenco di tutti i valori pertinenti per quel brand.

Passaggio 5: inserisci i dati trasformati in `CustomVis`

Ora trasforma i dati con la nostra nuova funzione e assegna l'output a una nuova variabile chiamata nestedData.

import React from 'react'
import { Table } from '@looker/visualizations'
import { filter, pick } from 'lodash'

const transformData = data => {
  const brandKey = 'products.brand_name'

  // create a unique set of brand names
  const uniqueBrands = new Set(data.map(d => d[brandKey]))

  // convert the Set back to an array and nest values below each brand name
  // sample output:
  // [{
  //     products.brand_name: "Looker",
  //     orders.count: { orders.created_week: '2019-09-30', orders.count: 17 }
  //  }, ...]
  return Array.from(uniqueBrands).map(brand => {
    const values = filter(data, { [brandKey]: brand }).map(d =>
      pick(d, ['orders.created_week', 'orders.count'])
    )

    return { [brandKey]: brand, 'orders.count': values }
  })
}

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

  return <Table config={config} data={data} fields={fields} />
}

Quindi, esegui il loop sull'array nestedData e passa i valori nidificati in un grafico sparkline standard, fornito dalla libreria dei componenti di visualizzazione di Looker.

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

const transformData = data => {
  const brandKey = 'products.brand_name'

  // create a unique set of brand names
  const uniqueBrands = new Set(data.map(d => d[brandKey]))

  // convert the Set back to an array and nest values below each brand name
  // sample output:
  // [{
  //     products.brand_name: "Looker",
  //     orders.count: { orders.created_week: '2019-09-30', orders.count: 17 }
  //  }, ...]
  return Array.from(uniqueBrands).map(brand => {
    const values = filter(data, { [brandKey]: brand }).map(d =>
      pick(d, ['orders.created_week', 'orders.count'])
    )

    return { [brandKey]: brand, 'orders.count': values }
  })
}

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

  const nestedSparklines = nestedData.map(d => {
    return {
      ...d,
      'orders.count': () => (
        <Sparkline
          data={d['orders.count']}
          config={config}
          fields={fields}
          height={75}
        />
      ),
    }
  })

  return <Table config={config} data={nestedSparklines} fields={fields} />
}

Ecco cosa accade nel codice riportato sopra:

I dati sono stati mappati ancora una volta per creare un nuovo sparkline per ogni riga.
I valori che sono stati nidificati sotto la chiave orders.count (la serie di date e conteggi che appartengono a quel brand) vengono passati alla proprietà data di Sparkline.
Vengono tramandati anche gli oggetti config e fields, necessari per la visualizzazione di tutti i nostri grafici. Anche l'altezza è impostata su 75 pixel, così da offrire un layout confortevole per ogni riga della tabella.
Infine, l'oggetto grafico nidificato viene passato nel grafico Table.

Passaggio 6: genera la visualizzazione personalizzata

Dopo aver inserito i dati trasformati e aver configurato il grafico, la visualizzazione sarà simile a quella di una tabella con singoli grafici sparkline per ogni riga:

L'intero codice necessario per visualizzare la visualizzazione sopra è il seguente:

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

const transformData = data => {
  const brandKey = 'products.brand_name'

  // create a unique set of brand names
  const uniqueBrands = new Set(data.map(d => d[brandKey]))

  // convert the Set back to an array and nest values below each brand name
  // sample output:
  // [{
  //     products.brand_name: "Looker",
  //     orders.count: { orders.created_week: '2019-09-30', orders.count: 17 }
  //  }, ...]
  return Array.from(uniqueBrands).map(brand => {
    const values = filter(data, { [brandKey]: brand }).map(d =>
      pick(d, ['orders.created_week', 'orders.count'])
    )

    return { [brandKey]: brand, 'orders.count': values }
  })
}

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

  const nestedSparklines = nestedData.map(d => {
    return {
      ...d,
      'orders.count': () => (
        <Sparkline
          data={d['orders.count']}
          config={config}
          fields={fields}
          height={75}
        />
      ),
    }
  })

  return <Table config={config} data={nestedSparklines} fields={fields} />
}

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

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