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 nur in Looker eine Abfrage erstellen. müssen Sie 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 Änderungen an der Looker-Instanz nicht 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 einer explorativen Datenanalyse und kopieren Sie den Wert für Query.client_id.
  2. Fügen Sie die Abfrage in eine React-Anwendung ein.
  3. Fügen Sie die Komponente Visualization hinzu.
  4. Einstellungen mit der Property config anpassen

Voraussetzungen

Bevor Sie beginnen, sind einige Elemente erforderlich:

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

Verwenden Sie ein Explore, um eine Abfrage in der Looker-Benutzeroberfläche zu erstellen. Fügen Sie der explorativen Datenanalyse eine unterstützte Visualisierung hinzu und konfigurieren Sie die Einstellungen optional im Menü Einstellungen der Visualisierung.

Suchen Sie in der Adressleiste des Browsers nach der URL-Eigenschaft qid. Der dieser Property zugewiesene alphanumerische Wert 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 Extension Framework erstellt und das Looker SDK-Objekt wurde vom Kontextanbieter der Erweiterung 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 müssen Sie zwei Dinge angeben:

  • Ein SDK-Objekt Das SDK-Objekt wird aus dem Erweiterungskontext abgerufen.
  • Die 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: Visualization-Komponente 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>
  )
}

Dieser Schritt gibt eine Visualisierung aus, die in etwa so 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 alle unterstützten Funktionen geändert werden, von der Art der Visualisierung bis hin zu den Details der Darstellung der einzelnen Datenreihen.

Im folgenden Beispielcode wird mit der Property config der Diagrammtyp in sparkline geändert und der Datenreihe 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 gerendert:

Eine Sparkline-Visualisierung.

Eine vollständige Liste der untergeordneten Properties, die in der Property vom Typ config verfügbar sind, finden Sie in der Referenzdokumentation zu Tabellen für Visualisierungs- und Abfrageeigenschaften.

Nächste Schritte