In diesem Beispiel wird eine benutzerdefinierte Visualisierung gerendert, die sich auf eine lokale App bezieht, 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 Standard-Looker-Visualisierung 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 entwickeln, mit der Nutzer während einer Sitzung die Art der Diagrammvisualisierung ändern können.
Hintergrund
Nachdem Sie eine Abfrage in der Explore-Benutzeroberfläche von Looker gerendert und die Query.client_id
an die Visualisierungskomponenten von Looker übergeben haben, können Sie den Diagrammtyp ändern, indem Sie die type
-Eigenschaft der config
-Eigenschaft aktualisieren.
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 usw.
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 wurde im Looker-Erweiterungsframework erstellt und das SDK stammt von ExtensionContext
.
Innerhalb von DataProvider
können Sie Query
und Visualization
rendern
Komponenten, um Daten vom Looker-SDK anzufordern und die erwartete Visualisierung innerhalb Ihrer Anwendung zu rendern.
Die Einrichtung erfolgt so: 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 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
festgelegt, ein Diagramm, das in 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-/Komponentenzuordnung im Adaptersystem hinzuzufügen oder zu ersetzen.
Wenn Sie beispielsweise der Typ-/Komponentenkarte ein neues Radardiagramm hinzufügen möchten, fügen Sie es so dem 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 führt Folgendes aus:
- Importiert die React-Komponente
MyCustomRadar
- Weist dem
config.type
-Attribut den Schlüsselradar
zu - Aktualisiert das Attribut
chartTypeMap
, sodass das Typzuordnungssystem weiß, was für einetype
vonradar
gerendert werden soll.
So wird sie im Looker-Visualisierungs-Sandbox-Tool gerendert:
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
- Visualisierungskomponenten und das Attribut
dashboard
zum Rendern einer einfachen Visualisierung verwenden - Mithilfe von Visualisierungskomponenten und der Property
query
eine einfache Visualisierung rendern - Benutzerdefinierte Visualisierungen mithilfe von Visualisierungskomponenten erstellen
- Visualisierungs- und Abfrageattributtabellen