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:
- Créez une requête dans Explorer et copiez la valeur
Query.client_id
. - Intégrez la requête à une application React.
- Ajoutez le composant
Visualization
. - 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
LeQuery.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
- Utiliser des composants de visualisation et la propriété
dashboard
pour afficher une visualisation simple - Utiliser des composants de visualisation pour générer des visualisations personnalisées
- Utiliser des composants de visualisation pour créer une visualisation personnalisée
- Visualisation et requêtes des tables de propriété