Merge branch 'improvement/chart-date-format' into q/1.0

Author: bert-e

src/lib/components/barchartv2/Barchart.component.test.tsx

@@ -89,9 +89,9 @@ describe('Barchart', () => {
         </Wrapper>,
       );
 
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
+      expect(screen.getByText('06 Jul')).toBeInTheDocument();
+      expect(screen.getByText('07 Jul')).toBeInTheDocument();
     });
     it('should render the Barchart component with error state', async () => {
       const { Wrapper } = getWrapper();
@@ -153,11 +153,11 @@ describe('Barchart', () => {
           </ChartLegendWrapper>
         </Wrapper>,
       );
-      expect(screen.getByText('Wed03Jul')).toBeInTheDocument();
-      expect(screen.getByText('Thu04Jul')).toBeInTheDocument();
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-      expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
+      expect(screen.getByText('03 Jul')).toBeInTheDocument();
+      expect(screen.getByText('04 Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
+      expect(screen.getByText('06 Jul')).toBeInTheDocument();
+      expect(screen.getByText('07 Jul')).toBeInTheDocument();
     });
     it('should render when there are missing data in the time range', async () => {
       const bars = [
@@ -203,10 +203,10 @@ describe('Barchart', () => {
 
       // Check that all days are present
       await waitFor(() => {
-        expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
-        expect(screen.getByText('Mon08Jul')).toBeInTheDocument();
+        expect(screen.getByText('05 Jul')).toBeInTheDocument();
+        expect(screen.getByText('06 Jul')).toBeInTheDocument();
+        expect(screen.getByText('07 Jul')).toBeInTheDocument();
+        expect(screen.getByText('08 Jul')).toBeInTheDocument();
       });
     });
     it('should render for a specific time range', async () => {
@@ -244,13 +244,13 @@ describe('Barchart', () => {
         </Wrapper>,
       );
       await waitFor(() => {
-        expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
-        expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
-        expect(screen.getByText('Mon08Jul')).toBeInTheDocument();
-        expect(screen.getByText('Tue09Jul')).toBeInTheDocument();
-        expect(screen.getByText('Wed10Jul')).toBeInTheDocument();
-        expect(screen.getByText('Thu11Jul')).toBeInTheDocument();
+        expect(screen.getByText('05 Jul')).toBeInTheDocument();
+        expect(screen.getByText('06 Jul')).toBeInTheDocument();
+        expect(screen.getByText('07 Jul')).toBeInTheDocument();
+        expect(screen.getByText('08 Jul')).toBeInTheDocument();
+        expect(screen.getByText('09 Jul')).toBeInTheDocument();
+        expect(screen.getByText('10 Jul')).toBeInTheDocument();
+        expect(screen.getByText('11 Jul')).toBeInTheDocument();
       });
     });
     it('should render the Barchart component with hourly intervals', async () => {
@@ -411,7 +411,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('Fri05Jul 10:00')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
 
     it('should render the CustomTick component with day format', () => {
@@ -435,7 +435,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
     it('should render the CustomTick component with hour format', () => {
       const { Wrapper } = getWrapper();
@@ -458,7 +458,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(screen.getByText('10:00')).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
     it('should render the CustomTick component with minute format', () => {
       const { Wrapper } = getWrapper();
@@ -481,9 +481,7 @@ describe('Barchart', () => {
           />
         </Wrapper>,
       );
-      expect(
-        screen.getByText(new Date('2024-07-05T10:00:00').getTime()),
-      ).toBeInTheDocument();
+      expect(screen.getByText('05 Jul')).toBeInTheDocument();
     });
   });
 });

src/lib/components/barchartv2/Barchart.component.tsx

@@ -3,7 +3,6 @@ import {
   Bar,
   BarChart,
   CartesianGrid,
-  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   TooltipContentProps,
@@ -112,33 +111,19 @@ interface CustomTickProps {
 /* ---------------------------------- COMPONENTS ---------------------------------- */
 
 /**
- * Formats a date based on the interval
- * @param timestamp - Timestamp
- * @param interval - Interval in milliseconds
+ * Get the format of the date based on the duration
+ * @param duration - Duration in milliseconds
  * @returns Formatted string
  */
 export const formatDate = (
-  timestamp: number,
-  interval: number,
-): React.ReactNode => {
-  const date = new Date(timestamp);
-  // More than 24 hours interval - use day and time format
-  if (interval > 24 * 60 * 60 * 1000) {
-    return (
-      <>
-        <FormattedDateTime format="chart-date" value={date} />{' '}
-        <FormattedDateTime format="time" value={date} />
-      </>
-    );
-  } else if (interval === 24 * 60 * 60 * 1000) {
-    // Daily interval - use day format
-    return <FormattedDateTime format="chart-date" value={date} />;
-  } else if (interval >= 60 * 1000) {
-    //Hourly and minute intervals - use minute format
-    return <FormattedDateTime format="time" value={date} />;
+  duration: number,
+): 'time' | 'day-month-abbreviated' | 'chart-long-term-date' => {
+  if (duration <= 24 * 60 * 60 * 1000) {
+    return 'time';
+  } else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+    return 'day-month-abbreviated';
   } else {
-    // minute interval or less - use full timestamp
-    return timestamp;
+    return 'chart-long-term-date';
   }
 };
 
@@ -155,6 +140,11 @@ export const CustomTick = ({
     width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
   const centerX = x - tickWidth / 2;
 
+  const duration =
+    type.type === 'time'
+      ? type.timeRange.endDate.getTime() - type.timeRange.startDate.getTime()
+      : 0;
+
   return (
     <foreignObject
       x={centerX}
@@ -167,9 +157,14 @@ export const CustomTick = ({
         color="textSecondary"
         text={
           <Text variant="Smaller">
-            {type.type === 'time'
-              ? formatDate(payload.value, type.timeRange.interval)
-              : String(payload.value)}
+            {type.type === 'time' ? (
+              <FormattedDateTime
+                format={formatDate(duration)}
+                value={new Date(payload.value)}
+              />
+            ) : (
+              String(payload.value)
+            )}
           </Text>
         }
         centered

src/lib/components/barchartv2/BarchartTooltip.test.tsx

@@ -30,6 +30,7 @@ describe('ChartTooltip', () => {
     longDate: () => screen.queryByText(/01 July 2024/),
     date: () => screen.queryByText(/\b01 Jul\b/),
     time: () => screen.queryByText(/00:00:00/),
+    dateTime: () => screen.queryByText(/01 Jul 00:00:00/),
   };
   it('should render the BarchartTooltip component', () => {
     render(
@@ -89,9 +90,8 @@ describe('ChartTooltip', () => {
     expect(selectors.successValue()).toBeInTheDocument();
     expect(selectors.failed()).toBeInTheDocument();
     expect(selectors.failedValue()).toBeInTheDocument();
-    expect(selectors.date()).not.toBeInTheDocument();
-    expect(selectors.longDate()).toBeInTheDocument();
-    expect(selectors.time()).not.toBeInTheDocument();
+
+    expect(selectors.dateTime()).toBeInTheDocument();
   });
   it('should render time tooltip when type is time and interval is one hour', () => {
     const label = date;

src/lib/components/barchartv2/BarchartTooltip.tsx

@@ -1,19 +1,19 @@
+import { TooltipContentProps } from 'recharts';
+import { LegendShape } from '../chartlegend/ChartLegend';
+import {
+  ChartTooltipContainer,
+  ChartTooltipHeader,
+  ChartTooltipItem,
+  ChartTooltipItemsContainer,
+  TooltipHeader,
+} from '../charttooltip/ChartTooltip';
 import {
   BarchartBars,
   BarchartTooltipFn,
   CategoryType,
   TimeType,
 } from './Barchart.component';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { TooltipContentProps } from 'recharts';
 import { getCurrentPoint } from './utils';
-import {
-  ChartTooltipContainer,
-  ChartTooltipItem,
-  ChartTooltipHeader,
-  ChartTooltipItemsContainer,
-} from '../charttooltip/ChartTooltip';
-import { LegendShape } from '../chartlegend/ChartLegend';
 
 export const BarchartTooltip = <T extends BarchartBars>({
   type,
@@ -40,19 +40,15 @@ export const BarchartTooltip = <T extends BarchartBars>({
   if (tooltip) {
     return tooltip(currentPoint);
   }
-
+  const duration =
+    type.type === 'time'
+      ? type.timeRange.startDate.getTime() - type.timeRange.endDate.getTime()
+      : 0;
   return (
     <ChartTooltipContainer>
       <ChartTooltipHeader>
         {type.type === 'time' ? (
-          <FormattedDateTime
-            format={
-              type.timeRange.interval < 24 * 60 * 60 * 1000
-                ? 'day-month-abbreviated-hour-minute-second'
-                : 'long-date-without-weekday'
-            }
-            value={new Date(currentPoint.category)}
-          />
+          <TooltipHeader duration={duration} value={currentPoint.category} />
         ) : (
           currentPoint.category
         )}

src/lib/components/barchartv2/utils.ts

@@ -1,8 +1,4 @@
-import {
-  BarchartProps,
-  BarchartBars,
-  BarchartTooltipFn,
-} from './Barchart.component';
+import { BarchartProps, BarchartBars } from './Barchart.component';
 import { TooltipContentProps } from 'recharts';
 import { chartColors, ChartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';

src/lib/components/charttooltip/ChartTooltip.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 
 export const ChartTooltipContainer = styled.div`
   border: 1px solid ${({ theme }) => theme.border};
@@ -81,3 +82,42 @@ export const ChartTooltipItemsContainer = styled.div`
   gap: ${spacing.r8};
   width: 100%;
 `;
+
+export const ChartTooltipSeparator = styled.div`
+  height: 1px;
+  background-color: ${({ theme }) => theme.border};
+  margin: ${spacing.r4} 0;
+  width: 100%;
+`;
+
+export type TooltipDateFormat =
+  | 'day-month-abbreviated-year-hour-minute'
+  | 'day-month-abbreviated-hour-minute-second'
+  | 'day-month-abbreviated-hour-minute';
+
+const getTooltipDateFormat: (duration: number) => TooltipDateFormat = (
+  duration: number,
+) => {
+  if (duration <= 60 * 60 * 1000) {
+    return 'day-month-abbreviated-hour-minute-second';
+  } else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+    return 'day-month-abbreviated-hour-minute';
+  } else {
+    return 'day-month-abbreviated-year-hour-minute';
+  }
+};
+
+export const TooltipHeader = ({
+  duration,
+  value,
+}: {
+  duration: number;
+  value: string | number;
+}) => {
+  const timeFormat = getTooltipDateFormat(duration);
+  return (
+    <ChartTooltipHeader>
+      <FormattedDateTime format={timeFormat} value={new Date(value)} />
+    </ChartTooltipHeader>
+  );
+};