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

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 di Looker. L'utilizzo della proprietà query (anziché 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 venga modificato, nessuna modifica all'istanza di Looker influirà sulla visualizzazione incorporata.

Se vuoi creare una visualizzazione incorporabile che risponda ai cambiamenti all'interno dell'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 Utilizzo dei componenti di visualizzazione e di 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, poi 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 Looker.
  • Indipendentemente dal fatto che tu stia creando il framework di estensioni o la tua applicazione React autonoma, è importante autenticarsi con l'API di Looker e avere accesso all'oggetto SDK di Looker. Per saperne di più, consulta l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensione.
  • 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 il valore Query.client_id

Utilizza un'esplorazione per creare una query nell'interfaccia utente di Looker. Aggiungi una visualizzazione supportata all'esplorazione e, facoltativamente, configura le relative impostazioni nel menu Impostazioni della visualizzazione.

Trova 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 la query o le impostazioni, il valore Query.client_id cambierà.

Copia il valore Query.client_id da utilizzare nel passaggio successivo.

Passaggio 2: incorpora la query in un'applicazione React

Ora puoi prendere Query.client_id e incorporarlo in un'applicazione React.

Il codice seguente è per un'applicazione React ipotetica. Questo esempio è stato creato nel framework dell'estensione di Looker. L'oggetto SDK di Looker è stato recuperato 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 memorizza il riferimento all'SDK nel contesto e Query invia le nostre richieste di rete e formatta il rendering della risposta.

Inoltre, devi fornire due elementi:

  • Un oggetto SDK. L'oggetto SDK viene recuperato dal contesto dell'estensione.
  • Il Query.client_id. Query.client_id viene 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

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 genera 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 ignorare le impostazioni di visualizzazione restituite dall'SDK. Questa proprietà può modificare qualsiasi funzionalità supportata, dal tipo di visualizzazione ai dettagli di come viene visualizzata ogni serie di dati.

Nel seguente codice di esempio, 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>
  )
}

Nel passaggio precedente viene eseguito 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à di visualizzazione e query.

Passaggi successivi