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 Looker ou un ID de 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 de purs formateurs de données pour transmettre des données nettoyées à partir 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 qui a été authentifié dans l'API de Looker à l'aide du SDK TypeScript/JavaScript. Cette étape est gérée automatiquement lorsque vous créez avec le framework d'extension de 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 l'extraction 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 correctement personnalisé sur une page.

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

  • Courbes
  • Quartier
  • Nuage de points
  • Graphique 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 au simulateur de visualisation sur le portail des développeurs Looker.

Pourquoi utiliser les composants de visualisation ?

Les composants de visualisation améliorent et simplifient le processus de rendu d'une visualisation depuis Looker dans une application, leur font gagner du temps et leur offrent 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 : les composants de visualisation peuvent ensuite être combinés avec d'autres composants de @looker/components pour créer des compositions et des expériences frontaux entièrement nouvelles.
  • Personnalisation : il est plus facile de personnaliser des visualisations intégrées avec des composants de visualisation que 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 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 satisfaire à quelques dépendances de pairs : Looker/composants, React et les composants stylisés :

  • 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