In diesem Beispiel wird eine benutzerdefinierte Visualisierung gerendert, die lokal für eine Anwendung 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 ganz neue Diagrammtypoptionen hinzufügen können.
Diese Option kann in den folgenden Fällen nützlich sein:
- Sie haben benutzerdefinierte React-Visualisierungen erstellt, die Sie mit Looker-Komponenten nutzen möchten.
- Sie möchten eine vorhandene Standard-Looker-Visualisierung durch eine Visualisierung ersetzen, die auf einer anderen Bibliothek basiert.
Die Möglichkeit, Diagramme zu überschreiben oder hinzuzufügen, kann besonders dann hilfreich sein, wenn Sie eine Anwendung erstellen, mit der Nutzer den Diagrammtyp während einer Sitzung ändern können.
Hintergrund
Nachdem Sie eine Abfrage in der Explore-Oberfläche von Looker gerendert und deren Query.client_id
an die Visualisierungskomponenten von Looker übergeben haben, können Sie den Diagrammtyp ändern. Dazu aktualisieren Sie die type
-Property der config
-Property.
Jeder von der Property type
akzeptierte Wert wird einer bestimmten React-Komponente zugeordnet. Wenn type
also auf line
gesetzt ist, wird eine Line
-Komponente gerendert, während type
auf area
gesetzt wird, eine Area
-Komponente und so weiter.
Mit der Eigenschaft chartTypeMap
der Visualization
-Komponente können Sie einen neuen Eintrag hinzufügen oder vorhandene Einträge in der Typ-/Komponentenzuordnung ersetzen oder einen type
-Wert mit einer bestimmten Komponente verknüpfen.
Voraussetzungen
Ähnlich wie beim Beispiel Visualisierungskomponenten und die Property query
zum Rendern einer einfachen Visualisierung verwenden müssen Sie zuerst die Komponente DataProvider
importieren und eine authentifizierte SDK-Instanz angeben. Das folgende Beispiel ist im Erweiterungs-Framework von Looker eingebunden und das SDK stammt aus ExtensionContext
.
In DataProvider
können Sie die Komponenten Query
und Visualization
rendern, um Daten aus dem Looker SDK anzufordern und die erwartete Visualisierung innerhalb Ihrer Anwendung zu rendern.
Die Einrichtung sieht so 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 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 standardmäßig von Looker-Komponenten angeboten wird. Aber was, wenn Sie ein Diagramm verwenden möchten, das nicht standardmäßig angeboten wird? In diesem Fall können Sie die Property chartTypeMap
von Visualization
verwenden, um die Diagrammkomponenten auf der Typ-/Komponentenkarte des Adaptersystems hinzuzufügen oder zu ersetzen.
Wenn Sie z. B. der Typ-/Komponentenübersicht ein neues Radardiagramm hinzufügen möchten, fügen Sie es so zu 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>
)
}
Dieser Code bewirkt Folgendes:
- Importiert die React-Komponente
MyCustomRadar
- Weist der Property
config.type
den Schlüsselradar
zu - Aktualisiert die Eigenschaft
chartTypeMap
, damit das Typzuordnungssystem weiß, was für einetype
vonradar
gerendert werden soll
So wird es im Visualisierungs-Looker von Looker gerendert:
Sie können auch vorhandene Diagramme ersetzen, wenn Sie Ihre eigene Version rendern möchten. Im folgenden Beispiel wird das Liniendiagramm der Standard-Looker-Komponenten durch eine Komponente des benutzerdefinierten Liniendiagramms ü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>
)
}
Immer wenn die Komponente Query
auf eine Abfrage stößt, bei der der Visualisierungstyp auf line
gesetzt ist, wird die benutzerdefinierte Implementierung anstelle des Looker-Standards gerendert.
Nächste Schritte
- Mit Visualisierungskomponenten und der Property
dashboard
eine einfache Visualisierung rendern - Mit Visualisierungskomponenten und der Property
query
eine einfache Visualisierung rendern - Mithilfe von Visualisierungskomponenten eine benutzerdefinierte Visualisierung erstellen
- Tabellen für Visualisierung und Abfrageeigenschaften