L'utilizzo della proprietà query
del componente Query
Query
è il modo più semplice per eseguire il rendering di una visualizzazione incorporabile con i componenti di visualizzazione Looker. L'utilizzo della proprietà query
(e non della proprietà dashboard
) offre i seguenti vantaggi:
- Devi solo creare una query in Looker; non è necessario creare una dashboard.
- I valori accettati da
query
(Query.client_id
o l'ID query) sono immutabili; a meno che il modello sottostante non cambi, nessuna modifica all'istanza di Looker influenzerà la visualizzazione incorporata.
Se vuoi creare una visualizzazione incorporabile che risponda alle modifiche nell'interfaccia utente di Looker e quindi può essere aggiornata dagli utenti di Looker oltre agli sviluppatori di app, segui le istruzioni sulla pagina della documentazione Utilizzo dei componenti di visualizzazione e un ID dashboard per eseguire una visualizzazione semplice.
Per eseguire il rendering di una visualizzazione incorporabile utilizzando i componenti di visualizzazione Looker e la proprietà query
, assicurati che la configurazione soddisfi i requisiti, quindi segui questi passaggi:
- Crea una query in Explore (Esplora) e copia il valore
Query.client_id
. - Incorporare la query in un'applicazione React.
- Aggiungi il componente
Visualization
. - Personalizza le impostazioni con la proprietà
config
.
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 il valore Query.client_id
Utilizza un'esplorazione per creare una query all'interno dell'interfaccia utente di Looker. Aggiungi una visualizzazione supportata a Esplora e, se vuoi, configura le impostazioni nel menu Impostazioni della visualizzazione.
Nota la proprietà URL qid
nella barra dell'URL del browser. Il valore alfanumerico assegnato a questa proprietà è Query.client_id
:
Query.client_id
è una stringa univoca che rappresenta la query e le impostazioni di visualizzazione. Se modifichi qualcosa nella query o nelle impostazioni, il valore di Query.client_id
verrà modificato.
Copia il campo Query.client_id
da utilizzare nel passaggio successivo.
Passaggio 2: incorpora la query in un'applicazione React
Ora puoi recuperare il file Query.client_id
e incorporarlo in un'applicazione React.
Di seguito è riportato il codice per un'applicazione reattiva ipotetica. Questo esempio è stato creato nel framework delle estensioni di Looker e l'oggetto SDK Looker è stato importato dal provider di contesto dell'estensione.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return null
}
Per iniziare, utilizzeremo i componenti DataProvider
e Query
. DataProvider
archivia il riferimento SDK nel contesto e Query
invia le nostre richieste di rete e formatta il rendering della risposta.
Inoltre, devi fornire due informazioni:
- Un oggetto SDK. L'oggetto SDK viene recuperato dal contesto dell'estensione.
- Il
Query.client_id
. Il campoQuery.client_id
è assegnato alla proprietàquery
.
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 (
{/* pass the sdk object to DataProvider */}
<DataProvider sdk={core40SDK}>
{/* the value referenced by the `query` prop is
unique to your looker instance. */}
<Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
</DataProvider>
)
}
Passaggio 3: aggiungi il componente Visualization
A questo punto aggiungi il componente Visualization
, che interpreta le impostazioni dei dati e di configurazione restituite da Query
per eseguire il rendering del grafico previsto.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query query="evomfl66xHx1jZk2Hzvv1R">
<Visualization />
</Query>
</DataProvider>
)
}
Questo passaggio restituisce una visualizzazione simile all'esempio seguente:
Passaggio 4: personalizza le impostazioni con la proprietà config
Utilizza la proprietà config
del componente Query
per sostituire le impostazioni di visualizzazione restituite dall'SDK. Questa proprietà può modificare qualsiasi funzionalità supportata, dal tipo di visualizzazione ai dettagli del rendering di ogni serie di dati.
Nel codice campione riportato di seguito, la proprietà config
modifica il tipo di grafico in sparkline
e assegna un nuovo colore alla serie di dati.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query
query={'evomfl66xHx1jZk2Hzvv1R'}
config={{
type: 'sparkline',
series: [{ color: '#F4B400' }],
}}
>
<Visualization />
</Query>
</DataProvider>
)
}
Il passaggio precedente rende questo sparkline arancione:
Per un elenco completo delle proprietà secondarie disponibili nella proprietà config
, consulta la documentazione di riferimento per le tabelle delle visualizzazioni e delle query oppure visualizza le proprietà in azione nel parco giochi dei componenti di visualizzazione.
Passaggi successivi
- Utilizzare i componenti di visualizzazione e la proprietà
dashboard
per visualizzare una visualizzazione semplice - Utilizzare i componenti di visualizzazione per eseguire visualizzazioni personalizzate
- Utilizzare i componenti di visualizzazione per creare una visualizzazione personalizzata
- Tabelle delle proprietà Visualizzazione e Query