Visualisierungskomponenten zum Rendern benutzerdefinierter Visualisierungen verwenden

In diesem Beispiel wird eine benutzerdefinierte Visualisierung gerendert, die lokal einer in der Entwicklung befindlichen App zugewiesen ist, und nicht eine benutzerdefinierte Visualisierung, die im Looker Marketplace verfügbar ist.

Looker-Visualisierungskomponenten haben ein Adaptersystem, mit dem Entwickler vorhandene Diagrammtypen überschreiben oder komplett neue Optionen für Diagrammtypen hinzufügen können.

Diese Option kann unter folgenden Umständen nützlich sein:

  • Sie haben benutzerdefinierte React-Visualisierungen erstellt, die Sie mit Looker-Komponenten verwenden möchten.
  • Sie möchten eine vorhandene Looker-Standardvisualisierung durch eine Visualisierung ersetzen, die auf einer anderen Bibliothek basiert.

Die Möglichkeit, Diagramme zu überschreiben oder hinzuzufügen, kann besonders relevant sein, wenn Sie eine Anwendung erstellen, mit der Nutzende die Art der Diagrammvisualisierung während einer Sitzung ändern können.

Hintergrund

Nachdem Sie eine Abfrage in der Explore-Oberfläche von Looker gerendert und ihr Query.client_id an die Visualisierungskomponenten von Looker übergeben haben, können Sie den Diagrammtyp ändern. Aktualisieren Sie dazu das Attribut type des config-Attributs.

Jeder von der Eigenschaft type akzeptierte Wert wird einer bestimmten React-Komponente zugeordnet. Wenn also type auf line gesetzt ist, wird eine Line-Komponente gerendert, wenn type auf area gesetzt ist, wird eine Area-Komponente gerendert usw.

Mit der Eigenschaft chartTypeMap der Visualization-Komponente können Sie der Typ-/Komponentenzuordnung einen neuen Eintrag hinzufügen oder vorhandene Einträge darin ersetzen, indem jeder type-Wert einer bestimmten Komponente zugeordnet wird.

Voraussetzungen

Ähnlich wie im Beispiel Visualisierungskomponenten und query-Property zum Rendern einer einfachen Visualisierung verwenden müssen Sie zuerst die Komponente DataProvider importieren und eine authentifizierte SDK-Instanz bereitstellen. Das folgende Beispiel basiert auf dem Erweiterungs-Framework von Looker und das SDK stammt von ExtensionContext.

Innerhalb von DataProvider können Sie die Komponenten Query und Visualization rendern, um Daten vom Looker SDK anzufordern und die erwartete Visualisierung in Ihrer Anwendung zu rendern.

So sieht die Einrichtung aus (ersetzen Sie in der Property query den Wert durch Query.client_id aus Ihrer Abfrage):

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>
    )
}

Neuen Diagrammtyp hinzufügen

Wie beim Beispiel für eine einfache Visualisierung können Sie den gerenderten Diagrammtyp ändern, indem Sie eine config override an die Komponente Query übergeben.

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

In diesem Fall wurde type auf pie festgelegt, ein Diagramm, das von Looker-Komponenten standardmäßig angeboten wird. Aber was ist, wenn Sie ein Diagramm verwenden möchten, das nicht standardmäßig angeboten wird? In diesem Fall können Sie die Eigenschaft chartTypeMap von Visualization verwenden, um die Diagrammkomponenten in der Typ-/Komponentenkarte des Adaptersystems hinzuzufügen oder zu ersetzen.

Wenn Sie beispielsweise der Typ-/Komponentenkarte ein neues Netzdiagramm hinzufügen möchten, fügen Sie es wie folgt zum chartTypeMap hinzu:

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>
    )
}

Mit diesem Code wird Folgendes ausgeführt:

  • Importiert die React-Komponente MyCustomRadar
  • Weist dem Attribut config.type den Schlüssel radar zu
  • Aktualisiert die Eigenschaft chartTypeMap, sodass das Typzuordnungssystem weiß, was für eine type von radar gerendert werden soll

So wird es im Looker-Visualisierungs-Playground gerendert:

Im Playground für Visualisierungen wird eine Radarkarte angezeigt.

Ebenso können Sie vorhandene Diagramme ersetzen, wenn Sie Ihre eigene Version rendern möchten. Im folgenden Beispiel wird das Liniendiagramm der Looker-Standardkomponenten mit einer benutzerdefinierten Liniendiagrammkomponente überschrieben:

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>
    )
}

Wenn jetzt die Komponente Query auf eine Abfrage stößt, bei der der Visualisierungstyp auf line festgelegt ist, wird die benutzerdefinierte Implementierung anstelle der Looker-Standardeinstellung gerendert.

Nächste Schritte