Benutzerdefinierte Visualisierungen mit Visualisierungskomponenten erstellen

Diese Anleitung richtet sich an erfahrene JavaScript-Entwickler und setzt gewisse Kenntnisse im Bereich der funktionalen Programmierung voraus.

In diesem Beispiel beginnen wir mit einer Abfrage, die sich auf hypothetische Quartalsumsatzinformationen für einige Marken bezieht. Zuerst filtern wir die Abfrage nach bestimmten Marken und drehen die Ergebnisse dann nach Verkaufsquartal. Die folgende Tabelle enthält ein Beispiel.

Hinweis: Mit der Pivot-Funktion in Looker können Sie Ergebnisse nach einer bestimmten Dimension gruppieren. Weitere Informationen zum Pivoting finden Sie auf der Dokumentationsseite Daten in Looker erkunden. Weitere Informationen zum Filtern von Daten finden Sie auf der Dokumentationsseite Daten filtern und einschränken.

Anschließend erstellen wir mithilfe von Visualisierungskomponenten eine benutzerdefinierte Visualisierung, die zeigt, welche Produkte der einzelnen Marken im letzten Quartal im Trend lagen. Das Ergebnis ist eine neue Art der Visualisierung, die aus einer Reihe von Sparklines besteht, die in einer Tabelle verschachtelt sind. Beispiel:

In diesem Beispiel erfahren Sie nicht nur, wie Sie eine benutzerdefinierte Visualisierung erstellen, sondern auch, wie Sie die Looker API in einer React-Anwendung verwenden.

Wenn Sie eine benutzerdefinierte Visualisierung mit Looker-Komponenten erstellen möchten, prüfen Sie, ob Ihre Konfiguration die Anforderungen erfüllt. Führen Sie dann die folgenden Schritte aus:

1. Eine Abfrage in einer explorativen Datenanalyse erstellen und den qid-Wert kopieren
2. Daten an eine benutzerdefinierte Visualisierungskomponente übergeben
3. Komponente CustomVis erstellen
4. Normalisierte Daten transformieren
5. Transformierte Daten in CustomVis einfügen
6. Benutzerdefinierte Visualisierung generieren

Die Verwendung von Visualisierungskomponenten zum Erstellen einer benutzerdefinierten Visualisierung ist dann sinnvoll, wenn die benutzerdefinierte Visualisierung für eine eingebettete Anwendung oder Erweiterung bestimmt ist. Wenn Sie die benutzerdefinierte Visualisierung für Looker-Nutzer in einer Looker-Instanz verfügbar machen möchten, folgen Sie der Anleitung auf der Dokumentationsseite zu visualization. Wenn Sie eine benutzerdefinierte Visualisierung entwickeln und in den Looker Marketplace hochladen möchten, folgen Sie der Anleitung auf der Dokumentationsseite Benutzerdefinierte Visualisierung für den Looker Marketplace entwickeln.

Voraussetzungen

Bevor Sie beginnen, sind einige Elemente erforderlich:

• Sie benötigen Zugriff auf eine Looker-Instanz.
• Unabhängig davon, ob Sie das Erweiterungsframework oder Ihre eigene eigenständige React-Anwendung erstellen, ist es wichtig, sich mit der Looker API zu authentifizieren und Zugriff auf das Looker SDK-Objekt zu haben. Weitere Informationen finden Sie unter Looker API-Authentifizierung oder Erweiterungs-Framework.
• Sie müssen das NPM-Paket für Looker-Visualisierungskomponenten und das NPM-Paket für @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 Abfrage-ID kopieren

In diesem Beispiel verwenden wir hypothetische vierteljährliche Verkaufsinformationen für Marken, die wir im Zeitverlauf beobachten.

Wir werden diese Daten pivotieren, da dies die integrierte Möglichkeit in Looker ist, die Abfrageergebnisse zu gruppieren. In einem Explore können wir eine Abfrage ausführen und ein Diagramm mit den Daten erstellen, indem wir einen der nativen Visualisierungstypen von Looker verwenden. Das Diagramm bietet viele Informationen, aber es ist schwierig, auf einen Blick zu erfassen, wie sich die Produkte der einzelnen Marken entwickeln:

Wie im Beispiel zum Rendern einer einfachen Visualisierung kopieren Sie als Nächstes den Wert qid aus der URL-Leiste des Explores. In diesem Beispiel ist der Wert für qid Uijcav7pCA4MZY2MompsPZ. Dieser Wert ist jedoch spezifisch für unsere Testinstanz. Ihr Wert wird sich unterscheiden.

Schritt 2: Daten an eine benutzerdefinierte Visualisierungskomponente übergeben

Übergeben Sie zuerst den qid-Wert aus der URL des Explores an die Komponente Query und das authentifizierte SDK-Objekt an DataProvider.

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 (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'></Query>
    </DataProvider>
  )
}

Anstatt eine native Looker-Visualisierung über die Komponente Visualization zu rendern, erstellen wir stattdessen eine benutzerdefinierte Komponente namens CustomVis.

Die Query-Komponente kann jedes React-Element als untergeordnetes Element akzeptieren und gibt die Werte config, data, fields und totals einfach als Properties weiter, um Ihre eigenen Visualisierungskomponenten zu rendern. Wir rendern CustomVis als untergeordnetes Objekt von Query, damit es alle relevanten Daten als Properties empfangen kann.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'
import { CustomVis } from '../path/to/MyCustomVis'

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

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'>
        <CustomVis />
      </Query>
    </DataProvider>
  )
}

Schritt 3: CustomVis-Komponente erstellen

Als Nächstes erstellen wir die CustomVis-Komponente. Die von der Komponente Query übernommenen Properties sind config, fields, data, pivots und totals:

• Mit config wird beschrieben, wie die Daten in einem Diagramm gerendert werden sollen, z. B. die Stärke der Linie in einer Sparkline oder die Größe und Form der Punkte eines Streudiagramms.
• In fields werden zusätzliche Metadaten zu den Mess- und Dimensionswerten gespeichert, die von der Abfrage zurückgegeben werden, z. B. wie die Werte formatiert werden sollen oder wie die einzelnen Achsen beschriftet werden sollen.
• data ist die Schlüssel/Wert-Antwort, die von der Abfrage zurückgegeben wurde.
• pivots beschreibt die Dimension, nach der das Pivoting der Abfrage durchgeführt wird.
• totals verweist auf die Zeilensummen von Looker zur Verwendung in tabellenbasierten Visualisierungen.

Wir können diese unveränderten Eigenschaften an eine Tabellenvisualisierung übergeben, indem wir eine Table-Komponente einfügen.

import React from 'react'
import { Table } from '@looker/visualizations'

export const CustomVis = ({ config, fields, data, pivots }) => {
  return <Table config={config} data={data} fields={fields} pivots={pivots} />
}

So erhalten wir einen Eindruck von den Daten, wie sie direkt vom SDK zurückgegeben werden. In der gerenderten Antwort gibt es eine Zeile für jede Marke mit Ergebnissen, die nach Quartal gruppiert oder gedreht sind.

Schritt 4: Normalisierte Daten transformieren

Um diese pivotierten Daten so zu konvertieren, dass sie mit verschachtelten Sparklines gerendert werden, isolieren wir alle Messwerte und übergeben sie an die Subdiagramme. Im folgenden Diagramm sind die relevanten Daten für eine einzelne Zeile hervorgehoben, um die Daten zu veranschaulichen, die wir minimieren und mit einer untergeordneten Visualisierung rendern werden:

Dazu erstellen wir eine benutzerdefinierte Transformation. Das folgende Beispiel ist speziell auf dieses Szenario zugeschnitten. Sie müssen Ihre eigenen Daten entsprechend parsen.

import React from 'react'
import { Table, Sparkline } from '@looker/visualizations'

// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'

const nestSparklines = (data) => {
  return data.reduce((acc, d) => {
    // the first entry is the dimension (brand name), and the rest of the rows are the
    // quarterly sales information we want to pass to the Sparkline.
    const [parentDimension, ...measurePairs] = Object.entries(d)

    // `nonPivotedData` represents a single data row.
    // e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
    const nonPivotedData: SDKRecord[] = measurePairs.map(([_, value], i) => {
      return { entry: i, [NESTED_DATA_KEY]: value }
    })

    // now for each row in the table we render a Sparkline using the `nonPivotedData`
    // that we built.
    // E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
    return [
      ...acc,
      {
        [parentDimension[0]]: parentDimension[1],
        [NESTED_DATA_KEY]: () => (
          <Sparkline
            height={75}
            data={nonPivotedData}
            fields={{
              measures: [{ name: NESTED_DATA_KEY }],
              dimensions: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

So erstellen Sie die Funktion:

1. Reduzieren Sie den Datensatz, um den Markennamen von den vierteljährlichen Bestelldaten für jede Zeile zu isolieren.
2. Aktualisieren Sie jede Zeile, damit sie die Dimension und eine gerenderte React-Komponente enthält, die die Werte für die einzelnen Zeilen in der Tabelle darstellen kann.

Schritt 5: Transformierte Daten in CustomVis einfügen

Transformieren Sie die Daten jetzt mit unserer neuen Funktion und weisen Sie die Ausgabe einer neuen Variablen namens nestedData zu:

export const CustomVis =({
  fields,
  data,
  config,
  pivots,
}) => {
  const nestedData = nestSparklines(data)

  return (
    <Table
      fields={{
        measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
        dimensions: fields.dimensions,
        pivots: [],
      }}
      config={config}
      data={nestedData}
      pivots={pivots}
    />
  )
}

Schritt 6: Benutzerdefinierte Visualisierung generieren

Nachdem Sie die transformierten Daten eingefügt und das Diagramm konfiguriert haben, sieht die Visualisierung wie diese Beispiel einer Tabelle mit einzelnen Sparkline-Diagrammen für jede Zeile aus:

Der gesamte Code, der zum Rendern dieser Visualisierung erforderlich ist, sieht so aus:

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Sparkline, Table } from '@looker/visualizations'

// we assign this value to a constant to ensure that fields and data
// objects remain in sync.
const NESTED_DATA_KEY = 'orderCount'
const ROW_HEIGHT = 75

const nestSparklines = data => {
  return data.reduce((acc, d) => {
    // the first entry is the dimension (brand name), and the rest of the rows are the
    // quarterly sales information we want to pass to the Sparkline.
    const [parentDimension, ...measurePairs] = Object.entries(d)

    // `nonPivotedData` represents a single data row.
    // e.g. [{entry: 1, orderCount: 10}, {entry: 2, orderCount: 15}, ...etc]
    const nonPivotedData = measurePairs.map(([_, value], i) => {
      return { entry: i, [NESTED_DATA_KEY]: value }
    })

    // now for each row in the table we render a Sparkline using the `nonPivotedData`
    // that we built.
    // E.G. [{products.brand: 'adidas', orderCount: <Sparkline />}]
    return [
      ...acc,
      {
        [parentDimension[0]]: parentDimension[1],
        [NESTED_DATA_KEY]: () => (
          <Sparkline
            height={ROW_HEIGHT}
            data={nonPivotedData}
            fields={{
              measures: [{ name: NESTED_DATA_KEY }],
              dimensions: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

const CustomVis = ({ fields, data, pivots, config }) => {
  const nestedData = nestSparklines(data)

  return (
    <Table
      config={config}
      height={500}
      fields={{
        measures: [{ name: NESTED_DATA_KEY, label: 'Orders Count By Quarter' }],
        dimensions: fields.dimensions,
        pivots: [],
      }}
      data={nestedData}
      pivots={pivots}
      defaultRowHeight={ROW_HEIGHT}
    />
  )
}

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

  return (
    <DataProvider sdk={core40SDK}>
      <Query query='Uijcav7pCA4MZY2MompsPZ'>
        <CustomVis />
      </Query>
    </DataProvider>
  )
}

Nächste Schritte

• Visualisierungskomponenten und das Attribut dashboard zum Rendern einer einfachen Visualisierung verwenden
• Visualisierungskomponenten und das Attribut query zum Rendern einer einfachen Visualisierung verwenden
• Benutzerdefinierte Visualisierungen mithilfe von Visualisierungskomponenten rendern
• Tabellen für Visualisierungs- und Abfrageeigenschaften