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. Utiliser 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 de tableau de bord.
  • Les valeurs acceptées par query (Query.client_id ou l'ID de requête) sont immuables. À moins que le modèle sous-jacent ne 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 Looker et peut donc être mise à jour par les 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 répond aux 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 devez prendre en compte les éléments suivants:

  • Vous devez avoir accès à une instance Looker.
  • Que vous conceviez dans le framework d'extension ou dans votre propre application React autonome, il est important de vous authentifier auprès de l'API de Looker et d'avoir accès à l'objet SDK Looker. Pour en savoir plus, consultez la page sur l'authentification via 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. 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.

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

Utilisez une exploration pour créer une requête dans l'interface utilisateur de Looker. Ajoutez une visualisation compatible à l'exploration et, si vous le souhaitez, configurez 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.

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

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

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

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

Vous trouverez ci-dessous le code d'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 de l'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 distribue les 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 SDK est extrait du contexte de l'extension.
  • Le Query.client_id. Le 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 paramètres de données et 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:

Une visualisation sous forme de graphique linéaire.

Étape 4: Personnalisez 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 tout élément géographique compatible, du type de visualisation aux détails du rendu de chaque série de données.

Dans l'exemple de code ci-dessous, 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 sous forme de graphique 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 tableaux de propriétés de visualisation et de requête.

Étapes suivantes