import { Meta } from '@storybook/addon-docs/blocks';


<Meta title="Style/Format" />

# Format

## Number format

*   Use of \[space] for [internationally recommended](https://en.wikipedia.org/wiki/Decimal_separator) thousands separators. No comma or point, as these are reserved for use as the decimal sign.
*   Numbers whose magnitude is less than 1, the decimal sign should be preceded by a zero.

## Date format

### Code Description

| Code | Description                                | Example |
| ---- | ------------------------------------------ | ------- |
| YYYY | Year on 4 digits                           | 2021    |
| EEE  | Weekday on 3 letters, first with uppercase | "Mon"   |
| DD   | Day of the month with leading zero         | 08      |
| MM   | Numerical month with leading zero          | 07      |
| MMM  | Month abbreviation on 3 letters uppercase  | "Jul"   |
| HH   | Hour \[0-23]                                | 13      |
| mm   | Minute with leading zero                   | 05      |
| ss   | Second with leading zero                   | 06      |

### Format list

| Alias   | code                     | Example                  | Length | Context                                                |
| ------- | ------------------------ | ------------------------ | ------ | ------------------------------------------------------ |
| Short#1 | DD MMM                   | 20 Jul                   | 5      | Chart time axis                                        |
| Short#2 | DDMMM HH:mm              | 20Jul 09:00              | 11     | Limited space, year not needed                         |
| Short#3 | YYYY-MM-DD               | 2020-07-20               | 10     | Tables                                                 |
| Mid#1   | DD MMM HH:mm             | 20 Jul 09:00             | 12     | Chart Axis ticks                                       |
| Mid#2   | DD MMM HH:mm:ss          | 20 Jul 09:00:00          | 15     | Chart Tooltip title                                    |
| Mid#3   | YYYY-MM-DD HH:mm         | 2020-07-20 09:00         | 16     | Tables (creation/modification dates)                   |
| Mid#4   | YYYY-MM-DD HH:mm:ss      | 2020-07-20 09:00:00      | 19     | When the seconds are needed                            |
| Full#1  | EEE MMM DD YYYY HH:mm:ss | Mon Jul 20 2020 09:00:00 | 24     | When a lot of space (hover) - When precision is needed |

### Remarks:

*   **Lato** (the font used in the GUI) is a Monospaced font for the numbers, but not for the letters.
    Avoid using formats with **letters** for Date in Tables.
*   For having consistent length and alignment, and to prevent mistakes, all the formats are with **leading zeros** (2020-07-20 09:00 instead of 2020-7-20 9:00).
*   These formats are applicable for the English language.