Opções comuns dos widgets

Tipo

Referência

Para

Analista

Na tela

DataViz › Aplicação › Dashboards › Editando Widget

Algumas opções se repetem no painel Editando Widget de quase todo widget: o nome, a aparência do cartão, o formato do número, as cores, as regras em JavaScript e os Campos para Relatório. As páginas de cada widget dizem só onde a opção fica e o que muda nele.

O painel abre quando você clica num widget com o Dashboard em edição. As opções do widget ficam em abas, quase sempre Dados, Visual e Comportamento.

Nome do widget

Na tela	O que faz
Nome do Widget	O título que aparece no topo do widget. Também identifica o widget em alertas e no menu.
Gerar com IA	Botão ao lado do nome. Abre o editor por IA, que altera o widget a partir de uma instrução escrita. Aparece só para quem pode usar IA no Tenant.
Exibir Nome do Widget	Liga ou desliga o título. Desligado, o widget ocupa o espaço inteiro.
Ajuste fino	Aparece com o título ligado. Muda o título deste widget: Tamanho em px (vazio ou 0 herda o padrão), Negrito, Itálico, alinhamento (Esquerda, Centro, Direita) e Cor do texto. Voltar ao padrão desfaz tudo.

Aparência

O campo Aparência, na aba Visual, define o cartão em volta do widget.

Opção	Como fica
Padrão	Cartão com fundo branco (escuro no tema escuro), borda fina e sombra leve.
Transparente	Sem fundo e sem borda. O conteúdo fica direto sobre o fundo do Dashboard.
Destacado	Fundo cinza-claro (azul-escuro no tema escuro), sem borda. Serve para separar um grupo de widgets do resto.

O KPI tem uma quarta opção, Customizado, com borda, raio e sombra próprios (veja KPI). Texto e Diagrama não têm o campo Aparência: eles usam a caixa Gráfico com fundo transparente. A Lista tem Cor de fundo do Widget, e a Matriz Composta, a galeria de modelos própria.

Formato do número

O campo Formato do Número decide como o valor aparece no widget. Ele muda só a exibição: o valor consultado e os totais continuam os mesmos.

Opção	O que mostra	Exemplo com 1234567,891
Padrão do Campo	Usa a Máscara do campo: a da coluna, definida na tabela no HorusDW, ou a da expressão, definida na aba Expressões da Aplicação. Sem máscara, número com separador de milhar.	depende da máscara
Número	Separador de milhar e até 2 casas decimais.	1.234.567,89
Moeda	Real, com 2 casas decimais.	R$ 1.234.567,89
Porcentagem	Mostra o valor como percentual, com 2 casas. O resultado depende do widget: veja o aviso abaixo.	0,25 vira 25,00% nos widgets sem o defeito
Reduzido	Abrevia por grandeza, com até 1 casa: K (mil), M (milhão), B (bilhão), T (trilhão).	1,2M
Inteiro	Sem casas decimais.	1.234.568

Padrão do Campo é o melhor ponto de partida: a mesma máscara vale em todo widget, relatório e alerta que usa o campo, e muda num lugar só. A máscara do campo também tem formatos que o widget não tem, como moeda sem centavos, dólar, libra, percentual com 0 a 4 casas, duração em horas e minutos e tamanho de arquivo.

IMPORTANT

Porcentagem multiplica por 100 duas vezes em Barras e linhas, Pizza, Funil, Matriz Dinâmica, Forecast, Diagrama e nas tabelas que ainda não passaram ao formato atual (veja Tabela): o valor 0,1534 aparece como 1.534,00%, em vez de 15,34%. No KPI, no Calendário, no Velocímetro, na Matriz Composta e na Tabela no formato atual a conta sai certa. Nos widgets afetados, para mostrar percentual, deixe Padrão do Campo e dê ao campo uma máscara de percentual na tabela ou na expressão.

Alguns widgets têm formato próprio além deste, como a Máscara do valor do Velocímetro. A página do widget descreve.

Cor por valor

Os widgets que pintam categorias (Pizza, Funil, Mapa, Sankey, Barras e linhas) deixam escolher a cor de cada valor de uma coluna. A lista de valores tem três ações:

Na tela	O que faz
Carregar Valores da Aplicação	Busca os valores que a coluna tem hoje e monta a lista.
Adicionar novo Valor	Inclui um valor à mão, para um item que ainda não existe no dado.
Remover valores	Apaga a lista inteira e as cores escolhidas.

A Tabela e a Matriz Dinâmica têm também a cor Por Escala, que pinta cada célula numérica conforme a posição dela entre o menor e o maior valor da coluna. As opções de cada widget estão na página dele.

Regras em JavaScript

Cor, título e outros campos de vários widgets aceitam uma regra em JavaScript no lugar de um valor fixo. A regra roda no navegador de quem vê o Dashboard, a cada vez que o widget desenha, e o que ela devolve com return vira o valor do campo. Assim a cor do número pode ficar vermelha quando a meta não foi batida, sem um widget para cada caso.

A expressão da Aplicação usa outra linguagem: é escrita na aba Expressões e roda no banco.

1. Clique no ícone de função ao lado do campo. Abre a janela Expressão JavaScript.
2. Escreva o código. O painel Documentação lista o que o widget entrega em Valores Disponíveis via this:, e o painel Contexto mostra os valores da última vez que o widget desenhou.
3. Clique em Executar para ver o Resultado, ou ligue Live Preview para rodar a cada mudança.
4. Salve. O campo passa a mostrar Editar e Remover. Remover volta ao valor fixo.

O código é o corpo de uma função assíncrona: pode usar await, e precisa de return. Os valores chegam em this, e cada widget entrega os seus, listados na página dele. Em todos os widgets, this.datefns traz a biblioteca date-fns para lidar com datas. A exceção é a regra em código da Matriz Composta, que roda sem await e sem this.datefns.

Exemplo de cor do número do KPI, que entrega o valor principal em this.primaryValue:

if (this.primaryValue >= 100000) return "#16a34a"; // verde: bateu a meta
if (this.primaryValue >= 80000) return "#f59e0b";  // amarelo: perto
return "#dc2626";                                   // vermelho: longe

Um nome que o widget não entrega chega como undefined, e a comparação dá falso sem aviso. Se a cor não muda, confira o nome no painel Documentação. Se o código dá erro, o campo fica sem o valor da regra e o widget desenha sem ela. Para ver a mensagem de erro, rode o código com Executar na janela.

Salvar Snippet guarda um código para reusar em outro campo, e Carregar Snippet traz de volta. Os snippets ficam só no seu navegador: limpar os dados do navegador apaga todos.

Filtros do widget

A seção Filtros, na aba Dados, restringe as linhas que só este widget consulta, somando-se aos filtros do Dashboard. Como os filtros se combinam está em Filtros.

Campos para Relatório

O campo Campos para Relatório escolhe colunas que vão junto quando alguém abre o relatório do widget pelo menu, em Abrir Relatório. O relatório sai com as colunas do próprio widget, mais estas, e com os mesmos filtros. É a forma de ir do total para as linhas que o formam: um gráfico de vendas por mês pode abrir o relatório com cliente, nota e vendedor de cada venda.

Sem esse campo, o relatório traz só as colunas do widget. Se a Aplicação nega a permissão de usar o gerador de relatórios, a opção Abrir Relatório some do menu.

Menu do widget

O botão ⋯ no canto do widget abre o menu. O que aparece depende de o Dashboard estar em edição.

Modo	Opção	O que faz
Visualização	Abrir Relatório	Abre o relatório com as colunas e os filtros do widget, mais os Campos para Relatório.
Visualização	Criar Alerta	Começa um alerta a partir deste widget, já com o recorte dele. Aparece para quem pode criar alertas.
Visualização	Adicionar à Página Inicial	Copia o widget para a sua página inicial. Na página inicial compartilhada do Tenant, só administradores veem a opção.
Visualização	Maximizar	Abre o widget em tela cheia.
Visualização	Adicionar aos KPIs Mobile	Só no KPI e só no aplicativo de celular. Leva o KPI para a tela de KPIs do aplicativo.
Edição	Editar Widget	Abre o painel Editando Widget.
Edição	Clonar Widget	Cria uma cópia no mesmo Dashboard.
Edição	Copiar Widget	Copia para colar em outro Dashboard.
Edição	Excluir Widget	Remove o widget do Dashboard.
Edição	Abrir Relatório em nova aba	O mesmo relatório, sem sair do editor.