Configuring number, date, and time formatting in legacy views
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 | Sunday-based weekday as a decimal number. | 5 | [0,6] |
%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 | Monday-based week of the year as a decimal number. | 10 | [00,53] |
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 |