Looker-Visualisierungskomponenten

Looker-Visualisierungskomponenten sind eine Suite 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 direkt verwendet, angepasst oder als reine Datenformatierer verwendet werden, um bereinigte Daten aus einem Looker-Explore zu übergeben und so eigene benutzerdefinierte Visualisierungen zu erstellen.

Looker-Visualisierungskomponenten sind für die Verwendung in einer React-Umgebung konzipiert, die mit der API von Looker über das TypeScript/JavaScript SDK authentifiziert wurde. Dieser Schritt wird automatisch ausgeführt, wenn Sie mit dem Looker Extension Framework erstellen.

Visualisierungen mit Looker-Visualisierungskomponenten erstellen

Die Visualisierungskomponenten von Looker bieten zwei allgemeine Komponenten für die Arbeit mit Ihren Daten:

  • Query: Verwaltet das Abrufen von Daten und lädt die Antwort in den React-Kontext
  • Visualization – Nimmt die von Query zurückgegebenen Daten an und verwendet Konfigurationsadapter, um das entsprechend angepasste Diagramm auf einer Seite zu rendern

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

  • Linie
  • Gebiet
  • Streudiagramm
  • Sparkline
  • Einzelwert
  • Balkendiagramm
  • Spalte
  • Tabelle
  • Kreisdiagramm

Weitere Diagrammtypen sind in der Entwicklung.

Die Tabellen mit den Eigenschaften für jeden Diagrammtyp finden Sie auf der Dokumentationsseite Tabellen mit Visualisierungs- und Abfrageeigenschaften.

Die verfügbaren Konfigurationsoptionen für jeden Diagrammtyp finden Sie im Visualisierungs-Lab.

Vorteile von Visualisierungskomponenten

Mit Visualisierungskomponenten lässt sich das Rendern einer Visualisierung aus Looker in einer Anwendung verbessern und vereinfachen. Außerdem sparen Entwickler Zeit und haben mehr Möglichkeiten, ihre Visualisierungen aus Looker anzupassen und zu erweitern.

  • Verbessertes Einbetten: Mit Visualisierungskomponenten können Entwickler eine Looker-Visualisierung ohne iFrame in eine Anwendung einbetten. Dadurch können Leistung, Monitoring und Anpassungsmöglichkeiten verbessert werden.
  • Einfache Integration: Visualisierungskomponenten können dann mit anderen Komponenten aus @looker/components kombiniert werden, um völlig neue Kompositionen und Front-End-Anwendungen zu erstellen.
  • Anpassung: Es ist einfacher, eingebettete Visualisierungen mithilfe von Visualisierungskomponenten anzupassen als mithilfe von Iframes. Außerdem können Entwickler mit Visualisierungskomponenten viel schneller benutzerdefinierte Anwendungen erstellen, ohne eine Visualisierungsebene von Grund auf neu 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-Visualisierungskomponenten hinzu:

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

Außerdem müssen Sie einige Peer-Abhängigkeiten erfüllen: Looker/Komponenten, 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 zur Installation und Verwendung des Pakets mit Visualisierungskomponenten finden Sie im README-Dokument, das auf GitHub und NPM verfügbar ist.

Nächste Schritte