Extensões de blocos de edifícios

A partir do Looker 24.0, as extensões podem ser desenvolvidas para execução em um bloco de painéis. Extensões que podem ser executadas como um bloco ou visualização podem ser adicionadas enquanto o dashboard está no modo de edição ou salvas em um dashboard como uma visualização de uma Análise. As extensões também podem ser configuradas como blocos nos painéis do LookML.

Exemplos de extensões que podem ser usadas como blocos do painel de controle estão disponíveis:

• A extensão de visualização de bloco mostra como criar uma visualização personalizada usando o framework de extensões.
• A extensão do SDK de bloco mostra os métodos de API disponíveis específicos para extensões de bloco.

Como usar o SDK da extensão do Looker com extensões de bloco

As extensões de bloco exigem que o parâmetro mount_points seja definido no arquivo de manifesto do projeto do LookML para que as extensões sejam carregadas como blocos em um dashboard. Há dois tipos de mount_points relacionados às extensões de bloco:

  mount_points: {
    dashboard_vis: yes
    dashboard_tile: yes
    standalone: yes
  }

• dashboard_vis: quando ativada, a extensão aparece nas opções de visualização de uma Análise detalhada, onde pode ser selecionada como uma visualização e salva como um bloco do painel. Quando o painel for executado, ele vai executar a consulta associada ao bloco e disponibilizar os dados para a extensão. Isso é semelhante a como as visualizações personalizadas funcionam. A principal diferença entre uma visualização personalizada e uma extensão em um bloco do painel com dashboard_vis ativado é que a extensão pode fazer chamadas da API Looker.
• dashboard_tile: quando ativada, a extensão aparece no painel Extensões exibido quando um usuário está editando um painel e seleciona a opção Extensões depois de clicar no botão Adicionar. Esse tipo de extensão é responsável por recuperar os próprios dados, em vez de fazer com que a consulta de bloco forneça dados automaticamente à extensão.

Um ponto de montagem adicional, standalone, faz com que a extensão apareça na seção Applications do menu principal do Looker. É possível que uma extensão tenha vários pontos de montagem definidos. No tempo de execução, a extensão é notificada sobre como é montada e pode ajustar o próprio comportamento de acordo. Por exemplo, standalone extensões talvez precisem definir a própria altura, enquanto as extensões de bloco não.

APIs extras da extensão de bloco

As extensões de blocos são fornecidas com APIs e dados adicionais no momento da execução. Eles são obtidos do contexto da extensão:

const {
  tileSDK,
  tileHostData,
  visualizationData,
  visualizationSDK,
} = useContext(ExtensionContext40)

• tileSDK: fornece funções específicas do bloco para permitir que a extensão interaja com o host do painel do Looker. Por exemplo, para permitir que a extensão exiba e apague mensagens de erro.
• tileHostData: fornece dados de bloco para a extensão. Os dados são atualizados automaticamente com base nas interações com o painel de hospedagem. Um exemplo é o indicador isDashboardEditing.
• visualizationSDK: fornece funções específicas da visualização para permitir que a extensão interaja com o host do painel do Looker. Um exemplo é a função updateRowLimit.
• visualizationData: fornece dados de visualização para a extensão. Os dados são atualizados automaticamente com base nas interações com o painel de hospedagem. Os dados são semelhantes aos fornecidos para visualizações personalizadas.

Como criar extensões reativas

Os iframes em que as extensões são executadas são redimensionados automaticamente à medida que a janela do host mãe do Looker é redimensionada. Isso é refletido automaticamente na janela de conteúdo do iframe. O componente iframe não tem padding ou margem. Portanto, cabe à extensão fornecer o próprio padding e margem para que pareça consistente com o aplicativo Looker. Para extensões independentes, a altura é controlada pela extensão. Para extensões executadas em blocos do painel ou visualizações do recurso "Explorar", a janela de conteúdo do iframe será definida automaticamente com a altura disponibilizada pelo iframe.

Considerações sobre renderização

É importante observar que as extensões de bloco são renderizadas quando um painel é baixado como PDF ou imagem. O renderizador espera que o bloco o notifique quando a renderização estiver concluída. Se isso não for feito, o renderizador vai parar de responder. Este é um exemplo de como notificar o renderizador de que o bloco foi renderizado.

  const { extensionSDK } = useContext(ExtensionContext40)

  useEffect(() => {
    extensionSDK.rendered()
  }, [])

As animações também precisam ser desativadas ao renderizar. Confira abaixo um exemplo em que as configurações de animação são desativadas durante a renderização:

  const { lookerHostData} = useContext(ExtensionContext40)
  const isRendering = lookerHostData?.isRendering

  const config = isRendering
    ? {
        ...visConfig,
        valueCountUp: false,
        waveAnimateTime: 0,
        waveRiseTime: 0,
        waveAnimate: false,
        waveRise: false,
      }
    : visConfig

  if (mountPoint === MountPoint.dashboardVisualization) {
    return <VisualizationTile config={config} />
  }

Funções e propriedades do SDK do Tile

O SDK do bloco fornece funções que permitem que uma extensão de bloco interaja com o painel de hospedagem.

As funções e propriedades disponíveis são mostradas na tabela a seguir:

Dados do SDK do Tile

As propriedades de dados do SDK de blocos disponíveis são mostradas na tabela a seguir:

Funções e propriedades do SDK de visualização

As funções e propriedades do SDK de visualização disponíveis são mostradas na tabela a seguir:

Dados do SDK de visualização

O SDK de visualização consiste no seguinte:

• Dados de configuração da visualização
• Dados de resposta de consulta

Dados de configuração da visualização

export interface VisualizationConfig {
  queryFieldMeasures: Measure[]
  queryFieldDimensions: Dimension[]
  queryFieldTableCalculations: TableCalculation[]
  queryFieldPivots: PivotConfig[]
  visConfig: RawVisConfig
}

Consultar dados de resposta