Créer un tableau de bord à onglets avec des composants Looker

Un exemple simple de la façon dont les composants d'UI peuvent améliorer une application intégrée consiste à les utiliser pour créer une navigation par onglets pour les tableaux de bord :

Exemple de tableau de bord avec une interface à onglets.

L'exemple suivant ajoute des tableaux de bord à onglets à une extension TypeScript de base qui a été créée à l'aide du framework d'extension de Looker.

Pour suivre cet exemple, assurez-vous que votre configuration répond aux exigences, puis procédez comme suit :

  1. Créez une extension TypeScript de base.
  2. Créez le fichier src/Dashboards.tsx pour connecter et stocker les tableaux de bord.
  3. Créez le fichier src/Tabs.tsx pour stocker le composant Tabs.
  4. Remplacez la référence HelloWorld dans src/App.tsx.
  5. Mettez à jour le fichier manifest.lkml avec le droit d'intégration.
  6. Publiez l'extension sur votre instance Looker.

Conditions requises

Avant de commencer, vous aurez besoin des éléments suivants :

Étape 1 : Créez une extension TypeScript de base

Pour créer une extension, suivez les instructions de la page de documentation Introduction à la création d'une extension Looker. Pour faire de l'extension une extension TypeScript, utilisez les modifications suivantes :

  • Si vous utilisez l'outil create-looker-extension pour créer le modèle d'extension, choisissez React pour le framework et TypeScript pour le langage.
  • Si vous clonez le dépôt Git pour créer le modèle d'extension, accédez au répertoire extension-examples/react/TypeScript/helloworld-ts à la deuxième étape.

Étape 2 : Créez le fichier src/Dashboards.tsx pour connecter et stocker les tableaux de bord

Dans le répertoire src de votre nouvelle extension, créez un fichier Dashboards.tsx. Ce fichier permettra de connecter et de stocker les tableaux de bord que vous avez créés dans Looker.

Collez le code suivant dans le fichier. Ce code crée un composant de tableau de bord réutilisable.

L'URL d'une instance, https://mycompany.looker.com, se trouve à un seul endroit dans le code. Remplacez-la par l'URL de votre instance Looker.

import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";

export const EmbeddedDashboard = (props: { id: number | string }) => {
 const [dashboard, setDashboard] = React.useState();
 const setupDashboard = (dashboard: any) => {
   setDashboard(dashboard);
 };
 const embedCtrRef = useCallback((el) => {
   const hostUrl = "https://mycompany.looker.com";
   if (el && hostUrl) {
     el.innerHTML = "";
     LookerEmbedSDK.init(hostUrl);
     LookerEmbedSDK.createDashboardWithId(props.id)
       .withNext()
       .appendTo(el)
       .build()
       .connect()
       .then(setupDashboard)
       .catch((error) => {
         console.error("Connection error", error);
       });
   }
 }, []);
 return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

export const EmbedContainer = styled.div`
 width: 100%;
 height: 95vh;
 & > iframe {
   width: 100%;
   height: 100%;
 }
`;

Dans l'exemple de code précédent, les éléments suivants se produisent :

  • Les instructions d'importation apportent les dépendances nécessaires.

    import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";

  • Le bloc de code suivant crée un objet EmbeddedDashboard, qui est un objet EmbedContainer contenant un iframe de tableau de bord. Ce composant est réutilisable. Vous pouvez l'utiliser pour n'importe quel tableau de bord en transmettant une propriété id différente. L'iFrame est généré à partir du SDK d'intégration Looker à l'aide de l'ID du tableau de bord qui lui est transmis. Veillez à remplacer https://mycompany.looker.com/ par l'URL de votre instance Looker.

    export const EmbeddedDashboard = (props: { id: number | string }) => {
const [dashboard, setDashboard] = React.useState();
const setupDashboard = (dashboard: any) => {
  setDashboard(dashboard);
};
const embedCtrRef = useCallback((el) => {
  const hostUrl = "https://mycompany.looker.com/";
  if (el && hostUrl) {
    el.innerHTML = "";
    LookerEmbedSDK.init(hostUrl);
    LookerEmbedSDK.createDashboardWithId(props.id)
      .withNext()
      .appendTo(el)
      .build()
      .connect()
      .then(setupDashboard)
      .catch((error) => {
        console.error("Connection error", error);
      });
  }
}, []);
return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

  • Le bloc final définit le style de EmbedContainer.

      export const EmbedContainer = styled.div`
    width: 100%;
    height: 95vh;
    & > iframe {
      width: 100%;
      height: 100%;
    }
`;

Étape 3 : Créez le fichier src/Tabs.tsx pour stocker le composant Tabs

Dans le répertoire src de votre nouvelle extension, créez un fichier Tabs.tsx. Ce fichier stocke le composant Tabs et fait référence à l'ID du tableau de bord Looker pour chaque tableau de bord.

Dans ce fichier, collez le code suivant (la section suivante explique ce que fait le code) :

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard } from "./Dashboards";

export const Tabs = () => (
 <ComponentsProvider>
   <Tabs2>
     <Tab2 id="5" label="Order Analysis Dashboard">
      Order data from the last 12 months
       <EmbeddedDashboard1 id={5} />
     </Tab2>
     <Tab2 id="2" label="Inventory Dashboard">
       Current global inventory
       <EmbeddedDashboard2 id={2} />
     </Tab2>
     <Tab2 id="7" label="Customer Dashboard">
       Anonymized customer data
       <EmbeddedDashboard3 id={7} />
     </Tab2>
   </Tabs2>
 </ComponentsProvider>
)

Dans l'exemple de code précédent, les éléments suivants se produisent :

  • Les instructions d'importation apportent les dépendances et les composants nécessaires, ainsi que les objets EmbeddedDashboard qui ont été créés dans le fichier Dashboards.tsx.

    import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard } from "./Dashboard";

  • L'instruction d'exportation permet d'importer l'objet Tabs dans d'autres composants.

    export const Tabs = () => (

  • ComponentsProvider entoure les composants individuels pour faciliter la création de thèmes.

    <ComponentsProvider>
</ComponentsProvider>

  • Le composant Tabs2 et son composant enfant Tab2 créent trois onglets et les associent aux tableaux de bord Looker.

     <Tabs2>
 <Tab2 id="5" label="Order Analysis Dashboard">
  Order data from the last 12 months
   <EmbeddedDashboard id={5} />
 </Tab2>
 <Tab2 id="2" label="Inventory Dashboard">
   Current global inventory
   <EmbeddedDashboard id={2} />
 </Tab2>
 <Tab2 id="7" label="Customer Dashboard">
   Anonymized customer data
   <EmbeddedDashboard id={7} />
 </Tab2>
</Tabs2>
    • La propriété id de Tab2 accepte un ID d'onglet unique. Mettez à jour l'ID selon les besoins de votre environnement.
    • La propriété label accepte le libellé qui s'affichera sur chaque onglet. Mettez à jour l'ID en fonction du tableau de bord que vous utilisez.
    • Une chaîne placée dans les balises Tab2 s'affichera en haut de la zone de contenu de cet onglet. Modifiez ou supprimez la chaîne si nécessaire.
    • Les objets EmbeddedDashboard sont placés dans l'onglet. Leurs propriétés id acceptent l'ID du tableau de bord à intégrer dans cet onglet. Lorsque vous créez votre propre tableau de bord à onglets, remplacez cette valeur par l'ID du tableau de bord que vous souhaitez utiliser. Vous trouverez l'ID numérique du tableau de bord dans l'URL après dashboards/. Par exemple, si l'URL est https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, l'ID du tableau de bord est 61.

Étape 4 : Remplacez la référence HelloWorld dans src/App.tsx

Accédez à votre fichier App.tsx dans le répertoire src. Supprimez l'instruction d'importation HelloWorld :

import { HelloWorld } from './HelloWorld'

et remplacez-le par :

import { Tabs } from './Tabs'

De plus, dans le fichier src/App.tsx, remplacez <HelloWorld/> par <Tabs/>.

Vous pouvez également supprimer le fichier HelloWorld.tsx de ce répertoire, car vous ne l'utiliserez plus.

Étape 5 : Mettez à jour le fichier manifest.lkml avec le droit d'intégration

Ajoutez le droit d'accès suivant à la section des droits d'accès du fichier manifest.lkml de votre projet LookML :

use_embeds: yes

Le fichier manifest.lkml doit se présenter comme suit :

application: name {
  label: "label"
  url: "http://localhost:8080/bundle.js"
  # file: "bundle.js
  entitlements: {
    core_api_methods: ["me"] #Add more entitlements here as you develop new functionality
    use_embeds: yes
  }
}

Vous pouvez maintenant accéder à votre extension, qui apparaît dans le dossier Applications du panneau de navigation de gauche. Si vous avez démarré votre serveur de développement local avec yarn develop, vous pouvez voir les tableaux de bord à onglets intégrés.

Étape 6 : Publiez l'extension sur votre instance Looker

Pour montrer l'extension à d'autres utilisateurs Looker, publiez-la dans votre instance Looker en procédant comme suit :

  1. Une fois votre serveur de développement en cours d'exécution, accédez à localhost:8080/bundle.js.
  2. Enregistrez le contenu de la fenêtre du navigateur en local sur votre ordinateur au format .js.
  3. Assurez-vous d'être en mode développeur, puis faites glisser le fichier .js dans votre projet d'extension. Enregistrez les modifications.
  4. Dans le fichier manifest.lkml, mettez en commentaire la ligne url: "http://localhost:8080/bundle.js".
  5. Dans le fichier manifest.lkml, supprimez la mise en commentaire de la ligne # file: "bundle.js" et assurez-vous que le nom du fichier correspond à celui du fichier .js que vous avez importé dans votre projet. Enregistrez les modifications.
  6. Validez et déployez vos modifications.

Une fois vos modifications déployées, vous n'aurez plus besoin de démarrer votre serveur de développement local pour voir l'extension. Les utilisateurs de votre instance Looker devraient pouvoir la voir s'ils y accèdent dans le dossier Applications du panneau de navigation principal.