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 denominatabrandKey
. 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 costruttoreSet
. In JavaScript, unSet
è 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, comemap
. - 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 eorders.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
diSparkline
. - Vengono tramandati anche gli oggetti
config
efields
, 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>
)
}
Passaggi successivi
- Utilizzare i componenti di visualizzazione e la proprietà
dashboard
per visualizzare una visualizzazione semplice - Utilizzare i componenti di visualizzazione e la proprietà
query
per visualizzare una visualizzazione semplice - Utilizzare i componenti di visualizzazione per eseguire visualizzazioni personalizzate
- Tabelle delle proprietà Visualizzazione e Query