Criar um painel de controlo com separadores com componentes do Looker

Um exemplo simples de como os componentes da IU podem melhorar uma aplicação incorporada é usá-los para criar uma navegação com separadores para painéis de controlo:

Um painel de controlo de exemplo com uma interface com separadores.

O exemplo seguinte adiciona painéis de controlo com separadores a uma extensão básica do TypeScript criada com a framework de extensão do Looker.

Para trabalhar neste exemplo, certifique-se de que a configuração cumpre os requisitos e, em seguida, siga estes passos:

  1. Crie uma extensão básica do TypeScript.
  2. Crie o ficheiro src/Dashboards.tsx para associar e armazenar painéis de controlo.
  3. Crie o ficheiro src/Tabs.tsx para armazenar o componente Tabs.
  4. Substitua a referência HelloWorld em src/App.tsx.
  5. Atualize o ficheiro manifest.lkml com a autorização de incorporação.
  6. Publique a extensão na sua instância do Looker.

Requisitos

Precisa de alguns elementos antes de começar:

Passo 1: crie uma extensão básica do TypeScript

Para criar uma extensão, siga as instruções na página de documentação Introdução à criação de uma extensão do Looker. Para tornar a extensão uma extensão TypeScript, use as seguintes modificações:

Passo 2: crie o ficheiro src/Dashboards.tsx para associar e armazenar painéis de controlo

No diretório src da nova extensão, crie um ficheiro Dashboards.tsx. Este ficheiro vai ligar-se e armazenar os painéis de controlo que criou no Looker.

No ficheiro, cole o seguinte código. Este código cria um componente de painel de controlo reutilizável.

Existe uma localização no código de um URL de instância, https://mycompany.looker.com. Altere este valor para o URL da sua instância do 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%;
 }
`;

No exemplo de código anterior, estão a ocorrer as seguintes ações:

  • As declarações de importação estão a importar as dependências necessárias.

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

  • O bloco de código seguinte cria um objeto EmbeddedDashboard, que é um objeto EmbedContainer que contém um iFrame do painel de controlo. Este componente é reutilizável. Pode usá-lo para qualquer painel de controlo transmitindo uma propriedade id diferente. O iFrame é gerado a partir do SDK Looker Embed através do ID do painel de controlo que lhe é transmitido. Certifique-se de que atualiza https://mycompany.looker.com/ para o URL da instância do 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>;
};

  • O bloco final aplica estilos ao EmbedContainer.

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

Passo 3: crie o ficheiro src/Tabs.tsx para armazenar o componente Tabs

No diretório src da nova extensão, crie um ficheiro Tabs.tsx. Este ficheiro armazena o componente Tabs e faz referência ao ID do painel de controlo do Looker para cada painel de controlo.

Nesse ficheiro, cole o seguinte código (a secção seguinte explica o que o código está a fazer):

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

No exemplo de código anterior, estão a ocorrer as seguintes ações:

  • As declarações de importação estão a importar as dependências e os componentes necessários, bem como os objetos EmbeddedDashboard que foram criados no ficheiro Dashboards.tsx.

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

  • A declaração de exportação torna o objeto Tabs disponível para importação noutros componentes.

    export const Tabs = () => (

  • O elemento ComponentsProvider envolve componentes individuais para ajudar na aplicação de temas.

    <ComponentsProvider>
</ComponentsProvider>

  • O componente Tabs2 e o respetivo componente secundário, Tab2, criam três separadores e associam-nos aos painéis de controlo do 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>
    • A propriedade id de Tab2 aceita um ID do separador exclusivo. Atualize o ID conforme necessário para o seu ambiente.
    • A propriedade label aceita a etiqueta que vai aparecer em cada separador. Atualize o ID conforme adequado para o painel de controlo que está a usar.
    • Uma string colocada nas etiquetas Tab2 aparece na parte superior da área de conteúdo desse separador. Atualize ou remova a string conforme necessário.
    • Os objetos EmbeddedDashboard são colocados no separador. As respetivas propriedades id aceitam o ID do painel de controlo a incorporar nesse separador. Quando estiver a criar o seu próprio painel de controlo com separadores, substitua este valor pelo ID do painel de controlo que quer usar. Pode encontrar o ID numérico do painel de controlo no URL após dashboards/. Por exemplo, se o URL for https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US, o ID do painel de controlo é 61.

Passo 4: substitua a referência HelloWorld em src/App.tsx

Navegue para o ficheiro App.tsx no diretório src. Remova a declaração de importação HelloWorld:

import { HelloWorld } from './HelloWorld'

e substitua-o por:

import { Tabs } from './Tabs'

Além disso, no ficheiro src/App.tsx, substitua <HelloWorld/> por <Tabs/>.

Opcionalmente, também pode eliminar o ficheiro HelloWorld.tsx deste diretório, uma vez que vai deixar de o usar.

Passo 5: atualize o ficheiro manifest.lkml com a autorização de incorporação

Adicione a seguinte autorização à secção de autorizações do ficheiromanifest.lkml no seu projeto LookML:

use_embeds: yes

O ficheiro manifest.lkml deve ter o seguinte aspeto:

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

Agora, pode navegar para a sua extensão, que aparece na pasta Aplicações no painel de navegação do lado esquerdo. Se iniciou o servidor de desenvolvimento local com yarn develop, pode ver os painéis de controlo incorporados com separadores.

Passo 6: publique a extensão na sua instância do Looker

Para mostrar a extensão a outros utilizadores do Looker, publique-a na sua instância do Looker seguindo estes passos:

  1. Com o servidor de programação em execução, navegue para localhost:8080/bundle.js.
  2. Guarde o conteúdo da janela do navegador localmente no seu computador como um ficheiro .js.
  3. Certifique-se de que está no modo de desenvolvimento e, em seguida, arraste e largue o ficheiro .js no projeto da extensão. Guarde as alterações.
  4. No ficheiro manifest.lkml, comente a linha url: "http://localhost:8080/bundle.js".
  5. No ficheiro manifest.lkml, descomente a linha # file: "bundle.js" e certifique-se de que o nome do ficheiro corresponde ao nome do ficheiro .js que carregou para o seu projeto. Guarde as alterações.
  6. Confirme e implemente as alterações.

Depois de as alterações serem implementadas, já não precisa de iniciar o servidor de desenvolvimento local para ver a extensão. Os utilizadores na sua instância do Looker devem conseguir ver a extensão se navegarem até ela na pasta Aplicações no painel de navegação principal.