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

Questo esempio mostra una visualizzazione personalizzata locale di 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 eseguire l'override dei tipi di grafici esistenti o di aggiungere opzioni di tipi di grafici completamente nuovi.

Questa opzione può essere utile nelle seguenti circostanze:

  • Hai creato visualizzazioni delle reazioni personalizzate che ti piacerebbe utilizzare con i componenti di Looker.
  • Vuoi sostituire una visualizzazione di Looker predefinita esistente con una visualizzazione basata su una libreria diversa.

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

Sfondo

Dopo aver eseguito il rendering di una query nell'interfaccia Esplora di Looker e aver passato il suo 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 è impostato su line, viene visualizzato un componente Line; quando type è impostato su area, viene visualizzato un componente Area e così via.

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

Requisiti

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

In DataProvider, puoi visualizzare i componenti Query e Visualization per richiedere i dati dall'SDK di Looker e visualizzare la visualizzazione prevista all'interno della tua applicazione.

La configurazione è la seguente (nella proprietà query, sostituisci il valore con 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 visualizzato passando un'sostituzione della configurazione 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 che non è offerto per impostazione predefinita? In questo caso, puoi utilizzare la proprietà chartTypeMap di Visualization per aggiungere o sostituire i componenti del grafico nella mappa tipo/componente nel sistema di adattamento.

Ad esempio, se vuoi aggiungere un nuovo grafico radar alla mappa dei tipi/componenti, aggiungilo a chartTypeMap come segue:

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 esegue le seguenti operazioni:

  • Importa il componente React 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 un type di radar

Ecco come viene visualizzato nell'area di prova di visualizzazione di Looker:

Nel parco giochi viene mostrata una mappa radar.

Analogamente, puoi sostituire i grafici esistenti se vuoi visualizzare la tua versione. Nell'esempio seguente, i componenti predefiniti di Looker il grafico a linee viene sostituito con un componente personalizzato del grafico a linee:

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, verrà visualizzata l'implementazione personalizzata anziché quella predefinita di Looker.

Passaggi successivi