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

La propriété dashboard du composant de visualisation Query vous permet d'afficher une visualisation intégrable qui peut 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 disposant d'un accès en modification au tableau de bord.
  • Les mises à jour de la visualisation intégrée ne nécessitent aucune modification de votre extension déployée ou de votre application React.

Si vous souhaitez créer une visualisation intégrable qui ne répond pas aux modifications dans l'interface utilisateur 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égrable à 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 à 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 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 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'onglet "Explorer" et, si vous le souhaitez, 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 de la première vignette ajoutée de manière chronologique au tableau de bord associé, quel que soit l'endroit où elle apparaît dans la mise en page du tableau de bord. Pour cette raison, il est recommandé d'utiliser uniquement des tableaux de bord présentant une seule tuile comme référence de requête.

Le composant Query n'affiche que la visualisation en mosaïque. Il n'affiche pas le titre du bloc, le titre du tableau de bord ni aucun autre élément du tableau de bord. Les filtres de tableau de bord appliqués à la tuile n'ont aucun effet sur la visualisation intégrée.

Une fois le 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>
  )
}

Voici comment la visualisation s'affichera dans votre extension ou votre application React:

É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 obtenir un accès en modification, 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, accorder l'accès au modèle pour le modèle à partir duquel la requête est effectuée 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ête du tableau de bord
  • Ajoutez une nouvelle tuile de requête au tableau de bord et supprimez la vignette d'origine.

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

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

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

Étapes suivantes