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.
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:
- Abfrage in einem Explore erstellen und den Wert
qid
kopieren - Daten an eine benutzerdefinierte Visualisierungskomponente übergeben
- Komponente
CustomVis
erstellen - Normalisierte Daten transformieren
- Transformierte Daten in
CustomVis
einfügen - 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 gilt speziell für unsere Testinstanz. abweichend sein wird.
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. CustomVis
wird als untergeordnetes Objekt von Query
gerendert, 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. Das folgende Beispiel ist für dieses Szenario spezifisch: müssen Sie 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:
- Reduzieren Sie den Datensatz, um den Markennamen von den vierteljährlichen Bestelldaten für jede Zeile zu isolieren.
- 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 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>
)
}
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 mit Visualisierungskomponenten
- Visualisierungs- und Abfrageeigenschaftstabellen