Composants de la 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 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.

Ces composants peuvent être utilisés prêts à l'emploi, personnalisés ou traités comme des outils de mise en forme purs pour transmettre les données nettoyées d'une exploration Looker afin de faciliter la création de 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 Looker à l'aide du SDK TypeScript/JavaScript. Cette étape est gérée automatiquement lorsque vous compilez votre projet avec le framework d'extensions Looker.

Créer des visualisations à l'aide des 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 de 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 graphique suivants:

  • Courbes
  • Aire
  • Nuage de points
  • Sparkline
  • Valeur unique
  • Barres
  • Colonne
  • Table
  • Secteur

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

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

Pour afficher les options de configuration disponibles pour chaque type de graphique, accédez à l'aire de jeu de visualisation sur le portail Looker Developer.

Pourquoi utiliser des composants de visualisation ?

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

  • Intégration améliorée : 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 avec d'autres composants issus de @looker/components pour créer de nouvelles compositions et des expériences d'interface.
  • Personnalisation : il est plus facile de personnaliser des visualisations intégrées lorsque vous utilisez des composants de visualisation que d'utiliser 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 entièrement une couche de visualisation.
  • Simplification : 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 Looker Components:

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

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

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

Vous trouverez des informations sur l'installation et l'utilisation du package de composants de visualisation dans le document README, disponible sur GitHub et NPM.

Étapes suivantes