5
respostas

Sobrescrever numeral js do angular

Ola,

Estou com um problema, no meu projeto preciso alterar o modo como é apresentado as abreviaturas dos numerais da biblioteca numeral js. Se eu for na pasta node_modules procurar a biblioteca e alterar o codigo.

(function (global, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['../numeral'], factory);
    } else if (typeof module === 'object' && module.exports) {
        factory(require('../numeral'));
    } else {
        factory(global.numeral);
    }
}(this, function (numeral) {
    numeral.register('locale', 'pt-br', {
        delimiters: {
            thousands: '.',
            decimal: ','
        },
        abbreviations: {
            thousand: 'mil',
            million: 'mi',
            billion: 'bi',
            trillion: 'tri'
        },
        ordinal: function (number) {
            return 'º';
        },
        currency: {
            symbol: 'R$'
        }
    });
}));

funciona perfeitamente, o problema que essa mudanca não sobe para o svn e qd outra maquina baixa e faz o npm install ele vai baixa tudo de novo, entao só minha maquina fica com essa alteração.

Eu gostaria de no meu codigo sobreescreve essa funcao para td vez que puxa o projeto ele já deixa a abreviatura do jeito que quero qd baixa a biblioteca numeral js.

Alguem pode me ajudar?

5 respostas

Oi Gustavo,

Pelo que vi da biblioteca aqui. Em qualquer lugar que você tiver acesso a esse objeto numeral. Você pode escrever esse trecho do código que postou

numeral.register('locale', 'pt-br', {
        delimiters: {
            thousands: '.',
            decimal: ','
        },
        abbreviations: {
            thousand: 'mil',
            million: 'mi',
            billion: 'bi',
            trillion: 'tri'
        },
        ordinal: function (number) {
            return 'º';
        },
        currency: {
            symbol: 'R$'
        }
    });

Assim não precisa escrever dentro do código da biblioteca, na pasta node_modules. Se vc estiver adicionando essa biblioteca com uma tag <script>. Esse objeto numeral estará disponível no escopo global do JavaScript.

Como no Angular estaremos mexendo com módulos em TypeScript, não dá pra sair usando essas variáveis globais sem antes declarar elas. Para declarar elas, no topo do seu código onde quer acessar esse objeto, depois de todos os import, declare que esse numeral existe, assim:

declare var numeral:any

Depois disso, pode mandar bala e escrever o código que registra o locale.

Abraço,

Artur

Não consegui fazer funcionar, meu numeral.pipe.ts que esta utilizando a biblioteca esta assim:

import { Pipe, PipeTransform } from '@angular/core';
import { MomentPipe } from './moment.pipe';

import * as numeral from 'numeral';
require('numeral/locales/pt-br');

@Pipe({
    name: 'numeral'
})

// modificado o arquivo do numeral js(pt-br.js) nos valores dos números "reduzidos"(milhões pra mi,etc)
export class NumeralPipe implements PipeTransform {

    constructor(private momentPipe: MomentPipe) {
        numeral.options.currentLocale = 'pt-br';

    }

    // args[0]: true ou false para parametro short
    transform(value: any, args?: boolean): any {
        if (value === 0) {
            return 0;
        }
        if (value) {
            if (typeof value === 'number') {
                if (args) {
                    if (((value + '').indexOf('.')) >= 0) {// possui ponto?
                        return numeral(value).format('$0.00a');
                    } else {// não possui ponto
                        return value < 1000 ? value : numeral(value).format('$0.00a');
                    }

                } else {
                    if (((value + '').indexOf('.')) >= 0) {// possui ponto?
                        return numeral(value).format('$0,0.00');
                    } else {// não possui ponto
                        return numeral(value).format('0,0');
                    }
                }
            } else if (value.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)) {
                return this.momentPipe.transform(value, 'YYYY-MM-DD', 'DD/MM/YYYY');
            } else {
                return value;
            }
        }
    }

}

Como devo proceder?

Oi Gustavo,

como vc já está fazendo o import do numeral não é necessário fazer a declaração mesmo :)

O que não vejo no seu código é o código que registra o locale pt-br. Na verdade vejo que está fazendo isso:

require('numeral/locales/pt-br');

Já que você tem acesso ao numeral será que colocar o register no lugar do require não funciona? O código ficaria assim:

import { Pipe, PipeTransform } from '@angular/core';
import { MomentPipe } from './moment.pipe';

import * as numeral from 'numeral';
numeral.register('locale', 'pt-br', {
        delimiters: {
            thousands: '.',
            decimal: ','
        },
        abbreviations: {
            thousand: 'mil',
            million: 'mi',
            billion: 'bi',
            trillion: 'tri'
        },
        ordinal: function (number) {
            return 'º';
        },
        currency: {
            symbol: 'R$'
        }
    });

@Pipe({
    name: 'numeral'
})

// modificado o arquivo do numeral js(pt-br.js) nos valores dos números "reduzidos"(milhões pra mi,etc)
export class NumeralPipe implements PipeTransform {

    constructor(private momentPipe: MomentPipe) {
        numeral.options.currentLocale = 'pt-br';

    }

    // args[0]: true ou false para parametro short
    transform(value: any, args?: boolean): any {
        if (value === 0) {
            return 0;
        }
        if (value) {
            if (typeof value === 'number') {
                if (args) {
                    if (((value + '').indexOf('.')) >= 0) {// possui ponto?
                        return numeral(value).format('$0.00a');
                    } else {// não possui ponto
                        return value < 1000 ? value : numeral(value).format('$0.00a');
                    }

                } else {
                    if (((value + '').indexOf('.')) >= 0) {// possui ponto?
                        return numeral(value).format('$0,0.00');
                    } else {// não possui ponto
                        return numeral(value).format('0,0');
                    }
                }
            } else if (value.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)) {
                return this.momentPipe.transform(value, 'YYYY-MM-DD', 'DD/MM/YYYY');
            } else {
                return value;
            }
        }
    }

}

Conta pra gente se funcionou :). Qualquer coisa pensamos em outras coisas.

Fazendo o q vc orientou ele começa a pegar o padrão do numeraljs.

O codigo q vc disse q nao viu onde registra o locale pt-br esta no construtor

constructor(private momentPipe: MomentPipe) {
        numeral.options.currentLocale = 'pt-br';
    }

e ae ele pega o pt-br la no arquivo que abri esse post que fica dentro da biblioteca.

Na verdade esse projeto e codificação é de outra pessoa que agora estou responsável.

Oi Gustavo,

você chegou a executar o register após importar o numeraljs mas mantendo também esse código do currentLocale no construtor? Ou conseguiu resolver o problema de algum outro jeito nesse tempo?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software