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 a schede a un'estensione TypeScript di base creata utilizzando il framework delle 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 di Looker.

Requisiti

Prima di iniziare, ti serviranno alcuni elementi:

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 di Looker. Per trasformare l'estensione in un'estensione TypeScript, utilizza le seguenti modifiche:

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

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

All'interno del file, incolla il seguente codice. Questo codice crea un componente della dashboard riutilizzabile.

Nel codice di un URL dell'istanza è presente una posizione, https://mycompany.looker.com. Modifica questo valore 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 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 inseriscono 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, ovvero un oggetto EmbedContainer che contiene un iframe della dashboard. Questo componente è riutilizzabile: puoi utilizzarlo per qualsiasi dashboard passando una proprietà id diversa. L'iframe viene generato dall'SDK incorporato di Looker utilizzando l'ID dashboard che gli viene trasmesso. 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

All'interno della 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.

All'interno del file, incolla il seguente codice (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 = () => (

  • ComponentsProvider avvolge 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
   <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 necessità del tuo ambiente.
    • La proprietà label accetta l'etichetta che verrà visualizzata in ogni scheda. Aggiorna l'ID in base alla dashboard che stai utilizzando.
    • 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 esigenze.
    • Gli oggetti EmbeddedDashboard vengono inseriti all'interno della scheda. Le proprietà id accettano l'ID della dashboard da incorporare nella 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 dashboard è 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'

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

Se vuoi, puoi anche eliminare il file HelloWorld.tsx da questa directory, dato che 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 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 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 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 tuo computer come file .js.
  3. Assicurati di essere in modalità di 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 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 implementate le modifiche, non sarà più necessario avviare il server di sviluppo locale per visualizzare l'estensione e gli utenti della tua istanza di Looker dovrebbero essere in grado di visualizzarla se la selezionano nella cartella Applicazioni nel pannello di navigazione principale.