@scality/core-ui 0.175.0 → 0.176.0

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/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'}