@scality/core-ui 0.175.0 → 0.177.0

package/dist/components/date/FormattedDateTime.js

@@ -3,7 +3,7 @@ import { getDateDaysDiff } from './dateDiffer';
 import { Tooltip } from '../tooltip/Tooltip.component';
 /**
  * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
- * @example Wednesday 6 October 2025
+ * @example Wednesday 06 October 2025
  */
 export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
     weekday: 'long',
@@ -32,7 +32,7 @@ export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
 });
 /**
  * @description Day month formatter, with weekday, day and month. Used for describing long term date.
- * @example Wed 6 Oct
+ * @example Wed 06 Oct
  */
 export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
     weekday: 'short',
@@ -58,9 +58,28 @@ export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
     hour: '2-digit',
     minute: '2-digit',
 });
+/**
+ * @description Day month abbreviated formatter. Used for describing long term date.
+ * @example 06 Oct
+ */
+export const DAY_MONTH_ABBREVIATED = Intl.DateTimeFormat('en-GB', {
+    day: '2-digit',
+    month: 'short',
+    hour12: false,
+});
+/**
+ * @description Day month abbreviated formatter. Used for describing long term date.
+ * @example 06 Oct 25
+ */
+export const DAY_MONTH_ABBREVIATED_YEAR = Intl.DateTimeFormat('en-GB', {
+    day: '2-digit',
+    month: 'short',
+    year: '2-digit',
+    hour12: false,
+});
 /**
  * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
- * @example 6 Oct 18:33:00
+ * @example 06 Oct 18:33:00
  */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-GB', {
     day: '2-digit',
@@ -72,7 +91,7 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-
 });
 /**
  * @description Day month abbreviated hour minute formatter. Used for describing long term date.
- * @example 6 Oct 18:33
+ * @example 06 Oct 18:33
  */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
     day: '2-digit',
@@ -81,6 +100,18 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
     minute: '2-digit',
     hour12: false,
 });
+/**
+ * @description Day month abbreviated year hour minute formatter. Used for describing long term date.
+ * @example 06 Oct 2025 18:33
+ */
+export const DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+});
 /**
  * @description Year month day formatter, without time. Used for describing long term date.
  * @example 2025-01-01
@@ -115,10 +146,10 @@ const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
  * time: '00:00'
  * 'time-second': '00:00:00'
  * relative: '1 month ago'
- * 'day-month-abbreviated-hour-minute': '6 Oct 18:33'
- * 'day-month-abbreviated-hour-minute-second': '6 Oct 18:33:00'
+ * 'day-month-abbreviated-hour-minute': '06 Oct 18:33'
+ * 'day-month-abbreviated-hour-minute-second': '06 Oct 18:33:00'
  * 'long-date': 'Wednesday 6 October 2025'
- * 'chart-date': '6 Oct'
+ * 'chart-date': '06 Oct'
  * 'year-month-day': '2025-10-06'
  */
 export const FormattedDateTime = ({ format, value, }) => {
@@ -176,6 +207,19 @@ export const FormattedDateTime = ({ format, value, }) => {
             return _jsx(_Fragment, { children: YEAR_MONTH_DAY_FORMATTER.format(value) });
         case 'month-day':
             return _jsx(_Fragment, { children: MONTH_DAY_FORMATTER.format(value) });
+        case 'day-month-abbreviated-year-hour-minute':
+            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE.format(value)
+                    .replace(',', '')
+                    .replace(/Sept/g, 'Sep') }));
+        case 'day-month-abbreviated':
+            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED.format(value)
+                    .replace(',', '')
+                    .replace(/Sept/g, 'Sep') }));
+        case 'chart-long-term-date':
+            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_YEAR.format(value)
+                    .replace(/[ ,]/g, '')
+                    // replace Sept with Sep to keep 3 letter month
+                    .replace(/Sept/g, 'Sep') }));
         default:
             return _jsx(_Fragment, {});
     }

package/dist/components/globalhealthbar/GlobalHealthBarRecharts.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHealthBarRecharts.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,EAAoB,MAAM,oBAAoB,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX;AAMD,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,iBAAiB,2CAyK5E;AAGD,YAAY,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"GlobalHealthBarRecharts.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,EAAoB,MAAM,oBAAoB,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX;AAUD,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,iBAAiB,2CAkN5E;AAGD,YAAY,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/globalhealthbar/GlobalHealthBarRecharts.component.js

@@ -8,11 +8,16 @@ import { CHART_CONFIG, getNavigationAction, getNavigationStateUpdate, } from './
 import { useHealthBarData } from './useHealthBarData';
 const ChartInteractiveContainer = styled.div `
   position: relative;
+  outline: none;
+  .recharts-surface {
+    outline: none;
+  }
 `;
 export function GlobalHealthBar({ id, alerts, start, end }) {
     const [tooltipData, setTooltipData] = useState(null);
     const [focusedAlertIndex, setFocusedAlertIndex] = useState(-1);
     const [keyboardActive, setKeyboardActive] = useState(false);
+    const [activeBarKey, setActiveBarKey] = useState(null);
     const chartContainerRef = useRef(null);
     const theme = useTheme();
     const startTimestamp = new Date(start).getTime();
@@ -20,10 +25,12 @@ export function GlobalHealthBar({ id, alerts, start, end }) {
     const { chartData, alertsMap, alertKeys } = useHealthBarData(alerts, startTimestamp, endTimestamp, id);
     const handlePointerEnter = useCallback((key) => {
         setTooltipData(alertsMap[key]);
+        setActiveBarKey(key);
     }, [alertsMap]);
     const handlePointerLeave = useCallback(() => {
         if (!keyboardActive) {
             setTooltipData(null);
+            setActiveBarKey(null);
         }
     }, [keyboardActive]);
     const { warningKeys, criticalKeys, unavailableKeys } = alertKeys;
@@ -43,6 +50,10 @@ export function GlobalHealthBar({ id, alerts, start, end }) {
         setFocusedAlertIndex(update.newIndex);
         setTooltipData(update.selectedAlert);
         setKeyboardActive(update.shouldActivateKeyboard);
+        // Set active bar key for keyboard navigation
+        if (update.selectedAlert) {
+            setActiveBarKey(update.selectedAlert.key);
+        }
     }, [allAlertKeys, focusedAlertIndex]);
     // Handle focus events
     const handleFocus = useCallback(() => {
@@ -50,12 +61,15 @@ export function GlobalHealthBar({ id, alerts, start, end }) {
             setFocusedAlertIndex(0);
             setTooltipData(allAlertKeys[0]);
             setKeyboardActive(true);
+            // Set active bar key for initial focus
+            setActiveBarKey(allAlertKeys[0].key);
         }
     }, [allAlertKeys, focusedAlertIndex]);
     const handleBlur = useCallback(() => {
         setKeyboardActive(false);
         setFocusedAlertIndex(-1);
         setTooltipData(null);
+        setActiveBarKey(null);
     }, []);
     // Handle mouse enter to disable keyboard mode
     const handleMouseEnter = useCallback(() => {
@@ -74,5 +88,17 @@ export function GlobalHealthBar({ id, alerts, start, end }) {
                             position: 'fixed',
                         }, content: (props) => {
                             return (_jsx(GlobalHealthBarTooltip, { tooltipData: tooltipData, tooltipProps: props, chartContainerRef: chartContainerRef, isKeyboardActive: keyboardActive, startTimestamp: startTimestamp, endTimestamp: endTimestamp }));
-                        } }), _jsx(YAxis, { yAxisId: 'background', type: "category", hide: true }), allAlertBars.map(({ key }) => (_jsx(YAxis, { yAxisId: key, type: "category", hide: true }, `yAxis${key}`))), _jsx(Bar, { dataKey: "range", fill: theme.statusHealthy, radius: CHART_CONFIG.RADIUS_SIZE, yAxisId: "background", isAnimationActive: false }), allAlertBars.map(({ key, fill }) => (_jsx(Bar, { dataKey: key, yAxisId: key, fill: fill, onPointerEnter: () => handlePointerEnter(key), onPointerLeave: () => handlePointerLeave(), isAnimationActive: false })))] }) }) }));
+                        } }), _jsx(YAxis, { yAxisId: 'background', type: "category", hide: true }), allAlertBars.map(({ key }) => (_jsx(YAxis, { yAxisId: key, type: "category", hide: true }, `yAxis${key}`))), _jsx(Bar, { dataKey: "range", fill: theme.statusHealthy, radius: CHART_CONFIG.RADIUS_SIZE, yAxisId: "background", isAnimationActive: false }), allAlertBars.map(({ key, fill }) => {
+                        const isActive = key === activeBarKey;
+                        // Skip active bar here - it will be rendered last
+                        if (isActive)
+                            return null;
+                        return (_jsx(Bar, { dataKey: key, yAxisId: key, fill: fill, onPointerEnter: () => handlePointerEnter(key), onPointerLeave: () => handlePointerLeave(), isAnimationActive: false }, key));
+                    }), activeBarKey &&
+                        (() => {
+                            const activeBar = allAlertBars.find((bar) => bar.key === activeBarKey);
+                            if (!activeBar)
+                                return null;
+                            return (_jsx(Bar, { dataKey: activeBar.key, yAxisId: activeBar.key, fill: activeBar.fill, stroke: theme.selectedActive, onPointerEnter: () => handlePointerEnter(activeBar.key), onPointerLeave: () => handlePointerLeave(), isAnimationActive: false }, `${activeBar.key}-active`));
+                        })()] }) }) }));
 }

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

@@ -13,6 +13,6 @@ interface GlobalHealthBarTooltipProps {
     startTimestamp?: number;
     endTimestamp?: number;
 }
-export declare const GlobalHealthBarTooltip: (props: GlobalHealthBarTooltipProps) => React.ReactPortal | null;
+export declare const GlobalHealthBarTooltip: (props: GlobalHealthBarTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=GlobalHealthBarTooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalHealthBarTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/globalhealthbar/components/GlobalHealthBarTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAI/C,UAAU,2BAA2B;IACnC,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoBD,eAAO,MAAM,sBAAsB,UAAW,2BAA2B,6BA+HxE,CAAC"}
+{"version":3,"file":"GlobalHealthBarTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/globalhealthbar/components/GlobalHealthBarTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAK/C,UAAU,2BAA2B;IACnC,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoBD,eAAO,MAAM,sBAAsB,UAAW,2BAA2B,mDA6FxE,CAAC"}

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

@@ -1,4 +1,5 @@
 import { TooltipContentProps } from 'recharts';
+import React from 'react';
 export type Serie = {
     resource: string;
     data: [number, number | string | null][];
@@ -37,7 +38,7 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
     timeFormat?: 'date-time' | 'date';
     yAxisTitle?: string;
     helpText?: string;
-    renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, timeFormat?: 'date-time' | 'date') => React.ReactNode;
+    renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, duration?: number) => React.ReactNode;
 };
 export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, syncId, renderTooltip, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 export {};

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;AAqClB,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,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6FF,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,2CA2WhB"}
+{"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,60 +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 { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
-import { spacing } from '../../spacing';
+import { Stack } from '../../spacing';
 import { fontSize } from '../../style/theme';
-import { Box } from '../box/Box';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { Icon } from '../icon/Icon.component';
 import { addMissingDataPoint, getUnitLabel, } from '../linetemporalchart/ChartUtil';
 import { Loader } from '../loader/Loader.component';
-import { ChartTitleText, SmallerText } from '../text/Text.component';
-import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
+import { ChartTitleText } from '../text/Text.component';
 import { formatXAxisLabel } from './utils';
-import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } 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, timeFormat, isChartActive, tooltipProps, renderTooltip, hoveredValue, }) => {
-    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, timeFormat);
-    }
-    // We can't use the default itemSorter method because it's a custom tooltip.
-    // Sort the payload here instead
-    const sortedPayload = [...payload].sort((a, b) => {
-        const aValue = a.value;
-        const bValue = b.value;
-        if (aValue >= 0 && bValue >= 0) {
-            return bValue - aValue; // Higher positive values first
-        }
-        if (aValue < 0 && bValue < 0) {
-            return bValue - aValue; // Lower negative values first
-        }
-        return bValue - aValue; // Positives before negatives
-    });
-    return (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: _jsx(FormattedDateTime, { format: timeFormat === 'date-time'
-                        ? 'day-month-abbreviated-hour-minute-second'
-                        : 'long-date-without-weekday', value: new Date(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 (_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;
@@ -170,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]) => {
@@ -219,16 +218,15 @@ 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, timeFormat, chartData), [timeFormat, chartData]);
-    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(SmallerText, { 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: {
+    const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, duration), [duration]);
+    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,
                                     },
@@ -239,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, timeFormat: timeFormat, renderTooltip: renderTooltip, 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.d.ts

@@ -12,5 +12,5 @@ export type ChartDataPoint = {
  * @param chartData - The chart data to determine time range for optimal formatting
  * @returns Formatted string for display on X-axis
  */
-export declare const formatXAxisLabel: (timestamp: number, timeFormat?: "date-time" | "date", chartData?: ChartDataPoint[]) => string;
+export declare const formatXAxisLabel: (timestamp: number, duration: number) => string;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,cAChB,MAAM,eACL,WAAW,GAAG,MAAM,cACrB,cAAc,EAAE,KAC1B,MAgBF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,cAChB,MAAM,YACP,MAAM,KACf,MAaF,CAAC"}

package/dist/components/linetimeseriechart/utils.js

@@ -1,4 +1,4 @@
-import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, YEAR_MONTH_DAY_FORMATTER, MONTH_DAY_FORMATTER, } 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:
@@ -10,19 +10,19 @@ export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
  * @param chartData - The chart data to determine time range for optimal formatting
  * @returns Formatted string for display on X-axis
  */
-export const formatXAxisLabel = (timestamp, timeFormat = 'date-time', chartData = []) => {
+export const formatXAxisLabel = (timestamp, duration) => {
     const date = new Date(timestamp);
-    if (!chartData.length) {
-        return YEAR_MONTH_DAY_FORMATTER.format(date);
+    if (duration <= 24 * 60 * 60) {
+        return TIME_FORMATER.format(date);
     }
-    if (timeFormat === 'date-time') {
-        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
+    else if (duration <= 7 * 24 * 60 * 60) {
+        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date)
+            .replace(',', '')
+            .replace(/Sept/g, 'Sep');
+    }
+    else {
+        return DAY_MONTH_ABBREVIATED_YEAR.format(date)
+            .replace(/[ ,]/g, '')
+            .replace(/Sept/g, 'Sep');
     }
-    const timestamps = chartData.map((d) => d.timestamp);
-    const minTimestamp = Math.min(...timestamps);
-    const maxTimestamp = Math.max(...timestamps);
-    const timeRangeMilliseconds = maxTimestamp - minTimestamp;
-    return timeRangeMilliseconds >= ONE_YEAR_MILLISECONDS
-        ? YEAR_MONTH_DAY_FORMATTER.format(date)
-        : MONTH_DAY_FORMATTER.format(date);
 };

package/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.175.0",
+  "version": "0.177.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",