@scality/core-ui 0.175.0 → 0.176.0

package/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();
     });
   });
 });

package/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

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

package/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
         )}

package/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';

package/src/lib/components/chartlegend/ChartLegendWrapper.tsx

@@ -133,7 +133,7 @@ export const ChartLegendWrapper = ({
   );
 
   const listResources = useCallback(() => {
-    return Object.keys(internalColorSet);
+    return Object.keys(internalColorSet).sort();
   }, [internalColorSet]);
 
   const chartLegendState = useMemo(

package/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>
+  );
+};

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

@@ -3,7 +3,7 @@ import { Tooltip } from '../tooltip/Tooltip.component';
 
 /**
  * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
- * @example Wednesday 6 October 2025
+ * @example Wednesday 06 October 2025
  */
 export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
   weekday: 'long',
@@ -35,7 +35,7 @@ export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
 
 /**
  * @description Day month formatter, with weekday, day and month. Used for describing long term date.
- * @example Wed 6 Oct
+ * @example Wed 06 Oct
  */
 export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
   weekday: 'short',
@@ -64,9 +64,30 @@ export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
   minute: '2-digit',
 });
 
+/**
+ * @description Day month abbreviated formatter. Used for describing long term date.
+ * @example 06 Oct
+ */
+export const DAY_MONTH_ABBREVIATED = Intl.DateTimeFormat('en-GB', {
+  day: '2-digit',
+  month: 'short',
+  hour12: false,
+});
+
+/**
+ * @description Day month abbreviated formatter. Used for describing long term date.
+ * @example 06 Oct 25
+ */
+export const DAY_MONTH_ABBREVIATED_YEAR = Intl.DateTimeFormat('en-GB', {
+  day: '2-digit',
+  month: 'short',
+  year: '2-digit',
+  hour12: false,
+});
+
 /**
  * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
- * @example 6 Oct 18:33:00
+ * @example 06 Oct 18:33:00
  */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
   'en-GB',
@@ -82,7 +103,7 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
 
 /**
  * @description Day month abbreviated hour minute formatter. Used for describing long term date.
- * @example 6 Oct 18:33
+ * @example 06 Oct 18:33
  */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   day: '2-digit',
@@ -92,6 +113,22 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   hour12: false,
 });
 
+/**
+ * @description Day month abbreviated year hour minute formatter. Used for describing long term date.
+ * @example 06 Oct 2025 18:33
+ */
+export const DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE = Intl.DateTimeFormat(
+  'en-GB',
+  {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  },
+);
+
 /**
  * @description Year month day formatter, without time. Used for describing long term date.
  * @example 2025-01-01
@@ -121,11 +158,14 @@ type FormattedDateTimeProps = {
     | 'relative'
     | 'day-month-abbreviated-hour-minute'
     | 'day-month-abbreviated-hour-minute-second'
+    | 'day-month-abbreviated-year-hour-minute'
     | 'long-date'
     | 'long-date-without-weekday'
     | 'chart-date'
     | 'year-month-day'
-    | 'month-day';
+    | 'month-day'
+    | 'day-month-abbreviated'
+    | 'chart-long-term-date';
 
   value: Date;
 };
@@ -150,10 +190,10 @@ const isItFutureOrIsItPast = (
  * time: '00:00'
  * 'time-second': '00:00:00'
  * relative: '1 month ago'
- * 'day-month-abbreviated-hour-minute': '6 Oct 18:33'
- * 'day-month-abbreviated-hour-minute-second': '6 Oct 18:33:00'
+ * 'day-month-abbreviated-hour-minute': '06 Oct 18:33'
+ * 'day-month-abbreviated-hour-minute-second': '06 Oct 18:33:00'
  * 'long-date': 'Wednesday 6 October 2025'
- * 'chart-date': '6 Oct'
+ * 'chart-date': '06 Oct'
  * 'year-month-day': '2025-10-06'
  */
 export const FormattedDateTime = ({
@@ -290,6 +330,31 @@ export const FormattedDateTime = ({
       return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
     case 'month-day':
       return <>{MONTH_DAY_FORMATTER.format(value)}</>;
+    case 'day-month-abbreviated-year-hour-minute':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE.format(value)
+            .replace(',', '')
+            .replace(/Sept/g, 'Sep')}
+        </>
+      );
+    case 'day-month-abbreviated':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED.format(value)
+            .replace(',', '')
+            .replace(/Sept/g, 'Sep')}
+        </>
+      );
+    case 'chart-long-term-date':
+      return (
+        <>
+          {DAY_MONTH_ABBREVIATED_YEAR.format(value)
+            .replace(/[ ,]/g, '')
+            // replace Sept with Sep to keep 3 letter month
+            .replace(/Sept/g, 'Sep')}
+        </>
+      );
     default:
       return <></>;
   }

package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx

@@ -8,20 +8,19 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize } from '../../style/theme';
 import { Box } from '../box/Box';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { FormattedDateTime } from '../date/FormattedDateTime';
 import { Icon } from '../icon/Icon.component';
 import {
   addMissingDataPoint,
   getUnitLabel,
 } from '../linetemporalchart/ChartUtil';
 import { Loader } from '../loader/Loader.component';
-import { ChartTitleText, SmallerText } from '../text/Text.component';
+import { ChartTitleText, Text } from '../text/Text.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
 import { formatXAxisLabel } from './utils';
 import {
@@ -29,6 +28,8 @@ import {
   ChartTooltipItem,
   ChartTooltipHeader,
   ChartTooltipItemsContainer,
+  ChartTooltipSeparator,
+  TooltipHeader,
 } from '../charttooltip/ChartTooltip';
 import { LegendShape } from '../chartlegend/ChartLegend';
 import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
@@ -99,28 +100,30 @@ export type LineChartProps = (
   renderTooltip?: (
     tooltipProps: TooltipContentProps<number, string>,
     unitLabel?: string,
-    timeFormat?: 'date-time' | 'date',
+    duration?: number,
   ) => React.ReactNode;
 };
 
 const LineTimeSerieChartTooltip = ({
   unitLabel,
-  timeFormat,
+  duration,
   isChartActive,
   tooltipProps,
   renderTooltip,
   hoveredValue,
+  isSymmetrical,
 }: {
   tooltipProps: TooltipContentProps<number, string>;
   unitLabel?: string;
-  timeFormat?: 'date-time' | 'date';
+  duration: number;
   isChartActive?: boolean;
   renderTooltip?: (
     tooltipProps: TooltipContentProps<number, string>,
     unitLabel?: string,
-    timeFormat?: 'date-time' | 'date',
+    duration?: number,
   ) => React.ReactNode;
   hoveredValue?: string;
+  isSymmetrical?: boolean;
 }) => {
   const { active, payload, label } = tooltipProps;
 
@@ -128,7 +131,7 @@ const LineTimeSerieChartTooltip = ({
     return null;
 
   if (renderTooltip) {
-    return renderTooltip(tooltipProps, unitLabel, timeFormat);
+    return renderTooltip(tooltipProps, unitLabel, duration);
   }
   // We can't use the default itemSorter method because it's a custom tooltip.
   // Sort the payload here instead
@@ -145,17 +148,15 @@ const LineTimeSerieChartTooltip = ({
     return bValue - aValue; // Positives before negatives
   });
 
+  // Find the transition point between positive and negative values
+  const separatorIndex = sortedPayload.findIndex((entry) => entry.value < 0);
+  const hasBothPositiveAndNegative =
+    separatorIndex > 0 && separatorIndex < sortedPayload.length;
+
   return (
     <ChartTooltipContainer>
       <ChartTooltipHeader>
-        <FormattedDateTime
-          format={
-            timeFormat === 'date-time'
-              ? 'day-month-abbreviated-hour-minute-second'
-              : 'long-date-without-weekday'
-          }
-          value={new Date(label)}
-        />
+        <TooltipHeader duration={duration} value={label} />
       </ChartTooltipHeader>
       <ChartTooltipItemsContainer>
         {sortedPayload.map((entry, index) => {
@@ -174,13 +175,18 @@ const LineTimeSerieChartTooltip = ({
             : `${entry.value.toFixed(2)} ${unitLabel}`;
 
           return (
-            <ChartTooltipItem
-              key={index}
-              label={entry.name}
-              value={formattedValue}
-              legendIcon={legendIcon}
-              isHovered={isHovered}
-            />
+            <React.Fragment key={index}>
+              {/* Add separator between positive and negative values for symmetrical charts */}
+              {isSymmetrical &&
+                hasBothPositiveAndNegative &&
+                index === separatorIndex && <ChartTooltipSeparator />}
+              <ChartTooltipItem
+                label={entry.name}
+                value={formattedValue}
+                legendIcon={legendIcon}
+                isHovered={isHovered}
+              />
+            </React.Fragment>
           );
         })}
       </ChartTooltipItemsContainer>
@@ -438,8 +444,8 @@ export function LineTimeSerieChart({
 
   // Format time for display the tick in the x axis
   const formatXAxisLabelCallback = useCallback(
-    (timestamp: number) => formatXAxisLabel(timestamp, timeFormat, chartData),
-    [timeFormat, chartData],
+    (timestamp: number) => formatXAxisLabel(timestamp, duration),
+    [duration],
   );
 
   return (
@@ -452,7 +458,7 @@ export function LineTimeSerieChart({
           <Box ml={spacing.r4}>
             <TooltipComponent
               placement={'right'}
-              overlay={<SmallerText>{helpText}</SmallerText>}
+              overlay={<Text>{helpText}</Text>}
             >
               <Icon name="Info" color={theme.buttonSecondary} />
             </TooltipComponent>
@@ -533,8 +539,9 @@ export function LineTimeSerieChart({
               content={(props: TooltipContentProps<number, string>) => (
                 <LineTimeSerieChartTooltip
                   unitLabel={unitLabel}
-                  timeFormat={timeFormat}
+                  duration={duration}
                   renderTooltip={renderTooltip}
+                  isSymmetrical={yAxisType === 'symmetrical'}
                   tooltipProps={props}
                   isChartActive={isChartActive}
                   hoveredValue={hoveredValue}