Utiliser des composants de visualisation et la propriété de tableau de bord pour effectuer un rendu simple

La propriété dashboard du composant de visualisation Query vous permet d'afficher une visualisation pouvant être intégrée pour répondre aux modifications apportées à l'interface utilisateur de 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 n'importe quel utilisateur de Looker ayant un accès en modification au tableau de bord.
  • Les mises à jour de la visualisation intégrée ne nécessitent aucune modification de l'extension déployée ni de l'application React.

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

Pour rendre une visualisation intégrable à l'aide de composants de visualisation Looker et d'un ID de tableau de bord numérique, assurez-vous que votre configuration respecte les 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, vous devez disposer de certains éléments:

  • Vous devez avoir accès à une instance Looker.
  • Que vous compiliez le framework d'extension ou 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 Authentification de l'API Looker ou notre framework d'extensions.
  • Vérifiez que vous avez installé le package NPM des composants de visualisation Looker, ainsi que 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 et ajoutez-la à un tableau de bord

Créez une requête dans l'interface utilisateur de Looker à l'aide de la fonction Explorer. Ajoutez une visualisation compatible à Explorer et, éventuellement, configurez ses paramètres dans le menu 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 tuile ajoutée par ordre chronologique au tableau de bord associé, quel que soit l'emplacement de la tuile dans la mise en page du tableau de bord. C'est pourquoi il est recommandé de n'utiliser que des tableaux de bord à tuile unique 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 carte, le titre du tableau de bord ni aucun autre élément du tableau de bord. Les filtres de tableau de bord appliqués à la carte n'ont aucun effet sur la visualisation intégrée.

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

Un ID de tableau de bord numérique 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 les ID numériques. Il n'accepte pas les ID de chaîne des tableaux de bord LookML.

Étape 2: Intégrez 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 modification au tableau de bord peuvent modifier la visualisation intégrée à votre tableau de bord. Les modifications apparaîtront dans votre application React sans nécessiter de modification du code.

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

Il existe deux façons de modifier la visualisation intégrée:

  • Modifier le bloc de requêtes dans le tableau de bord
  • Ajoutez une nouvelle tuile de requête au tableau de bord et supprimez la tuile d'origine.

Pour modifier la carte de requêtes, suivez les instructions pour modifier les tuiles sur la page de documentation Modifier les tableaux de bord définis par l'utilisateur, puis enregistrez vos modifications pour quitter le mode Édition dans le tableau de bord.

Pour ajouter une nouvelle tuile et supprimer la vignette d'origine, suivez les instructions pour ajouter des tuiles de requête. Suivez ensuite les instructions pour supprimer des tuiles afin de supprimer la visualisation indésirable. Pour que vos modifications s'appliquent, assurez-vous que le tableau de bord ne contient qu'une seule tuile, puis enregistrez vos modifications pour quitter le mode Édition.

Une fois le tableau de bord modifié et enregistré, les modifications de visualisation s'affichent dans votre extension ou application React sans nécessiter de modification du code.

Étapes suivantes