🇧🇷 SAP Analytics Cloud – Como editar um gráfico de Ponto Numérico utilizando CSS

Fala pessoal!

Já tentou aplicar uma formatação condicional em um gráfico de Ponto Numérico e descobre só depois que ela se aplica para o elemento como um todo e não apenas para o valor primário? Pode acreditar, eu já cometi o mesmo erro incontáveis vezes.

Então para tentar encontrar uma solução, me aprofundei na documentação de CSS do SAP Analytics Cloud e encontrei umas informações muito interessantes que podem te ajudar a economizar um tempo também.

O classe CSS abaixo te permite controlar exatamente o valor que queremos formatar neste tutorial:

.sap-custom-number-chart-secondary-values:
* Descrição: Classe CSS para numeros de um gráfico no valor secundário;
* Propriedades: font-family, font-size, color, font-style, font-weight, text-decoration;
* Descendentes: N/A;
* Pseudos: N/A;

Agora vamos explorar mais como a classe CSS mencionada acima pode ser aplicada ao elemento de Ponto Numérico. Para exemplificar melhor, vamos identificar quais são os valores primários (primary) e secundários (secondary) em um elemento:

Primary and secondary values in a numeric widget

O principal objetivo deste post é demonstrar como ignorar a formatação condicional que é aplicada automaticamente no valor secundário através de CSS, garantindo que apenas os valores primários sejam impactados pela formatação condicional.

Exemplo

A resultado abaixo é o que estamos tentando replicar:

Objetivo final do tutorial
Actual (Realizado) РBudget (Or̤amento) РMonthly Volume (Volume Mensal)

Passo 1: Primeiramente, crie uma nova tela de história. Em seguida adicione um elemento gráfico para a tela. Depois de adicionado, poderemos modificar da forma que queremos. Neste exemplo vamos selecionar o gráfico de “Ponto Numérico”.

Passo 2: Agora que temos nosso gráfico criado, é hora de popular com dados. Adicione uma conta ao valor primário, uma conta ao valor secundário e uma medida (adicione também uma versão caso nao esteja trabalhando com medidas de restrição).

Passo 3: Agora podemos criar a formatação condicional que compara o valor contido na conta primária contra o valor na conta secundária. Isso vai nos permitir visualizar de forma rápida quando nossos valores realizados e orçados estão dentro ou fora do esperado.

Passo 4: Se quisermos ir um passo além e personalizar a aparencia do elemento ainda mais, podemos editar o estilo CSS. Para fazer isso, siga os passos abaixo:

  • Clique no ícone de pincel localizado nas Configurações globais. O painel CSS vai abrir após clicar.

  • Copie o pedaço de código abaixo que passa um código de cores HEX para o valor secundário:
.chart .sap-custom-number-chart-secondary-values {
    color: #58595b;
}
  • Cole o código dentro do painel CSS. Lembre-se de alterar a seleção para gráfico.

Passo 5: Para garantir que a customização CSS seja aplicada ao gráfico, precisamos adicionar o nome da classe criada dentro do gráfico de Ponto Numérico. Aqui vai o exemplo de como fazer isso:

  1. Selecione o elemento gráfico.
  2. Vá ao painel de Definição de Estilo e licalize o campo “Nome da Classe CSS”.
  3. Escreva “chart” como o nome da classe CSS e aperte enter.

Passo 6: Agora você pode salvar sua história e ir para o modo de visualização e ver o novo estilo.

As outras formatações que você vê no elemento são simplesmente elementos cosméticos, tais como contorno e tamanho de fonte para torná-lo mais apresentável.

Espero que você tenha curtido e achado esse exemplo útil. Se você tiver alguma pergunta ou sugestão, deixe um comentário abaixo.

Obrigado e até a próxima!

Jorge Rocha

Read this article in English.