Komponenten der Looker-Visualisierung

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

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

Diese Komponenten können sofort verwendet, angepasst oder als reine Datenformatierer behandelt werden, um bereinigte Daten von Looker Explore zu übergeben und so das Erstellen eigener benutzerdefinierter Visualisierungen zu erleichtern.

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

Visualisierungen mit Looker-Visualisierungskomponenten erstellen

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

  • Query: verarbeitet den Datenabruf und lädt die Antwort in 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
  • Gebiet
  • Streudiagramm
  • Wortgrafik
  • Einzelwert
  • Balkendiagramm
  • Säulendiagramm
  • Tabelle
  • Kreisdiagramm

Wir arbeiten an weiteren Diagrammtypen.

Die Tabelle der Properties für die einzelnen Diagrammtypen finden Sie auf der Dokumentationsseite Property-Tabellen für die Visualisierung und Abfrage.

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

Vorteile von Visualisierungskomponenten

Visualisierungskomponenten verbessern und vereinfachen das Rendern einer Visualisierung aus Looker innerhalb einer Anwendung, bieten Entwicklern mehr Zeit und bieten Entwicklern mehr Möglichkeiten, ihre Visualisierungen über Looker anzupassen und zu erweitern.

  • Verbesserte Einbettung: Mithilfe von Visualisierungskomponenten können Entwickler eine Looker-Visualisierung in eine Anwendung ohne iFrame einbetten. So lassen sich Leistung, Monitoring und Anpassungsmöglichkeiten verbessern.
  • Einfache Einbindung: Visualisierungskomponenten können mit anderen Komponenten von @looker/components kombiniert werden, um völlig neue Kompositionen und Front-End-Erlebnisse zu erstellen.
  • Anpassung: Sie können eingebettete Visualisierungen bei Verwendung von Visualisierungskomponenten einfacher anpassen als bei Verwendung von iFrames. Außerdem können Entwickler mit Visualisierungskomponenten stark angepasste Anwendungen viel schneller erstellen, ohne eine neue Visualisierungsebene erstellen zu müssen.
  • Vereinfachung: Visualisierungskomponenten verbessern die Portabilität von Looker-Visualisierungen und vereinfachen Interaktionen mit der Looker API.

Visualisierungskomponenten installieren

Fügen Sie das NPM-Paket für Looker-Visualisierungskomponenten 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 Pakets von Visualisierungskomponenten finden Sie im README-Dokument, das in GitHub und NPM verfügbar ist.

Nächste Schritte