@scality/core-ui 0.193.0 → 0.195.0

package/src/lib/components/charts/barchart/Barchart.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useMemo, useCallback } from 'react';
 import {
   Bar,
   BarChart as RechartsBarChart,
@@ -13,7 +13,7 @@ import { Stack } from '../../../spacing';
 import { chartColors, ChartColors, fontSize } from '../../../style/theme';
 import { useChartLegend } from '../legend/ChartLegendWrapper';
 import { BarchartTooltip } from './BarchartTooltip';
-import { formatToISONumber, getTicks } from '../common/chartUtils';
+import { formatTickValue, getTicks } from '../common/chartUtils';
 import { useChartData } from './Barchart.utils';
 import {
   ChartHeader,
@@ -112,15 +112,19 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   } = props;
 
   // Create colorSet from ChartLegendWrapper
-  const colorSet = bars?.reduce(
-    (acc, bar) => {
-      const color = getColor(bar.label);
-      if (color) {
-        acc[bar.label] = color;
-      }
-      return acc;
-    },
-    {} as Record<string, ChartColors | string>,
+  const colorSet = useMemo(
+    () =>
+      bars?.reduce(
+        (acc, bar) => {
+          const color = getColor(bar.label);
+          if (color) {
+            acc[bar.label] = color;
+          }
+          return acc;
+        },
+        {} as Record<string, ChartColors | string>,
+      ),
+    [bars, getColor],
   );
 
   const {
@@ -139,6 +143,113 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     stackedBarSort,
   );
   const titleWithUnit = unitLabel ? `${title} (${unitLabel})` : title;
+
+  const tickFormatter = useCallback(
+    (value: number) => formatTickValue(value, roundReferenceValue),
+    [roundReferenceValue],
+  );
+
+  const renderChartContent = () => {
+    if (isError || (!bars && !isLoading)) {
+      return <ChartError height={height} />;
+    }
+    if (isLoading) {
+      return <ChartLoading height={height} />;
+    }
+
+    return (
+      <StyledResponsiveContainer ref={chartRef} width="100%" height={height}>
+        <RechartsBarChart
+          data={rechartsData}
+          accessibilityLayer
+          barSize={
+            type.type === 'category'
+              ? type.gap === 0
+                ? undefined
+                : CHART_CONSTANTS.BAR_SIZE
+              : CHART_CONSTANTS.BAR_SIZE
+          }
+          height={height}
+          margin={CHART_CONSTANTS.CHART_MARGIN}
+          barCategoryGap={type.type === 'category' ? type.gap : undefined}
+        >
+          <CartesianGrid
+            vertical={true}
+            horizontal={true}
+            verticalPoints={[0]}
+            horizontalPoints={[0]}
+            stroke={theme.border}
+            fill={theme.backgroundLevel4}
+            strokeWidth={1}
+          />
+          {rechartsBars.map((bar) => {
+            const { fill, dataKey, stackId } = bar;
+            return (
+              <Bar
+                key={dataKey}
+                dataKey={dataKey}
+                fill={chartColors[fill] || fill}
+                minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
+                stackId={stackId}
+                isAnimationActive={false}
+                onMouseOver={() => setHoveredValue(dataKey)}
+                onMouseLeave={() => setHoveredValue(undefined)}
+              />
+            );
+          })}
+
+          <YAxis
+            interval={0}
+            domain={[0, topDomain]}
+            ticks={getTicks(roundReferenceValue, false)}
+            tickFormatter={tickFormatter}
+            axisLine={{ stroke: theme.border }}
+            tick={{
+              fill: theme.textSecondary,
+              fontSize: fontSize.smaller,
+            }}
+            orientation="right"
+          />
+
+          <XAxis
+            dataKey="category"
+            tick={(props) => (
+              <CustomTick
+                {...props}
+                type={type}
+                tickWidthOffset={CHART_CONSTANTS.TICK_WIDTH_OFFSET}
+              />
+            )}
+            type="category"
+            interval={0}
+            allowDataOverflow={true}
+            tickLine={{
+              stroke: theme.border,
+            }}
+            axisLine={{
+              stroke: theme.border,
+            }}
+          />
+
+          <Tooltip
+            content={(props: TooltipContentProps<number, string>) => (
+              <BarchartTooltip
+                type={type}
+                colorSet={colorSet}
+                tooltipProps={props}
+                hoveredValue={hoveredValue}
+                tooltip={tooltip}
+                unitLabel={unitLabel}
+                chartContainerRef={chartRef}
+              />
+            )}
+            cursor={false}
+          />
+        </RechartsBarChart>
+      </StyledResponsiveContainer>
+    );
+  };
+
   return (
     <Stack direction="vertical" style={{ gap: '0' }}>
       <ChartHeader
@@ -147,101 +258,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
         helpTooltip={helpTooltip}
         rightTitle={rightTitle}
       />
-      {isError || (!bars && !isLoading) ? (
-        <ChartError height={height} />
-      ) : isLoading ? (
-        <ChartLoading height={height} />
-      ) : (
-        <StyledResponsiveContainer ref={chartRef} width="100%" height={height}>
-          <RechartsBarChart
-            data={rechartsData}
-            accessibilityLayer
-            barSize={
-              type.type === 'category'
-                ? type.gap === 0
-                  ? undefined
-                  : CHART_CONSTANTS.BAR_SIZE
-                : CHART_CONSTANTS.BAR_SIZE
-            }
-            height={height}
-            margin={CHART_CONSTANTS.CHART_MARGIN}
-            barCategoryGap={type.type === 'category' ? type.gap : undefined}
-          >
-            <CartesianGrid
-              vertical={true}
-              horizontal={true}
-              verticalPoints={[0]}
-              horizontalPoints={[0]}
-              stroke={theme.border}
-              fill={theme.backgroundLevel4}
-              strokeWidth={1}
-            />
-            {rechartsBars.map((bar) => {
-              const { fill, dataKey, stackId } = bar;
-              return (
-                <Bar
-                  key={dataKey}
-                  dataKey={dataKey}
-                  fill={chartColors[fill] || fill}
-                  minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
-                  stackId={stackId}
-                  isAnimationActive={false}
-                  onMouseOver={() => setHoveredValue(dataKey)}
-                  onMouseLeave={() => setHoveredValue(undefined)}
-                />
-              );
-            })}
-
-            <YAxis
-              interval={0}
-              domain={[0, topDomain]}
-              ticks={getTicks(roundReferenceValue, false)}
-              tickFormatter={(value) => formatToISONumber(value)}
-              axisLine={{ stroke: theme.border }}
-              tick={{
-                fill: theme.textSecondary,
-                fontSize: fontSize.smaller,
-              }}
-              orientation="right"
-            />
-
-            <XAxis
-              dataKey="category"
-              tick={(props) => (
-                <CustomTick
-                  {...props}
-                  type={type}
-                  tickWidthOffset={CHART_CONSTANTS.TICK_WIDTH_OFFSET}
-                />
-              )}
-              type="category"
-              interval={0}
-              allowDataOverflow={true}
-              tickLine={{
-                stroke: theme.border,
-              }}
-              axisLine={{
-                stroke: theme.border,
-              }}
-            />
-
-            <Tooltip
-              content={(props: TooltipContentProps<number, string>) => (
-                <BarchartTooltip
-                  type={type}
-                  colorSet={colorSet}
-                  tooltipProps={props}
-                  hoveredValue={hoveredValue}
-                  tooltip={tooltip}
-                  unitLabel={unitLabel}
-                  chartContainerRef={chartRef}
-                />
-              )}
-              cursor={false}
-            />
-          </RechartsBarChart>
-        </StyledResponsiveContainer>
-      )}
+      {renderChartContent()}
     </Stack>
   );
 };

package/src/lib/components/charts/common/SharedComponents.tsx

@@ -8,7 +8,7 @@ import { Text } from '../../text/Text.component';
 import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
 import { FormattedDateTime } from '../../date/FormattedDateTime';
 import { formatXAxisDate, maxWidthTooltip } from './chartUtils';
-import { TimeType } from '../types';
+import { TimeType, CategoryType } from '../types';
 
 /**
  * Styled ResponsiveContainer for charts
@@ -117,14 +117,14 @@ export const ChartHeader = ({
 };
 
 interface CustomTickProps {
-  x: number;
-  y: number;
+  x: number | string;
+  y: number | string;
   payload: {
     value: number;
   };
-  visibleTicksCount: number;
-  width: number;
-  type: TimeType;
+  visibleTicksCount?: number;
+  width?: number | string;
+  type: TimeType | CategoryType;
   tickWidthOffset?: number;
 }
 
@@ -142,20 +142,24 @@ export const CustomTick = ({
   tickWidthOffset = 4,
 }: CustomTickProps) => {
   const theme = useTheme();
-  const tickWidth = width / visibleTicksCount - tickWidthOffset;
-  const centerX = x - tickWidth / 2;
+  const numX = typeof x === 'string' ? parseFloat(x) : x;
+  const numY = typeof y === 'string' ? parseFloat(y) : y;
+  const numWidth = typeof width === 'string' ? parseFloat(width) : (width ?? 0);
+  const tickCount = visibleTicksCount ?? 1;
+  const tickWidth = numWidth / tickCount - tickWidthOffset;
+  const centerX = numX - tickWidth / 2;
 
   const duration =
     type.type === 'time'
       ? (type.timeRange.endDate.getTime() -
-          type.timeRange.startDate.getTime()) /
-        1000
+        type.timeRange.startDate.getTime()) /
+      1000
       : 0;
 
   return (
     <foreignObject
       x={centerX}
-      y={y - 10}
+      y={numY - 10}
       width={tickWidth}
       height={30}
       style={{

package/src/lib/components/charts/common/chartUtils.test.ts

@@ -23,16 +23,16 @@ describe('getRoundReferenceValue', () => {
     expect(getRoundReferenceValue(9)).toBe(9); // 9 → 9.9 → 9 (magnitude 1, remainder 0.9)
 
     // Larger values get 10% buffer applied
-    expect(getRoundReferenceValue(15)).toBe(10); // 15 → 16.5, remainder 5, incremented 20 > 16.5, so round down to 10
-    expect(getRoundReferenceValue(35)).toBe(30); // 35 → 38.5, remainder 5, incremented 40 > 38.5, so round down to 30
+    expect(getRoundReferenceValue(15)).toBe(15); // 15 → increment 5, remainder 0, return 15
+    expect(getRoundReferenceValue(35)).toBe(35); // 35 → increment 5, remainder 0, return 35
     expect(getRoundReferenceValue(75)).toBe(80); // 75 → 82.5, remainder 5, incremented 80 <= 82.5, so round up to 80
-    expect(getRoundReferenceValue(150)).toBe(150); // 150 → 165, remainder 0, so return 150
-    expect(getRoundReferenceValue(350)).toBe(350); // 350 → 385, remainder 0, so return 350
-    expect(getRoundReferenceValue(750)).toBe(750); // 750 → 825, remainder 0, so return 750
-    expect(getRoundReferenceValue(1500)).toBe(1500); // 1500 → 1650, remainder 0, so return 1500
-    expect(getRoundReferenceValue(3500)).toBe(3500); // 3500 → 3850, remainder 0, so return 3500
-    expect(getRoundReferenceValue(7500)).toBe(7500); // 7500 → 8250, remainder 0, so return 7500
-    expect(getRoundReferenceValue(15000)).toBe(15000); // 15000 → 16500, remainder 0, so return 15000
+    expect(getRoundReferenceValue(150)).toBe(150); // increment 50, remainder 0
+    expect(getRoundReferenceValue(350)).toBe(350); // increment 50, remainder 0
+    expect(getRoundReferenceValue(750)).toBe(800); // increment 100, remainder 50, rounds up
+    expect(getRoundReferenceValue(1500)).toBe(1500); // increment 500, remainder 0
+    expect(getRoundReferenceValue(3500)).toBe(3500); // increment 500, remainder 0
+    expect(getRoundReferenceValue(7500)).toBe(8000); // increment 1000, remainder 500, rounds up
+    expect(getRoundReferenceValue(15000)).toBe(15000); // increment 5000, remainder 0
   });
 });
 
@@ -95,8 +95,23 @@ describe('getUnitLabel', () => {
 });
 
 describe('addMissingDataPoint', () => {
+  it('should generate placeholder timestamps when original data is empty', () => {
+    const result = addMissingDataPoint([], 0, 100, 10);
+    expect(result).toEqual([
+      [0, NAN_STRING],
+      [10, NAN_STRING],
+      [20, NAN_STRING],
+      [30, NAN_STRING],
+      [40, NAN_STRING],
+      [50, NAN_STRING],
+      [60, NAN_STRING],
+      [70, NAN_STRING],
+      [80, NAN_STRING],
+      [90, NAN_STRING],
+    ]);
+  });
+
   it('should return empty array for invalid inputs', () => {
-    expect(addMissingDataPoint([], 0, 100, 10)).toEqual([]);
     expect(addMissingDataPoint([[10, 5]], undefined, 100, 10)).toEqual([]);
     expect(addMissingDataPoint([[10, 5]], 0, 0, 10)).toEqual([]);
     expect(addMissingDataPoint([[10, 5]], -1, 100, 10)).toEqual([]);
@@ -264,8 +279,8 @@ describe('normalizeChartDataWithUnits', () => {
       );
 
       expect(result.unitLabel).toBe('B');
-      // 680 / 1 = 680 → getRoundReferenceValue(680) = 680
-      expect(result.topValue).toBe(680);
+      // 680 / 1 = 680 → getRoundReferenceValue(680) = 700 (rounds up since 80 >= 50)
+      expect(result.topValue).toBe(700);
       expect(result.rechartsData).toEqual([
         { category: 'category1', success: 680 },
       ]);

package/src/lib/components/charts/common/chartUtils.ts

@@ -1,6 +1,7 @@
 import { NAN_STRING } from '../../constants';
 import { TooltipDateFormat } from './ChartTooltip';
 import { UnitRange } from '../types';
+import { formatISONumber } from '../../../utils';
 
 /* -------------------------------------------------------------------------- */
 /*                                  constants                                 */
@@ -12,6 +13,31 @@ export const maxWidthTooltip = { maxWidth: '20rem' };
 /*                               utils functions                              */
 /* -------------------------------------------------------------------------- */
 
+/**
+ * Get the appropriate rounding increment based on value magnitude.
+ * - For values < 5 * magnitude: use half magnitude (finer granularity)
+ * - For values >= 5 * magnitude: use full magnitude
+ *
+ * Examples:
+ * - 150 → increment 50 (150 < 500, so use 100/2)
+ * - 550 → increment 100 (550 >= 500, so use 100)
+ * - 1500 → increment 500 (1500 < 5000, so use 1000/2)
+ * - 5500 → increment 1000 (5500 >= 5000, so use 1000)
+ */
+const getIncrement = (value: number): number => {
+  if (value < 10) return 1;
+
+  const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+
+  // If value is in lower half of magnitude range, use half magnitude
+  if (value < 5 * magnitude) {
+    return magnitude / 2;
+  }
+
+  // Otherwise use full magnitude
+  return magnitude;
+};
+
 /**
  * Round a value to a nice number for chart display
  * Used by Barchart and LineTimeSerieChart for Y-axis scaling
@@ -23,29 +49,29 @@ export const getRoundReferenceValue = (value: number): number => {
   const bufferedValue = value * 1.1;
 
   if (value >= 10) {
-    const remainder = value % 10;
-    const incremented = value + (10 - remainder);
-
-    // If the remainder is less than 5, round down to the nearest 10
-    if (remainder < 5) {
-      return value - remainder;
+    const increment = getIncrement(value);
+    const remainder = value % increment;
+    const roundedDown = value - remainder;
+    const roundedUp = roundedDown + increment;
+
+    // If remainder is less than half the increment, round down
+    if (remainder < increment / 2) {
+      return roundedDown;
     }
 
-    // If incrementing would exceed the buffered max, also round down
-    if (incremented > bufferedValue) {
-      return value - remainder;
+    // If rounding up would exceed the buffered max, round down
+    if (roundedUp > bufferedValue) {
+      return roundedDown;
     }
 
-    // Otherwise, round up to the next 10
-    return incremented;
+    // Otherwise, round up
+    return roundedUp;
   }
 
+  // For values < 10, use the magnitude-based approach
   const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
-
   const remainder = bufferedValue % magnitude;
 
-  // Round to nice numbers based on normalized value
-  // appearance for small values
   return remainder === 0 ? bufferedValue : bufferedValue - remainder;
 };
 
@@ -53,7 +79,10 @@ export const getRoundReferenceValue = (value: number): number => {
  * Generate tick values for Y-axis
  * Used by Barchart and LineTimeSerieChart
  */
-export const getTicks = (topValue: number, isSymmetrical: boolean) => {
+export const getTicks = (
+  topValue: number,
+  isSymmetrical: boolean,
+): number[] => {
   const possibleTickNumbers = [4, 3];
   const numberOfTicks =
     possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 3; // Default to 3 ticks if no match
@@ -191,7 +220,7 @@ export const normalizeChartDataWithUnits = <T extends Record<string, any>>(
  * Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
  * Used by LineTimeSerieChart and Sparkline
  *
- * @param orginalValues - The array of the data points are already sorted according to the time series
+ * @param originalValues - The array of the data points are already sorted according to the time series
  * @param startingTimeStamp - The starting timestamp in seconds
  * @param sampleDuration - The time span value in seconds
  * @param sampleInterval - The time difference between two data points in seconds
@@ -214,9 +243,17 @@ export function addMissingDataPoint(
     return [];
   }
 
-  // If there are no original values, return empty array
+  // If there are no original values, generate placeholder timestamps for the entire duration
   if (originalValues.length === 0) {
-    return [];
+    const newValues: [number, number | string | null][] = [];
+    for (
+      let i = startingTimeStamp;
+      i < startingTimeStamp + sampleDuration;
+      i += sampleInterval
+    ) {
+      newValues.push([i, NAN_STRING]);
+    }
+    return newValues;
   }
 
   const newValues: [number, number | string | null][] = [];
@@ -326,9 +363,16 @@ export const getTooltipDateFormat: (duration: number) => TooltipDateFormat = (
   }
 };
 
-export const formatToISONumber = (value: number): string => {
-  const formattedValue = new Intl.NumberFormat('fr-FR')
-    .format(value)
-    .replace(',', '.');
-  return formattedValue;
+/**
+ * Formats a tick value for chart Y-axis display.
+ * - Fixed decimals for alignment when topValue < 1 (e.g., 0.1 → 0.10)
+ * - Compact notation for large values (>= 10k)
+ */
+export const formatTickValue = (value: number, topValue: number): string => {
+  const decimals = topValue < 1 ? Math.ceil(-Math.log10(topValue)) + 1 : 2;
+  return formatISONumber(value, {
+    decimals,
+    fixedDecimals: topValue < 1,
+    compact: topValue >= 10000,
+  });
 };

package/src/lib/components/charts/index.ts

@@ -12,7 +12,7 @@ export { LineTimeSerieChart } from './linetimeseries/LineTimeSerieChart';
 export type {
   LineChartProps,
   Serie,
-} from './linetimeseries/LineTimeSerieChart';
+} from './linetimeseries/LineTimeSerieChart.types';
 
 export { GlobalHealthBar } from './globalhealthbar/GlobalHealthBar';
 export type { GlobalHealthProps } from './globalhealthbar/GlobalHealthBar';