Utiliser des composants de visualisation et la propriété du tableau de bord pour afficher une visualisation simple

L'utilisation de la propriété dashboard du composant de visualisation Query vous permet d'afficher une visualisation intégrée pouvant répondre aux modifications apportées à l'UI Looker. L'utilisation de la propriété dashboard (par opposition à la propriété query) offre les avantages suivants:

  • La visualisation peut être mise à jour par tout utilisateur Looker autorisé à modifier le tableau de bord.
  • Les mises à jour de la visualisation intégrée ne nécessitent aucune modification de votre extension déployée ni de votre application React.

Si vous souhaitez créer une visualisation intégrable qui ne répond pas aux modifications apportées dans l'UI de Looker, suivez les instructions de la page de documentation Utiliser des composants de visualisation et la propriété query pour afficher une visualisation simple.

Pour afficher une visualisation intégrée à l'aide de composants de visualisation Looker et d'un ID de tableau de bord numérique, assurez-vous que votre configuration répond aux exigences, puis procédez comme suit :

  1. Créez une requête et ajoutez-la à un tableau de bord.
  2. Intégrez la requête dans une application React à l'aide de l'ID du tableau de bord.
  3. Modifiez la visualisation si nécessaire.

Conditions requises

Avant de commencer, quelques éléments sont nécessaires:

  • Vous devez avoir 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 les articles sur l'authentification de l'API Looker ou sur 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 et ajoutez-la à un tableau de bord

Utilisez 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 Settings (Paramètres) de la visualisation.

Créez un tableau de bord à l'aide de cette requête. Vous pouvez également ajouter la requête à un tableau de bord vide que vous avez déjà créé.

Le composant Query charge toujours la visualisation à partir de la première vignette ajoutée chronologiquement au tableau de bord associé, quel que soit son emplacement dans la disposition du tableau de bord. Il est donc recommandé de n'utiliser que des tableaux de bord à une seule carte comme référence de requête.

Le composant Query n'affiche que la visualisation en mosaïque. Il n'affiche pas le titre de la vignette, le titre du tableau de bord ni d'autres éléments du tableau de bord. Les filtres de tableau de bord appliqués à la vignette n'auront aucun effet sur la visualisation intégrée.

Une fois votre tableau de bord créé, affichez-le.

Un ID numérique de tableau de bord apparaît dans l'URL du tableau de bord après dashboards/. Copiez cet ID pour l'utiliser à l'étape suivante.

La propriété dashboard du composant Query n'accepte que des ID numériques. Il n'accepte pas les ID de chaîne des tableaux de bord LookML.

Étape 2 : Intégrer la requête dans une application React à l'aide de l'ID du tableau de bord

Vous pouvez maintenant intégrer la requête dans votre application React en transmettant l'ID du tableau de bord dans la propriété dashboard du composant Query:

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)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

Étape 3: Modifiez la visualisation si nécessaire

Désormais, tous les utilisateurs de Looker disposant d'un accès en écriture au tableau de bord sont libres de modifier la visualisation intégrée à votre tableau de bord. Les modifications apparaîtront dans votre application React sans qu'il soit nécessaire de modifier le code.

Pour pouvoir modifier un tableau de bord, les utilisateurs doivent disposer du niveau d'accès Gérer l'accès, Modifier pour le dossier dans lequel se trouve le tableau de bord, de l'accès au modèle sur lequel la requête est basée et des autorisations Looker appropriées pour modifier les tableaux de bord.

Vous pouvez modifier la visualisation intégrée de deux manières :

  • modifier la vignette de requête sur le tableau de bord ;
  • Ajoutez une vignette de requête au tableau de bord et supprimez la vignette d'origine.

Pour modifier la vignette de requête, suivez les instructions pour modifier les vignettes de la page de documentation Modifier les tableaux de bord définis par l'utilisateur, puis enregistrez vos modifications pour quitter le mode Édition du tableau de bord.

Pour ajouter une nouvelle vignette et supprimer la tuile d'origine, suivez les instructions d'ajout de vignettes de requête pour ajouter votre nouvelle vignette. Suivez ensuite les instructions pour supprimer des tuiles afin de supprimer la visualisation que vous ne souhaitez pas conserver. Pour que vos modifications s'appliquent, assurez-vous qu'il n'y a qu'une seule vignette dans votre tableau de bord, puis enregistrez-les pour quitter le mode Édition.

Une fois que vous aurez modifié et enregistré votre tableau de bord, les modifications apportées à la visualisation apparaîtront dans votre extension ou votre application React sans qu'il soit nécessaire de modifier le code.

Étapes suivantes