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

L'utilizzo della proprietà query del componente QueryQuery è 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:

  1. Crea una query in Explore (Esplora) e copia il valore Query.client_id.
  2. Incorporare 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 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 campo 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

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