ARTESCA-14587: new line time serie chart component

package.json

@@ -124,6 +124,7 @@
     "react-virtualized": "9.22.3",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.6",
+    "recharts": "^2.15.1",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",
     "vega": "^5.17.3",

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 <></>;
   }