Visualisierungskomponenten und die Dashboard-Eigenschaft verwenden, um eine einfache Visualisierung zu rendern

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

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

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

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

  1. Abfrage erstellen und einem Dashboard hinzufügen
  2. Fügen Sie 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 benötigen Zugriff auf eine Looker-Instanz.
  • Unabhängig davon, ob Sie im Erweiterungs-Framework oder in Ihrer eigenen eigenständigen React-Anwendung entwickeln, ist es wichtig, dass Sie sich bei der API von Looker 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 die Looker-Visualisierungskomponenten und das NPM-Paket @looker/components-data installiert haben. Informationen zur Installation und Verwendung des Pakets mit Visualisierungskomponenten finden Sie im README-Dokument, das auf GitHub und NPM verfügbar ist.

Schritt 1: Abfrage erstellen und einem Dashboard hinzufügen

Verwenden Sie ein Explore, um eine Abfrage auf 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 mit dieser Abfrage. Alternativ können Sie die Abfrage einem leeren Dashboard hinzufügen, das Sie bereits erstellt haben.

Die Query-Komponente lädt die Visualisierung immer von 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 aus einer einzelnen Kachel bestehende Dashboards als Abfragereferenz zu verwenden.

In der Komponente Query wird nur die Kachelnvisualisierung angezeigt. Der Titel der Kachel, der Dashboard-Titel und andere Dashboard-Elemente werden nicht angezeigt. Alle Dashboard-Filter, die auf die Tile angewendet werden, haben keine Auswirkungen auf die eingebettete Visualisierung.

Nachdem das Dashboard erstellt wurde, rufen Sie es auf.

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

Für das Attribut dashboard der Query-Komponente sind nur numerische IDs zulässig. Die String-IDs von LookML-Dashboards werden nicht akzeptiert.

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

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

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: Bei Bedarf die Visualisierung ändern

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

Für den Bearbeitungszugriff benötigen Nutzer die Zugriffsebene 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 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 Tile.

Folgen Sie der Anleitung zum Bearbeiten von Kacheln auf der Dokumentationsseite Benutzerdefinierte Dashboards bearbeiten, um die Abfragekachel zu bearbeiten. Speichern Sie Ihre Änderungen, um den Bearbeitungsmodus für das Dashboard zu beenden.

Folgen Sie der Anleitung zum Hinzufügen von Abfrage-Tiles, um eine neue Tile hinzuzufügen und die ursprüngliche Tile zu löschen. Folgen Sie dann der Anleitung zum Löschen von Kacheln, um die unerwünschte Visualisierung zu löschen. Damit Ihre Änderungen übernommen werden, darf sich nur eine Kachel auf dem Dashboard befinden. Speichern Sie die Änderungen, um den Bearbeitungsmodus für das Dashboard zu verlassen.

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