Mit Visualisierungskomponenten und Dashboard-Properties eine einfache Visualisierung rendern

Mit der dashboard-Eigenschaft der Query-Visualisierungskomponente können Sie eine eingebettete Visualisierung rendern, die auf Änderungen an der Looker-Benutzeroberfläche reagiert. Die Verwendung der Property dashboard (im Gegensatz zur query-Property) bietet folgende Vorteile:

  • Die Visualisierung kann von jedem Looker-Nutzer mit Bearbeitungszugriff auf das Dashboard aktualisiert werden.
  • Bei Aktualisierungen der eingebetteten Visualisierung sind keine Änderungen an der bereitgestellten Erweiterung oder der React-Anwendung erforderlich.

Wenn Sie eine eingebettete Visualisierung erstellen möchten, die auf Änderungen in der Looker-Benutzeroberfläche nicht reagiert, folgen Sie der Anleitung auf der Dokumentationsseite Visualisierungskomponenten und die query-Property verwenden.

Wenn Sie mithilfe von Looker-Visualisierungskomponenten und einer numerischen Dashboard-ID eine eingebettete Visualisierung rendern möchten, muss Ihre Einrichtung die Anforderungen erfüllen. Führen Sie anschließend die folgenden Schritte aus:

  1. Erstellen Sie eine Abfrage und fügen Sie sie einem Dashboard hinzu.
  2. Binden Sie die Abfrage mit der Dashboard-ID in eine React-Anwendung ein.
  3. Ändern Sie gegebenenfalls die Visualisierung.

Voraussetzungen

Bevor Sie beginnen, sind einige Elemente erforderlich:

  • Sie müssen Zugriff auf eine Looker-Instanz haben.
  • Unabhängig davon, ob Sie das Erweiterungs-Framework oder Ihre eigene React-Anwendung erstellen, ist die Authentifizierung bei der Looker API und der Zugriff auf das Looker SDK-Objekt wichtig. Weitere Informationen finden Sie unter Looker API-Authentifizierung oder Erweiterungs-Framework.
  • Achten Sie darauf, dass Sie das NPM-Paket für Looker Visualization-Komponenten und das NPM-Paket von @looker/components-data installiert haben. Informationen zum Installieren und Verwenden des Visualisierungskomponentenpakets finden Sie in der README-Datei, die auf GitHub und NPM verfügbar ist.

Schritt 1: Abfrage erstellen und zu einem Dashboard hinzufügen

Verwenden Sie die Funktion Erkunden, um eine Abfrage in der Looker-UI zu erstellen. Fügen Sie im Menü „Erkunden“ eine unterstützte Visualisierung hinzu und konfigurieren Sie optional deren Einstellungen im Menü Einstellungen der Visualisierung.

Mit dieser Abfrage können Sie ein neues Dashboard erstellen. Alternativ können Sie die Abfrage einem leeren Dashboard hinzufügen, das Sie bereits erstellt haben.

Die Komponente Query lädt immer die Visualisierung aus der ersten Kachel, die dem zugehörigen Dashboard chronologisch hinzugefügt wurde, unabhängig davon, wo die Kachel im Dashboard-Layout angezeigt wird. Aus diesem Grund ist es empfehlenswert, nur Einzelkachel-Dashboards als Abfragereferenz zu verwenden.

Die Komponente „Query“ zeigt nur die Kachelvisualisierung an. Der Kacheltitel, der Dashboard-Titel oder andere Dashboard-Elemente werden nicht angezeigt. Dashboard-Filter, die auf die Kachel angewendet werden, haben keine Auswirkungen auf die eingebettete Visualisierung.

Nachdem Sie das Dashboard erstellt haben, können Sie es aufrufen.

Nach dashboards/ wird in der Dashboard-URL eine numerische Dashboard-ID angezeigt. Kopieren Sie diese ID, um im nächsten Schritt zu verwenden.

Die dashboard-Property der Query-Komponente akzeptiert nur numerische IDs. Die String-IDs von LookML-Dashboards werden nicht akzeptiert.

Schritt 2: Abfrage in die React-Anwendung mithilfe der Dashboard-ID einbetten

Jetzt können Sie die Abfrage in Ihre React-Anwendung einbetten. Dazu übergeben Sie die Dashboard-ID in der dashboard-Property der Query-Komponente:

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)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Schritt 3: Visualisierung ändern, falls erforderlich

Jetzt können alle Looker-Nutzer mit Bearbeitungszugriff auf das Dashboard Änderungen an der in Ihrem Dashboard eingebetteten Visualisierung vornehmen. Die Änderungen werden in Ihrer React-Anwendung angezeigt, ohne dass Änderungen am Code erforderlich sind.

Für den Bearbeitungszugriff benötigen Nutzer die Berechtigung Zugriff verwalten, Bearbeiten für den Ordner, in dem sich das Dashboard befindet, Modellzugriff auf das Modell, auf dem die Abfrage basiert, und die entsprechenden Looker-Berechtigungen.

Es gibt zwei Möglichkeiten, die eingebettete Visualisierung zu ändern:

  • die Kachel für die Abfrage im Dashboard bearbeiten oder
  • Fügen Sie dem Dashboard eine neue Abfragekachel hinzu und löschen Sie die ursprüngliche Kachel.

Wenn Sie die Abfragekachel bearbeiten möchten, folgen Sie der Anleitung zum Bearbeiten von Kacheln auf der Dokumentationsseite Benutzerdefinierte Dashboards bearbeiten und speichern Sie die Änderungen, um den Bearbeitungsmodus im Dashboard zu beenden.

Wenn Sie eine neue Kachel hinzufügen und die ursprüngliche löschen möchten, folgen Sie der Anleitung zum Hinzufügen von Kacheln zu Abfragen. Folgen Sie dann der Anleitung zum Löschen von Kacheln, um die unerwünschte Visualisierung zu löschen. Damit Ihre Änderungen angewendet werden, darf auf Ihrem Dashboard nur eine Kachel vorhanden sein. Speichern Sie Ihre Änderungen, um den Bearbeitungsmodus auf dem Dashboard zu beenden.

Sobald Sie Ihr Dashboard geändert und gespeichert haben, werden die Visualisierungsänderungen in der Erweiterung oder React-Anwendung übernommen, ohne dass Änderungen am Code erforderlich sind.

Nächste Schritte