Verwenden von Visualisierungskomponenten zum Rendern benutzerdefinierter Visualisierungen

In diesem Beispiel wird eine benutzerdefinierte Visualisierung lokal für eine App gerendert, die gerade entwickelt wird, und keine benutzerdefinierte Visualisierung, die im Looker Marketplace verfügbar ist.

Looker-Visualisierungskomponenten haben ein Adaptersystem, mit dem Entwickler vorhandene Diagrammtypen überschreiben oder völlig neue Diagrammtypoptionen hinzufügen können.

Diese Option kann in folgenden Fällen 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 Nutzer die Art der Diagrammvisualisierung während einer Sitzung ändern können.

Hintergrund

Nachdem Sie eine Abfrage in der Explore-Benutzeroberfläche von Looker gerendert und ihre Query.client_id an die Visualisierungskomponenten von Looker übergeben haben, können Sie den Diagrammtyp ändern. Aktualisieren Sie dazu die Property type der config-Eigenschaft.

Jeder von der type-Eigenschaft 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. und so weiter.

Mit der Eigenschaft chartTypeMap der Komponente Visualization können Sie der Typ-/Komponentenzuordnung einen neuen Eintrag hinzufügen oder vorhandene Einträge ersetzen, der jeden type-Wert mit einer bestimmten Komponente verknüpft.

Voraussetzungen

Ähnlich wie im Beispiel Visualisierungskomponenten und die Eigenschaft query zum Rendern einer einfachen Visualisierung verwenden müssen Sie zuerst die DataProvider-Komponente importieren und eine authentifizierte SDK-Instanz bereitstellen. Das folgende Beispiel basiert auf der Erweiterung 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.

Dazu gehen Sie so vor (ersetzen Sie im Attribut query den Wert durch den 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 bei dem einfachen Visualisierungsbeispiel können Sie den gerenderten Diagrammtyp ändern, indem Sie eine Konfigurationsüberschreibung an die Komponente Query übergeben.

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

In diesem Fall wurde type auf pie gesetzt, ein Diagramm, das von Looker-Komponenten standardmäßig angeboten wird. Was aber, 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-/Komponentenzuordnung im Adaptersystem hinzuzufügen oder zu ersetzen.

Wenn Sie der Typ-/Komponentenkarte beispielsweise ein neues Netzdiagramm hinzufügen möchten, fügen Sie es dem chartTypeMap so 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>
    )
}

Dieser Code führt Folgendes aus:

  • Importiert die React-Komponente MyCustomRadar
  • Die Property config.type wird der Property radar zugewiesen.
  • Aktualisiert das Attribut chartTypeMap, sodass das Typzuordnungssystem weiß, was für eine type von radar gerendert werden soll.

So wird sie im Looker-Visualisierungs-Playground gerendert:

Im Visualisierungs-Lab 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 Standard-Looker-Komponenten durch eine benutzerdefinierte 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-Standardimplementierung gerendert.

Nächste Schritte