Die Verwendung der query
-Property der Query
-Visualisierungskomponente ist die einfachste Möglichkeit, eine einbettbare Visualisierung mit Looker-Visualisierungskomponenten zu rendern. Die Verwendung der query
-Property der dashboard
-Property bietet folgende Vorteile:
- Sie müssen lediglich eine Abfrage in Looker erstellen, ohne ein Dashboard erstellen zu müssen.
- Die von
query
akzeptierten Werte (Query.client_id
oder Abfrage-ID) sind unveränderlich. Wenn sich das zugrunde liegende Modell nicht ändert, wirkt sich keine Änderung an der Looker-Instanz auf die eingebettete Visualisierung aus.
Wenn Sie eine einbettbare Visualisierung erstellen möchten, die auf Änderungen in der Looker-UI reagiert und daher von anderen Looker-Nutzern als App-Entwicklern aktualisiert werden kann, folgen Sie der Anleitung auf der Dokumentationsseite Mit Visualisierungskomponenten und Dashboard-ID eine einfache Visualisierung rendern.
Wenn Sie eine einbettbare Visualisierung mit den Looker-Visualisierungskomponenten und der query
-Property rendern möchten, muss Ihre Einrichtung die Anforderungen erfüllen. Gehen Sie dann so vor:
- Erstellen Sie eine Abfrage in einem explorativen Analysetool und kopieren Sie den Wert
Query.client_id
. - Betten Sie die Abfrage in eine React-Anwendung ein.
- Fügen Sie die Komponente
Visualization
hinzu. - Einstellungen mit der Property
config
anpassen.
Voraussetzungen
Zuerst sind einige Elemente erforderlich:
- Sie benötigen Zugriff auf eine Looker-Instanz.
- Unabhängig davon, ob Sie das Erweiterungs-Framework oder Ihre eigene React-Anwendung verwenden, ist es wichtig, dass Sie sich mit der Looker API authentifizieren und Zugriff auf das Looker SDK-Objekt haben. Weitere Informationen finden Sie unter Looker API-Authentifizierung oder Erweiterungs-Framework.
- Prüfen Sie, ob Sie das NPM-Paket für Looker-Visualisierungskomponenten und das NPM-Paket von
@looker/components-data
installiert haben. Informationen zum Installieren und Verwenden des Pakets von Visualisierungskomponenten finden Sie im README-Dokument, das in GitHub und NPM verfügbar ist.
Schritt 1: Abfrage in einem Explore erstellen und den Wert von Query.client_id
kopieren
Verwenden Sie Erkunden, um eine Abfrage in der Looker-UI zu erstellen. Fügen Sie dem Menü „Erkunden“ eine unterstützte Visualisierung hinzu und konfigurieren Sie optional die Einstellungen im Visualisierungsmenü Einstellungen.
In der URL-Leiste des Browsers ist die URL-Property qid
zu sehen. Der alphanumerische Wert, der dieser Property zugewiesen ist, ist Query.client_id
:
Query.client_id
ist ein eindeutiger String, der die Abfrage- und Visualisierungseinstellungen darstellt. Wenn Sie etwas in der Abfrage oder den Einstellungen ändern, ändert sich auch die Query.client_id
.
Kopieren Sie die Query.client_id
, die im folgenden Schritt verwendet werden soll.
Schritt 2: Abfrage in eine React-Anwendung einbetten
Jetzt kannst du die Query.client_id
in eine React-Anwendung einbetten.
Im Folgenden findest du den Code für eine hypothetische React-Anwendung. Dieses Beispiel wurde im Erweiterungs-Framework von Looker erstellt und das Looker SDK-Objekt wurde vom Anbieter des Erweiterungskontexts abgerufen.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return null
}
Zu Beginn verwenden wir die Komponenten DataProvider
und Query
. DataProvider
speichert die SDK-Referenz im Kontext und Query
sendet unsere Netzwerkanfragen und formatiert das Antwort-Rendering.
Außerdem müssen Sie zwei Dinge angeben:
- Ein SDK-Objekt Das SDK-Objekt wird aus dem Erweiterungskontext abgerufen.
Query.client_id
DieQuery.client_id
ist der Propertyquery
zugewiesen.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
{/* pass the sdk object to DataProvider */}
<DataProvider sdk={core40SDK}>
{/* the value referenced by the `query` prop is
unique to your looker instance. */}
<Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
</DataProvider>
)
}
Schritt 3: Komponente „Visualization
“ hinzufügen
Als Nächstes fügen Sie die Komponente Visualization
hinzu, die die von Query
zurückgegebenen Daten und Konfigurationseinstellungen zum Rendern des erwarteten Diagramms interpretiert.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query query="evomfl66xHx1jZk2Hzvv1R">
<Visualization />
</Query>
</DataProvider>
)
}
In diesem Schritt wird eine Visualisierung wie das folgende Beispiel ausgegeben:
Schritt 4: Einstellungen mit der Property config
anpassen
Verwende die config
-Property der Komponente Query
, um die vom SDK zurückgegebenen Visualisierungseinstellungen zu überschreiben. Mit dieser Eigenschaft können alle unterstützten Funktionen geändert werden, vom Typ der Visualisierung bis hin zur Darstellung der einzelnen Datenreihen.
Im Beispielcode unten ändert die Property config
den Diagrammtyp in sparkline
und weist der Datenreihe eine neue Farbe zu.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'
export const MyReactApp = () => {
const { core40SDK } = useContext(ExtensionContext)
return (
<DataProvider sdk={core40SDK}>
<Query
query={'evomfl66xHx1jZk2Hzvv1R'}
config={{
type: 'sparkline',
series: [{ color: '#F4B400' }],
}}
>
<Visualization />
</Query>
</DataProvider>
)
}
Im vorherigen Schritt wird diese orangefarbene Sparkline gerendert:
Eine vollständige Liste der untergeordneten Properties, die in der Property config
verfügbar sind, finden Sie in der Referenzdokumentation zu Visualisierungs- und Abfrageeigenschaften oder in der Praxis auf dem Playground für Visualisierungskomponenten.
Nächste Schritte
- Eine Visualisierung mithilfe von Visualisierungskomponenten und der Property
dashboard
rendern - Benutzerdefinierte Visualisierungen mithilfe von Visualisierungskomponenten rendern
- Benutzerdefinierte Visualisierungen mithilfe von Visualisierungskomponenten erstellen
- Tabelle mit Visualisierungs- und Abfrageeigenschaften