@scality/core-ui 0.175.0 → 0.177.0

package/src/lib/components/globalhealthbar/useHealthBarData.spec.tsx

@@ -16,6 +16,7 @@ describe('useHealthBarData', () => {
     severity,
     startsAt,
     endsAt,
+    key: `${severity}_${startsAt}`,
   });
 
   describe('Alert Filtering', () => {
@@ -231,6 +232,7 @@ describe('useHealthBarData', () => {
         severity: 'warning',
         startsAt: '2023-12-01T02:00:00Z',
         endsAt: '2023-12-01T04:00:00Z',
+        key: 'warning_0',
       });
     });
 

package/src/lib/components/globalhealthbar/useHealthBarData.ts

@@ -5,6 +5,7 @@ export interface Alert {
   startsAt: string;
   endsAt: string;
   severity: 'warning' | 'critical' | 'unavailable';
+  key: string;
 }
 
 export const useHealthBarData = (
@@ -44,6 +45,7 @@ export const useHealthBarData = (
       // Store alert data separately for tooltip access
       alertsMapData[uniqueKey] = {
         ...alert,
+        key: uniqueKey, // Add the consistent key to the alert object
       };
     });
 

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

@@ -8,30 +8,32 @@ 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 { Stack } 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 { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
+import { ChartTitleText } from '../text/Text.component';
 import { formatXAxisLabel } from './utils';
 import {
-  ChartTooltipContainer,
+  ChartTooltipPortal,
   ChartTooltipItem,
   ChartTooltipHeader,
   ChartTooltipItemsContainer,
+  ChartTooltipSeparator,
+  TooltipHeader,
 } from '../charttooltip/ChartTooltip';
 import { LegendShape } from '../chartlegend/ChartLegend';
 import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
+import { getRoundReferenceValue, getTicks } from '../barchartv2/utils';
+import { IconHelp } from '../iconhelper/IconHelper';
+
+const maxWidthTooltip = { maxWidth: '20rem' };
 
 const LineTemporalChartWrapper = styled.div`
   display: flex;
@@ -39,11 +41,6 @@ const LineTemporalChartWrapper = styled.div`
   justify-content: flex-start;
 `;
 
-const ChartHeader = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
 export type Serie = {
   // the name of the resource
   resource: string;
@@ -99,92 +96,112 @@ 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,
+  chartContainerRef,
 }: {
   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;
+  chartContainerRef: React.RefObject<HTMLDivElement>;
 }) => {
-  const { active, payload, label } = tooltipProps;
+  const { active, payload, label, coordinate } = tooltipProps;
 
   if (!active || !payload || !payload.length || !label || !isChartActive)
     return null;
 
-  if (renderTooltip) {
-    return renderTooltip(tooltipProps, unitLabel, timeFormat);
-  }
-  // 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 = a.value;
-    const bValue = b.value;
-
-    if (aValue >= 0 && bValue >= 0) {
-      return bValue - aValue; // Higher positive values first
-    }
-    if (aValue < 0 && bValue < 0) {
-      return bValue - aValue; // Lower negative values first
-    }
-    return bValue - aValue; // Positives before negatives
-  });
-
-  return (
-    <ChartTooltipContainer>
+  const tooltipContent = renderTooltip ? (
+    renderTooltip(tooltipProps, unitLabel, duration)
+  ) : (
+    <>
       <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) => {
-          const legendIcon = (
-            <LegendShape
-              color={entry.color}
-              shape="line"
-              chartColors={{ [entry.color]: entry.color }}
-            />
-          );
-
-          const isHovered = entry.name === hoveredValue;
-
-          const formattedValue = !Number.isFinite(entry.value)
-            ? '-'
-            : `${entry.value.toFixed(2)} ${unitLabel}`;
-
-          return (
-            <ChartTooltipItem
-              key={index}
-              label={entry.name}
-              value={formattedValue}
-              legendIcon={legendIcon}
-              isHovered={isHovered}
-            />
+        {(() => {
+          // 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 = a.value;
+            const bValue = b.value;
+
+            if (aValue >= 0 && bValue >= 0) {
+              return bValue - aValue; // Higher positive values first
+            }
+            if (aValue < 0 && bValue < 0) {
+              return bValue - aValue; // Lower negative values first
+            }
+            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 sortedPayload.map((entry, index) => {
+            const legendIcon = (
+              <LegendShape
+                color={entry.color}
+                shape="line"
+                chartColors={{ [entry.color]: entry.color }}
+              />
+            );
+
+            const isHovered = entry.name === hoveredValue;
+
+            const formattedValue = !Number.isFinite(entry.value)
+              ? '-'
+              : `${entry.value.toFixed(2)} ${unitLabel}`;
+
+            return (
+              <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>
-    </ChartTooltipContainer>
+    </>
+  );
+
+  return (
+    <ChartTooltipPortal
+      coordinate={coordinate}
+      chartContainerRef={chartContainerRef}
+      isVisible={active && isChartActive}
+    >
+      {tooltipContent}
+    </ChartTooltipPortal>
   );
 };
 
@@ -376,8 +393,8 @@ export function LineTimeSerieChart({
     const maxValue = Math.max(top, bottom);
 
     const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
-
-    const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+    // Use round reference value to add extra padding to the top value
+    const topValue = getRoundReferenceValue(maxValue / valueBase);
 
     const rechartsData = chartData.map((dataPoint) => {
       const normalizedDataPoint = { ...dataPoint };
@@ -438,28 +455,21 @@ 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 (
     <LineTemporalChartWrapper>
-      <ChartHeader>
+      <Stack gap="r4">
         <ChartTitleText>
           {title} {unitLabel && `(${unitLabel})`}
         </ChartTitleText>
         {helpText && (
-          <Box ml={spacing.r4}>
-            <TooltipComponent
-              placement={'right'}
-              overlay={<SmallerText>{helpText}</SmallerText>}
-            >
-              <Icon name="Info" color={theme.buttonSecondary} />
-            </TooltipComponent>
-          </Box>
+          <IconHelp tooltipMessage={helpText} overlayStyle={maxWidthTooltip} />
         )}
         {isLoading && <Loader />}
-      </ChartHeader>
+      </Stack>
       <div
         onFocus={() => setIsChartActive(true)}
         onBlur={() => setIsChartActive(false)}
@@ -504,9 +514,8 @@ export function LineTimeSerieChart({
               label={{
                 value: yAxisTitle,
                 angle: 90,
-                position: 'insideRight',
+                dx: 20,
                 style: {
-                  textAnchor: 'middle',
                   fill: theme.textSecondary,
                   fontSize: fontSize.smaller,
                 },
@@ -524,20 +533,22 @@ export function LineTimeSerieChart({
                 fontSize: fontSize.smaller,
               }}
               tickFormatter={(value) =>
-                new Intl.NumberFormat('fr-FR').format(value.toFixed(0))
+                new Intl.NumberFormat('fr-FR').format(value)
               }
-              tickCount={5}
+              ticks={getTicks(topValue, yAxisType === 'symmetrical')}
               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}
+                  chartContainerRef={chartRef}
                 />
               )}
             />

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');
-    });
-
-    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');
+  describe('medium duration (≤ 7 days)', () => {
+    it('should format timestamp with day-month-abbreviated-hour-minute format', () => {
+      const duration = 3 * 24 * 60 * 60; // 3 days
+      const result = formatXAxisLabel(mockTimestamp, duration);
+      expect(result).toBe('15 Sep 14:30');
     });
+  });
 
-    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 14:30');
+    });
 
-      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 {
+  TIME_FORMATER,
+  DAY_MONTH_ABBREVIATED_YEAR,
   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;
@@ -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_HOUR_MINUTE.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/style/theme.ts

@@ -60,7 +60,7 @@ export const coreUIAvailableThemesNames = [
   'darkRebrand',
   'artescaLight',
   'ring9dark',
-  'G-Dark'
+  'G-Dark',
 ] as const;
 export type CoreUIThemeName = (typeof coreUIAvailableThemesNames)[number];
 

package/stories/BarChart/barchart.stories.tsx

@@ -39,17 +39,17 @@ export const Playground: Story = {
       {
         label: 'Success',
         data: [
-          ['category1', 2],
-          ['category2', 4],
-          ['category3', 6],
+          ['category1', 1],
+          ['category2', 1],
+          ['category3', 2],
         ],
       },
       {
         label: 'Failed',
         data: [
-          ['category1', 8],
-          ['category2', 10],
-          ['category3', 12],
+          ['category1', 1],
+          ['category2', 1],
+          ['category3', 2],
         ],
       },
     ] as const;
@@ -61,7 +61,11 @@ export const Playground: Story = {
         }}
       >
         <Stack direction="vertical" gap="r16">
-          <Barchart type={{ type: 'category' }} bars={exampleData} />
+          <Barchart
+            type={{ type: 'category' }}
+            bars={exampleData}
+            title="Playground"
+          />
           <ChartLegend shape="rectangle" direction="horizontal" />
         </Stack>
       </ChartLegendWrapper>
@@ -122,6 +126,7 @@ export const Time7Days: Story = {
       >
         <Stack direction="vertical" gap="r16">
           <Barchart
+            title="Time 7 Days"
             type={{
               type: 'time',
               timeRange: {
@@ -192,6 +197,7 @@ export const Time7DaysWithMissingData: Story = {
         }}
       >
         <Barchart
+          title="Time 7 Days With Missing Data"
           type={{
             type: 'time',
             timeRange: {
@@ -285,6 +291,7 @@ export const TimeLast24Hours: Story = {
         }}
       >
         <Barchart
+          title="Time Last 24 Hours"
           type={{
             type: 'time',
             timeRange: {
@@ -332,6 +339,7 @@ export const CapacityWithUnitRange: Story = {
         }}
       >
         <Barchart
+          title="Capacity With Unit Range"
           type={{ type: 'category' }}
           bars={capacityDataWithUnitRange}
           unitRange={[
@@ -402,7 +410,12 @@ export const Stacked: Story = {
         }}
       >
         <Stack direction="vertical" gap="r16">
-          <Barchart type={{ type: 'category' }} bars={stackedData} stacked />
+          <Barchart
+            type={{ type: 'category' }}
+            bars={stackedData}
+            stacked
+            title="Stacked"
+          />
           <ChartLegend shape="rectangle" />
         </Stack>
       </ChartLegendWrapper>
@@ -457,6 +470,7 @@ export const DefaultSort: Story = {
           stacked
           bars={defaultSortData}
           defaultSort={customSort}
+          title="Default Sort"
         />
       </ChartLegendWrapper>
     );
@@ -531,6 +545,7 @@ export const WithCustomTooltip: Story = {
         >
           <Stack direction="vertical" gap="r16">
             <Barchart
+              title="Custom Tooltip"
               type={{ type: 'category' }}
               bars={exampleData}
               tooltip={customTooltip}

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