@scality/core-ui 0.176.0 → 0.177.0

package/dist/components/globalhealthbar/useHealthBarData.d.ts

@@ -3,6 +3,7 @@ export interface Alert {
     startsAt: string;
     endsAt: string;
     severity: 'warning' | 'critical' | 'unavailable';
+    key: string;
 }
 export declare const useHealthBarData: (alerts: Alert[], startTimestamp: number, endTimestamp: number, id: string) => {
     chartData: {

package/dist/components/globalhealthbar/useHealthBarData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHealthBarData.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/useHealthBarData.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,KAAK;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,WACnB,KAAK,EAAE,kBACC,MAAM,gBACR,MAAM,MAChB,MAAM;;;;;;;;;;CA4DX,CAAC"}
+{"version":3,"file":"useHealthBarData.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/useHealthBarData.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,KAAK;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;IACjD,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,gBAAgB,WACnB,KAAK,EAAE,kBACC,MAAM,gBACR,MAAM,MAChB,MAAM;;;;;;;;;;CA6DX,CAAC"}

package/dist/components/globalhealthbar/useHealthBarData.js

@@ -20,6 +20,7 @@ export const useHealthBarData = (alerts, startTimestamp, endTimestamp, id) => {
             // Store alert data separately for tooltip access
             alertsMapData[uniqueKey] = {
                 ...alert,
+                key: uniqueKey, // Add the consistent key to the alert object
             };
         });
         // Chart data - ready for BarChart (as array)

package/dist/components/globalhealthbar/useHealthBarData.spec.js

@@ -10,6 +10,7 @@ describe('useHealthBarData', () => {
         severity,
         startsAt,
         endsAt,
+        key: `${severity}_${startsAt}`,
     });
     describe('Alert Filtering', () => {
         it('should include alerts that are completely within the time range', () => {
@@ -93,6 +94,7 @@ describe('useHealthBarData', () => {
                 severity: 'warning',
                 startsAt: '2023-12-01T02:00:00Z',
                 endsAt: '2023-12-01T04:00:00Z',
+                key: 'warning_0',
             });
         });
         it('should handle multiple alerts with correct indexing', () => {

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAiD,MAAM,OAAO,CAAC;AAqCtE,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,KACd,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AAkGF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CA4WhB"}
+{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAiD,MAAM,OAAO,CAAC;AAiCtE,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,KACd,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AAiHF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CAqWhB"}

package/dist/components/linetimeseriechart/linetimeseriechart.component.js

@@ -1,62 +1,58 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CartesianGrid, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, } from 'recharts';
 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 { Icon } from '../icon/Icon.component';
 import { addMissingDataPoint, getUnitLabel, } from '../linetemporalchart/ChartUtil';
 import { Loader } from '../loader/Loader.component';
-import { ChartTitleText, Text } from '../text/Text.component';
-import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
+import { ChartTitleText } from '../text/Text.component';
 import { formatXAxisLabel } from './utils';
-import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, ChartTooltipSeparator, TooltipHeader, } from '../charttooltip/ChartTooltip';
+import { 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;
   flex-direction: column;
   justify-content: flex-start;
 `;
-const ChartHeader = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const LineTimeSerieChartTooltip = ({ unitLabel, duration, isChartActive, tooltipProps, renderTooltip, hoveredValue, isSymmetrical, }) => {
-    const { active, payload, label } = tooltipProps;
+const LineTimeSerieChartTooltip = ({ unitLabel, duration, isChartActive, tooltipProps, renderTooltip, hoveredValue, isSymmetrical, chartContainerRef, }) => {
+    const { active, payload, label, coordinate } = tooltipProps;
     if (!active || !payload || !payload.length || !label || !isChartActive)
         return null;
-    if (renderTooltip) {
-        return renderTooltip(tooltipProps, unitLabel, duration);
-    }
-    // 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 (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: _jsx(TooltipHeader, { duration: duration, value: label }) }), _jsx(ChartTooltipItemsContainer, { children: sortedPayload.map((entry, index) => {
-                    const legendIcon = (_jsx(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 (_jsxs(React.Fragment, { children: [isSymmetrical &&
-                                hasBothPositiveAndNegative &&
-                                index === separatorIndex && _jsx(ChartTooltipSeparator, {}), _jsx(ChartTooltipItem, { label: entry.name, value: formattedValue, legendIcon: legendIcon, isHovered: isHovered })] }, index));
-                }) })] }));
+    const tooltipContent = renderTooltip ? (renderTooltip(tooltipProps, unitLabel, duration)) : (_jsxs(_Fragment, { children: [_jsx(ChartTooltipHeader, { children: _jsx(TooltipHeader, { duration: duration, value: label }) }), _jsx(ChartTooltipItemsContainer, { children: (() => {
+                    // 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 = (_jsx(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 (_jsxs(React.Fragment, { children: [isSymmetrical &&
+                                    hasBothPositiveAndNegative &&
+                                    index === separatorIndex && _jsx(ChartTooltipSeparator, {}), _jsx(ChartTooltipItem, { label: entry.name, value: formattedValue, legendIcon: legendIcon, isHovered: isHovered })] }, index));
+                    });
+                })() })] }));
+    return (_jsx(ChartTooltipPortal, { coordinate: coordinate, chartContainerRef: chartContainerRef, isVisible: active && isChartActive, children: tooltipContent }));
 };
 const isSymmetricalSeries = (series) => {
     return 'above' in series && 'below' in series;
@@ -172,7 +168,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
         const bottom = Math.abs(Math.min(...values));
         const maxValue = Math.max(top, bottom);
         const { valueBase, unitLabel } = getUnitLabel(unitRange !== null && unitRange !== void 0 ? 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 };
             Object.entries(dataPoint).forEach(([key, value]) => {
@@ -222,15 +219,14 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
     }, [series, getColor, selectedResources]);
     // Format time for display the tick in the x axis
     const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, duration), [duration]);
-    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(Text, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), accessibilityLayer: true, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(Stack, { gap: "r4", children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(IconHelp, { tooltipMessage: helpText, overlayStyle: maxWidthTooltip })), isLoading && _jsx(Loader, {})] }), _jsx("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), accessibilityLayer: true, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
                                 }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", label: {
                                     value: yAxisTitle,
                                     angle: 90,
-                                    position: 'insideRight',
+                                    dx: 20,
                                     style: {
-                                        textAnchor: 'middle',
                                         fill: theme.textSecondary,
                                         fontSize: fontSize.smaller,
                                     },
@@ -241,7 +237,7 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
                                         : [0, topValue], axisLine: { stroke: theme.border }, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                }, tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)), tickCount: 5, interval: 0 }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, duration: duration, renderTooltip: renderTooltip, isSymmetrical: yAxisType === 'symmetrical', tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
+                                }, tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value), ticks: getTicks(topValue, yAxisType === 'symmetrical'), interval: 0 }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, duration: duration, renderTooltip: renderTooltip, isSymmetrical: yAxisType === 'symmetrical', tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue, chartContainerRef: chartRef })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
                                 const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
                                 return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false, strokeDasharray: serie.isLineDashed ? '4 4' : undefined, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
                             }))] }) }) })] }));

package/dist/components/linetimeseriechart/utils.js

@@ -1,4 +1,4 @@
-import { TIME_FORMATER, DAY_MONTH_ABBREVIATED, DAY_MONTH_ABBREVIATED_YEAR, } from '../date/FormattedDateTime';
+import { TIME_FORMATER, DAY_MONTH_ABBREVIATED_YEAR, DAY_MONTH_ABBREVIATED_HOUR_MINUTE, } from '../date/FormattedDateTime';
 export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
 /**
  * Formats timestamp for X-axis labels based on time format and data range:
@@ -16,7 +16,7 @@ export const formatXAxisLabel = (timestamp, duration) => {
         return TIME_FORMATER.format(date);
     }
     else if (duration <= 7 * 24 * 60 * 60) {
-        return DAY_MONTH_ABBREVIATED.format(date)
+        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date)
             .replace(',', '')
             .replace(/Sept/g, 'Sep');
     }

package/dist/style/theme.js

@@ -33,7 +33,7 @@ export const coreUIAvailableThemesNames = [
     'darkRebrand',
     'artescaLight',
     'ring9dark',
-    'G-Dark'
+    'G-Dark',
 ];
 export const coreUIAvailableThemes = {
     darkRebrand: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.176.0",
+  "version": "0.177.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import {
   Bar,
   BarChart,
@@ -20,7 +20,7 @@ import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { BarchartTooltip } from './BarchartTooltip';
-import { UnitRange, useChartData } from './utils';
+import { getTicks, UnitRange, useChartData } from './utils';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 4,
@@ -34,6 +34,7 @@ const CHART_CONSTANTS = {
     bottom: 0,
   },
 };
+const maxWidthTooltip = { maxWidth: '20rem' };
 
 /* ---------------------------------- TYPE ---------------------------------- */
 
@@ -76,6 +77,7 @@ export type BarchartSortFn<T extends BarchartBars> = (
 
 export type BarchartProps<T extends BarchartBars> = {
   type: CategoryType | TimeType;
+  title: string;
   bars?: T;
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
@@ -89,7 +91,6 @@ export type BarchartProps<T extends BarchartBars> = {
    * @default 'default'
    */
   stackedBarSort?: 'default' | 'legend';
-  title?: string;
   secondaryTitle?: string;
   rightTitle?: React.ReactNode;
   height?: number;
@@ -183,6 +184,7 @@ export const CustomTick = ({
 export const StyledResponsiveContainer = styled(ResponsiveContainer)`
   // Avoid tooltip over constrained text to be cut off
   & .recharts-surface {
+    outline: none;
     overflow: visible;
   }
 `;
@@ -202,7 +204,12 @@ const ChartHeader = ({
     <Wrap>
       <Stack gap="r4">
         <Text variant="ChartTitle">{title}</Text>
-        {helpTooltip && <IconHelp tooltipMessage={helpTooltip} />}
+        {helpTooltip && (
+          <IconHelp
+            tooltipMessage={helpTooltip}
+            overlayStyle={maxWidthTooltip}
+          />
+        )}
 
         {secondaryTitle && (
           <Text
@@ -257,6 +264,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   const theme = useTheme();
   const { getColor } = useChartLegend();
   const [hoveredValue, setHoveredValue] = useState<string | undefined>();
+  const chartRef = useRef<HTMLDivElement>(null);
 
   const {
     height = CHART_CONSTANTS.DEFAULT_HEIGHT,
@@ -297,11 +305,11 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
       unitRange,
       stackedBarSort,
     );
-
+  const titleWithUnit = unitLabel ? `${title} (${unitLabel})` : title;
   return (
-    <Stack direction="vertical">
+    <Stack direction="vertical" style={{ gap: '0' }}>
       <ChartHeader
-        title={title}
+        title={titleWithUnit}
         secondaryTitle={secondaryTitle}
         helpTooltip={helpTooltip}
         rightTitle={rightTitle}
@@ -311,7 +319,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
       ) : isLoading ? (
         <Loading height={height} />
       ) : (
-        <StyledResponsiveContainer width="100%" height={height}>
+        <StyledResponsiveContainer ref={chartRef} width="100%" height={height}>
           <BarChart
             data={rechartsData}
             accessibilityLayer
@@ -352,13 +360,11 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             })}
 
             <YAxis
-              tickCount={1}
               interval={0}
-              unit={` ${unitLabel}`}
               domain={[0, roundReferenceValue]}
+              ticks={getTicks(roundReferenceValue, false)}
               tickFormatter={
-                (value) =>
-                  new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
+                (value) => new Intl.NumberFormat('fr-FR').format(value) // Add a space as thousand separator
               }
               axisLine={{ stroke: theme.border }}
               tick={{
@@ -391,6 +397,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
                   hoveredValue={hoveredValue}
                   tooltip={tooltip}
                   unitLabel={unitLabel}
+                  chartContainerRef={chartRef}
                 />
               )}
               cursor={false}

package/src/lib/components/barchartv2/BarchartTooltip.test.tsx

@@ -19,6 +19,30 @@ const testTooltipProps = {
 const testTooltip = () => <div>Test Tooltip</div>;
 const date = new Date('2024-07-01T00:00:00').getTime();
 
+// Create a mock DOM element for the chart container
+const mockChartContainer = document.createElement('div');
+mockChartContainer.getBoundingClientRect = jest.fn(() => ({
+  width: 800,
+  height: 400,
+  top: 0,
+  left: 0,
+  right: 800,
+  bottom: 400,
+  x: 0,
+  y: 0,
+  toJSON: () => ({
+    width: 800,
+    height: 400,
+    top: 0,
+    left: 0,
+    right: 800,
+    bottom: 400,
+    x: 0,
+    y: 0,
+  }),
+}));
+const mockChartContainerRef = { current: mockChartContainer };
+
 describe('ChartTooltip', () => {
   const selectors = {
     tooltip: () => screen.queryByText(/Test Tooltip/),
@@ -39,6 +63,7 @@ describe('ChartTooltip', () => {
         tooltipProps={testTooltipProps}
         hoveredValue="Success"
         tooltip={undefined}
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.category()).toBeInTheDocument();
@@ -54,6 +79,7 @@ describe('ChartTooltip', () => {
         tooltipProps={testTooltipProps}
         hoveredValue="Success"
         tooltip={testTooltip}
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.tooltip()).toBeInTheDocument();
@@ -65,6 +91,7 @@ describe('ChartTooltip', () => {
         tooltipProps={{ ...testTooltipProps, active: false }}
         hoveredValue="Success"
         tooltip={testTooltip}
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.tooltip()).not.toBeInTheDocument();
@@ -84,6 +111,7 @@ describe('ChartTooltip', () => {
         }}
         tooltipProps={{ ...testTooltipProps, label }}
         hoveredValue="Success"
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.success()).toBeInTheDocument();
@@ -107,6 +135,7 @@ describe('ChartTooltip', () => {
         }}
         tooltipProps={{ ...testTooltipProps, label }}
         hoveredValue="Success"
+        chartContainerRef={mockChartContainerRef}
       />,
     );
     expect(selectors.success()).toBeInTheDocument();
@@ -133,6 +162,7 @@ describe('ChartTooltip', () => {
         tooltipProps={tooltipProps}
         hoveredValue="Success"
         unitLabel="kB"
+        chartContainerRef={mockChartContainerRef}
       />,
     );
 

package/src/lib/components/barchartv2/BarchartTooltip.tsx

@@ -1,7 +1,7 @@
 import { TooltipContentProps } from 'recharts';
 import { LegendShape } from '../chartlegend/ChartLegend';
 import {
-  ChartTooltipContainer,
+  ChartTooltipPortal,
   ChartTooltipHeader,
   ChartTooltipItem,
   ChartTooltipItemsContainer,
@@ -22,6 +22,7 @@ export const BarchartTooltip = <T extends BarchartBars>({
   hoveredValue,
   tooltip,
   unitLabel,
+  chartContainerRef,
 }: {
   type: TimeType | CategoryType;
   tooltipProps: TooltipContentProps<number, string>;
@@ -29,23 +30,25 @@ export const BarchartTooltip = <T extends BarchartBars>({
   hoveredValue: string | undefined;
   tooltip?: BarchartTooltipFn<T>;
   unitLabel?: string;
+  chartContainerRef: React.RefObject<HTMLDivElement>;
 }) => {
-  const { active } = tooltipProps;
+  const { active, coordinate } = tooltipProps;
 
   if (!active) {
     return null;
   }
 
   const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
-  if (tooltip) {
-    return tooltip(currentPoint);
-  }
+
   const duration =
     type.type === 'time'
       ? type.timeRange.startDate.getTime() - type.timeRange.endDate.getTime()
       : 0;
-  return (
-    <ChartTooltipContainer>
+
+  const tooltipContent = tooltip ? (
+    tooltip(currentPoint)
+  ) : (
+    <>
       <ChartTooltipHeader>
         {type.type === 'time' ? (
           <TooltipHeader duration={duration} value={currentPoint.category} />
@@ -80,6 +83,16 @@ export const BarchartTooltip = <T extends BarchartBars>({
           );
         })}
       </ChartTooltipItemsContainer>
-    </ChartTooltipContainer>
+    </>
+  );
+
+  return (
+    <ChartTooltipPortal
+      coordinate={coordinate}
+      chartContainerRef={chartContainerRef}
+      isVisible={active}
+    >
+      {tooltipContent}
+    </ChartTooltipPortal>
   );
 };

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

@@ -7,6 +7,7 @@ import {
   getCurrentPoint,
   getMaxBarValue,
   getRoundReferenceValue,
+  getTicks,
   sortStackedBars,
   transformCategoryData,
   transformTimeData,
@@ -504,21 +505,73 @@ describe('applySortingToData', () => {
 });
 
 describe('getRoundReferenceValue', () => {
-  it('should return appropriate rounded values', () => {
-    expect(getRoundReferenceValue(1)).toBe(5);
-    expect(getRoundReferenceValue(2)).toBe(5);
-    expect(getRoundReferenceValue(3)).toBe(5);
-    expect(getRoundReferenceValue(7)).toBe(10);
-    expect(getRoundReferenceValue(15)).toBe(25);
-    expect(getRoundReferenceValue(35)).toBe(50);
-    expect(getRoundReferenceValue(75)).toBe(100);
-    expect(getRoundReferenceValue(150)).toBe(250);
-    expect(getRoundReferenceValue(350)).toBe(500);
-    expect(getRoundReferenceValue(750)).toBe(1000);
-    expect(getRoundReferenceValue(1500)).toBe(2500);
-    expect(getRoundReferenceValue(3500)).toBe(5000);
-    expect(getRoundReferenceValue(7500)).toBe(10000);
-    expect(getRoundReferenceValue(15000)).toBe(25000);
+  it('should return appropriate rounded values with 10% buffer', () => {
+    // Small values (< 10)
+    expect(getRoundReferenceValue(0.1)).toBe(0.2); // 0.1 → 0.11 → 0.2
+    expect(getRoundReferenceValue(1)).toBe(2); // 1.1 → 1.5 → 2
+    expect(getRoundReferenceValue(2)).toBe(5); // 2.2 → 3 → 5
+    expect(getRoundReferenceValue(3)).toBe(5); // 3.3 → 4 → 5
+
+    // Values 5-10 range
+    expect(getRoundReferenceValue(6)).toBe(10); // 6.6 → 10 (skip 7.5 for values < 10)
+    expect(getRoundReferenceValue(9)).toBe(10); // 9.9 → 10
+
+    // Larger values get 10% buffer applied
+    expect(getRoundReferenceValue(15)).toBe(20); // 16.5 → 20
+    expect(getRoundReferenceValue(35)).toBe(40); // 38.5 → 40
+    expect(getRoundReferenceValue(75)).toBe(100); // 82.5 → 100
+    expect(getRoundReferenceValue(150)).toBe(200); // 165 → 200
+    expect(getRoundReferenceValue(350)).toBe(400); // 385 → 400
+    expect(getRoundReferenceValue(750)).toBe(1000); // 825 → 1000
+    expect(getRoundReferenceValue(1500)).toBe(2000); // 1650 → 2000
+    expect(getRoundReferenceValue(3500)).toBe(4000); // 3850 → 4000
+    expect(getRoundReferenceValue(7500)).toBe(10000); // 8250 → 10000
+    expect(getRoundReferenceValue(15000)).toBe(20000); // 16500 → 20000
+  });
+});
+
+describe('getTicks', () => {
+  describe('small values (< 10)', () => {
+    it('should return 2 ticks for non-symmetrical small values', () => {
+      expect(getTicks(1, false)).toEqual([0, 1]);
+      expect(getTicks(2, false)).toEqual([0, 2]);
+      expect(getTicks(5, false)).toEqual([0, 5]);
+    });
+
+    it('should return 3 ticks for symmetrical small values', () => {
+      expect(getTicks(1, true)).toEqual([-1, 0, 1]);
+      expect(getTicks(2, true)).toEqual([-2, 0, 2]);
+      expect(getTicks(5, true)).toEqual([-5, 0, 5]);
+    });
+  });
+
+  describe('even topValue (divisible by 2)', () => {
+    it('should return 3 ticks for non-symmetrical even values', () => {
+      expect(getTicks(10, false)).toEqual([0, 5, 10]);
+      expect(getTicks(20, false)).toEqual([0, 10, 20]);
+      expect(getTicks(40, false)).toEqual([0, 20, 40]);
+      expect(getTicks(50, false)).toEqual([0, 25, 50]);
+      expect(getTicks(100, false)).toEqual([0, 50, 100]);
+      expect(getTicks(1000, false)).toEqual([0, 500, 1000]);
+    });
+
+    it('should return 5 ticks for symmetrical even values', () => {
+      expect(getTicks(10, true)).toEqual([-10, -5, 0, 5, 10]);
+      expect(getTicks(100, true)).toEqual([-100, -50, 0, 50, 100]);
+    });
+  });
+
+  describe('odd topValue (not divisible by 2) - 7.5 multiples', () => {
+    it('should return 4 ticks for non-symmetrical values from 7.5 × magnitude', () => {
+      expect(getTicks(75, false)).toEqual([0, 25, 50, 75]);
+      expect(getTicks(750, false)).toEqual([0, 250, 500, 750]);
+      expect(getTicks(7500, false)).toEqual([0, 2500, 5000, 7500]);
+    });
+
+    it('should return 7 ticks for symmetrical values from 7.5 × magnitude', () => {
+      expect(getTicks(75, true)).toEqual([-75, -50, -25, 0, 25, 50, 75]);
+      expect(getTicks(750, true)).toEqual([-750, -500, -250, 0, 250, 500, 750]);
+    });
   });
 });
 
@@ -685,7 +738,8 @@ describe('computeUnitLabelAndRoundReferenceValue', () => {
     );
 
     expect(result.unitLabel).toBe('kB');
-    expect(result.roundReferenceValue).toBe(10);
+    // 1680 / 1000 = 1.68, with buffer: 1.848 → rounds to 2
+    expect(result.roundReferenceValue).toBe(2);
     expect(result.rechartsData).toEqual([
       {
         category: 'category1',
@@ -718,7 +772,8 @@ describe('computeUnitLabelAndRoundReferenceValue', () => {
     );
 
     expect(result.unitLabel).toBe('B');
-    expect(result.roundReferenceValue).toBe(1000);
+    // 680 with buffer: 748 → rounds to 750 (7.5 * 100, value > 10)
+    expect(result.roundReferenceValue).toBe(750);
     expect(result.rechartsData).toEqual([
       { category: 'category1', success: 680 },
     ]);