Utiliser des composants de visualisation et la propriété de requête pour afficher une visualisation simple

L'utilisation de la propriété query du composant de visualisation Query est le moyen le plus simple d'afficher une visualisation intégrable avec les composants de visualisation Looker. L'utilisation de la propriété query (par opposition à la propriété dashboard) offre les avantages suivants:

  • Il vous suffit de créer une requête dans Looker. Vous n'avez pas besoin de créer un tableau de bord.
  • Les valeurs acceptées par query (Query.client_id ou l'ID de requête) sont immuables. sauf si le modèle sous-jacent change, aucune modification de l'instance Looker n'affectera la visualisation intégrée.

Si vous souhaitez créer une visualisation intégrable qui répond aux modifications apportées à l'UI de Looker et peut donc être mise à jour par des utilisateurs de Looker autres que les développeurs d'applications, suivez les instructions de la page de documentation Utiliser des composants de visualisation et un ID de tableau de bord pour afficher une visualisation simple.

Pour afficher une visualisation intégrable à l'aide des composants de visualisation Looker et de la propriété query, assurez-vous que votre configuration respecte les exigences, puis procédez comme suit:

  1. Créez une requête dans une exploration et copiez la valeur Query.client_id.
  2. Intégrez la requête dans une application React.
  3. Ajoutez le composant Visualization.
  4. Personnalisez les paramètres avec la propriété config.

Conditions requises

Avant de commencer, vous avez besoin de quelques éléments :

  • Vous devez disposer d'un accès à une instance Looker.
  • Que vous créiez une application dans le framework d'extension ou votre propre application React autonome, il est important de vous authentifier avec l'API Looker et d'avoir accès à l'objet du SDK Looker. Pour en savoir plus, consultez la page sur l'authentification de l'API Looker ou notre framework d'extension.
  • Assurez-vous d'avoir installé le package NPM des composants de visualisation Looker et le package NPM @looker/components-data. 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.

Étape 1: Créez une requête dans une exploration et copiez la valeur Query.client_id

Utiliser une exploration pour créer une requête dans l'interface utilisateur de Looker. Ajoutez une visualisation compatible à l'exploration et configurez éventuellement ses paramètres dans le menu Paramètres de la visualisation.

Recherchez la propriété d'URL qid dans la barre d'adresse du navigateur. La valeur alphanumérique attribuée à cette propriété est Query.client_id.

Par exemple, si l'URL est https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse, Query.client_id est evomfl66xHx1jZk2Hzvv1R.

Query.client_id est une chaîne unique qui représente la requête et les paramètres de visualisation. Si vous modifiez la requête ou les paramètres, Query.client_id changera.

Copiez le Query.client_id pour l'utiliser à l'étape suivante.

Étape 2: Intégrez la requête dans une application React

Vous pouvez maintenant prendre le Query.client_id et l'intégrer à une application React.

Le code suivant concerne une application React fictive. Cet exemple a été créé dans le framework d'extension Looker, et l'objet du SDK Looker a été extrait du fournisseur de contexte d'extension.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return null
}

Pour commencer, nous allons utiliser les composants DataProvider et Query. DataProvider stocke la référence du SDK en contexte, et Query envoie nos requêtes réseau et met en forme le rendu de la réponse.

Vous devez également fournir les deux éléments suivants:

  • Un objet SDK. L'objet du SDK est extrait du contexte de l'extension.
  • Query.client_id Query.client_id est attribué à la propriété query.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    {/* pass the sdk object to DataProvider */}
    <DataProvider sdk={core40SDK}>
      {/* the value referenced by the `query` prop is
          unique to your looker instance. */}
      <Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
    </DataProvider>
  )
}

Étape 3: Ajoutez le composant Visualization

Ajoutez ensuite le composant Visualization, qui interprète les données et les paramètres de configuration renvoyés par Query pour afficher le graphique attendu.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query="evomfl66xHx1jZk2Hzvv1R">
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Cette étape génère une visualisation semblable à l'exemple suivant :

Visualisation d&#39;un graphique en courbes.

Étape 4 : Personnaliser les paramètres avec la propriété config

Utilisez la propriété config du composant Query pour remplacer les paramètres de visualisation renvoyés par le SDK. Cette propriété peut modifier n'importe quelle fonctionnalité compatible, du type de visualisation aux détails de l'affichage de chaque série de données.

Dans l'exemple de code suivant, la propriété config remplace le type de graphique par sparkline et attribue une nouvelle couleur à la série de données.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

  return (
    <DataProvider sdk={core40SDK}>
      <Query
        query={'evomfl66xHx1jZk2Hzvv1R'}
        config={{
          type: 'sparkline',
          series: [{ color: '#F4B400' }],
        }}
      >
        <Visualization />
      </Query>
    </DataProvider>
  )
}

L'étape précédente affiche ce graphique sparkline orange:

Une visualisation dans une courbe sparkline.

Pour obtenir la liste complète des sous-propriétés disponibles dans la propriété config, consultez la documentation de référence sur les tables de propriétés de visualisation et de requête.

Étapes suivantes