Utiliser les composants de visualisation et la propriété de requête pour générer une visualisation simple

La propriété query du composant de visualisation Query est le moyen le plus simple d'effectuer le rendu d'une visualisation intégrable avec des 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. À moins que le modèle sous-jacent change, aucune modification de l'instance Looker n'aura d'incidence sur la visualisation intégrée.

Si vous souhaitez créer une visualisation intégrable qui réponde aux modifications dans l'interface utilisateur de Looker, et peut donc être mise à jour par d'autres utilisateurs de Looker 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 de composants de visualisation Looker et de la propriété query, assurez-vous que votre configuration respecte les conditions requises, puis procédez comme suit:

  1. Créez une requête dans Explorer et copiez la valeur Query.client_id.
  2. Intégrez la requête à 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 disposer de certains éléments:

  • Vous devez avoir accès à une instance Looker.
  • Que vous développiez dans le framework d'extension ou votre propre application React autonome, il est important de vous authentifier avec l'API de Looker et d'avoir accès à l'objet du SDK Looker. Pour en savoir plus, consultez Authentification de l'API Looker ou notre framework d'extensions.
  • 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 l'outil Explorer 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'onglet "Explorer" et, si vous le souhaitez, configurez ses paramètres dans le menu Paramètres de la visualisation.

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

Query.client_id est une chaîne unique qui représente les paramètres de requête et de visualisation. Si vous modifiez des éléments 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égrez la requête dans une application React

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

Vous trouverez ci-dessous le code d'une application React hypothétique. Cet exemple a été créé dans le framework d'extension Looker, et l'objet 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 envoie nos requêtes réseau et met en forme le résultat de la réponse.

Vous devez également fournir deux éléments:

  • Un objet SDK. L'objet SDK est extrait du contexte de l'extension.
  • 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:

É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 n'importe quelle caractéristique compatible, du type de visualisation aux détails de rendu de chaque série de données.

Dans l'exemple de code ci-dessous, la propriété config modifie le type du graphique en 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 cette courbe expresse:

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 des propriétés de visualisation et de requête. Vous pouvez également découvrir les propriétés en action dans l'aire de jeu des composants de visualisation.

Étapes suivantes