Utilizzo dei componenti di visualizzazione e della proprietà della query per eseguire 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 devi 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 all'interno della UI 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, 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 di Looker.
  • Che tu stia creando nel framework di estensione o nella tua applicazione React autonoma, è importante eseguire l'autenticazione con l'API di Looker e avere accesso all'oggetto SDK di Looker. Per saperne di più, leggi l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensioni.
  • 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 nella UI 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 alla proprietà è Query.client_id.

Ad esempio, se l'URL è https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse, il 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 parametro Query.client_id cambia.

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 archivia il riferimento dell'SDK nel contesto, mentre Query invia le richieste di rete e formatta il rendering della risposta.

Inoltre, devi fornire due elementi:

  • Un oggetto SDK. L'oggetto SDK viene importato 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

Poi aggiungi il componente Visualization, che interpreta i dati e le impostazioni di configurazione restituiti 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 produce una visualizzazione simile all'esempio seguente:

Una visualizzazione 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 visualizzata ogni serie di dati.

Nel seguente codice campione, 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