Dicas personalizadas

É possível personalizar as dicas que aparecem quando os usuários passam o cursor sobre os elementos nas visualizações do Looker. As dicas personalizadas permitem oferecer mais contexto, mostrar outras métricas e adaptar as informações apresentadas aos usuários. Com a configuração de visualização Dica personalizada, é possível configurar dicas no editor de visualização da análise usando uma combinação de configurações da UI e um editor HTML que oferece suporte a modelos do Liquid.

Esta página oferece orientações para ativar e usar a configuração de visualização Dicas personalizadas na instância do Looker (original). Esta página inclui as seguintes seções:

Requisitos do usuário e da instância

Para acessar a configuração de visualização Dicas personalizadas, você precisa atender aos seguintes requisitos:

  • A instância do Looker (original) precisa executar o Looker 26.4 ou uma versão mais recente.
  • Para criar dicas personalizadas nas análises, você precisa ter a permissão explore e acesso ao modelo LookML subjacente.

Limitações

O recurso de visualização Dicas personalizadas tem as seguintes limitações:

Como usar as dicas personalizadas

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

  1. Abra ou crie uma consulta de análise e selecione um tipo de visualização compatível.
  2. Clique em Editar na guia Visualização da análise para abrir o editor de visualização.
  3. Clique na guia Série.
  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 a que você quer adicionar uma dica.
  5. Clique no botão Dica personalizada para ativar a funcionalidade de dica personalizada para essa série ou gráfico específico.
  6. Na seção Dica personalizada, é possível ajustar 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.
    • Raio da borda: define o arredondamento das bordas da dica. Quanto maior o número, mais arredondadas serão as bordas da dica.
    • Sombra da caixa: define a sombra da caixa de dica.
    • Cor da fonte: define a cor da fonte da dica.
    • Cor do plano de fundo: define a cor do plano de fundo da dica.
    • Cor da borda: define a cor da borda da dica.
    • Alinhamento do texto: define o alinhamento da fonte da dica. Escolha Alinhar à esquerda, Centralizar ou Alinhar à direita. Alinhar à esquerda é a configuração padrão.
  7. Além das opções anteriores, ou como alternativa a elas, é possível 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, é possível usar variáveis HTML e 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 higienização de HTML do Looker.
    • Nem todas as variáveis do Liquid podem ser compatíveis com dicas personalizadas.

  9. Ao editar o conteúdo da dica personalizada, é possível visualizar a dica clicando em Visualizar (ou nos atalhos de teclado Command-Return para Mac ou Ctrl+Enter para PC) e passando o cursor sobre os pontos de dados no painel de visualização.

  10. Clique em Salvar no editor HTML e salve a análise 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étrica

As dicas personalizadas podem ser úteis em casos em que você quer fornecer 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, é possível mostrar mais dados e fornecer aos usuários mais contexto sobre os dados no gráfico.

Neste exemplo, um gráfico de valor único intitulado "Contagem de pedidos em 2025" mostra o valor de Contagem de pedidos para o País dos usuários "EUA" e é baseado em uma consulta de análise que também inclui Contagem de itens de pedidos. No entanto, o valor de Contagem de itens de pedidos não é mostrado 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 de pedidos 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 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 ver os valores dos dois campos, Contagem de pedidos e Contagem de itens de pedidos, e ter mais contexto para 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 referenciar campos incluídos em uma consulta de análise. No entanto, talvez você não queira mostrar todos os campos de análise em um gráfico. Com uma dica personalizada, é possível mostrar dados de campos que estão ocultos das visualizações para os 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 de pedidos, 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 de pedidos 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 de pedidos 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 de pedidos 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 de análise, sem os campos adicionais mostrados no gráfico de tabela.

Dica personalizada com funções comuns do Liquid

As dicas personalizadas oferecem suporte a funções comuns do Liquid, como o uso de pipes e instruções de conversão. 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 para um Status dos pedidos "CANCELADO" e um Status dos 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 um status "CANCELADO" e em verde para pedidos com um status "CONCLUÍDO". O código usa uma atribuição de variável e um pipe 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 texto verde na dica.

Uma dica 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 "CANCELADO" mostra 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.

  • Saiba mais sobre como criar visualizações.
  • Consulte a página de documentação de referência de variáveis do Liquid para mais maneiras de usar o Liquid no Looker.
  • Consulte a página de documentação de higienização de HTML para mais informações sobre as tags HTML com suporte do Looker.