Eine einfache Visualisierung mithilfe von Visualisierungskomponenten und der Dashboard-Property rendern

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

  • Die Visualisierung kann von jedem Looker-Nutzer mit Bearbeitungszugriff auf das Dashboard aktualisiert werden.
  • Für Updates 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-UI reagiert, folgen Sie der Anleitung unter Visualisierungskomponenten verwenden und die Property query, um eine einfache Visualisierung zu rendern.

Wenn Sie eine einbettbare Visualisierung mithilfe der Looker-Visualisierungskomponenten und einer numerischen Dashboard-ID rendern möchten, muss Ihre Einrichtung die Anforderungen erfüllen. Anschließend können Sie so vorgehen:

  1. Abfrage erstellen und einem Dashboard hinzufügen
  2. Betten Sie die Abfrage mithilfe der Dashboard-ID in eine React-Anwendung ein.
  3. Ändern Sie gegebenenfalls die Visualisierung.

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 erstellen und einem Dashboard hinzufügen

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.

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

Mit der Komponente Query wird die Visualisierung der ersten Kachel, die dem zugehörigen Dashboard chronologisch hinzugefügt wurde, immer geladen, unabhängig davon, wo die Kachel im Dashboard-Layout erscheint. Aus diesem Grund empfiehlt es sich, nur Einzelkachel-Dashboards als Abfragereferenz zu verwenden.

Mit der Komponente Query wird nur die Kachelvisualisierung angezeigt. Der Kacheltitel, der Dashboard-Titel und andere Dashboard-Elemente werden nicht angezeigt. Dashboard-Filter, die auf die Kachel angewendet werden, haben keine Auswirkungen auf die eingebettete Visualisierung.

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

In der Dashboard-URL wird nach dashboards/ ein numerischer Dashboard-ID angezeigt. Kopieren Sie diese ID zur Verwendung im nächsten Schritt.

Die dashboard-Property der Komponente Query akzeptiert nur numerische IDs. 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, indem Sie die Dashboard-ID in der dashboard-Property 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>
  )
}

Und so wird die Visualisierung in der Erweiterung oder React-Anwendung dargestellt:

Schritt 3: 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 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, Zugriff auf Modell für das Modell, auf dem die Abfrage basiert, und die entsprechenden Looker-Berechtigungen, um Dashboards zu bearbeiten.

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

  • Abfragekachel auf dem Dashboard bearbeiten
  • Fügen Sie dem Dashboard eine neue Abfragekachel hinzu und löschen Sie die ursprüngliche Kachel.

Folgen Sie der Anleitung zum Bearbeiten von Kacheln auf der Dokumentationsseite Benutzerdefinierte Dashboards bearbeiten, um die Abfragekachel zu bearbeiten. Speichern Sie dann 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 für 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 Ihr Dashboard nur eine Kachel enthalten. Speichern Sie dann die Änderungen, um den Bearbeitungsmodus im Dashboard zu beenden.

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

Nächste Schritte