Docs

Everything You Need to Know

Data Formatting

Use

You can provide formatters different parameters to tell it how to format your data. When doing so, make sure you use double quotes. These are required inside templates because single quotes are always escaped in a template to allow for single quotes in English contractions, etc..

$.formatNumber(number, separator, decimal)

Besides passing in the number to format, you can provide a character to use for indicating thousands. The third argument is the character to represent decimals. The default is thousands separator `,`. Some cultures use `.` for thousands and `,` for decimals. To format a number for Latin America:

$.formatNumber(123456789.24312, ".", ","")
// returns: 123.456.789,24312

If you want to reduce the number of decimals displayed, you can provide the last argument as the number of decimals to show. If the value is 0, it will be rounded of to a whole number.

$.formatNumber(123456789.24312, 2)
// returns: 123,456,789.24
$.formatNumber(123456789.24312, 0)
// returns: 123,456,789

$.sum(array)

This takes an array of numbers and returns their sum:

$.sum([1,2,3,4,5,6,7,8,9,10,11.2])
// returns: 66.2

$.currency(amount, symbol, separator, decimal)

This method takes an amount and formats it as currency, the default is for US dollars. The second parameters is the currency symbol, The third parameter is the thousands separator. The fourth parameter is the decimal separator or rounding number.

$.currency(9123456789.2382, "$")
// returns: $9,123,456,789.24
$.currency(9123456789.99, "€", ",", 0)
// returns: €9,123,456,790

$.formatTime(time)

Using JavaScript, you can get the local time to format:

// Output a data:
const date = new Date()
// returns: Thu Nov 26 2015 16:30:41 GMT-0800 (PST)
date.toLocaleDateString()
// returns: November 26, 2015

// Output time:
date.toLocaleTimeString()
// returns: 4:30:41 PM PST
$.formatTime(date.toLocaleTimeString())
// returns: 4:30 PM

Sorting

ChocolateChip-UI's Model has the sortBy method to sort its contents. But this will not work as expected with dates. Also you may want to sort an array or model of numbers in ascending or descending order.

$.sortDate

This function lets you sort dates. You pass it as the predicate of the sort method on arrays and models:

const today = new Date()
const date_1999 = new Date('October 30, 1999')
const date_1949 = new Date('August 20, 1949')
const date_1980 = new Date('January 1, 1980')

// Sort the dates.
// Pass '$.sortDate' as pedicate for sort method:
[today, date_1999, date_1949, date_1980].sort($.sortDate)
// returns:
1949, August
1980, January
1999, October
2015, November

$.sortNumbers

This method lets you sort numbers in ascending order. It works as the predicate of the Array.sort or Model.sort methods:

const numbers = [5, 4.25, .98, 12.1, 42.98, 9.99, 1, .02, 7.5]

// Sort the numbers in ascending order.
// Pass '$.sortNumbers' as pedicate for sort method:
numbers.sort($.sortNumbers)
// returns: 
.02
.98
1.00
4.25
5.00
7.50
9.99
12.10
42.98

$.sortNumbersDescending

Like $.sortNumbers, you pass this as the predicate of the Array.sort or Model.sort methods:

const numbers = [5, 4.25, .98, 12.1, 42.98, 9.99, 1, .02, 7.5]

// Sort the array in descending order.
// Pass '$.sortNumbersDescending' as pedicate for sort method:
numbers.sort($.sortNumbersDescending)
// returns: 
42.98
12.10
9.99
7.50
5.00
4.25
1.00
.98
.02

Importing Formatting Functions

To use these formatting functions in your app, you'll need to import the formatting file into the app file inside your project's dev folder:

import './src/utils/formatters'

This will make all of the formatting functions available for you to use.