Mit Visualisierungskomponenten und der Abfrageeigenschaft eine einfache Visualisierung rendern

Mit der query-Eigenschaft der Query-Visualisierungskomponente können Sie am besten eine eingebettete Visualisierung mithilfe von Looker-Visualisierungskomponenten rendern. Die Verwendung der Property query (im Gegensatz zur dashboard-Property) bietet folgende Vorteile:

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

Wenn Sie eine eingebettete 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 unter Visualisierungskomponenten und Dashboard-ID zum Rendern einer einfachen Visualisierung.

Wenn Sie mithilfe von Looker-Visualisierungskomponenten und dem Attribut query eine Visualisierung einbetten möchten, müssen Sie Ihre Anforderungen erfüllen. Führen Sie dann folgende Schritte aus:

  1. Erstellen Sie eine Abfrage in einem Explore und kopieren Sie den Wert Query.client_id.
  2. Binden Sie die Abfrage in eine React-Anwendung ein.
  3. Fügen Sie die Komponente Visualization hinzu.
  4. Passe die Einstellungen mit der Property config 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 React-Anwendung erstellen, ist die Authentifizierung bei der Looker API und der Zugriff auf das Looker SDK-Objekt wichtig. Weitere Informationen finden Sie unter Looker API-Authentifizierung oder Erweiterungs-Framework.
  • Achten Sie darauf, dass Sie das NPM-Paket für Looker Visualization-Komponenten und das NPM-Paket von @looker/components-data installiert haben. Informationen zum Installieren und Verwenden des Visualisierungskomponentenpakets finden Sie in der README-Datei, die auf GitHub und NPM verfügbar ist.

Schritt 1: Abfrage in einer explorativen Datenanalyse erstellen und den Wert Query.client_id kopieren

Verwenden Sie die Funktion Erkunden, um eine Abfrage in der Looker-UI zu erstellen. Fügen Sie im Menü „Erkunden“ eine unterstützte Visualisierung hinzu und konfigurieren Sie optional deren Einstellungen im Menü Einstellungen der Visualisierung.

Suche die URL-Property qid in der Adressleiste des Browsers. Der alphanumerische Wert, der dieser Property 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 der Wert evomfl66xHx1jZk2Hzvv1R.

Der Query.client_id ist ein eindeutiger String, der die Abfrage und die Visualisierungseinstellungen darstellt. Wenn Sie etwas an der Abfrage oder den Einstellungen ändern, ändert sich auch der 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.

Nachfolgend finden Sie Code für eine hypothetische Anwendung von React. Dieses Beispiel wurde im Looker Extension Framework 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
}

Zuerst werden die Komponenten DataProvider und Query verwendet. DataProvider speichert die SDK-Referenz im Kontext und Query leitet unsere Netzwerkanfragen aus und formatiert das Antwort-Rendering.

Außerdem müssen Sie zwei Dinge angeben:

  • SDK-Objekt Das SDK-Objekt wird aus dem Erweiterungskontext abgerufen.
  • Die 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. Damit werden die Daten- und Konfigurationseinstellungen interpretiert, die von Query zum Rendern des erwarteten Diagramms zurückgegeben werden.

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

Dieser Schritt gibt eine Visualisierung aus, die dem folgenden Beispiel entspricht:

Visualisierung von Liniendiagrammen

Schritt 4: Einstellungen mit der Property config anpassen

Mit der config-Property der Query-Komponente können Sie Visualisierungseinstellungen überschreiben, die vom SDK zurückgegeben werden. 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 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 in der config-Property verfügbar sind, finden Sie in der Referenzdokumentation zu Property-Tabellen für Visualisierungen oder in der Praxis auf dem entsprechenden Tab.

Nächste Schritte