Visualisierungskomponenten und die Dashboard-Eigenschaft zum Rendern einer einfachen Visualisierung verwenden

Mit der dashboard-Property der Query-Visualisierungskomponente können Sie eine einbettbare Visualisierung rendern, die auf Änderungen der Looker-Benutzeroberfläche reagieren kann. Die Verwendung der dashboard-Property bietet im Gegensatz zur query-Property folgende Vorteile:

  • Die Visualisierung kann von jedem Looker-Benutzer mit Bearbeitungszugriff auf das Dashboard aktualisiert werden.
  • Für Updates an der eingebetteten Visualisierung sind keine Änderungen an der bereitgestellten Erweiterung oder React-Anwendung erforderlich.

Wenn Sie eine einbettbare Visualisierung erstellen möchten, die nicht auf Änderungen in der Looker-Benutzeroberfläche reagiert, folgen Sie der Anleitung auf der Dokumentationsseite Visualisierungskomponenten und query-Attribut zum Rendern einer einfachen Visualisierung verwenden.

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

  1. Abfrage erstellen und einem Dashboard hinzufügen
  2. Bette die Abfrage mithilfe der Dashboard-ID in eine React-Anwendung ein.
  3. Ändern Sie bei Bedarf 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 eigenständige React-Anwendung verwenden, ist es wichtig, sich bei der API von Looker zu authentifizieren und Zugriff auf das Looker SDK-Objekt zu haben. Weitere Informationen finden Sie in der Looker API-Authentifizierung oder in unserem Erweiterungs-Framework.
  • Prüfen Sie, ob Sie das NPM-Paket für die Looker-Visualisierungskomponenten und das NPM-Paket @looker/components-data installiert haben. Informationen zum Installieren und Verwenden des Pakets für die Visualisierungskomponenten finden Sie im Readme-Dokument, das in GitHub und NPM verfügbar ist.

Schritt 1: Abfrage erstellen und einem Dashboard hinzufügen

Verwenden Sie ein Explore, um eine Abfrage in der Looker-Benutzeroberfläche zu erstellen. Fügen Sie dem Explore eine unterstützte Visualisierung hinzu und konfigurieren Sie optional die zugehörigen Einstellungen im Menü Einstellungen der Visualisierung.

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

Die Komponente Query lädt die Visualisierung immer 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 eine gute Praxis, als Abfragereferenz nur Dashboards mit einer einzelnen Kachel zu verwenden.

Mit der Komponente Query wird nur die Kachelvisualisierung angezeigt. Der Tile-Titel, der Dashboard-Titel oder andere Dashboard-Elemente werden nicht angezeigt. Alle auf die Tile angewendeten Dashboard-Filter haben keine Auswirkungen auf die eingebettete Visualisierung.

Rufen Sie das erstellte Dashboard auf.

Eine numerische Dashboard-ID wird in der Dashboard-URL hinter dashboards/ angezeigt. Kopieren Sie diese ID zur Verwendung im nächsten Schritt.

Für die Eigenschaft dashboard der Komponente Query sind nur numerische IDs zulässig. Er akzeptiert keine String-IDs von LookML-Dashboards.

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

Jetzt können Sie die Abfrage in Ihre React-Anwendung einbetten, indem Sie die Dashboard-ID im Attribut dashboard der Komponente Query übergeben:

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 bei Bedarf ändern

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

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

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

  • Bearbeiten Sie die Abfrage-Tile im Dashboard oder
  • Fügen Sie dem Dashboard eine neue Abfrage-Tile hinzu und löschen Sie die ursprüngliche Kachel.

Folgen Sie zum Bearbeiten der Abfragekachel der Anleitung zum Bearbeiten von Tiles auf der Dokumentationsseite Benutzerdefinierte Dashboards bearbeiten. Speichern Sie die Änderungen, um den Bearbeitungsmodus auf dem Dashboard zu beenden.

Wenn Sie eine neue Kachel hinzufügen und die ursprüngliche Kachel löschen möchten, folgen Sie der Anleitung unter Abfragekacheln hinzufügen. Folgen Sie dann der Anleitung zum Löschen von Kacheln, um die unerwünschte Visualisierung zu löschen. Achten Sie darauf, dass sich nur eine Kachel auf Ihrem Dashboard befindet, und speichern Sie die Änderungen, um den Bearbeitungsmodus auf dem Dashboard zu beenden, damit Ihre Änderungen übernommen werden.

Nachdem Sie das Dashboard geändert und gespeichert haben, werden die Änderungen an der Visualisierung in Ihrer Erweiterung oder React-Anwendung angezeigt, ohne dass Änderungen am Code erforderlich sind.

Nächste Schritte