Mit Visualisierungskomponenten eine benutzerdefinierte Visualisierung erstellen

Diese Anleitung richtet sich an erfahrene JavaScript-Entwickler und setzt gewisse Kenntnisse im Umgang mit funktionalen Programmiertechniken 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 pivotieren die Ergebnisse dann nach Verkaufsquartal. Die folgende Tabelle enthält ein Beispiel.

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

Dann verwenden wir Visualisierungskomponenten, um eine benutzerdefinierte Visualisierung zu erstellen, die zeigt, wie sich die Produkte der einzelnen Marken im letzten Quartal entwickelt haben. Das Ergebnis ist eine neue Art der Visualisierung, die aus einer Reihe von Sparklines besteht, die in einer Tabelle verschachtelt sind. Beispiel:

Dieses Beispiel zeigt Ihnen nicht nur, wie Sie eine benutzerdefinierte Visualisierung erstellen, sondern zeigt 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. Führen Sie dann die folgenden Schritte aus:

1. Abfrage in einem Explore 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 eignet sich, wenn die benutzerdefinierte Visualisierung für eine eingebettete Anwendung oder Erweiterung vorgesehen 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 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 die Abfrage-ID kopieren

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

Wir werden diese Daten pivotieren, da Pivoting die in Looker integrierte Funktion zum Gruppieren der Abfrageergebnisse ist. In einem Explore können wir eine Abfrage ausführen und ein Datendiagramm mit einem der nativen Visualisierungstypen von Looker erstellen. 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 für das Rendern einer einfachen Visualisierung besteht der nächste Schritt darin, den Wert qid aus der URL-Leiste des Explores zu kopieren. In diesem Beispiel ist der Wert qid Uijcav7pCA4MZY2MompsPZ, aber dieser Wert ist spezifisch für unsere Testinstanz. Ihr Wert wird abweichen.

Schritt 2: Daten an eine benutzerdefinierte Visualisierungskomponente übergeben

Übergeben Sie zuerst den qid-Wert aus der Explore-URL 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>
  )
}

Als Nächstes erstellen wir unsere eigene benutzerdefinierte Komponente namens CustomVis, anstatt eine native Looker-Visualisierung mit der Komponente „Visualization“ zu rendern.

Die Komponente „Query“ kann jedes React-Element als untergeordnetes Element annehmen und übergibt einfach die Werte config, data, fields und totals als Eigenschaften, 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 Eigenschaften, die von der Komponente Query übernommen werden, 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 Messwert- und Dimensionswerten gespeichert, die von der Abfrage zurückgegeben wurden, z. B. wie die Werte formatiert sein oder was jede Achse beschriftet.
• 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. Die gerenderte Antwort enthält eine Zeile für jede Marke mit vierteljährlich gruppierten oder pivotierten Ergebnissen.

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 mit einer untergeordneten Visualisierung minimiert und gerendert werden:

Dazu erstellen wir eine benutzerdefinierte Transformation. Im Folgenden finden Sie ein Beispiel speziell für 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.
    // 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 aus den vierteljährlichen Bestelldaten für jede Zeile zu isolieren.
2. Aktualisieren Sie jede Zeile so, dass 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 nun die Daten 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>
  )
}

Weitere Informationen

• Visualisierungskomponenten und das Attribut dashboard zum Rendern einer einfachen Visualisierung verwenden
• Visualisierungskomponenten und das Attribut query zum Rendern einer einfachen Visualisierung verwenden
• Benutzerdefinierte Visualisierungen mit Visualisierungskomponenten
• Visualisierungs- und Abfrageeigenschaftstabellen