Utilizzo dei componenti della visualizzazione e della proprietà della query per eseguire una semplice visualizzazione

L'utilizzo della proprietà query del componente di visualizzazione Query è il modo più semplice per eseguire il rendering di una visualizzazione incorporabile con i componenti di visualizzazione Looker. L'utilizzo della proprietà query (anziché della proprietà dashboard) offre i seguenti vantaggi:

  • Devi semplicemente creare una query in Looker, senza 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 influirà sulla visualizzazione incorporata.

Se vuoi creare una visualizzazione incorporabile che risponda ai cambiamenti nell'interfaccia utente di Looker e che quindi possa essere aggiornata da utenti di Looker diversi dagli sviluppatori di app, segui le istruzioni nella pagina della documentazione Utilizzare i componenti di visualizzazione e un ID dashboard per eseguire il rendering di una visualizzazione semplice.

Per eseguire il rendering di una visualizzazione incorporabile utilizzando i componenti di visualizzazione di Looker e la proprietà query, assicurati che la configurazione soddisfi i requisiti, quindi segui questi passaggi:

  1. Crea una query in un'esplorazione e copia il valore Query.client_id.
  2. Incorpora la query in un'applicazione React.
  3. Aggiungi il componente Visualization.
  4. 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 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 il valore Query.client_id

Utilizza un'esplorazione per creare una query nella UI di Looker. Aggiungi una visualizzazione supportata all'esplorazione e, facoltativamente, configurane le impostazioni nel menu Impostazioni della visualizzazione.

Individua la proprietà URL qid nella barra degli indirizzi del browser. Il valore alfanumerico assegnato a questa proprietà è Query.client_id.

Ad esempio, se l'URL è https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse, Query.client_id è evomfl66xHx1jZk2Hzvv1R.

Query.client_id è una stringa univoca che rappresenta la query e le impostazioni di visualizzazione. Se modifichi qualcosa nella query o nelle impostazioni, il Query.client_id cambierà.

Copia il valore Query.client_id per utilizzarlo nel passaggio successivo.

Passaggio 2: incorpora la query in un'applicazione React

Ora puoi incorporare il Query.client_id in un'applicazione React.

Di seguito è riportato il codice per un'ipotetica applicazione React. Questo esempio è stato creato nel framework di estensione Looker e l'oggetto SDK Looker è stato importato dal provider del 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 all'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 estratto dal contesto dell'estensione.
  • Il Query.client_id. Query.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

In seguito, aggiungi il componente Visualization, che interpreta i dati e le impostazioni di configurazione restituiti da Query per visualizzare il 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:

Una visualizzazione di un grafico a linee.

Passaggio 4: personalizza le impostazioni con la proprietà config

Utilizza la proprietà config del componente Query per eseguire l'override delle impostazioni di visualizzazione restituite dall'SDK. Questa proprietà può modificare qualsiasi funzionalità supportata, dal tipo di visualizzazione ai dettagli di come viene eseguito il 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 esegue il rendering di questo sparkline arancione:

Una visualizzazione sparkline.

Per un elenco completo delle proprietà secondarie disponibili nella proprietà config, consulta la documentazione di riferimento per le tabelle delle proprietà Visualizzazione e query.

Passaggi successivi