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 d'une exploration de Looker ou un ID de tableau de bord 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 de données pures afin de transmettre les données nettoyées d'une exploration Looker pour 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 avec le framework d'extension de Looker.

Créer des visualisations avec les composants de visualisation Looker

La suite de composants de visualisation Looker fournit deux composants de haut niveau permettant de 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:

  • Line
  • Zone
  • Nuage de points
  • Graphique sparkline
  • Valeur unique
  • Bar
  • Colonne
  • Table
  • Pie

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

Pour afficher les tables des propriétés de 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, consultez l'espace de visualisation du portail des développeurs Looker.

Pourquoi utiliser des composants de visualisation ?

Les composants de visualisation améliorent et simplifient le processus de rendu d'une visualisation à partir d'une application, permettent aux développeurs de gagner du temps 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.
  • Facilité d'intégration : vous pouvez ensuite combiner des composants de visualisation avec d'autres composants de @looker/components pour créer des compositions et des interfaces entièrement nouvelles.
  • Personnalisation : il est plus facile de personnaliser des visualisations intégrées à l'aide de composants de visualisation qu'avec des cadres iFrame. 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 à partir de zéro.
  • Simplification : les composants de la 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:

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

Vous devrez également répondre à quelques dépendances de 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