CDF has a default library to format numbers i.e. cdo.NumberFormat and other to format dates i.e. moment
In CDF we provide the function Utils.numberFormat to format numbers with a given mask using the dashboard default language or optionally with a specific language.
The mask syntax is mostly compatible with VB's format function mask syntax, only the number related subset is relevant.
Other elements of this mask syntax are 'C' or 'Currency' and 'A' or 'Abbreviation' to insert the currency symbol and abbreviate the number.
require(['cdf/dashboard/Utils'], function(Utils) {
Utils.numberFormat(1200, '0,#.0'); // -> "1,200.0"
Utils.numberFormat(1200, '0,0.#'); // -> "1,200"
Utils.numberFormat(1200.46, '0,0.#'); // -> "1,200.5"
Utils.numberFormat(5480, '0.00 Abbreviation'); // -> "5,49 k"
Utils.numberFormat(5480000, '0.00A'); // -> "5,49m"
Utils.numberFormat(5480000000, '0.00A'); // -> "5,49b"
Utils.numberFormat(5480000000000, '0.00A'); // -> "5,49t"
Utils.numberFormat(4500.64, '0,0.0\u00a4'); // -> "4,500.6$"
Utils.numberFormat(4500000.64, '0,0.0 Currency'); // -> "4,500,000.6 $"
Utils.numberFormat(4500.64, 'C 0,0.0'); // -> "$ 4,500.6"
Utils.numberFormat(0.2, '0.00%'); // -> "20.00%"
Utils.numberFormat(1200, '0.0e00'); // -> "1.2e03"
Utils.numberFormat(4500000, '0.0AC'); // -> "4.5m$"
});
require(['cdf/dashboard/Utils'], function(Utils) {
Utils.numberFormat(4500.64, '0.0,0 C', 'pt-pt'); // -> "4.500,6 €"
Utils.numberFormat(4500.64, 'C 0,0.0', 'en-gb'); // -> "£ 4,500.6"
Utils.numberFormat(4500.64, 'C 0,0.0', 'xx-zz'); // -> "$ 4,500.6" *Fallback to the default 'en-us'*
});
Similar to number format, here we provide the function Utils.dateFormat to format a date with a given mask.
For a detailed list of examples on how to use moment click here.
The mask syntax is explained in detail here.
To add more languages to moment you can do two things:
require(['cdf/dashboard/Utils', 'cdf/lib/moment'], function(Utils, moment) {
Utils.dateFormat(moment(), 'DD/MM/YY'); // -> "18/02/15"
Utils.dateFormat(new Date(), 'dddd Do MMMM YYYY'); // -> "Wednesday 18th February 2015"
Utils.dateFormat(Utils.dateParse('13-08-1983', 'DD-MM-YYYY'), 'D MMM, YYYY'); // -> "13 Aug, 1983"
Utils.dateFormat(null, 'dddd Do MMMM YYYY'); // -> Invalid Date
});
require(['cdf/dashboard/Utils'], function(Utils) {
Utils.dateFormat(new Date(), 'dddd Do MMMM YYYY', 'en-us'); // -> "Wednesday 18th February 2015"
Utils.dateFormat(new Date(), 'dddd Do MMMM YYYY', 'pt-pt'); // -> "quarta-feira 18º fevereiro 2015"
Utils.dateFormat(new Date(), 'dddd Do MMMM YYYY', 'xx-zz'); // -> "Wednesday 18th February 2015"
// *Fallback to the default 'en-us'*
});
As in the previous section, here we provide the function Utils.dateParse to parse a date with a given mask/format.
This function will always return a Date object containing the parsed date.
require(['cdf/dashboard/Utils'], function(Utils) {
Utils.dateParse("Wednesday, February 18, 2015 12:00 AM", 'LLLL'); // -> Wed Feb 18 2015 00:00:00 GMT+0000 (WET)
Utils.dateParse('13-08-1983', 'DD-MM-YYYY'); // -> Sat Aug 13 1983 00:00:00 GMT+0100 (WEST)
Utils.dateParse(null, 'dddd Do MMMM YYYY'); // -> Invalid Date
});
To configure a new or existing language you can use the function Utils.configLanguage by specifying the language code and a configuration object with the keywords:
require(['cdf/dashboard/Utils'], function(Utils) {
Utils.configLanguage('foo-bar', {
number: {
mask: '#,0.##',
style: {
integerPad: '0',
fractionPad: '0',
decimal: ',',
group: ' ',
groupSizes: [3],
abbreviations: ['k','m', 'b', 't'],
negativeSign: '-',
currency: 'F'
}
}
});
});
require(['cdf/dashboard/Utils'], function(Utils) {
Utils.configLanguage('foo-bar', {
dateLocale: {
months: [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
],
monthsShort: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]
}
});
});
require(['cdf/dashboard/Utils'], function(Utils) {
Utils.configLanguage('foo-bar', {
number: {
mask: '#,0.##',
style: {
integerPad: '0',
fractionPad: '0',
decimal: ',',
group: ' ',
groupSizes: [3],
abbreviations: ['k','m', 'b', 't'],
negativeSign: '-',
currency: 'F'
}
},
dateLocale: {
months: [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
],
monthsShort: [
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
]
}
});
});