@scality/core-ui 0.174.0 → 0.176.0

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/icon/Icon.component.tsx

@@ -142,6 +142,7 @@ export const iconTable = {
   Mail: 'fas faEnvelope',
   ThumbsUp: 'far faThumbsUp',
   ThumbsDown: 'far faThumbsDown',
+  Sidebar: 'fas faColumns',
 };
 
 type IconProps = {

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

@@ -3,26 +3,24 @@ import {
   Line,
   LineChart,
   ReferenceLine,
-  ResponsiveContainer,
   Tooltip,
   TooltipContentProps,
   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 {
@@ -30,14 +28,16 @@ import {
   ChartTooltipItem,
   ChartTooltipHeader,
   ChartTooltipItemsContainer,
+  ChartTooltipSeparator,
+  TooltipHeader,
 } from '../charttooltip/ChartTooltip';
 import { LegendShape } from '../chartlegend/ChartLegend';
+import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
 
 const LineTemporalChartWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  flex: 1;
 `;
 
 const ChartHeader = styled.div`
@@ -100,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;
 
@@ -129,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
@@ -146,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) => {
@@ -175,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>
@@ -439,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 (
@@ -453,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>
@@ -467,7 +472,7 @@ export function LineTimeSerieChart({
         onFocusCapture={() => setIsChartActive(true)}
         onBlurCapture={() => setIsChartActive(false)}
       >
-        <ResponsiveContainer width="100%" height={height}>
+        <StyledResponsiveContainer width="100%" height={height}>
           <LineChart
             data={rechartsData}
             ref={chartRef}
@@ -476,6 +481,7 @@ export function LineTimeSerieChart({
             syncId={syncId}
             onMouseEnter={() => setIsChartActive(true)}
             onMouseLeave={() => setIsChartActive(false)}
+            accessibilityLayer
           >
             <CartesianGrid
               vertical={true}
@@ -501,7 +507,6 @@ export function LineTimeSerieChart({
             />
             <YAxis
               orientation="right"
-              allowDataOverflow={false}
               label={{
                 value: yAxisTitle,
                 angle: 90,
@@ -524,16 +529,19 @@ export function LineTimeSerieChart({
                 fill: theme.textSecondary,
                 fontSize: fontSize.smaller,
               }}
-              tickFormatter={(value) => Math.round(value).toString()}
+              tickFormatter={(value) =>
+                new Intl.NumberFormat('fr-FR').format(value.toFixed(0))
+              }
               tickCount={5}
-              interval={'preserveStartEnd'}
+              interval={0}
             />
             <Tooltip
               content={(props: TooltipContentProps<number, string>) => (
                 <LineTimeSerieChartTooltip
                   unitLabel={unitLabel}
-                  timeFormat={timeFormat}
+                  duration={duration}
                   renderTooltip={renderTooltip}
+                  isSymmetrical={yAxisType === 'symmetrical'}
                   tooltipProps={props}
                   isChartActive={isChartActive}
                   hoveredValue={hoveredValue}
@@ -560,6 +568,7 @@ export function LineTimeSerieChart({
                     stroke={colorMapping[resource]}
                     dot={false}
                     isAnimationActive={false}
+                    strokeDasharray={serie.isLineDashed ? '4 4' : undefined}
                     onMouseEnter={() => setHoveredValue(label)}
                     onMouseLeave={() => setHoveredValue(undefined)}
                   />
@@ -567,7 +576,7 @@ export function LineTimeSerieChart({
               }),
             )}
           </LineChart>
-        </ResponsiveContainer>
+        </StyledResponsiveContainer>
       </div>
     </LineTemporalChartWrapper>
   );

package/src/lib/components/linetimeseriechart/utils.test.ts

@@ -1,87 +1,49 @@
 import { formatXAxisLabel } from './utils';
 
-const createChartData = (startDate: Date, endDate: Date) => [
-  { timestamp: startDate.getTime() },
-  { timestamp: endDate.getTime() },
-];
-
 describe('formatXAxisLabel', () => {
   const mockTimestamp = new Date('2025-09-15T14:30:00Z').getTime();
 
-  describe('date-time format', () => {
-    it('should format timestamp with day-month-abbreviated-hour-minute format', () => {
-      const chartData = createChartData(
-        new Date('2022-01-01'),
-        new Date('2022-01-02'),
-      );
-      const result = formatXAxisLabel(mockTimestamp, 'date-time', chartData);
-      expect(result).toBe('15 Sept 14:30');
+  describe('short duration (≤ 24 hours)', () => {
+    it('should format timestamp with time format', () => {
+      const duration = 12 * 60 * 60; // 12 hours
+      const result = formatXAxisLabel(mockTimestamp, duration);
+      expect(result).toBe('14:30');
     });
   });
 
-  describe('date format', () => {
-    it('should use YYYY-MM-DD format for time ranges greater than 1 year', () => {
-      const startDate = new Date('2022-01-01');
-      const endDate = new Date('2024-01-01'); // More than 1 year
-      const chartData = createChartData(startDate, endDate);
-
-      const result = formatXAxisLabel(mockTimestamp, 'date', chartData);
-      expect(result).toBe('2025-09-15');
-    });
-
-    it('should use MM-DD format for time ranges less than 1 year', () => {
-      const startDate = new Date('2023-09-01');
-      const endDate = new Date('2023-12-01'); // Less than 1 year
-      const chartData = createChartData(startDate, endDate);
-
-      const result = formatXAxisLabel(mockTimestamp, 'date', chartData);
-      expect(result).toBe('09-15');
+  describe('medium duration (≤ 7 days)', () => {
+    it('should format timestamp with day-month-abbreviated format', () => {
+      const duration = 3 * 24 * 60 * 60; // 3 days
+      const result = formatXAxisLabel(mockTimestamp, duration);
+      expect(result).toBe('15 Sep');
     });
+  });
 
-    it('should use YYYY-MM-DD format when chartData is empty', () => {
-      const result = formatXAxisLabel(mockTimestamp, 'date', []);
-      expect(result).toBe('2025-09-15');
-    });
-
-    it('should handle edge case of exactly 1 year time range', () => {
-      const startDate = new Date('2022-09-15');
-      const endDate = new Date('2023-09-15'); // Exactly 1 year
-      const chartData = createChartData(startDate, endDate);
-
-      const result = formatXAxisLabel(mockTimestamp, 'date', chartData);
-      expect(result).toBe('09-15');
-    });
-
-    it('should handle leap year calculation correctly', () => {
-      const startDate = new Date('2023-01-01');
-      const endDate = new Date('2024-01-02'); // Just over 1 year including leap year
-      const chartData = createChartData(startDate, endDate);
-
-      const result = formatXAxisLabel(mockTimestamp, 'date', chartData);
-
-      expect(result).toBe('2025-09-15');
+  describe('long duration (> 7 days)', () => {
+    it('should format timestamp with day-month-abbreviated-year format', () => {
+      const duration = 30 * 24 * 60 * 60; // 30 days
+      const result = formatXAxisLabel(mockTimestamp, duration);
+      expect(result).toBe('15Sep25');
     });
   });
 
-  describe('chartData with various scenarios', () => {
-    it('should handle chartData with single data point', () => {
-      const chartData = [{ timestamp: mockTimestamp }];
-
-      const result = formatXAxisLabel(mockTimestamp, 'date', chartData);
-
-      expect(result).toBe('09-15');
+  describe('edge cases', () => {
+    it('should handle exactly 24 hours duration', () => {
+      const duration = 24 * 60 * 60; // exactly 24 hours
+      const result = formatXAxisLabel(mockTimestamp, duration);
+      expect(result).toBe('14:30');
     });
 
-    it('should handle chartData with mixed timestamp values', () => {
-      const chartData = [
-        { timestamp: new Date('2023-01-01').getTime() },
-        { timestamp: new Date('2023-06-01').getTime() },
-        { timestamp: new Date('2023-12-01').getTime() },
-      ];
-
-      const result = formatXAxisLabel(mockTimestamp, 'date', chartData);
+    it('should handle exactly 7 days duration', () => {
+      const duration = 7 * 24 * 60 * 60; // exactly 7 days
+      const result = formatXAxisLabel(mockTimestamp, duration);
+      expect(result).toBe('15 Sep');
+    });
 
-      expect(result).toBe('09-15');
+    it('should handle just over 7 days duration', () => {
+      const duration = 8 * 24 * 60 * 60; // 8 days
+      const result = formatXAxisLabel(mockTimestamp, duration);
+      expect(result).toBe('15Sep25');
     });
   });
 });

package/src/lib/components/linetimeseriechart/utils.ts

@@ -1,7 +1,7 @@
 import {
-  DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
-  YEAR_MONTH_DAY_FORMATTER,
-  MONTH_DAY_FORMATTER,
+  TIME_FORMATER,
+  DAY_MONTH_ABBREVIATED,
+  DAY_MONTH_ABBREVIATED_YEAR,
 } from '../date/FormattedDateTime';
 
 export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
@@ -22,22 +22,18 @@ export type ChartDataPoint = {
  */
 export const formatXAxisLabel = (
   timestamp: number,
-  timeFormat: 'date-time' | 'date' = 'date-time',
-  chartData: ChartDataPoint[] = [],
+  duration: number,
 ): string => {
   const date = new Date(timestamp);
-  if (!chartData.length) {
-    return YEAR_MONTH_DAY_FORMATTER.format(date);
+  if (duration <= 24 * 60 * 60) {
+    return TIME_FORMATER.format(date);
+  } else if (duration <= 7 * 24 * 60 * 60) {
+    return DAY_MONTH_ABBREVIATED.format(date)
+      .replace(',', '')
+      .replace(/Sept/g, 'Sep');
+  } else {
+    return DAY_MONTH_ABBREVIATED_YEAR.format(date)
+      .replace(/[ ,]/g, '')
+      .replace(/Sept/g, 'Sep');
   }
-  if (timeFormat === 'date-time') {
-    return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
-  }
-  const timestamps = chartData.map((d) => d.timestamp);
-  const minTimestamp = Math.min(...timestamps);
-  const maxTimestamp = Math.max(...timestamps);
-  const timeRangeMilliseconds = maxTimestamp - minTimestamp;
-
-  return timeRangeMilliseconds >= ONE_YEAR_MILLISECONDS
-    ? YEAR_MONTH_DAY_FORMATTER.format(date)
-    : MONTH_DAY_FORMATTER.format(date);
 };

package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx

@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle, css } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';
 
 type Props = {
   children: React.ReactNode;
@@ -24,6 +24,7 @@ ${(props) => {
         width: 4px;
         height: 4px;
         min-height: 20px;
+        background: ${brand.border}; // fallback for gradient themes
         background: ${brand.buttonSecondary};
         border-radius: 4px;
         -webkit-border-radius: 4px;
@@ -46,6 +47,7 @@ ${(props) => {
       }
 
       // Firefox
+      scrollbar-color: ${brand.border} ${brand.backgroundLevel3}; // fallback for gradient themes
       scrollbar-color: ${brand.buttonSecondary} ${brand.backgroundLevel3};
       scrollbar-width: thin;
     }

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

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, YAxis } from "recharts";
 import { useTheme } from "styled-components";
 import { chartColors } from "../../style/theme";
 import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
@@ -11,14 +11,15 @@ type SparklineProps = {
   },
   startingTimeStamp: number,
   sampleDuration: number,
-  sampleInterval: number
+  sampleInterval: number,
+  yAxisType?: 'default' | 'percentage',
 };
 
 /**
  * Sparkline is a simple dynamically sized area chart.
  * Used to show trends in data over time.
  */
-export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: SparklineProps) {
+export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType }: SparklineProps) {
   const data = useMemo(
     () => {
       const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
@@ -48,6 +49,7 @@ export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInte
         activeDot={false}
         isAnimationActive={false}
       />
+      {yAxisType === 'percentage' && <YAxis domain={[0, 100]} hide />}
       </AreaChart>
     </ResponsiveContainer>
   );

package/stories/formattedate.stories.tsx

@@ -31,6 +31,8 @@ export const FormattedDate = {
               'chart-date' as const,
               'year-month-day' as const,
               'month-day' as const,
+              'day-month-abbreviated' as const,
+              'chart-long-term-date' as const,
             ].map((format) => (
               <tr key={format}>
                 <td>{format}</td>

package/stories/linetimeseriechart.stories.tsx

@@ -837,6 +837,7 @@ export const DynamicColorSetExample: Story = {
             ]}
             title="Dynamic Chart 2"
             height={200}
+            unitRange={UNIT_RANGE_BS}
             startingTimeStamp={Number(prometheusData3[0][0])}
             isLoading={false}
             yAxisType={'percentage'}

package/stories/sparkline.stories.tsx

@@ -166,3 +166,22 @@ export const FlatWithMissingData: Story = {
     },
   },
 };
+
+export const PercentageYAxis: Story = {
+  args: {
+    serie: {
+      data: trendingUpData,
+    },
+    startingTimeStamp: 1740405600,
+    sampleDuration: 7200,
+    sampleInterval: 720,
+    yAxisType: 'percentage',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sparkline with Y-axis range is set as [0-100].',
+      },
+    },
+  },
+};