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égrable qui peut répondre aux modifications apportées à l'UI Looker. Utiliser 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 Looker autorisé à modifier le tableau de bord.
  • Les mises à jour de la visualisation intégrée ne nécessitent aucune modification de l'extension déployée ou de l'application React.

Si vous souhaitez créer une visualisation intégrable qui ne répond pas aux modifications apportées à l'UI 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 des 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, vous devez prendre en compte les éléments suivants:

  • Vous devez avoir accès à une instance Looker.
  • Que vous conceviez dans le framework d'extension ou dans 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 la page sur l'authentification via l'API Looker ou notre framework d'extension.
  • 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'exploration 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 à partir de la première vignette qui a été ajoutée chronologiquement au tableau de bord associé, quel que soit son emplacement dans la disposition du tableau de bord. Pour cette raison, il est recommandé d'utiliser uniquement des tableaux de bord à vignette unique comme référence de requête.

Le composant Query n'affiche que la visualisation des cartes. Il n'affichera pas le titre de la vignette, le titre du tableau de bord, ni d'autres éléments du tableau de bord. Tout filtre de tableau de bord appliqué à la vignette n'aura 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 identifiants 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 Looker autorisés à modifier le tableau de bord sont libres d'apporter des modifications à la visualisation intégrée à votre tableau de bord. Les modifications apparaîtront dans votre application React sans qu'aucune modification du code ne soit nécessaire.

Pour pouvoir modifier des tableaux 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, l'accès au modèle au modèle basé sur la requête et les autorisations Looker appropriées pour modifier les tableaux de bord.

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

  • Modifier la vignette de requête dans le tableau de bord, ou
  • Ajouter une nouvelle vignette de requête au tableau de bord et supprimer la vignette d'origine.

Pour modifier la vignette de requête, suivez les instructions pour modifier les vignettes sur la page de documentation Modifier les 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 carte et supprimer la carte d'origine, suivez les instructions pour ajouter des vignettes de requête afin d'ajouter votre nouvelle carte. Suivez ensuite les instructions pour supprimer des tuiles afin de supprimer la visualisation indésirable. Pour appliquer vos modifications, assurez-vous que votre tableau de bord ne contient qu'une seule vignette, puis enregistrez vos modifications pour quitter le mode Édition sur le tableau de bord.

Une fois que vous avez modifié et enregistré votre tableau de bord, les modifications de visualisation s'affichent dans votre extension ou votre application React sans qu'aucune modification du code ne soit nécessaire.

Étapes suivantes