convert locale format back to default with numeral.js - numeral.js

I'm storing the number and currency formats in the default numeral js format. I allow the user to have their own formatting based on their locale setting. I'm trying to figure out how I can convert their custom formatting back to the default formatting in order to store it consistently and in case they change locale.
for example the current is set:
numeral.register('locale', 'fr', {
delimiters: {
thousands: '.',
decimal: ','
},
abbreviations: {
thousand: 'k',
million: 'm',
billion: 'b',
trillion: 't'
},
ordinal : function (number) {
return number === 1 ? 'er' : 'ème';
},
currency: {
symbol: '€'
}
});
When I get '0.0,00€' back as preferred formatting, how can I convert is back to the default numeral.js setting being '0,0.00$' for storage.

You can simply switch between locals by setting the local with numeral.local('en'). You could use a litte helper function to do that for you. You would just have to pass it the desired local and maybe your current numeral you need to be switched.
Here is an example doing exactly that. I have also added money.js to convert between currencies.
I'm sure you will get the idea.
var yourNumeral = numeral(1234.56);
// helper fn to switch local and convert.
function switchLocal(local, num, convert) {
numeral.locale(local);
num.set(fx.convert(num.value(), convert));
return num.format();
}
// set money.js base and rates
fx.base = "EUR";
fx.rates = {
"USD" : 1.0873 // eg. 1 EUR === 1.0873 USD
};
// set default format.
numeral.defaultFormat('0,0[.]00 $');
// load a locale.
numeral.register('locale', 'fr', {
delimiters: {
thousands: ' ',
decimal: ','
},
abbreviations: {
thousand: 'k',
million: 'm',
billion: 'b',
trillion: 't'
},
ordinal : function (number) {
return number === 1 ? 'er' : 'ème';
},
currency: {
symbol: '€'
}
});
// set the loaded local.
numeral.locale('fr');
// yourNumeral with loaded local "fr".
console.log(yourNumeral.format());
// yourNumeral switched local to "en" and converted from € to $.
console.log(switchLocal('en', yourNumeral, { from: "EUR", to: "USD" }));
// yourNumeral switched back to "fr" local and converted back to € from $.
console.log(switchLocal('fr', yourNumeral, { from: "USD", to: "EUR" }));
<script src="https://openexchangerates.github.io/money.js/money.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

Related

Validate delimiter separated values using JOI

I have a use case where I need to validate a set of values separated by | .
I followed https://github.com/hapijs/joi/issues/570 but it throws a number of errors.
Is there any way I can do this?
Example- AA|BB|CC|DD
Now, I need to validate that all of the values (AA, BB, CC, DD) are strings.
I believe I can't use regex as it would validate just the first value.
Also, there are a number of other validations in my code, so I don't wish to loop the validation process.
Please let me know if I'm unclear. Thanks!
TL;DR:
const Joi = require('joi').extend(joi => ({
base: joi.array(),
coerce: (value, helpers) => ({
value: value.split ? value.split('|') : value,
}),
type: 'versionArray',
}))
The .extend function signature has changed since that comment was written; the name property has been removed and the CoerceFunction should return an object with value as the property.
> Joi.versionArray().validate('AA|BB|CC|DD')
{ value: [ 'AA', 'BB', 'CC', 'DD' ] }
> Joi.versionArray().validate('AA|BB,CC|DD')
{ value: [ 'AA', 'BB,CC', 'DD' ] }
From here on, you can use the .items(...) function to validate each of the strings in the returned array:
> const regex = new RegExp('^[a-zA-Z]+$') // every character must be a-z or A-Z
undefined
> Joi.versionArray().items(Joi.string().regex(regex)).validate('AA|BB|CC|DD')
{ value: [ 'AA', 'BB', 'CC', 'DD' ] }
> Joi.versionArray().items(Joi.string().regex(regex)).validate('AA|BB|CC|00')
{ value: [ 'AA', 'BB', 'CC', '00' ],
error:
{ ValidationError: "[3]" with value "00" fails to match the required pattern: /^[a-zA-Z]+$/ _original: 'AA|BB|CC|00', details: [ [Object] ] } }
> Joi.versionArray().items(Joi.string().regex(regex)).validate('AA|BB,CC|DD')
{ value: [ 'AA', 'BB,CC', 'DD' ],
error:
{ ValidationError: "[1]" with value "BB,CC" fails to match the required pattern: /^[a-zA-Z]+$/ _original: 'AA|BB,CC|DD', details: [ [Object] ] } }

bootstrap-typeahead's displayfield using multiple values

I'm sorry if this is a duplicate question but I do not understand the answers of other people. I'm using Twitter Bootstrap Ajax Typeahead Plugin (https://github.com/biggora/bootstrap-ajax-typeahead/) to search emails from data that comes from an SQL query. This is the code I use with a php file, where I use people's emails as valueField and people's names as displayField and it works well.
inputSearch.typeahead({
ajax: {
url: urlAjax + '?requete=rechercheannuaire',
displayField: "description",
valueField: "id",
triggerLength: 2,
method: "get",
loadingClass: "loading-circle",
preProcess: function(data){
if(data.type === "error")
{
return false;
}
return data.datas;
}
},
onSelect: function(data){
//alert("assez tot");
data.text = data.value;
//console.log(data);
$("#chercherinvite").val(data.text);
return data;
}
});
The problem is that I have to be able to search "Dujardin" as well as "Du Jardin" and I cannot find a way to assign multiple values to displayField. If someone could explain how typeahead works, I'd be thankfull, I don't understand the documentation.
According to the plugin documentation, you cannot assign multiple values to the displayField option. However, it is possible for you to re-write events.
After a quick lookup into the source code of bootstrap-ajax-typeahead, we can figure out that the "matcher" event is used as the filter for displaying - or not - values to the user.
To allow to match both "Du jardin" and "Dujardin", we have to manipulate strings. Here, I suggest you to :
Remove any diacritic character
Remove any non-word character (all except [A-Za-z0-9_])
Remove any underscore
Set the string to lowercase
To do #1, I suggest you to use this fantastic script by rdllopes.
I wrote a POC. Here is the JSON source (called "source.json"):
[
{ "id": 1, "name": "jdupont#example.com - Jean Du Pont"},
{ "id": 2, "name": "jdupont2#example.com - Jean Dupont"},
{ "id": 3, "name": "jdupont3#example.com - Jéan Dupônt"},
{ "id": 4, "name": "mbridge#example.com - Michel Bridge"}
]
And here is the script that I used for matching elements :
$('#search').typeahead({
// Our source is a simple JSON file
ajax: 'source.json',
// Display field is a list of names
displayField: 'name',
// And value field a list of IDs
valueField: 'id',
matcher: function(item)
{
// For both needle and haystack, we :
// 1. Remove any diacritic character
// 2. Remove any non-word character (all except [A-Za-z0-9_])
// 3. Remove any underscore
// 4. Set the string to lowercase
var needle = removeDiacritics(this.query).replace(/[^\w]/gi, '').replace('_', '').toLowerCase();
var haystack = removeDiacritics(item).replace(/[^\w]/gi, '').replace('_', '').toLowerCase();
// Does the needle exists in haystack?
return ~haystack.indexOf(needle);
}
});

JqGrid custom formatter with custom parameter

I have a question about custom formatters.
What I try to achieve is a currencyFormatter just for the amount with Locale sent by the server, when locale is not define or supported fall back to British English.
Something like this:
function currencyFmatter(cellvalue, options, rowdata) {
return new Intl.NumberFormat([locale, "en-GB"], {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(cellvalue);
}
My problem is how to pass my variable locale to the formatter, I’m pretty sure it has to be a way to do it but right now I don’t see it.
Thanks
It's an interesting question! There are many ways to implement your requirements.
1) you can extend your input data returned from the server with additional information which specify the locale of data. For example you can returns "de-DE:10.000,04" instead of "10.000,04" which represent 1000.04 formatted in German locale (where , will be used as the decimal separator and . used as the thousands separator). It allows you to use cellvalue.split(":") to get array ["de-DE", "10.000,04"] with the locale of the number and the number itself
function currencyFmatter(cellvalue, options, rowdata) {
var data;
if (typeof cellvalue === "string") {
data = cellvalue.cellvalue.split(":");
if (data.length === 2) {
return new Intl.NumberFormat([data[0], "en-GB"], {
minimumFractionDigits: 2,
maximumFractionDigits: 2
}).format(data[1]);
}
}
return cellvalue;
}
Alternatively you can place the information about locale of the number in separate field (for example numLocale) of the input data and use something like rowdata.numLocale (or rowdata[12] depend on the input format of the JSON data) to access the locale.
2) It could be that all the data returned from the server will be in the same format. In the case it would be not the best way to prepend all numbers with the same prefix "de-DE:". What you can do for example is to extend the data returned from the server with additional field. For example you can use
{
"total": "12",
"page": "1",
"records": "12345",
"localOfNumbers": "de-DE",
"rows" : [
...
]
}
You can access the custom localOfNumbers field inside of beforeProcessing callback. It's very practical callback. It allows you to pre-process the data returned from the server before the data will be processed by jqGrid. I recommend you to read the answer and this one for more code example. What you can do for example is to save localOfNumbers value in some new option of jqGrid (see the answer for more details). Let us you want to have an option gridLocale for the goal. Then you can do something like the following:
beforeProcessing: function (data) {
if (typeof data.localOfNumbers === "string") {
$(this).jqGrid("setGridParam", {gridLocale: data.localOfNumbers});
}
}
To access the new gridLocale option you can use
function currencyFmatter(cellvalue, options, rowdata) {
var locale = $(this).jqGrid("getGridParam", "gridLocale"); // this.p.gridLocale
}
3) You can consider to save the information about the locale as column property instead of usage one common gridLocale grid option. To do this you can define the column in colModel like below
{ name: 'col2', width: 200, formatoptions: { colLocale: "en-IN" },
formatter: function (cellvalue, options, rowdata) {
// options.colModel.formatoptions.colLocale get you the value
}
One can set the property of formatoptions.colLocale inside of beforeProcessing too. You can use
{
"total": "12",
"page": "1",
"records": "12345",
"localOfColumns": {
"col2": "de-DE",
"col5": "en-IN"
},
"rows" : [
...
]
}
and
beforeProcessing: function (data) {
if ($.isPlainObject(data.localOfColumns)) {
if (typeof data.localOfColumns.col2 === "string") {
$(this).jqGrid("setColProp", "col2", {
formatoptions: { colLocale: data.localOfColumns.col2 }
});
}
if (typeof data.localOfColumns.col5 === "string") {
$(this).jqGrid("setColProp", "col5", {
formatoptions: { colLocale: data.localOfColumns.col5 }
});
}
}
}
I'm sure that one can suggest even more ways to implement your requirements.

Does the datatable currency formatter support localisation in YUI2(.9)

When attempting to save a information from a datatable in share, I have a problem with the french locale for numbers that are in view in that when I save, the numbers are saved as displayed in view (i.e. commas instead of periods to denote the decimal places).
parent.widgets.pagingDataTable = new Alfresco.util.DataTable({
dataTable: {
container: parent.id + "-datatable",
columnDefinitions: columnDefinitions,
config: {
MSG_EMPTY: parent._msg("message.noProducts"),
responseType: YAHOO.util.DataSource.TYPE_JSON,
responseSchema: {
resultsList: "productList",
fields: ["photo", "unitQuantity", "minQuantity", "unitPrice", "descriptionProduct"],
},
currencyOptions: {suffix: '€', decimalPlaces: 2, decimalSeparator: ',', thousandsSeparator: '.'},
}
}
Has anyone had this issue with currency formatter and localization in YUI 2.

DataTables sort currency

Please help with live example, how to sort currency in format "34 566.00 ek." in DataTables script.
Here is JSFiddle example: http://jsfiddle.net/HEDvf/643/
$('#example').dataTable({
"aoColumns": [
null,
],
"aaSorting": [[ 0, "desc" ]],
"bStateSave": false,
"iDisplayLength": 50,
});
Have a look at the very extensive datatables documentation. There you will find simple solutions to almost all problems you will ever have with datatables. There are for example little plugin functions to add sorting support for currency columns.
An example based on what you got:
// add sorting methods for currency columns
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"currency-pre": function (a) {
a = (a === "-") ? 0 : a.replace(/[^\d\-\.]/g, "");
return parseFloat(a);
},
"currency-asc": function (a, b) {
return a - b;
},
"currency-desc": function (a, b) {
return b - a;
}
});
// initialize datatable and explicitly set the column type to "currency"
$('#example').dataTable({
"aoColumns": [{"sType": "currency"}],
"aaSorting": [[0, "desc"]],
"bStateSave": false,
"iDisplayLength": 50,
});
Links to the documentation:
Sorting: http://datatables.net/plug-ins/sorting#currency
Datatables is also able to automatically detect column types, but it gets a bit complicated with all the different formattings. Type-detection: http://datatables.net/plug-ins/type-detection#currency
I have no reputation enough to add a command to the answer of #Gigo. So I will post this as a answer.
If you use European currency format, a point '.' is used as thousand separator instead of a comma ','. So the sorting script won't work correctly because 1.000,00 is interpreted as ONE point ZERO
To get this fixed, change the regex to:
/[^\d\-\,]/g
Point changed to comma, now 1.000,00 will be interpreted as ONE THOUSAND point ZERO.
Might be a dirty solution but you can use it to remove number format (,) from the string as well
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"currency-pre": function (a) {
console.log("PRE "+a);
a = (a === "-") ? 0 : a.split(',').join('').replace(/[^\d\-\.]/g, "");
return parseFloat(a);
},
"currency-asc": function (a, b) {
console.log("ASC "+a);
return a - b;
},
"currency-desc": function (a, b) {
console.log("DESC "+a);
return b - a;
}
});

Resources