Mit Visualisierungskomponenten und der Abfrageeigenschaft eine einfache Visualisierung rendern

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

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

Wenn Sie eine Visualisierung erstellen möchten, die auf Änderungen in der Looker-Benutzeroberfläche reagiert und daher 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 Visualisierung mit Looker-Visualisierungskomponenten und der Eigenschaft 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 Property config an.

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 der Visualisierungskomponenten finden Sie im README-Dokument auf GitHub und NPM.

Schritt 1: Abfrage in einem Explore erstellen und den Wert Query.client_id kopieren

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.

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

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

Die Query.client_id ist ein eindeutiger String, der die Abfrage- und Visualisierungseinstellungen darstellt. Wenn Sie etwas in der Abfrage oder den Einstellungen ändern, wird die Query.client_id geändert.

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 die Query.client_id in eine React-Anwendung einbetten.

Der folgende Code ist für eine hypothetische React-Anwendung vorgesehen. Dieses Beispiel wurde im Looker-Erweiterungs-Framework erstellt und das Looker SDK-Objekt wurde vom Erweiterungskontextanbieter abgerufen.

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

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

  return null
}

Zuerst 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 sind zwei Dinge erforderlich:

  • Ein SDK-Objekt. Das SDK-Objekt wird aus dem Erweiterungskontext abgerufen.
  • Das Query.client_id. Query.client_id ist der Eigenschaft 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 wie das folgende Beispiel aussieht:

Ein Liniendiagramm als Visualisierung.

Schritt 4: Einstellungen mit der Property config anpassen

Mit dem Attribut config der Komponente „Query“ können Sie Visualisierungseinstellungen überschreiben, die vom SDK zurückgegeben werden. Mit dieser Eigenschaft können Sie alle unterstützten Funktionen ändern, angefangen bei der Art der Visualisierung bis hin zu den Details, wie die einzelnen Datenreihen gerendert werden.

Im folgenden Beispielcode ändert die Eigenschaft 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 Sparkline-Visualisierung.

Eine vollständige Liste der untergeordneten Properties, die im Attribut config verfügbar sind, finden Sie in der Referenzdokumentation für Visualisierungs- und Abfrageattributtabellen.

Weitere Informationen