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:

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

Per seguire 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 connettere 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 nell'istanza Looker.

Requisiti

Prima di iniziare, avrai bisogno di alcuni elementi:

• Devi avere accesso a un'istanza Looker con il framework di estensioni abilitato.
• Devi disporre dell'autorizzazione develop.
• Dovresti avere diverse dashboard definite dall'utente in Looker da inserire nelle schede dell'interfaccia utente.
• Indipendentemente dal fatto che tu stia creando nel framework di estensioni o nella tua applicazione React autonoma, è importante eseguire l'autenticazione con l'API Looker e avere accesso all'oggetto SDK Looker. Per ulteriori informazioni, consulta la sezione Autenticazione dell'API Looker o il nostro framework di estensioni.
• Questo esempio utilizza l'SDK Embed di Looker. Per consentire l'esecuzione dell'SDK Embed sull'istanza, http://localhost:8080 deve essere incluso nell'elenco consentiti dei domini incorporati nella pagina Incorpora del pannello Amministrazione.

• Assicurati di aver installato il pacchetto NPM dei componenti Looker . Le informazioni sull'installazione e sull'utilizzo del pacchetto dei componenti sono disponibili nel documento README, disponibile sia su GitHub sia su NPM:

  • Installare e utilizzare il pacchetto dei componenti (GitHub)
  • Installare e utilizzare il pacchetto dei componenti (NPM)

Passaggio 1: crea un'estensione TypeScript di base

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

• Se utilizzi lo strumento create-looker-extension per creare il modello di estensione, scegli React per il framework e TypeScript per il linguaggio.
• Se cloni il repository Git per creare il modello di estensione, vai alla directory extension-examples/react/TypeScript/helloworld-ts nel secondo passaggio.

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

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

Incolla il seguente codice nel file. Questo codice crea un componente della dashboard riutilizzabile.

Nel codice è presente un URL dell'istanza, https://mycompany.looker.com. Modificalo con l'URL dell'istanza 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%;
 }
`;

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 EmbeddedDashboard, che è un oggetto EmbedContainer contenente un iframe della dashboard. Questo componente è riutilizzabile; puoi utilizzarlo per qualsiasi dashboard passando una proprietà id diversa. L'iframe viene generato dall'SDK Embed di Looker utilizzando l'ID della dashboard che gli viene passato. Assicurati di aggiornare https://mycompany.looker.com/ con l'URL dell'istanza 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>;
  };
  

• Il blocco finale applica lo stile 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 archivia il componente Tabs e fa riferimento all'ID della dashboard Looker per ogni dashboard.

Incolla il seguente codice nel file (la sezione successiva spiega cosa fa il codice):

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

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 { EmbeddedDashboard } from "./Dashboard";
  

• L'istruzione di esportazione rende l'oggetto Tabs disponibile per l'importazione in altri componenti.

  export const Tabs = () => (
  

• Il componente ComponentsProvider racchiude i singoli componenti per facilitarne l'applicazione dei temi.

  <ComponentsProvider>
  </ComponentsProvider>
  

• Il componente Tabs2 e il relativo componente secondario, Tab2, creano tre schede e le collegano alle dashboard 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 proprietà id di Tab2 accetta un ID scheda univoco. Aggiorna l'ID in base alle esigenze del tuo ambiente.
  • La proprietà label accetta l'etichetta che verrà visualizzata su ogni scheda. Aggiorna l'ID in base alla dashboard che stai utilizzando.
  • Una stringa inserita all'interno dei tag Tab2 verrà visualizzata nella parte superiore dell'area dei contenuti per quella scheda. Aggiorna o rimuovi la stringa in base alle esigenze.
  • Gli oggetti EmbeddedDashboard vengono inseriti nella scheda. Le relative proprietà id accettano l'ID della dashboard da incorporare all'interno della 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 dopo dashboards/. Ad esempio, se l'URL è https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, l'ID della dashboard è 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 di HelloWorld:

import { HelloWorld } from './HelloWorld'

e sostituiscila con:

import { Tabs } from './Tabs'

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

Facoltativamente, puoi anche eliminare il file HelloWorld.tsx da questa directory, poiché non lo utilizzerai più.

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

Aggiungi il seguente diritto alla sezione dei diritti del manifest.lkml file nel 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 andare all'estensione, che viene visualizzata nella cartella Applicazioni nel pannello di navigazione a sinistra. Se hai avviato il server di sviluppo locale con yarn develop, puoi visualizzare le dashboard incorporate a schede.

Passaggio 6: pubblica l'estensione nell'istanza Looker

Per mostrare l'estensione ad altri utenti Looker, pubblicala nell'istanza 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 e rilascia il file .js nel progetto di estensione. Salva le modifiche.
4. Nel file manifest.lkml, inserisci come commento 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.

Una volta eseguito il deployment delle modifiche, non dovrai più avviare il server di sviluppo locale per visualizzare l'estensione e gli utenti dell'istanza Looker dovrebbero essere in grado di visualizzarla se la selezionano nella cartella Applicazioni nel pannello di navigazione principale.