Utilizzare i componenti di visualizzazione per eseguire 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 completamente nuove per i tipi di grafici.

Questa opzione può essere utile nelle seguenti circostanze:

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

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.

Premesse

Dopo aver eseguito il rendering di una query nell'interfaccia di Explore di Looker e aver trasmesso la sua Query.client_id nei componenti di visualizzazione di Looker, puoi modificare il tipo di grafico aggiornando la proprietà type della proprietà config.

Ogni valore accettato dalla proprietà type è associato a un componente specifico di React. Quindi, 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 consente di aggiungere una nuova voce o di sostituire le voci esistenti nella mappa tipo/componente che associa ciascun valore type a un particolare componente.

Requisiti

In modo simile all'esempio Utilizzo dei componenti di visualizzazione e della proprietà query per visualizzare una semplice visualizzazione, devi iniziare importando il componente DataProvider e fornendo un'istanza SDK autenticata. Il seguente esempio è creato all'interno del framework di estensioni di Looker e l'SDK proviene da ExtensionContext.

All'interno di DataProvider, puoi eseguire il rendering dei componenti Query e Visualization per richiedere dati dall'SDK 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>
    )
}

Aggiungere un nuovo tipo di grafico

Come con il semplice esempio di visualizzazione, 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, ovvero un grafico offerto per impostazione predefinita dai componenti di Looker. Ma cosa succede se vuoi 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 del sistema dell'adattatore.

Ad esempio, se vuoi aggiungere un nuovo grafico radar alla mappa tipo/componente, aggiungi quanto segue in chartTypeMap:

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 MyCustomRadar Reazione
  • Assegna la chiave radar alla proprietà config.type
  • Aggiorna la proprietà chartTypeMap in modo che il sistema di mappatura dei tipi sappia cosa visualizzare per un type di radar

Ecco come viene visualizzato nel parco giochi di visualizzazione Looker:

Nel parco giochi visualizzato viene visualizzata una mappa radar.

Allo stesso modo, puoi sostituire i grafici esistenti se vuoi visualizzare la tua versione. Nell'esempio seguente, il grafico a linee dei componenti di Looker predefinito viene sostituito con un componente di questo grafico 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>
    )
}

Ogni volta che il componente Query rileva una query in cui il tipo di visualizzazione è impostato su line, visualizzerà l'implementazione personalizzata al posto di quella predefinita di Looker.

Passaggi successivi