ARTESCA-14587: Add new dateformate for chart xaxis tick and chart tooltip title

Author: ChengYanJin

src/lib/components/date/FormattedDateTime.spec.tsx

@@ -214,4 +214,28 @@ describe('FormatttedDateTime', () => {
     //V
     expect(screen.getByText('2022-12-12 11:57:26')).toBeInTheDocument();
   });
+
+  it('should display the date in the expected format of the xaxis tick in the chart', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="day-month-abbreviated-hour-minute"
+        value={new Date('2022-10-06T18:33:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('6 Oct 18:33')).toBeInTheDocument();
+  });
+
+  it('should display the date in the expected format of date in the chart', () => {
+    //S
+    render(
+      <FormattedDateTime
+        format="day-month-abbreviated-hour-minute-second"
+        value={new Date('2022-10-06T18:33:00Z')}
+      />,
+    );
+    //V
+    expect(screen.getByText('6 Oct 18:33:00')).toBeInTheDocument();
+  });
 });

src/lib/components/date/FormattedDateTime.tsx

@@ -21,14 +21,36 @@ export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
   minute: '2-digit',
 });
 
+export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
+  'en-GB',
+  {
+    day: 'numeric',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  },
+);
+
+export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
+  day: 'numeric',
+  month: 'short',
+  hour: '2-digit',
+  minute: '2-digit',
+  hour12: false,
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
     | 'date-time'
     | 'date-time-second'
     | 'time'
     | 'time-second'
-    | 'relative';
+    | 'relative'
+    | 'day-month-abbreviated-hour-minute'
+    | 'day-month-abbreviated-hour-minute-second';
   value: Date;
 };
 
@@ -143,7 +165,19 @@ export const FormattedDateTime = ({
           few seconds ago
         </Tooltip>
       );
-    //TO FINISH
+    case 'day-month-abbreviated-hour-minute':
+      return (
+        <>{DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value).replace(',', '')}</>
+      );
+    case 'day-month-abbreviated-hour-minute-second':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(
+            ',',
+            '',
+          )}
+        </>
+      );
     default:
       return <></>;
   }

stories/format.mdx

@@ -32,8 +32,10 @@ import { Meta } from '@storybook/blocks';
 | 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   | YYYY-MM-DD HH:mm         | 2020-07-20 09:00         | 16     | Tables (creation/modification dates)                   |
-| Mid#2   | YYYY-MM-DD HH:mm:ss      | 2020-07-20 09:00:00      | 19     | When the seconds are needed                            |
+| 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: