Utilizzo dei componenti di visualizzazione per eseguire il rendering di visualizzazioni personalizzate

Questo esempio mostra una visualizzazione personalizzata locale per un'app in fase di sviluppo, non una visualizzazione personalizzata disponibile in Looker Marketplace.

I componenti di visualizzazione di Looker dispongono di un sistema di adattatori che consente agli sviluppatori di sostituire i tipi di grafici esistenti o di aggiungerne di nuove.

Questa opzione può essere utile nelle seguenti circostanze:

  • Hai creato visualizzazioni personalizzate delle reazioni che vorresti utilizzare con i componenti di Looker.
  • Vuoi sostituire una visualizzazione predefinita esistente di Looker con una visualizzazione creata su un'altra libreria.

La possibilità di ignorare o aggiungere grafici può essere particolarmente importante se stai creando un'applicazione che consente agli utenti di modificare il tipo di visualizzazione del grafico durante una sessione.

Premesse

Dopo aver eseguito il rendering di una query nell'interfaccia Esplora di Looker e passato il relativo Query.client_id ai componenti di visualizzazione di Looker, puoi modificare il tipo di grafico aggiornando la proprietà type della proprietà config.

Ogni valore accettato dalla proprietà type è mappato a un componente React specifico. Pertanto, quando type viene impostato su line, viene eseguito il rendering di un componente Line; quando il valore di type viene impostato su area, viene eseguito il rendering di un componente Area e così via.

La proprietà chartTypeMap del componente Visualization consente di aggiungere una nuova voce alla mappa di tipo/componenti o di sostituire le voci esistenti nella mappa tipo/componenti che associa ogni valore type a un determinato componente.

Requisiti

Come nell'esempio Utilizzo dei componenti di visualizzazione e della proprietà query per eseguire il rendering di una visualizzazione semplice, devi iniziare importando il componente DataProvider e fornendo un'istanza dell'SDK autenticata. L'esempio seguente è realizzato all'interno del framework di estensione di Looker e l'SDK proviene da ExtensionContext.

All'interno di DataProvider, puoi eseguire il rendering dei componenti Query e Visualization per richiedere dati all'SDK Looker e mostrare la visualizzazione prevista all'interno della tua applicazione.

La configurazione è la seguente (nella proprietà query, sostituisci il valore con il valore Query.client_id della query):

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization />
            </Query>
        </DataProvider>
    )
}

Aggiunta di un nuovo tipo di grafico

Come nell'esempio di visualizzazione semplice, puoi modificare il tipo di grafico sottoposto a rendering passando un config override al componente Query.

<Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'pie' }}>
    <Visualization />
</Query>

In questo caso, type è stato impostato su pie: un grafico offerto per impostazione predefinita dai componenti di Looker. Ma cosa succede se volessi utilizzare un grafico non disponibile per impostazione predefinita? In questo caso, puoi utilizzare la proprietà chartTypeMap di Visualization per aggiungere o sostituire i componenti del grafico nella mappa tipo/componenti nel sistema di adattatori.

Se, ad esempio, vuoi aggiungere un nuovo grafico radar alla mappa del tipo o del componente, aggiungilo a chartTypeMap in questo modo:

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS" config={{ type: 'radar'}}>
                <Visualization chartTypeMap={{ radar: MyCustomRadar }} />
            </Query>
        </DataProvider>
    )
}

Questo codice svolge le seguenti operazioni:

  • Importa il componente Reazione MyCustomRadar
  • Assegna la chiave radar alla proprietà config.type
  • Aggiorna la proprietà chartTypeMap in modo che il sistema di mappatura dei tipi sappia cosa eseguire il rendering per type di radar

Ecco come viene visualizzato nel parco giochi di visualizzazione di Looker:

Una mappa radar viene visualizzata nell'area di visualizzazione della visualizzazione.

Analogamente, puoi sostituire i grafici esistenti se vuoi eseguire il rendering della tua versione. Nell'esempio seguente, il grafico a linee predefinito dei componenti di Looker viene sostituito da un componente del grafico a linee personalizzato:

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
import { MyCustomLine } from '../MyCustomLine'

const App = () => {
    const { core40SDK } = useContext(ExtensionContext)
    return (
        <DataProvider sdk={core40SDK}>
            <Query query="z8klgi4PJKAl7TXgTw1opS">
                <Visualization chartTypeMap={{ line: MyCustomLine }} />
            </Query>
        </DataProvider>
    )
}

Ora, ogni volta che il componente Query rileva una query in cui il tipo di visualizzazione è impostato su line, mostrerà l'implementazione personalizzata al posto dell'impostazione predefinita di Looker.

Passaggi successivi