Javascript formatar dados como moeda para o HTML pandas?

[Swalls]

Senhores, estava eu fazendo um trabalho em pandas (python) e surgiu a necessidade de criar um sistema de relatório (tabelas do pandas to_html) para HTML.

Porém, há valores do tipo moeda que ficam como texto, dificultando a leitura.

 

Para resolver isso tentei usar o jinja2, mas não consigo acertar o template, esse é o básico que fiz.

os valores que devem ser convertido para moedas estão na classe class="table_pandas"

 

<div class="invest">
    <details>
        <summary class="invest-summary">{{ key }}</summary>
        <div class="the-summary-content">
        {{ data | safe }}
        </div>
    </details>
</div>

 

[DiF]

@Swalls Boa tarde,   Não sei qual é a varíavel responsável pelo valor da moeda vendo seu código,  mas,  você primeiro precisa conseguir armazenar o valor monetário que quer formatar.

 

E então usar o Intl.NumberFormat  

 

Exemplo:

const price = 14340;

//Formata o preço acima para Real Brasileiro, usando a localização, estilo e moeda
let PTbrReal = new Intl.NumberFormat('pt-BR', {
    style: 'currency',
    currency: 'BRL'
});

console.log(`A versão formatada de ${price} é ${PTbrReal.format(price)}`);
//A versão formatada de 14340 é R$ 14.340,00

 

Tem outros modos, por exemplo usando o:

Number.ToFixed()

Number.ToPrecision()

formatMoney()

numberToCurrency()

 

Porém, eu gosto bastante da solução apresentada a cima do código, pois permite criar diversas "localizações"

 

Não sei se era isso que você procurava. Pois você está usando Python, e a solução é em javascript.

[Swalls]

@DiF Boa tarde mestre DIF,

essa é minha dúvida, o to_html do pandas(python) já gera o html. Mesmo eu usando jinja2 para incluir um css e js, eu não sei como instanciar esses valores do html no js ou mesmo editar a visualização deles. (ou qualquer outra forma melhor de fazer).

Ex do html de tabela gerado:

 

<thead>
  <tr class="random_row">
    <th>Random Date</th>
    <th>Random Flux Flow</th>
    <th>Random Flux Flow A</th>
    <th>Random Flux Flow B</th>
    <th>Random Flux 12345</th>
    <th>Random Flux XYZ</th>
    <th>Random Flux ABC</th>
    <th>Random Flux DEF</th>
    <th>Random Flux GHI</th>
    <th>Random Flux JKL</th>
    <th>Random Flux MNO</th>
  </tr>
</thead>
<tbody>
  <tr class="random_row">
    <td class="random_cell">2022-12-30</td>
    <td class="random_cell">334213.60</td>
    <td class="random_cell">21340.28</td>
    <td class="random_cell">5072323424</td>
    <td class="random_cell">423494.72</td>
    <td class="random_cell">5242727.68</td>
    <td class="random_cell">523493</td>
    
...

 

[DiF]

@Swalls Você consegue manipular a saída da tabela gerada?

 O ideal é que você consiga incluir uma class diferenciada  para os valores monetários.  

 

Se conseguir por exemplo gerar a tabela desta forma:

 

<tbody>
  <tr class="random_row">
    <td class="random_cell">2022-12-30</td>
    <td class="random_cell currency">334213.60</td>
    <td class="random_cell currency">21340.28</td>
    <td class="random_cell currency">5072323424</td>
    <td class="random_cell currency">423494.72</td>
    <td class="random_cell currency">5242727.68</td>
    <td class="random_cell currency">523493</td>

Então você poderá fazer desta forma:

 

document.querySelectorAll('.currency').forEach(cell => {
            const value = parseFloat(cell.textContent);
            const PTbrReal = new Intl.NumberFormat('pt-BR', { 
            style: 'currency', 
            currency: 'BRL' }).format(value);
  
            cell.textContent = PTbrReal;
        });

 

Aqui tem um exemplo online:  https://jsfiddle.net/dife/436jry7z/

[Swalls]

Não consegui fazer uma formatação como eu queria, que era usando o currency do js, mas consegui algo próximo em python, bastou criar uma copia do dataframe e, em seguida, fazer isso:

Obviamente eu passei de Decimal para string, o que é errado, mas foi a única forma que achei até o momento. (não sou muito habituado ao pandas)
 

# definindo colunas que não devem formatar
columns_to_format = df.columns.difference(["Data"])

#formatando
for coluna in columns_to_format:
	df[coluna] = df[coluna].map('R$ {:,.2f}'.format) #formatação meio xula para pelo menos parecer moeda.

	#infelizmente nessa parte, há um futurewarning, porém eu não sei dizer o motivo.
	saldo_final[coluna] = saldo_final[coluna].map('R$ {:,.2f}'.format)

 

[DiF]

@Swalls Pode não ser a ideal, mas pelo menos você conseguiu uma alternativa válida.

 

Mas voltando a pergunta anterior,  é possível manipular a saída gerada?  Se você conseguir aplicar uma class apenas nas <td>  onde contém o valor monetário,  provavelmente você poderia aplicar a solução em javascript.  Pelo menos se for a saída em html, com javascript você consegue "manipular" e formatar.    Mas claro,  se conseguir fazer diretamente no python acredito que seria melhor mesmo.

[Swalls]

@DiF Não lí muito a lib do método to_html(), mas pelo que sei ele permite apenas dar nome de classe à tabela e não a seus valores, como:

pd.to_html(index=False, classes='nome_da_classe_aqui')

 

tentei fazer com replace também (depois de gerar com to_html() ), mas isso iria ser aplicado as  datas e qualquer outros valores, como TIR, %, etc.., que usam a mesma tag HTML.

[DiF]

@Swalls

29 minutos atrás, Swalls disse:

mas pelo que sei ele permite apenas dar nome de classe à tabela e não a seus valores

Se realmente conseguir dar nome as classes,   então você poderá usar o método que eu passei.  Porque aí, você iria estar manipulando a parte do cliente, o front-end. 

 

Acredito que aqui você possa encontrar uma maneira de "manipular" a renderização da tabela, criando classes especificas.

https://pandas.pydata.org/docs/reference/api/pandas.io.formats.style.Styler.set_td_classes.html

 

No caso, se você apenas conseguir adicionar class  nas <td> onde contém o valor que quer formatar,  aí você pode usar o código do post #04     

 

Basicamente isto:

document.querySelectorAll('.currency').forEach(cell => {

 é um array function,  onde usa a função foreach para iterar todos os elementos que contém a classe   " .currency" .  Então ele varre a tabela em busca destas classes, e pega o valor em texto,  converte para número usando a função parseFloat(),  faz a formatação e insere no elemento. 

Acredito que a chave da solução seja conseguir manipular a renderização da tabela e usar o javascript(caso realmente possa usar javascrip), se não puder, talvez a solução que você encontrou seja boa