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

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:

  1. Erstellen Sie eine Abfrage in einem explorativen Analysetool und kopieren Sie den Wert Query.client_id.
  2. Betten Sie die Abfrage in eine React-Anwendung ein.
  3. Fügen Sie die Komponente Visualization hinzu.
  4. 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 Die Query.client_id ist der Property query 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