@scality/core-ui 0.176.0 → 0.178.0

package/dist/components/globalhealthbar/components/GlobalHealthBarTooltip.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
-import { useEffect, useState } from 'react';
 import styled, { css, useTheme } from 'styled-components';
-import { useFloating, autoUpdate, offset, flip, shift, } from '@floating-ui/react';
 import { FormattedDateTime, Stack, Text, Wrap, spacing } from '../../../index';
 import { zIndex } from '../../../style/theme';
 import { CHART_CONFIG, getTooltipPosition } from '../healthBarUtils';
+import { ChartTooltipPortal } from '../../charttooltip/ChartTooltip';
 const TooltipContainer = styled.div `
   ${(props) => {
     const theme = useTheme();
@@ -25,28 +23,11 @@ const TooltipContainer = styled.div `
 export const GlobalHealthBarTooltip = (props) => {
     const { tooltipData, tooltipProps, chartContainerRef, isKeyboardActive = false, startTimestamp = 0, endTimestamp = 0, } = props;
     const { coordinate } = tooltipProps;
-    const [virtualElement, setVirtualElement] = useState(null);
-    const { refs, floatingStyles } = useFloating({
-        elements: {
-            reference: virtualElement,
-        },
-        middleware: [
-            offset(({ placement }) => {
-                // Use larger offset when tooltip is on top
-                // to avoid tooltip over bar
-                return placement.includes('top') ? 20 : 30;
-            }),
-            flip(),
-            shift({ padding: 10 }),
-        ],
-        whileElementsMounted: autoUpdate,
-    });
-    // Create virtual element from coordinate
-    useEffect(() => {
-        if (chartContainerRef.current) {
-            const chartRect = chartContainerRef.current.getBoundingClientRect();
-            let tooltipX;
-            let tooltipY;
+    if (!tooltipData)
+        return null;
+    const { description, startsAt, endsAt, severity } = tooltipData;
+    const tooltipContent = (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "Severity" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: severity })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "Start" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: _jsx(FormattedDateTime, { format: "date-time", value: new Date(startsAt) }) })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "End" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: _jsx(FormattedDateTime, { format: "date-time", value: new Date(endsAt) }) })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", style: { paddingRight: spacing.r32 }, children: "Description" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", style: { whiteSpace: 'wrap', textAlign: 'justify' }, children: description })] })] }));
+    return (_jsx(ChartTooltipPortal, { coordinate: coordinate, chartContainerRef: chartContainerRef, isVisible: !!tooltipData, customPosition: (chartRect, coordinate) => {
             if (isKeyboardActive && tooltipData && startTimestamp && endTimestamp) {
                 // Calculate the chart's usable width (excluding margins)
                 const chartUsableWidth = chartRect.width -
@@ -54,42 +35,21 @@ export const GlobalHealthBarTooltip = (props) => {
                     CHART_CONFIG.MARGINS.right;
                 // Use the same positioning logic as alert bars
                 const alertCenterX = getTooltipPosition(tooltipData, startTimestamp, endTimestamp, chartUsableWidth);
-                // Position tooltip at the center of the alert's time span
-                // alertCenterX already includes the margin offset, so just add chartRect.left
-                tooltipX = chartRect.left + alertCenterX;
-                tooltipY = chartRect.top + CHART_CONFIG.BAR_SIZE;
+                return {
+                    x: chartRect.left + alertCenterX,
+                    y: chartRect.top + CHART_CONFIG.BAR_SIZE,
+                };
             }
             else {
                 // For mouse navigation, use the provided coordinate
-                tooltipX = chartRect.left + (coordinate === null || coordinate === void 0 ? void 0 : coordinate.x);
-                tooltipY = chartRect.top + (coordinate === null || coordinate === void 0 ? void 0 : coordinate.y);
+                return {
+                    x: chartRect.left + ((coordinate === null || coordinate === void 0 ? void 0 : coordinate.x) || 0),
+                    y: chartRect.top + ((coordinate === null || coordinate === void 0 ? void 0 : coordinate.y) || 0),
+                };
             }
-            setVirtualElement({
-                getBoundingClientRect() {
-                    return {
-                        width: 0,
-                        height: 0,
-                        x: tooltipX,
-                        y: tooltipY,
-                        left: tooltipX,
-                        top: tooltipY,
-                        right: tooltipX,
-                        bottom: tooltipY,
-                    };
-                },
-            });
-        }
-    }, [
-        coordinate,
-        chartContainerRef,
-        isKeyboardActive,
-        tooltipData,
-        startTimestamp,
-        endTimestamp,
-    ]);
-    if (!tooltipData)
-        return null;
-    const { description, startsAt, endsAt, severity } = tooltipData;
-    const tooltipContent = (_jsx(TooltipContainer, { ref: refs.setFloating, style: floatingStyles, children: _jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "Severity" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: severity })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "Start" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: _jsx(FormattedDateTime, { format: "date-time", value: new Date(startsAt) }) })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "End" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: _jsx(FormattedDateTime, { format: "date-time", value: new Date(endsAt) }) })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", style: { paddingRight: spacing.r32 }, children: "Description" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", style: { whiteSpace: 'wrap', textAlign: 'justify' }, children: description })] })] }) }));
-    return createPortal(tooltipContent, document.body);
+        }, containerComponent: TooltipContainer, offset: ({ placement }) => {
+            // Use larger offset when tooltip is on top
+            // to avoid tooltip over bar
+            return placement.includes('top') ? 20 : 30;
+        }, children: tooltipContent }));
 };

package/dist/components/globalhealthbar/components/HealthBarXAxis.js

@@ -14,7 +14,7 @@ const CustomTick = ({ tickProps, startTimestamp, endTimestamp, }) => {
     const edgeMargin = getEdgeMargin(index, visibleTicksCount, isDaySpan);
     return (
     // use coordinate to center the text
-    shouldShowLabel && (_jsx("g", { transform: `translate(${payload.coordinate},${y})`, children: _jsx("text", { textAnchor: "middle", dy: 10, dx: edgeMargin, fontSize: fontSize.smaller, fill: theme.textSecondary, children: is7DaySpan || isDaySpan ? (_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date(payload.value) })) : (_jsx(FormattedDateTime, { format: "time", value: new Date(payload.value) })) }) })));
+    shouldShowLabel && (_jsx("g", { transform: `translate(${payload.coordinate},${y})`, children: _jsx("text", { textAnchor: "middle", dy: 10, dx: edgeMargin, fontSize: fontSize.smaller, fill: theme.textSecondary, children: is7DaySpan ? (_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date(payload.value) })) : (_jsx(FormattedDateTime, { format: "time", value: new Date(payload.value) })) }) })));
 };
 export const HealthBarXAxis = ({ startTimestamp, endTimestamp, }) => {
     const theme = useTheme();

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.178.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;
@@ -112,15 +113,15 @@ interface CustomTickProps {
 
 /**
  * Get the format of the date based on the duration
- * @param duration - Duration in milliseconds
+ * @param duration - Duration in seconds
  * @returns Formatted string
  */
 export const formatDate = (
   duration: number,
 ): 'time' | 'day-month-abbreviated' | 'chart-long-term-date' => {
-  if (duration <= 24 * 60 * 60 * 1000) {
+  if (duration <= 24 * 60 * 60) {
     return 'time';
-  } else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+  } else if (duration <= 7 * 24 * 60 * 60) {
     return 'day-month-abbreviated';
   } else {
     return 'chart-long-term-date';
@@ -142,7 +143,9 @@ export const CustomTick = ({
 
   const duration =
     type.type === 'time'
-      ? type.timeRange.endDate.getTime() - type.timeRange.startDate.getTime()
+      ? (type.timeRange.endDate.getTime() -
+          type.timeRange.startDate.getTime()) /
+        1000
       : 0;
 
   return (
@@ -183,6 +186,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 +206,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 +266,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 +307,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 +321,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 +362,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 +399,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>
   );
 };