In diesem Beispiel wird eine benutzerdefinierte Visualisierung gerendert, die lokal für eine App entwickelt wird, und keine benutzerdefinierte Visualisierung, die im Looker Marketplace verfügbar ist.
Komponenten der Looker-Visualisierung haben ein Adaptersystem, mit dem Entwickler vorhandene Diagrammtypen überschreiben oder völlig 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 den 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, ist besonders relevant, wenn Sie eine App erstellen, mit der Nutzer den Diagrammtyp während einer Sitzung ändern können.
Hintergrund
Nachdem Sie eine Abfrage in der „Benutzeroberfläche von Looker“ gerendert und ihre Query.client_id
an die Visualisierungskomponenten von Looker übergeben haben, können Sie den Diagrammtyp ändern, indem Sie die type
-Property der config
-Property aktualisieren.
Jeder von der Property type
akzeptierte Wert ist einer bestimmten React-Komponente zugeordnet. Wenn also type
auf line
gesetzt ist, wird eine Line
-Komponente gerendert, wenn type
auf area
gesetzt wird, wird eine Area
-Komponente gerendert und so weiter.
Mit der chartTypeMap
-Property der Visualization
-Komponente kannst du einen neuen Eintrag hinzufügen oder vorhandene Einträge in der Typ-/Komponentenzuordnung ersetzen, die jeden type
-Wert mit einer bestimmten Komponente verknüpft.
Voraussetzungen
Ähnlich wie im 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 bereitstellen. Das folgende Beispiel wurde im Erweiterungs-Framework von Looker erstellt und das SDK stammt aus ExtensionContext
.
Innerhalb von DataProvider
können Sie die Komponenten Query
und Visualization
rendern, um Daten vom Looker SDK anzufordern und die erwartete Visualisierung innerhalb Ihrer Anwendung zu rendern.
Einrichtung:
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 ist, wenn Sie ein Diagramm verwenden möchten, das standardmäßig nicht verfügbar ist? In diesem Fall können Sie die Eigenschaft chartTypeMap
von Visualization
verwenden, um die Diagrammkomponenten der Typ-/Komponentenzuordnung im Adaptersystem hinzuzufügen oder zu ersetzen.
Wenn du beispielsweise der Karte vom Typ/Komponente ein neues Radardiagramm hinzufügen möchtest, kannst du das folgendermaßen zur chartTypeMap
hinzufügen:
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 Komponente „React“
MyCustomRadar
- Weist dem Attribut
config.type
den Schlüsselradar
zu - Aktualisiert die
chartTypeMap
-Property, sodass das Typzuordnungssystem weiß, was für eintype
vonradar
gerendert werden soll
So wird es im Playground für die Looker-Visualisierung gerendert:
Sie können auch vorhandene Diagramme ersetzen, wenn Sie Ihre eigene Version rendern möchten. Im folgenden Beispiel wird das Standarddiagramm von Looker-Komponenten 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 die Komponente Query
auf eine Abfrage stößt, bei der der Visualisierungstyp auf line
gesetzt ist, wird die benutzerdefinierte Implementierung anstelle der Looker-Standarddarstellung gerendert.
Nächste Schritte
- Eine Visualisierung mithilfe von Visualisierungskomponenten und der Property
dashboard
rendern - Eine Visualisierung mithilfe von Visualisierungskomponenten und der Property
query
rendern - Benutzerdefinierte Visualisierungen mithilfe von Visualisierungskomponenten erstellen
- Tabelle mit Visualisierungs- und Abfrageeigenschaften