Mit Visualisierungskomponenten eine benutzerdefinierte Visualisierung erstellen

Diese Anleitung richtet sich an erfahrene JavaScript-Entwickler und setzt ein gewisses Verständnis von funktionalen Programmiertechniken voraus.

In diesem Beispiel beginnen wir mit einer Abfrage, die sich auf hypothetische vierteljährliche Umsatzinformationen einiger Marken bezieht. Wir filtern zuerst die Suchanfrage nach bestimmten Marken und ändern die Ergebnisse dann nach Umsatz. Ein Beispiel sehen Sie in der folgenden Tabelle.

Ergebnisse aus einer Abfrage zur Auftragsanzahl nach Marke mit einer Neuausrichtung auf die Dimension „Erstelltes Quartal“.

Anschließend verwenden wir Visualisierungskomponenten, um eine benutzerdefinierte Visualisierung zu erstellen, die zeigt, wie die einzelnen Marken im letzten Quartal im Trend sind. Das Ergebnis ist eine neue Art der Visualisierung, die aus einer Reihe von Sparklines in einer Tabelle besteht. Hier ein Beispiel:

Eine benutzerdefinierte Visualisierung, in der eine Tabelle mit einer Zeile für jede Marke angezeigt wird, und eine eingebettete Sparkline-Visualisierung, bei der die Bestellungen in jeder Zeile nach Quartal sortiert sind.

Dieses Beispiel zeigt nicht nur, wie Sie eine benutzerdefinierte Visualisierung erstellen, sondern auch einige Best Practices für die Arbeit mit der Looker API in einer React-Anwendung.

Wenn Sie eine benutzerdefinierte Visualisierung mit Looker-Komponenten erstellen möchten, muss Ihre Einrichtung die Anforderungen erfüllen und dann die folgenden Schritte ausführen:

  1. Abfrage in einer explorativen Datenanalyse erstellen und den Wert qid 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 geeignet, wenn sie für eine eingebettete Anwendung oder Erweiterung vorgesehen ist. Wenn Sie die benutzerdefinierte Visualisierung in einer Looker-Instanz für Looker-Nutzer 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 Seite Benutzerdefinierte Visualisierung für den Looker Marketplace entwickeln.

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 die Abfrage-ID kopieren

In diesem Beispiel verwenden wir hypothetische vierteljährliche Umsatzinformationen für Marken, die wir im Laufe der Zeit erfassen.

Sie werden diese Daten schwenken, weil sie in Looker integriert ist, um die Abfrageergebnisse zu gruppieren. In einer explorativen Datenanalyse können Sie eine Abfrage ausführen und ein Diagramm der Daten mit einem der nativen Visualisierungstypen von Looker erstellen. Das Diagramm bietet viele Informationen, aber es ist schwer zu parsen, wie die Produkte der einzelnen Marken im Trend liegen:

Ein Diagramm, das sich aus einer Abfrage zur Anzahl der Aufträge nach Marke zusammen mit einem Pivot in der Dimension „Bestellungen: Quartal“ ergibt.

Wie beim Beispiel für das Rendern einer einfachen Visualisierung besteht der nächste Schritt darin, den Wert qid aus der URL-Leiste der Schaltfläche „Erkunden“ zu kopieren. In diesem Beispiel ist der Wert für qid Uijcav7pCA4MZY2MompsPZ, der Wert bezieht sich jedoch speziell auf die Testinstanz. Der Wert ist anders.

Schritt 2: Daten an eine benutzerdefinierte Visualisierungskomponente übergeben

Übergib zuerst den Wert von qid aus der URL des explorativen Analysetools an die Query-Komponente 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 mit der Visualization-Komponente zu rendern, erstellen wir unsere eigene benutzerdefinierte Komponente namens CustomVis.

Die Komponente „Query“ kann jedes React-Element als untergeordnetes Element annehmen und gibt einfach die Werte „config“, „data“, „fields“ und „totals“ als Properties weiter, um eigene Visualisierungskomponenten zu rendern. Wir rendern CustomVis als untergeordnetes Element von Query, damit es alle relevanten Daten als Attribute 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 Komponente CustomVis. Die Attribute, die von der Komponente Query übernommen werden, sind config, fields, data, pivots und totals:

  • Mit config werden alle Möglichkeiten beschrieben, die Daten in einem Diagramm gerendert werden sollen, z. B. die Dicke der Linie in einer Funkenlinie oder die Größe und Form der Punkte eines Streudiagramms.
  • In fields werden zusätzliche Metadaten zu den von der Abfrage zurückgegebenen Messwert- und Dimensionswerten gespeichert, z. B. zur Formatierung der Werte oder dazu, was den einzelnen Achsen hinzugefügt werden sollen.
  • data ist die Schlüssel/Wert-Antwort, die von der Abfrage zurückgegeben wurde.
  • pivots beschreibt die Dimension, mit der die Abfrage neu interpretiert wird.
  • totals verweist auf die Zeilensummen von Looker für die Verwendung in tabellenbasierten Visualisierungen.

Wir können diese unveränderten Attribute an eine Tabellenvisualisierung übergeben, indem Sie 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 bekommen wir einen Eindruck davon, welche Daten direkt vom SDK zurückgegeben werden. Die gerenderte Antwort enthält eine Zeile für jede Marke, bei der die Ergebnisse nach Quartal gruppiert oder neu angeordnet werden.

Schritt 4: Normalisierte Daten transformieren

Zum Umwandeln dieser Pivot-Daten, die mit verschachtelten Sparklines gerendert werden sollen, isolieren wir alle Messwerte und übergeben sie an die untergeordneten Diagramme. Im folgenden Diagramm sind die relevanten Daten für eine einzelne Zeile hervorgehoben, um zu veranschaulichen, welche Daten bei einer untergeordneten Visualisierung zusammengeführt oder gerendert werden:

Diagramm mit Datenergebnissen, wobei die Anzahl der Bestellungen in der zweiten Zeile hervorgehoben ist

Dazu erstellen wir eine benutzerdefinierte Transformation. Das folgende Beispiel bezieht sich speziell auf dieses Szenario. 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 above.
    // 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: [],
            }}
          />
        ),
      },
    ]
  }, [])
}

Die Funktion wird mit den folgenden Schritten erstellt:

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

Schritt 5: Die transformierten Daten in CustomVis einfügen

Transformieren Sie die Daten jetzt mit der 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 in diesem Beispiel einer Tabelle mit einzelnen Sparkline-Diagrammen für jede Zeile aus:

Eine benutzerdefinierte Visualisierung, in der eine Tabelle mit einer Zeile für jede Marke angezeigt wird, und eine eingebettete Sparkline-Visualisierung, bei der die Bestellungen in jeder Zeile nach Quartal sortiert sind.

Der gesamte Code für das Rendern der obigen Visualisierung 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 above.
    // 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