Composants de visualisation Looker

Les composants de visualisation Looker sont une suite de composants basés sur React disponibles dans le package @looker/visualizations Open Source.

Les composants de visualisation acceptent une valeur Query.client_id ou un ID de requête à partir d'une exploration Looker ou un ID de tableau de bord à partir d'un tableau de bord Looker, et affichent une visualisation côté client sans iFrame.

Vous pouvez utiliser ces composants prêts à l'emploi, les personnaliser ou les traiter comme des formats de données purs pour transmettre des données nettoyées à partir d'une exploration Looker afin de créer plus facilement vos propres visualisations personnalisées.

Les composants de visualisation Looker sont conçus pour être utilisés dans un environnement React authentifié avec l'API de Looker à l'aide du SDK TypeScript/JavaScript. Cette étape est gérée automatiquement lorsque vous effectuez une compilation avec le framework d'extension Looker.

Créer des visualisations avec les composants de visualisation Looker

La suite de composants de visualisation de Looker fournit deux composants de haut niveau pour travailler avec vos données:

  • Query : gère la récupération des données et charge la réponse dans le contexte React.
  • Visualization : accepte les données renvoyées par Query et utilise des adaptateurs de configuration pour afficher le graphique personnalisé sur une page.

Actuellement, les données peuvent être affichées sous les types de graphiques suivants:

  • Ligne
  • Zone
  • Nuage de points
  • Graphique sparkline
  • Valeur unique
  • Bar
  • Colonne
  • Tableau
  • Secteurs

D'autres types de graphiques sont en cours de développement.

Pour afficher les tables de propriétés de chaque type de graphique, consultez la page de documentation Tables de propriétés de visualisation et de requête.

Pour afficher les options de configuration disponibles pour chaque type de graphique, consultez l'espace de jeu de visualisation.

Pourquoi utiliser des composants de visualisation ?

Les composants de visualisation améliorent et simplifient le processus de rendu d'une visualisation à partir de Looker dans une application. Ils libèrent du temps pour les développeurs et leur offrent plus d'options pour personnaliser et étendre leurs visualisations à partir de Looker.

  • Amélioration de l'intégration : les composants de visualisation permettent aux développeurs d'intégrer une visualisation Looker dans une application sans iFrame. Cela peut améliorer les performances, la surveillance et la personnalisation.
  • Intégration facile : les composants de visualisation peuvent ensuite être combinés à d'autres composants de @looker/components pour créer des compositions et des expériences de front-end entièrement nouvelles.
  • Personnalisation : il est plus facile de personnaliser les visualisations intégrées lorsque vous utilisez des composants de visualisation qu'avec des iFrames. De plus, grâce aux composants de visualisation, les développeurs peuvent créer des applications hautement personnalisées beaucoup plus rapidement, sans avoir à créer une couche de visualisation de toutes pièces.
  • Simplicité : les composants de visualisation améliorent la portabilité des visualisations Looker et simplifient les interactions avec l'API Looker.

Installer des composants de visualisation

Pour commencer, ajoutez le package NPM des composants de visualisation Looker:

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

Vous devrez également satisfaire quelques dépendances de pairs : Looker/composants, React et Styled Components :

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

Pour en savoir plus sur l'installation et l'utilisation du package de composants de visualisation, consultez le document README, disponible sur GitHub et NPM.

Étapes suivantes