Komponenten der Looker-Visualisierung

Looker-Visualisierungskomponenten sind eine Reihe von React-basierten Komponenten, die im Open-Source-Paket @looker/visualizations verfügbar sind.

Visualisierungskomponenten akzeptieren einen Query.client_id-Wert oder eine Abfrage-ID aus einem Looker-Explore oder eine Dashboard-ID aus einem Looker-Dashboard und rendern eine clientseitige Visualisierung ohne iFrame.

Diese Komponenten können sofort verwendet werden. Sie können auch als reine Datenformatierer behandelt werden, um bereinigte Daten von einem Looker Explore zu übergeben, um die Erstellung Ihrer eigenen benutzerdefinierten Visualisierungen zu erleichtern.

Looker-Visualisierungskomponenten wurden für die Verwendung in einer React-Umgebung entwickelt, die mit dem TypeScript/JavaScript SDK mit der Looker API authentifiziert wurde. Dieser Schritt wird automatisch ausgeführt, wenn Sie einen Build mit dem Looker-Erweiterungs-Framework erstellen.

Visualisierungen mit Looker-Visualisierungskomponenten erstellen

Die Suite von Looker für die Visualisierungskomponenten bietet zwei übergeordnete Komponenten zum Arbeiten mit Ihren Daten:

  • Query: verarbeitet den Datenabruf und lädt die Antwort in den React-Kontext.
  • Visualization: Akzeptiert die von Query zurückgegebenen Daten und verwendet Konfigurationsadapter, um das entsprechende benutzerdefinierte Diagramm auf einer Seite zu rendern.

Derzeit können Daten in den folgenden Diagrammtypen gerendert werden:

  • Linie
  • Flächendiagramm
  • Streudiagramm
  • Sparkline-Zeichen
  • Einzelwert
  • Balken
  • Spalte
  • Tabelle
  • Kreisdiagramm

Wir arbeiten derzeit an weiteren Diagrammtypen.

Eine Übersicht der Property-Tabellen für jeden Diagrammtyp finden Sie auf der Dokumentationsseite Property-Tabellen unter „Visualisierung“ und „Abfrage“.

Die verfügbaren Konfigurationsoptionen für jeden Diagrammtyp finden Sie auf dem Visualisierungsspielplatz im Looker-Entwicklerportal.

Vorteile von Visualisierungskomponenten

Visualisierungskomponenten verbessern und vereinfachen das Rendern einer Visualisierung aus Looker in einer Anwendung. Außerdem gibt das Entwicklungsteam mehr Zeit für die Anpassung und Erweiterung ihrer Visualisierungen aus Looker.

  • Verbesserte Einbettung: Mit Visualisierungskomponenten können Sie eine Looker-Visualisierung in eine Anwendung ohne iFrame einbetten. Dadurch können Leistung, Monitoring und die Möglichkeit zur Anpassung verbessert werden.
  • Einfache Einbindung: Die Visualisierungskomponenten können dann mit anderen Komponenten von @looker/components kombiniert werden, um völlig neue Kompositionen und Front-End-Inhalte zu erstellen.
  • Anpassung: Es ist einfacher, eingebettete Visualisierungen anzupassen, wenn Visualisierungskomponenten verwendet werden, als iFrames. Darüber hinaus können Entwickler mit Visualisierungskomponenten viel individuelle Anwendungen viel schneller erstellen, ohne eine neue Visualisierungsebene erstellen zu müssen.
  • Vereinfachung: Visualisierungskomponenten verbessern die Portabilität von Looker-Visualisierungen und vereinfachen die Interaktionen mit der Looker API.

Visualisierungskomponenten installieren

Fügen Sie als Erstes das NPM-Paket für Looker Visualization-Komponenten hinzu:

  • NPM:npm install @looker/visualizations
  • YARN: yarn add @looker/visualizations

Außerdem müssen Sie einige Peer-Abhängigkeiten erfüllen: Looker/components, React und Styled Components:

  • NPM:npm install @looker/components react react-dom styled-components
  • YARN: yarn add @looker/components react react-dom styled-components

Informationen zum Installieren und Verwenden des Visualisierungskomponentenpakets finden Sie in der README-Datei, die auf GitHub und NPM verfügbar ist.

Nächste Schritte