@scality/core-ui 0.168.0 → 0.170.0

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

@@ -8,6 +8,7 @@ import {
   YAxis,
   CartesianGrid,
 } from 'recharts';
+import type { Payload } from 'recharts/types/component/DefaultTooltipContent';
 import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
@@ -20,11 +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,
-  YEAR_MONTH_DAY_FORMATTER,
-} 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;
@@ -61,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 }>`
@@ -72,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 = {
@@ -148,12 +157,7 @@ const CustomTooltip = ({
   timeFormat,
 }: {
   active?: boolean;
-  payload?: Array<{
-    value: number;
-    name: string;
-    color: string;
-    dataKey: string;
-  }>;
+  payload?: Array<TooltipPayload>;
   label?: string;
   unitLabel?: string;
   timeFormat?: 'date-time' | 'date';
@@ -162,8 +166,8 @@ const CustomTooltip = ({
   // 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
@@ -181,22 +185,22 @@ const CustomTooltip = ({
           format={
             timeFormat === 'date-time'
               ? 'day-month-abbreviated-hour-minute-second'
-              : 'long-date'
+              : '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>
@@ -305,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 [];
 
@@ -313,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
@@ -407,16 +414,9 @@ export function LineTimeSerieChart({
   }, [series, getColor]);
 
   // Format time for display the tick in the x axis
-  const formatXAxisLabel = useCallback(
-    (timestamp: number) => {
-      const date = new Date(timestamp);
-      return timeFormat === 'date-time'
-        ? DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '')
-        : timeFormat === 'date'
-          ? YEAR_MONTH_DAY_FORMATTER.format(date)
-          : '';
-    },
-    [timeFormat],
+  const formatXAxisLabelCallback = useCallback(
+    (timestamp: number) => formatXAxisLabel(timestamp, timeFormat, chartData),
+    [timeFormat, chartData],
   );
 
   return (
@@ -426,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>
@@ -456,7 +458,7 @@ export function LineTimeSerieChart({
             type="number"
             domain={['dataMin', 'dataMax']}
             ticks={xAxisTicks}
-            tickFormatter={formatXAxisLabel}
+            tickFormatter={formatXAxisLabelCallback}
             tickCount={5}
             tick={{
               fill: theme.textSecondary,
@@ -490,6 +492,8 @@ export function LineTimeSerieChart({
               fontSize: fontSize.smaller,
             }}
             tickFormatter={(value) => Math.round(value).toString()}
+            tickCount={5}
+            interval={'preserveStartEnd'}
           />
           <Tooltip
             content={

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

@@ -1,68 +1,71 @@
-import { render } from "@testing-library/react";
-import { LineChartProps, LineTimeSerieChart } from "./linetimeseriechart.component";
-import { ChartLegendWrapper } from "../chartlegend/ChartLegendWrapper";
-import { ThemeProvider } from "styled-components";
-import { coreUIAvailableThemes } from "../../style/theme";
+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][],
-    },
+  {
+    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",
+  '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>
-    );
+  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 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();
-    });
+  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 60%)',
+    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',
+  },
 };
 
 /**

package/stories/BarChart/barchart.stories.tsx

@@ -937,7 +937,6 @@ export const Histogram: Story = {
         <ChartLegendWrapper
           colorSet={{
             Success: theme.statusHealthy,
-            Failed: theme.statusCritical,
           }}
         >
           <Barchart
@@ -945,6 +944,7 @@ export const Histogram: Story = {
             bars={histogramData}
             title="Histogram"
           />
+          <ChartLegend shape="rectangle" />
         </ChartLegendWrapper>
       </div>
     );

package/stories/color.mdx

@@ -41,3 +41,15 @@ import { coreUIAvailableThemes } from '../src/lib/style/theme';
 }
 
 </ColorPalette>
+
+## G-Dark
+
+<ColorPalette>
+  {
+    Object.entries(coreUIAvailableThemes['G-Dark']).map(([key, value]) => {
+    if (!/RGB/.test(key)) return <ColorItem title={key} colors={[value]}/>;
+    })
+
+}
+
+</ColorPalette>

package/stories/formattedate.stories.tsx

@@ -24,6 +24,13 @@ export const FormattedDate = {
               'time' as const,
               'time-second' as const,
               'relative' as const,
+              'day-month-abbreviated-hour-minute' as const,
+              'day-month-abbreviated-hour-minute-second' as const,
+              'long-date' as const,
+              'long-date-without-weekday' as const,
+              'chart-date' as const,
+              'year-month-day' as const,
+              'month-day' as const,
             ].map((format) => (
               <tr key={format}>
                 <td>{format}</td>

package/stories/layout.stories.tsx

@@ -123,6 +123,25 @@ export const Layout2MainContentOnly = {
   ),
 };
 
+export const Layout2TransparentBackground = {
+  render: () => (
+    <Layout2
+      variant='transparent'
+      headerNavigation={
+        <HeaderComponent>
+          <h3>Header navigation</h3>
+        </HeaderComponent>
+      }
+    >
+      <AppContainer>
+        <AppContainer.MainContent hasTopMargin>
+          Main content
+        </AppContainer.MainContent>
+      </AppContainer>
+    </Layout2>
+  ),
+};
+
 export const Layout2OverallSummaryAndMainContent = {
   render: () => (
     <Layout2