@scality/core-ui 0.167.0 → 0.169.0

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

@@ -8,7 +8,8 @@ import {
   YAxis,
   CartesianGrid,
 } from 'recharts';
-import { useMemo, useRef } from 'react';
+import type { Payload } from 'recharts/types/component/DefaultTooltipContent';
+import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
@@ -20,10 +21,15 @@ import { spacing } from '../../spacing';
 import { getUnitLabel } from '../linetemporalchart/ChartUtil';
 import { Icon } from '../icon/Icon.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
-import {
-  DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
-  FormattedDateTime,
-} from '../date/FormattedDateTime';
+import { FormattedDateTime } from '../date/FormattedDateTime';
+import { Box } from '../box/Box';
+import { formatXAxisLabel } from './utils';
+
+type TooltipPayload = Payload<number, string> & {
+  value: number;
+  name: string;
+  color: string;
+};
 
 const LineTemporalChartWrapper = styled.div`
   display: flex;
@@ -60,6 +66,8 @@ const TooltipValue = styled.div`
   color: ${(props) => props.theme.textSecondary};
   display: flex;
   align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
 `;
 
 const TooltipLegend = styled.div<{ color: string }>`
@@ -71,21 +79,23 @@ const TooltipLegend = styled.div<{ color: string }>`
   margin-top: 8px;
 `;
 
-const TooltipContent = styled.div`
+const TooltipLeftGroup = styled.div`
   display: flex;
+  align-items: flex-start;
   min-width: 0;
   flex: 1;
 `;
 
 const TooltipName = styled.div`
-  margin-right: 4px;
   word-wrap: break-word;
   word-break: break-word;
-  justify-content: flex-start;
+  flex: 1;
 `;
 
 const TooltipInstanceValue = styled.div`
-  justify-content: flex-end;
+  margin-left: 16px;
+  flex-shrink: 0;
+  text-align: right;
 `;
 
 export type Serie = {
@@ -129,6 +139,12 @@ export type LineChartProps = (
     label: string;
   }[];
   isLoading?: boolean;
+  /**
+   * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
+   * If you want to display the date only, you can set it to 'date' which is like 2025-09-01
+   * This will affect the format of the tooltip as well
+   */
+  timeFormat?: 'date-time' | 'date';
   yAxisTitle?: string;
   helpText?: string;
 };
@@ -138,23 +154,20 @@ const CustomTooltip = ({
   payload,
   label,
   unitLabel,
+  timeFormat,
 }: {
   active?: boolean;
-  payload?: Array<{
-    value: number;
-    name: string;
-    color: string;
-    dataKey: string;
-  }>;
+  payload?: Array<TooltipPayload>;
   label?: string;
   unitLabel?: string;
+  timeFormat?: 'date-time' | 'date';
 }) => {
   if (!active || !payload || !payload.length || !label) return null;
   // We can't use the default itemSorter method because it's a custom tooltip.
   // Sort the payload here instead
   const sortedPayload = [...payload].sort((a, b) => {
-    const aValue = Number(a.value);
-    const bValue = Number(b.value);
+    const aValue = a.value;
+    const bValue = b.value;
 
     if (aValue >= 0 && bValue >= 0) {
       return bValue - aValue; // Higher positive values first
@@ -169,21 +182,25 @@ const CustomTooltip = ({
     <TooltipContainer>
       <TooltipTime>
         <FormattedDateTime
-          format="day-month-abbreviated-hour-minute-second"
+          format={
+            timeFormat === 'date-time'
+              ? 'day-month-abbreviated-hour-minute-second'
+              : 'long-date-without-weekday'
+          }
           value={new Date(label)}
         />
       </TooltipTime>
       {sortedPayload.map((entry, index) => (
         <TooltipValue key={index}>
-          <TooltipLegend color={entry.color} />
-          <TooltipContent>
+          <TooltipLeftGroup>
+            <TooltipLegend color={entry.color} />
             <TooltipName>{entry.name}</TooltipName>
-            <TooltipInstanceValue>
-              {isNaN(Number(entry.value))
-                ? '-'
-                : `${Number(entry.value).toFixed(2)}${unitLabel}`}
-            </TooltipInstanceValue>
-          </TooltipContent>
+          </TooltipLeftGroup>
+          <TooltipInstanceValue>
+            {!Number.isFinite(entry.value)
+              ? '-'
+              : `${entry.value.toFixed(2)} ${unitLabel}`}
+          </TooltipInstanceValue>
         </TooltipValue>
       ))}
     </TooltipContainer>
@@ -205,6 +222,7 @@ export function LineTimeSerieChart({
   duration,
   unitRange,
   isLoading = false,
+  timeFormat = 'date-time',
   yAxisType = 'default',
   yAxisTitle,
   helpText,
@@ -291,7 +309,7 @@ export function LineTimeSerieChart({
     );
   }, [series, startingTimeStamp, duration, interval, yAxisType]);
 
-  // Calculate 5 perfectly evenly spaced ticks
+  // Calculate evenly spaced ticks that avoid the very beginning and end
   const xAxisTicks = useMemo(() => {
     if (!chartData || chartData.length === 0) return [];
 
@@ -299,20 +317,23 @@ export function LineTimeSerieChart({
     const minTimestamp = Math.min(...timestamps);
     const maxTimestamp = Math.max(...timestamps);
 
-    // Calculate 5 perfectly evenly spaced ticks
     const timeRange = maxTimestamp - minTimestamp;
-    const interval = timeRange / 4; // 4 intervals create 5 points
-
-    const exactEvenTicks = [
-      minTimestamp,
-      minTimestamp + interval,
-      minTimestamp + interval * 2,
-      minTimestamp + interval * 3,
-      maxTimestamp,
-    ];
-
-    // Return perfectly even ticks (guaranteed to be evenly divided)
-    return exactEvenTicks;
+    // Add padding to avoid labels at the very edges (10% padding on each side)
+    const padding = timeRange * 0.1;
+    const paddedStart = minTimestamp + padding;
+    const paddedEnd = maxTimestamp - padding;
+    const paddedRange = paddedEnd - paddedStart;
+
+    // Create 5 evenly spaced ticks within the padded range
+    const numTicks = 5;
+    const tickInterval = paddedRange / (numTicks - 1);
+
+    const evenlySpacedTicks = Array.from(
+      { length: numTicks },
+      (_, index) => paddedStart + index * tickInterval,
+    );
+
+    return evenlySpacedTicks;
   }, [chartData]);
 
   // 3. Transform the data base on the valuebase
@@ -393,12 +414,9 @@ export function LineTimeSerieChart({
   }, [series, getColor]);
 
   // Format time for display the tick in the x axis
-  const formatTime = useMemo(
-    () => (timestamp: number) => {
-      const date = new Date(timestamp);
-      return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
-    },
-    [],
+  const formatXAxisLabelCallback = useCallback(
+    (timestamp: number) => formatXAxisLabel(timestamp, timeFormat, chartData),
+    [timeFormat, chartData],
   );
 
   return (
@@ -408,12 +426,14 @@ export function LineTimeSerieChart({
           {title} {unitLabel && `(${unitLabel})`}
         </ChartTitleText>
         {helpText && (
-          <TooltipComponent
-            placement={'right'}
-            overlay={<SmallerText>{helpText}</SmallerText>}
-          >
-            <Icon name="Info" color={theme.buttonSecondary} />
-          </TooltipComponent>
+          <Box ml={spacing.r4}>
+            <TooltipComponent
+              placement={'right'}
+              overlay={<SmallerText>{helpText}</SmallerText>}
+            >
+              <Icon name="Info" color={theme.buttonSecondary} />
+            </TooltipComponent>
+          </Box>
         )}
         {isLoading && <Loader />}
       </ChartHeader>
@@ -438,7 +458,7 @@ export function LineTimeSerieChart({
             type="number"
             domain={['dataMin', 'dataMax']}
             ticks={xAxisTicks}
-            tickFormatter={formatTime}
+            tickFormatter={formatXAxisLabelCallback}
             tickCount={5}
             tick={{
               fill: theme.textSecondary,
@@ -472,8 +492,14 @@ export function LineTimeSerieChart({
               fontSize: fontSize.smaller,
             }}
             tickFormatter={(value) => Math.round(value).toString()}
+            tickCount={5}
+            interval={'preserveStartEnd'}
+          />
+          <Tooltip
+            content={
+              <CustomTooltip unitLabel={unitLabel} timeFormat={timeFormat} />
+            }
           />
-          <Tooltip content={<CustomTooltip unitLabel={unitLabel} />} />
           {/* Add horizontal line at y=0 for symmetrical charts */}
           {yAxisType === 'symmetrical' && (
             <ReferenceLine y={0} stroke={theme.border} />
@@ -493,6 +519,7 @@ export function LineTimeSerieChart({
                   dataKey={label}
                   stroke={colorMapping[resource]}
                   dot={false}
+                  isAnimationActive={false}
                 />
               );
             }),

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

@@ -0,0 +1,71 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import {
+  LineChartProps,
+  LineTimeSerieChart,
+} from './linetimeseriechart.component';
+import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
+import { ThemeProvider } from 'styled-components';
+import { coreUIAvailableThemes } from '../../style/theme';
+
+const TestSeries = [
+  {
+    resource: 'Series 1',
+    getTooltipLabel: () => `Series 1`,
+    data: [
+      [1622505600000, 10],
+      [1622509200000, 20],
+      [1622512800000, 30],
+    ] as [number, number][],
+  },
+  {
+    resource: 'Series 2',
+    getTooltipLabel: () => `Series 2`,
+    data: [
+      [1622505600000, 15],
+      [1622509200000, 25],
+      [1622512800000, 35],
+    ] as [number, number][],
+  },
+];
+
+const ColorSet = {
+  'Series 1': '#FF0000',
+  'Series 2': '#00FF00',
+};
+
+const renderLineTimeSerieChart = (props: Partial<LineChartProps> = {}) => {
+  return render(
+    <ThemeProvider theme={coreUIAvailableThemes.artescaLight}>
+      <ChartLegendWrapper colorSet={ColorSet}>
+        <LineTimeSerieChart
+          {...({
+            title: 'Test Chart',
+            yAxisType: 'default',
+            series: TestSeries,
+            height: 400,
+            startingTimeStamp: TestSeries[0].data[0][0],
+            interval: TestSeries[0].data[1][0] - TestSeries[0].data[0][0],
+            duration:
+              TestSeries[0].data[TestSeries[0].data.length - 1][0] -
+              TestSeries[0].data[0][0],
+            unitRange: [{ label: 'units', value: 1 }],
+            ...props,
+          } as LineChartProps)}
+        />
+      </ChartLegendWrapper>
+    </ThemeProvider>,
+  );
+};
+
+describe('LineTimeSerieChart', () => {
+  it('should render when with basic parameters', async () => {
+    const { container } = renderLineTimeSerieChart();
+    expect(container).toBeInTheDocument();
+  });
+
+  it('should render when no unitRange is provided', async () => {
+    const { container } = renderLineTimeSerieChart({ unitRange: undefined });
+    expect(container).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,87 @@
+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('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');
+    });
+
+    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('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');
+    });
+
+    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);
+
+      expect(result).toBe('09-15');
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+import {
+  DAY_MONTH_ABBREVIATED_HOUR_MINUTE,
+  YEAR_MONTH_DAY_FORMATTER,
+  MONTH_DAY_FORMATTER,
+} from '../date/FormattedDateTime';
+
+export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
+
+export type ChartDataPoint = {
+  timestamp: number;
+} & Record<string, number | null>;
+
+/**
+ * Formats timestamp for X-axis labels based on time format and data range:
+ * For 'date-time' format, return day-month-abbreviated-hour-minute format
+ * For 'date' format, return YYYY-MM-DD format if time range is greater than 1 year, otherwise return MM-DD format
+ *
+ * @param timestamp - The timestamp to format in milliseconds
+ * @param timeFormat - The format type ('date-time' or 'date')
+ * @param chartData - The chart data to determine time range for optimal formatting
+ * @returns Formatted string for display on X-axis
+ */
+export const formatXAxisLabel = (
+  timestamp: number,
+  timeFormat: 'date-time' | 'date' = 'date-time',
+  chartData: ChartDataPoint[] = [],
+): string => {
+  const date = new Date(timestamp);
+  if (!chartData.length) {
+    return YEAR_MONTH_DAY_FORMATTER.format(date);
+  }
+  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/style/theme.ts

@@ -60,6 +60,7 @@ export const coreUIAvailableThemesNames = [
   'darkRebrand',
   'artescaLight',
   'ring9dark',
+  'G-Dark'
 ] as const;
 export type CoreUIThemeName = (typeof coreUIAvailableThemesNames)[number];
 
@@ -139,6 +140,31 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
     textReverse: '#000000',
     textLink: '#71AEFF',
   },
+  'G-Dark': {
+    statusHealthy: '#0AADA6',
+    statusHealthyRGB: '10,173,166',
+    statusWarning: '#F8F32B',
+    statusWarningRGB: '248,243,43',
+    statusCritical: '#E84855',
+    statusCriticalRGB: '232,72,85',
+    selectedActive: '#037AFF',
+    highlight: '#1A3C75',
+    border: '#4A4A4A',
+    buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 100%)',
+    buttonSecondary: 'linear-gradient(130deg, #595A78 0%, #44455F 100%)',
+    buttonDelete: '#3D0808',
+    infoPrimary: '#8E8EAC',
+    infoSecondary: '#333366',
+    backgroundLevel1: '#121219',
+    backgroundLevel2: '#323245',
+    backgroundLevel3: '#232331',
+    backgroundLevel4: '#1B1B27',
+    textPrimary: '#EAEAEA',
+    textSecondary: '#B5B5B5',
+    textTertiary: '#DFDFDF',
+    textReverse: '#000000',
+    textLink: '#71AEFF',
+  },
 };
 
 /**