Creare una dashboard con schede con i componenti di Looker

Un semplice esempio di come i componenti dell'interfaccia utente possono migliorare un'applicazione incorporata è utilizzarli per creare una navigazione a schede per le dashboard:

Una dashboard di esempio con un'interfaccia a schede.

L'esempio seguente aggiunge dashboard con schede a un'estensione TypeScript di base creata utilizzando il framework di estensioni di Looker.

Per svolgere questo esempio, assicurati che la configurazione soddisfi i requisiti e poi segui questi passaggi:

  1. Crea un'estensione TypeScript di base.
  2. Crea il file src/Dashboards.tsx per collegare e archiviare le dashboard.
  3. Crea il file src/Tabs.tsx per archiviare il componente Tabs.
  4. Sostituisci il riferimento a HelloWorld in src/App.tsx.
  5. Aggiorna il file manifest.lkml con il diritto di incorporamento.
  6. Pubblica l'estensione nella tua istanza Looker.

Requisiti

Prima di iniziare, ti serviranno alcuni elementi:

  • Devi avere accesso a un'istanza Looker con il Framework di estensione abilitato.
  • Devi disporre dell'autorizzazione develop.
  • In Looker dovresti avere diverse dashboard definite dall'utente da inserire nelle schede dell'interfaccia utente.
  • Indipendentemente dal fatto che tu stia creando nel framework di estensione o nella tua applicazione React autonoma, è importante autenticarsi con l'API di Looker e avere accesso all'oggetto SDK di Looker. Per saperne di più, consulta l'articolo sull'autenticazione dell'API Looker o sul nostro framework di estensioni.
  • Questo esempio utilizza l'SDK Embed di Looker. Per consentire l'esecuzione dell'SDK Embed nella tua istanza, http://localhost:8080 deve essere incluso nella lista consentita dei domini incorporati nella pagina Incorpora del riquadro Amministrazione.
  • Assicurati di aver installato il pacchetto NPM di Looker Components. Le informazioni sull'installazione e sull'utilizzo del pacchetto di componenti sono disponibili nel documento README, disponibile su GitHub e NPM.

Passaggio 1: crea un'estensione TypeScript di base

Per creare un'estensione, segui le istruzioni nella pagina della documentazione Introduzione alla creazione di un'estensione di Looker. Per rendere l'estensione un'estensione TypeScript, utilizza le seguenti modifiche:

Passaggio 2: crea il file src/Dashboards.tsx per collegare e archiviare le dashboard

Nella directory src della nuova estensione, crea un file Dashboards.tsx. Questo file collegherà e memorizzerà le dashboard che hai creato in Looker.

All'interno del file, incolla il seguente codice. Questo codice crea tre oggetti dashboard e li specifica in base all'ID. Puoi creare più o meno oggetti dashboard, a seconda delle tue esigenze.

Esistono tre posizioni nel codice di un URL istanza, https://mycompany.looker.com. Sostituiscilo con l'URL dell'istanza di Looker.

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

export const EmbeddedDashboard1 = (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 EmbeddedDashboard2 = (props: { id: number }) => {
 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 EmbeddedDashboard3 = (props: { id: number }) => {
 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%;
 }
`;

Nell'esempio di codice precedente si verificano le seguenti operazioni:

  • Le istruzioni di importazione importano le dipendenze necessarie.

    import React, { useCallback } from "react";
    import { LookerEmbedSDK } from "@looker/embed-sdk";
    import styled from "styled-components";
    
  • Il blocco di codice successivo crea un oggetto EmbeddedDashboard1, ovvero un oggetto EmbedContainer contenente un iframe della dashboard. L'iframe viene generato dall'SDK di incorporamento di Looker utilizzando l'ID dashboard a cui viene passato. Assicurati di aggiornare https://mycompany.looker.com/ con l'URL dell'istanza Looker.

    export const EmbeddedDashboard1 = (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>;
    };
    
  • I due blocchi di codice successivi ripetono questa procedura per EmbeddedDashboard2 e EmbeddedDashboard3. Ancora una volta, assicurati di aggiornare https://mycompany.looker.com/ con l'URL dell'istanza Looker.

  • Il blocco finale applica gli stili a EmbedContainer.

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

Passaggio 3: crea il file src/Tabs.tsx per archiviare il componente Tabs

Nella directory src della nuova estensione, crea un file Tabs.tsx. Questo file memorizza il componente Tabs e fa riferimento all'ID dashboard di Looker per ogni dashboard.

Incolla il seguente codice all'interno del file (la sezione successiva spiega cosa fa il codice):

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
} 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>
)

Nell'esempio di codice precedente si verificano le seguenti operazioni:

  • Le istruzioni di importazione importano le dipendenze e i componenti necessari, nonché gli oggetti EmbeddedDashboard creati nel file Dashboards.tsx.

    import React from "react";
    import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
    import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
    } from "./Dashboard";
    
  • L'istruzione export rende l'oggetto Tabs disponibile per l'importazione in altri componenti.

    export const Tabs = () => (
    
  • ComponentsProvider racchiude i singoli componenti per facilitare la scelta dei temi.

    <ComponentsProvider>
    </ComponentsProvider>
    
  • Il componente Tabs2 e il relativo componente secondario Tab2 creano tre schede e le collegano alle dashboard di Looker.

     <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>
    
    • La proprietà id di Tab2 accetta un ID scheda univoco. Aggiorna l'ID in base alle necessità del tuo ambiente.
    • La proprietà label accetta l'etichetta che verrà visualizzata in ogni scheda. Aggiorna l'ID in base alla dashboard in uso.
    • Una stringa inserita all'interno dei tag Tab2 viene visualizzata nella parte superiore dell'area dei contenuti della scheda. Aggiorna o rimuovi la stringa in base alle tue esigenze.
    • Gli oggetti EmbeddedDashboard1, EmbeddedDashboard1 e EmbeddedDashboard1 vengono posizionati all'interno della scheda. Le loro proprietà id accettano l'ID della dashboard da incorporare all'interno della scheda. Quando crei la tua dashboard con schede, sostituisci questo valore con l'ID della dashboard che vuoi utilizzare. Puoi trovare l'ID numerico della dashboard nell'URL dopo dashboards/. Ad esempio, se l'URL è https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, l'ID dashboard sarà 61.

Passaggio 4: sostituisci il riferimento a HelloWorld in src/App.tsx

Vai al file App.tsx nella directory src. Rimuovi l'istruzione di importazione HelloWorld:

import { HelloWorld } from './HelloWorld'

e sostituiscila con:

import { Tabs } from './Tabs'

Inoltre, nel file src/App.tsx, sostituisci <HelloWorld/> con <Tabs/>.

Se vuoi, puoi anche eliminare il file HelloWorld.tsx da questa directory perché non lo utilizzerai più.

Passaggio 5: aggiorna il file manifest.lkml con il diritto di incorporamento

Aggiungi il seguente diririttto alla sezione Diritti del file manifest.lkml nel tuo progetto LookML:

use_embeds: yes

Il file manifest.lkml dovrebbe avere il seguente aspetto:

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
  }
}

Ora puoi passare all'estensione, che viene visualizzata nella cartella Applicazioni nel riquadro di navigazione a sinistra. Se hai avviato il server di sviluppo locale con yarn develop, puoi vedere le dashboard con schede incorporate.

Passaggio 6: pubblica l'estensione nell'istanza di Looker

Per mostrare l'estensione ad altri utenti di Looker, pubblicala nella tua istanza di Looker seguendo questi passaggi:

  1. Con il server di sviluppo in esecuzione, vai a localhost:8080/bundle.js.
  2. Salva i contenuti della finestra del browser localmente sul computer come file .js.
  3. Assicurati di essere in modalità di sviluppo, quindi trascina il file .js nel progetto dell'estensione. Salva le modifiche.
  4. Nel file manifest.lkml, commenta la riga url: "http://localhost:8080/bundle.js".
  5. Nel file manifest.lkml, rimuovi il commento dalla riga # file: "bundle.js" e assicurati che il nome del file corrisponda a quello del file .js che hai caricato nel progetto. Salva le modifiche.
  6. Esegui il commit e il deployment delle modifiche.

Una volta eseguito il deployment, non dovrai più avviare il server di sviluppo locale per visualizzare l'estensione e gli utenti della tua istanza Looker dovrebbero essere in grado di visualizzarla se accedono alla cartella Applications nel riquadro di navigazione a sinistra.