Number, date, and time formatting
Within some components, you're able to configure how your numbers, dates, and times are formatted. These formatting options are based on the d3-format, so are designed to be read my humans.
Number formatting
For an executive view, you might want to give a broad overview of relevant KPIs. Rounding and abbreviating large numbers will help the executive user to quickly grasp the status of a KPI. In contrast, an operational user working with Action Views needs to be aware of the details and the displayed KPIs should be as accurate as possible.
Format | What it does | Before | After |
|---|---|---|---|
"f" | The "f" stands for fixed-point decimal notation, with a default precision of six decimals. | 4223.12345 | 4223.123450 |
".2f" | The ".2" tells the formatter to round to two fixed decimal points. | 4223.1299 | 4223.13 |
",.2f" | The "," option groups thousands using a comma. | 4223.1299 | 4,223.13 |
"$,.2f" | The "$" option adds a localized currency symbol to the number. | 4223.1299 | $4,223.13 |
"r" | The "r" stands for rounded decimal notation, rounded to significant digits. | 4223.123 | 4223.12 |
",r" | The "," option groups thousands using a comma. | 4223.123 | 4,223.12 |
",.2r" | The ".2" tells the formatter to round to two significant digits. | 4223.123 | 4,200 |
"s" | The "s" stands for decimal notation with an SI prefix , rounded to significant digits, by default six significant digits. | 3500 | 3.50000k |
".3s" | The ".3s" will round to 3 significant digits; ".4s" → 4 significant digits, etc. | 3500 | 3.50k |
".3~s" | The "~" sign will trim any trailing insignificant zeros; note you can also use the "~" with all other format types (eg. "~s", "~r", ...) which will always trim insignificant trailing zeros. | 3500 | 3.5k |
Date and time formatting
Different components might require different abstraction levels when it comes to date and time formats. To get a visual overview, e.g. in a chart, you might want to use a broader scale (such as month and year). When displaying comments, your business users might benefit from the exact time a comment was created (such as date and time).
Format | What it does | Example result | Range |
|---|---|---|---|
%y | Year without century as a decimal number. | 20 | [00,99] |
%Y | Year with century as a decimal number. | 2020 | |
%m | Month as a decimal number. | 02 | [01,12] |
%_m | Month as a decimal number without leading zeros. | 2 | [1,12] |
%w | Week as a decimal number. | ||
%d | Zero-padded day of the month as a decimal number. | 08 | [01,31] |
%e | Space-padded day of the month as a decimal number. | 8 | [1,31] |
%H | Hour (24-hour clock) as a decimal number. | 23 | [00,23] |
%h | Hour (12-hour clock) as a decimal number. | 11 | [01,12] |
%q | Quarter number. | 4 | [1,4] |
%p | Either AM or PM. | 8pm | |
%M | Minute as a decimal number. | 23 | [00,59] |
%a | Abbreviated weekday name. | Fri | |
%A | Full weekday name. | Monday | |
%b | Abbreviated month name. | Feb | |
%B | Full month name. | July | |
%W | Week as a number. | 10 | [01,52] |
Some examples to encode the following date and time "2018-04-15 15:22:01"
Format | Result |
|---|---|
"%m/%y" | 04/18 |
"%B %e, %Y" | April 15, 2018 |
"%H:%M" | 15:22 |
"Q%q" | Q2 |