Creazione di una dashboard a schede con componenti Looker

Un semplice esempio di come i componenti UI possono migliorare un'applicazione incorporata consiste nell'utilizzarli per creare una navigazione a schede per le dashboard:

Una dashboard di esempio con un'interfaccia a schede.

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

Per esaminare questo esempio, assicurati che la configurazione soddisfi i requisiti, quindi segui questi passaggi:

  1. Crea un'estensione di base di Script.
  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 HelloWorld in src/App.tsx.
  5. Aggiorna il file manifest.lkml con il diritto di incorporamento.
  6. Pubblica l'estensione nella tua istanza di Looker.

Requisiti

Prima di iniziare, avrai bisogno di alcuni elementi:

  • Devi avere accesso a un'istanza di Looker con l'opzione abilitata in Framework di estensioni.
  • Devi avere l'autorizzazione develop.
  • All'interno di Looker dovresti avere diverse dashboard definite dall'utente da inserire nelle schede dell'interfaccia utente.
  • Che tu stia creando il framework di estensione o una tua applicazione React autonoma, è importante eseguire l'autenticazione con l'API Looker e avere accesso all'oggetto SDK Looker. Per saperne di più, consulta l'articolo sull'autenticazione delle API Looker o sul nostro framework delle estensioni.
  • In questo esempio viene utilizzato l'SDK Looker Embed. Per consentire l'esecuzione dell'SDK Embed sulla tua istanza, http://localhost:8080 deve essere incluso nella lista consentita del dominio incorporato all'interno della pagina Incorpora del riquadro Amministratore.
  • Assicurati di aver installato il pacchetto NPM dei componenti Looker. Le informazioni sull'installazione e sull'utilizzo del pacchetto di componenti sono disponibili nel documento README, disponibile in GitHub e NPM.

Passaggio 1: crea un'estensione TypeScript di base

Per creare un'estensione, segui le istruzioni riportate nella pagina Introduzione alla creazione di un'estensione 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

All'interno della directory src della nuova estensione, crea un file Dashboards.tsx. Questo file connetterà e archivierà le dashboard che hai creato all'interno di Looker.

Incolla il codice seguente nel file. Questo codice crea tre oggetti della dashboard e li specifica per ID. Puoi creare più o meno oggetti della dashboard, in base alle tue esigenze.

Sono presenti tre posizioni nel codice di un URL istanza https://mycompany.looker.com. Modifica 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 verifica quanto segue:

  • Le istruzioni di importazione stanno generando 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, che è un oggetto EmbedContainer che contiene un iframe della dashboard. L'iframe viene generato dall'SDK Embed di Looker utilizzando l'ID della dashboard trasmesso. Assicurati di aggiornare https://mycompany.looker.com/ nell'URL dell'istanza di 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 ripeteranno la procedura per EmbeddedDashboard2 e EmbeddedDashboard3. Ancora una volta, assicurati di aggiornare https://mycompany.looker.com/ nell'URL dell'istanza di Looker.

  • L'ultimo blocco definisce lo stile 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

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

All'interno del file, incolla il seguente codice (la sezione seguente illustra il funzionamento del codice):

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

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 verifica quanto segue:

  • Le istruzioni di importazione portano 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 di esportazione rende disponibile l'oggetto Tabs per l'importazione in altri componenti.

    export const Tabs = () => (

  • Il ComponentsProvider circonda i singoli componenti per facilitare l'applicazione 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 esigenze del tuo ambiente.
    • L'elemento di proprietà label accetta l'etichetta che verrà visualizzata in ogni scheda. Aggiorna l'ID in modo appropriato per la dashboard che stai utilizzando.
    • Una stringa inserita nei tag Tab2 verrà visualizzata nella parte superiore dell'area dei contenuti per quella scheda. Aggiorna o rimuovi la stringa in base alle tue esigenze.
    • Gli oggetti EmbeddedDashboard1, EmbeddedDashboard1 e EmbeddedDashboard1 vengono posizionati all'interno della scheda. Le relative proprietà id accettano l'ID dashboard della dashboard da incorporare all'interno di quella scheda. Quando crei la tua dashboard a schede, sostituisci questo valore con l'ID della dashboard che vuoi utilizzare. Puoi trovare l'ID numerico della dashboard nell'URL successivo al giorno 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 HelloWorld in src/App.tsx

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

import { HelloWorld } from './HelloWorld'

e sostituiscilo con:

import { Tabs } from './Tabs'

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

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

Aggiungi il seguente diritto 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 accedere all'estensione, che viene visualizzata nella cartella Applicazioni del pannello di navigazione a sinistra. Se hai avviato il tuo server di sviluppo locale con yarn develop, puoi visualizzare 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 questa procedura:

  1. Con il server di sviluppo in esecuzione, vai a localhost:8080/bundle.js.
  2. Salva i contenuti della finestra del browser in locale sul computer come file .js.
  3. Assicurati di essere in modalità sviluppo, quindi trascina il file .js nel progetto di 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 file corrisponda al nome del file .js che hai caricato nel progetto. Salva le modifiche.
  6. Esegui il commit e il deployment delle modifiche.

Dopo il deployment, non dovrai più avviare il server di sviluppo locale per vedere l'estensione e gli utenti della tua istanza di Looker dovrebbero essere in grado di vedere l'estensione se la accedono all'interno della cartella Applications nel pannello di navigazione a sinistra.