ūüáßūüá∑¬†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.

ūüá®ūüᶠSAP Analytics Cloud – How to enhance Numeric Point widgets through CSS

Hey everyone!

Have you ever tried to apply conditional formatting to a Numeric Point widget, only to find out that it affects the entire widget instead of just the primary value? Trust me, I’ve been there countless times myself.

I embarked on a quest to find a solution, delving into the depths of SAP’s CSS documentation. And guess what? I discovered some valuable info that can save you from the same problem.

This following CSS class allows you to control the exact value we’re trying to change:

.sap-custom-number-chart-secondary-values:
* Description: CSS class for number chart secondary values;
* Properties: font-family, font-size, color, font-style, font-weight, text-decoration;
* Descendants: N/A;
* Pseudos: N/A;

Now, let’s explore more how the CSS class mentioned above can be applied to the Numeric Point widget. To provide a clearer picture, let’s identify the primary and secondary values on the widget itself:

Primary and secondary values in a numeric widget

The primary goal of this blog post is to demonstrate how you can overwrite conditional formatting colors in the secondary value, ensuring that only the primary value responds to the conditional formatting rules.

Example

Here’s what we’re aiming to achieve:

End goal of the tutorial

Step 1: To get started, create a new story in your canvas. Begin by adding a Chart element to your canvas. Once added, we can modify its format to suit our needs. In this case, we’ll change the chart format to “Numeric Point.”

Step 2: Now that we have our chart in place, it’s time to populate it with data. Add one account to the primary value and another to the secondary value. Additionally, include a measure (and a version if you’re not working with measures restricted on the version).

Step 3: We can now create color thresholds (Conditional formatting) against the account on the secondary value. This will allow us to visually highlight important points, which is the comparison of actuals vs budget.

Step 4: If we want to take it a step further and personalize its appearance, we can edit the CSS style. To do so, follow the steps below:

  • Click on the paintbrush icon located under Global Settings. This will open up the CSS page.

  • Copy the following code snippet:
.chart .sap-custom-number-chart-secondary-values {
    color: #58595b;
}
  • Paste the code into the CSS Class Name field. Remember to set chart as the widget to receive the formatting.

Step 5: To ensure that our CSS customization is applied to the chart, we need to add the chart class to the CSS Class Name field in the Styling panel. Here’s an example of how to do it:

  1. With the widget selected.
  2. Locate the CSS Class Name field in the Styling panel.
  3. Enter “chart” as the CSS class name and hit enter.

Step 6: You can now save your story and switch to view mode to see how the new styling has been applied.

The other formatting you see on this widget is simply cosmetic changes such as borders and font size to make it look more presentable.

I hope you found this example helpful. If you have any questions or suggestions, please leave a comment below.

Thanks for reading, and see you next time!

Jorge Rocha

Ver este artigo em Português Brasileiro