Looker-Visualisierungskomponenten

Looker-Visualisierungskomponenten sind eine Reihe 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 einem Looker-Explore oder eine Dashboard-ID aus einem Looker-Dashboard und rendern eine clientseitige Visualisierung ohne iframe.

Diese Komponenten können sofort einsatzbereit, angepasst oder als reine Datenformatierer verwendet werden, um bereinigte Daten aus einem Looker-Explore zu übergeben und so Ihre eigenen benutzerdefinierten Visualisierungen zu erstellen.

Looker-Visualisierungskomponenten sind für die Verwendung in einer React-Umgebung konzipiert, die mit der API über das TypeScript/JavaScript SDK 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 der Visualisierungskomponenten von Looker bietet zwei übergeordnete Komponenten für die Arbeit 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 entsprechend angepasste Diagramm auf einer Seite zu rendern.

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

  • Linie
  • Flächendiagramm
  • Punktdiagramm
  • Sparkline-Diagramm
  • Einzelwert
  • Balken
  • Spalte
  • Tabelle
  • Kreisdiagramm

Weitere Diagrammtypen sind in Entwicklung.

Weitere Informationen zu den Attributtabellen für die einzelnen Diagrammtypen finden Sie auf der Dokumentationsseite Darstellungs- und Abfrageeigenschaftstabellen.

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

Warum sollten Sie Visualisierungskomponenten verwenden?

Visualisierungskomponenten verbessern und vereinfachen das Rendern einer Visualisierung von Looker innerhalb einer Anwendung, sparen Entwicklerzeit und bieten Entwicklern mehr Möglichkeiten, ihre Visualisierungen von Looker anzupassen und zu erweitern.

  • Verbesserte Einbettung: Mit Visualisierungskomponenten können Entwickler eine Looker-Visualisierung in eine Anwendung ohne iFrame einbetten. Dadurch lassen sich Leistung, Monitoring und Anpassungsmöglichkeiten verbessern.
  • Einfache Integration – Visualisierungskomponenten können anschließend mit anderen Komponenten von @looker/components kombiniert werden, um völlig neue Zusammenstellungen und Front-End-Erlebnisse zu erstellen.
  • Anpassung: Eingebettete Visualisierungen lassen sich einfacher anpassen, wenn Sie Visualisierungskomponenten verwenden, als wenn Sie iFrames verwenden. Darüber hinaus können Entwickler mit Visualisierungskomponenten viel schneller stark angepasste Anwendungen erstellen, ohne eine Visualisierungsebene von Grund auf neu 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 zuerst das NPM-Paket für die Looker-Visualisierungskomponenten hinzu:

  • Verwaltung von Werbenetzwerkpartnern: 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:

  • Verwaltung von Werbenetzwerkpartnern: 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 für die Visualisierungskomponenten finden Sie im Readme-Dokument, das in GitHub und NPM verfügbar ist.

Nächste Schritte