Visualisierungskomponenten und die Abfrageeigenschaft verwenden, um eine einfache Visualisierung zu rendern

Die query-Property der Query-Visualisierungskomponente ist die einfachste Möglichkeit, eine einbettbare Visualisierung mit Looker-Visualisierungskomponenten zu rendern. Die Verwendung der query-Property bietet im Gegensatz zur dashboard-Property folgende Vorteile:

  • Sie müssen in Looker lediglich eine Abfrage erstellen, kein Dashboard.
  • Die von query akzeptierten Werte (Query.client_id oder die Abfrage-ID) sind unveränderlich. Sofern sich das zugrunde liegende Modell nicht ändert, wirken sich keine Änderungen an der Looker-Instanz auf die eingebettete Visualisierung aus.

Wenn Sie eine einbettbare Visualisierung erstellen möchten, die auf Änderungen in der Looker-Benutzeroberfläche reagiert und daher auch von anderen Looker-Nutzern als App-Entwicklern aktualisiert werden kann, folgen Sie der Anleitung auf der Dokumentationsseite Visualisierungskomponenten und eine Dashboard-ID zum Rendern einer einfachen Visualisierung verwenden.

Wenn Sie eine einbettbare Visualisierung mithilfe von Looker-Visualisierungskomponenten und dem Attribut query rendern möchten, muss Ihre Einrichtung die Anforderungen erfüllen. Führen Sie dann die folgenden Schritte aus:

  1. Erstellen Sie eine Abfrage in einem Explore 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. Passen Sie die Einstellungen mit der config-Property an.

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 in einem Explore erstellen und den Wert Query.client_id kopieren

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.

Suchen Sie in der Adressleiste des Browsers nach der URL-Eigenschaft qid. Der alphanumerische Wert, der dieser Eigenschaft zugewiesen ist, ist Query.client_id.

Wenn die URL beispielsweise https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse lautet, ist Query.client_id evomfl66xHx1jZk2Hzvv1R.

Query.client_id ist ein eindeutiger String, der die Abfrage- und Visualisierungseinstellungen darstellt. Wenn Sie etwas an der Abfrage oder den Einstellungen ändern, ändert sich 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 können Sie das Query.client_id in eine React-Anwendung einbetten.

Unten sehen Sie den Code für eine hypothetische React-Anwendung. Dieses Beispiel wurde im Erweiterungs-Framework von Looker erstellt und das Looker SDK-Objekt wurde aus dem Erweiterungskontext-Anbieter abgerufen.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return null
}

Als Erstes 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 Angaben machen:

  • Ein SDK-Objekt. Das SDK-Objekt wird aus dem Erweiterungskontext abgerufen.
  • Das Query.client_id. Query.client_id ist dem Attribut 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

Fügen Sie als Nächstes die Komponente Visualization hinzu, die die von Query zurückgegebenen Daten und Konfigurationseinstellungen interpretiert, um das erwartete Diagramm zu rendern.

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>
  )
}

Mit diesem Schritt wird eine Visualisierung ausgegeben, die in etwa so aussieht:

Eine Visualisierung mit Liniendiagramm.

Schritt 4: Einstellungen mit der Eigenschaft config anpassen

Mit der Property config der Komponente Query können Sie Visualisierungseinstellungen überschreiben, die vom SDK zurückgegeben werden. Diese Eigenschaft kann alle unterstützten Funktionen ändern, von der Art der Visualisierung bis hin zu den Details für die Darstellung der einzelnen Datenreihen.

Im folgenden Beispielcode wird durch die Eigenschaft config der Diagrammtyp in sparkline geändert und der Datenreihe wird eine neue Farbe zugewiesen.

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 angezeigt:

Eine Sparkline-Visualisierung.

Eine vollständige Liste der untergeordneten Properties, die in der config-Property verfügbar sind, finden Sie in der Referenzdokumentation zu Visualisierungs- und Abfrageeigenschaftstabellen.

Nächste Schritte