Dicas personalizadas

É possível personalizar as dicas que aparecem quando os usuários passam o cursor sobre os elementos nas visualizações do Looker. Com as dicas personalizadas, você pode fornecer mais contexto, mostrar outras métricas e adaptar as informações apresentadas aos usuários. Com o recurso Dicas personalizadas do Labs, é possível configurar dicas no editor de visualização de análise detalhada usando uma combinação de configurações UI e um editor HTML compatível com modelos Liquid.

Nesta página, fornecemos orientações para ativar e usar o recurso do Labs Dicas personalizadas na sua instância do Looker (original). Esta página inclui as seguintes seções:

Enviar feedback ou receber suporte

Envie feedback ou peça suporte preenchendo e enviando este formulário Dicas personalizadas do Looker: problemas da prévia.

Requisitos de usuário e instância

Para ativar e usar o recurso de laboratório Dicas personalizadas, você precisa atender aos seguintes requisitos:

  • Sua instância do Looker (original) precisa estar executando o Looker 26.0 ou uma versão mais recente e ser hospedada pelo Looker.
  • É necessário ter a função de administrador para ativar o recurso Dicas personalizadas do Labs.
  • Para criar dicas personalizadas nas Análises, você precisa ter a permissão explore e acesso ao modelo LookML subjacente.

Limitações

O recurso Dicas personalizadas do Labs tem as seguintes limitações:

  • As dicas personalizadas estão disponíveis apenas para gráficos de tabela, de valor único e cartesianos. Não há suporte para dicas personalizadas em gráficos de pizza, boxplot ou cascata.
  • As dicas personalizadas só podem fazer referência a campos incluídos em uma consulta do recurso "Analisar".
  • As dicas só podem mostrar a mesma granularidade de dados de um determinado campo. Se os usuários quiserem ver um nível mais granular de dados do que o disponível na dica, eles precisarão usar a funcionalidade de detalhamento.
  • As dicas personalizadas são salvas no nível da visualização. Não é possível salvar no nível da análise detalhada.
  • Se você remover de uma consulta do recurso "Explorar" um campo que tem uma dica personalizada, um usuário ainda poderá ver essa dica se a consulta for compartilhada com ele e ele adicionar o campo de volta à consulta.
  • O HTML renderizado em dicas personalizadas está sujeito às regras de limpeza de HTML do Looker.
  • Nem todas as variáveis Liquid são compatíveis com dicas personalizadas.
  • As personalizações de dicas substituem qualquer tema aplicado a um painel interno (não incorporado) ou a um painel incorporado.

Ativar dicas personalizadas

O recurso de laboratório Dicas personalizadas está ativado por padrão.

Se o recurso do Labs Dicas personalizadas tiver sido desativado, os administradores do Looker poderão ativá-lo seguindo estas etapas:

  1. No Looker, clique na opção Administrador no menu de navegação principal.
  2. Clique na opção Labs na seção Geral para abrir a página Labs.
  3. Selecione o botão Dicas personalizadas para ativar o recurso dos Labs.

Como usar dicas personalizadas

Se você tiver as permissões adequadas, poderá personalizar a dica de ferramenta de uma série na visualização do recurso Detalhar. Para personalizar a dica, siga estas etapas:

  1. Abra ou crie uma consulta de análise detalhada e selecione um tipo de visualização compatível.
  2. Clique em Editar na guia Visualização da análise detalhada para abrir o editor de visualização.
  3. Selecione a guia Séries.
  4. Na seção Personalizações, encontre a série a que você quer adicionar a dica. Se houver várias séries, expanda aquela em que você quer adicionar uma dica.
  5. Selecione o botão Dica personalizada para ativar a funcionalidade de dica personalizada para essa série específica.
  6. Na seção Dica personalizada, ajuste a aparência básica da dica usando as opções fornecidas:
    • Tamanho da fonte: define o tamanho da fonte da dica.
    • Família de fontes: define a família de fontes da dica.
    • Cor do plano de fundo da dica: define a cor do plano de fundo da dica.
    • Cor da fonte: define a cor da fonte da dica.
    • Raio da borda: define o arredondamento das bordas da dica. Quanto maior o número, mais arredondadas serão as bordas da dica.
    • Sombra na borda: define a sombra da dica.
    • Alinhamento do texto: define o alinhamento da fonte da dica.
  7. Além das opções anteriores, ou como alternativa a elas, você pode aplicar opções de estilo mais avançadas clicando em Editar conteúdo da dica para abrir o editor HTML Editar conteúdo da dica.

  8. No editor Editar conteúdo da dica, use HTML e variáveis Liquid para estruturar e preencher a dica.

    • Use tags HTML padrão para formatar o conteúdo da dica (por exemplo, <div>, <span>, <strong>, <table>,<ul>, <ol>). O HTML renderizado está sujeito às regras de limpeza de HTML do Looker.
    • Nem todas as variáveis Liquid são compatíveis com dicas personalizadas.

  9. Ao editar o conteúdo da dica personalizada, clique em Visualizar (ou use os atalhos de teclado Command-Return para Mac ou Ctrl+Enter para PC) e passe o cursor sobre os pontos de dados no painel de visualização.

  10. Clique em Salvar no editor HTML e salve a análise detalhada como um Look ou como um bloco do painel para manter as mudanças.

Exemplos

Os exemplos a seguir demonstram casos de uso para diferentes níveis de personalização de dicas:

Dica personalizada com vários valores de métricas

As dicas personalizadas podem ser úteis quando você quer dar mais contexto aos usuários sobre um ponto de dados mostrado em uma visualização. Por exemplo, um gráfico de valor único mostra o valor de apenas uma métrica. Com uma dica personalizada, você pode mostrar mais dados e oferecer aos usuários mais contexto sobre as informações no gráfico.

Neste exemplo, um gráfico de valor único chamado "Count of orders in 2025" mostra o valor de Contagem de pedidos para o País dos usuários "USA" e é baseado em uma consulta do recurso Detalhar que também inclui Contagem de itens do pedido. No entanto, o valor de Contagem de itens do pedido não aparece no gráfico.

O HTML a seguir é inserido no editor Editar conteúdo da dica para a série Contagem de pedidos e define o conteúdo para incluir o valor Contagem de itens do pedido na dica:

<div style="padding: 5px; font-family: Arial, sans-serif; font-size: 13px;">
  <div>
    <strong>Order Items Count:</strong> {{ order_items.count }}
  </div>
  <div>
    <strong>Orders Count:</strong> {{ orders.count }}
  </div>
</div>

Uma dica de ferramenta para o gráfico de valor único &quot;Contagem de pedidos&quot; mostra o valor de &quot;Contagem de itens de pedidos&quot; de US $54.340 e o valor de &quot;Contagem de pedidos&quot; de 39.189.

Os usuários podem conferir os valores dos dois campos, Contagem de pedidos e Contagem de itens do pedido, e ter mais contexto sobre os dados mostrados no gráfico.

Dica personalizada com valores ocultos estruturados como uma tabela

Conforme observado nas informações de limitações desta página, as dicas personalizadas só podem fazer referência a campos incluídos em uma consulta do recurso Detalhar. No entanto, talvez você não queira mostrar todos os campos da análise detalhada em um gráfico. Com uma dica personalizada, você pode mostrar dados de campos ocultos das visualizações aos usuários sem adicioná-los a um gráfico.

Neste exemplo, uma tabela de dados de análise inclui as métricas Contagem de pedidos e Contagem de itens do pedido, agrupadas pelas dimensões Estado dos usuários e Status dos pedidos. O desenvolvedor quer mostrar uma pequena tabela aos usuários e oculta os campos Status dos pedidos e Contagem de itens do pedido do gráfico de tabela. No entanto, o desenvolvedor ainda quer que os usuários vejam os valores de Status dos pedidos e Contagem de itens do pedido associados a uma determinada Contagem de pedidos.

O HTML a seguir é inserido no editor Editar conteúdo da dica para a série Contagem de pedidos e define o conteúdo para incluir os valores de Status dos pedidos e Contagem de itens do pedido na dica, estruturados como uma tabela:

<div>
    <div>
        <table border="1">
          <!-- Table Body -->
          <tbody>
            <!-- Row 1 -->
            <tr>
              <td>
                <strong>Order status</strong>
              </td>
              <td>
                {{ orders.status }}
              </td>
            </tr>
            <!-- Row 2 -->
            <tr>
              <td>
                <strong>State</strong>
              </td>
              <td>
                {{ users.state }}
              </td>
            </tr>
            <!-- Row 3 -->
            <tr>
              <td>
                <strong>Count of orders</strong>
              </td>
              <td>
                {{ orders.count }}
              </td>
            </tr>
            <!-- Row 4 -->
            <tr>
              <td>
                <strong>Count of order items</strong>
              </td>
              <td>
                {{ order_items.count }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>

Uma dica para o valor &quot;Contagem de pedidos&quot; em um gráfico de tabela mostra os valores de &quot;Estado dos usuários&quot;, &quot;Status dos pedidos&quot;, &quot;Contagem de pedidos&quot; e &quot;Contagem de itens do pedido&quot; em uma tabela de duas colunas.

Os usuários podem ver todos os dados da consulta do recurso Detalhar sem os campos extras mostrados no gráfico de tabela.

Dica personalizada com funções comuns do Liquid

As dicas personalizadas são compatíveis com funções comuns do Liquid, como encadeamento e uso de instruções de conversão para baixo. Neste exemplo, um gráfico de colunas mostra a Contagem de pedidos agrupada por Status dos pedidos. O desenvolvedor quer formatar a dica para que os usuários possam identificar rapidamente a diferença entre a contagem de pedidos de um status de pedidos "CANCELADO" e um status de pedidos "CONCLUÍDO".

O HTML e o Liquid a seguir são inseridos no editor Editar conteúdo da dica para a série Contagem de pedidos e definem o valor da dica para aparecer em vermelho para contagens de pedidos com status "CANCELADO" e em verde para pedidos com status "CONCLUÍDO". O código usa uma atribuição de variável e um encadeamento para garantir a precisão da string e aplicar a formatação condicional especificada:

{% assign my_variable = orders.status | downcase | strip %}
{% if my_variable == "completed" %}
  <span style="color:green">{{orders.count}}</span>
{% else %}
  <span style="color:red">{{orders.count}}</span>
{% endif %}

O valor Contagem de pedidos da coluna Status dos pedidos "CONCLUÍDO" mostra um texto verde na dica.

Uma dica de ferramenta mostra o valor da contagem de pedidos em verde na coluna &quot;Status dos pedidos CONCLUÍDOS&quot;.

O valor Contagem de pedidos da coluna Status dos pedidos "CANCELLED" aparece em texto vermelho na dica.

Uma dica mostra o valor da contagem de pedidos em verde na coluna &quot;Status dos pedidos CONCLUÍDOS&quot;.

Os usuários podem distinguir rapidamente entre pedidos cancelados e concluídos mostrados no gráfico de colunas.