@scality/core-ui 0.176.0 → 0.177.0

package/dist/components/barchartv2/Barchart.component.d.ts

@@ -41,6 +41,7 @@ export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['
 }) => 1 | -1 | 0;
 export type BarchartProps<T extends BarchartBars> = {
     type: CategoryType | TimeType;
+    title: string;
     bars?: T;
     tooltip?: BarchartTooltipFn<T>;
     defaultSort?: BarchartSortFn<T>;
@@ -54,7 +55,6 @@ export type BarchartProps<T extends BarchartBars> = {
      * @default 'default'
      */
     stackedBarSort?: 'default' | 'legend';
-    title?: string;
     secondaryTitle?: string;
     rightTitle?: React.ReactNode;
     height?: number;

package/dist/components/barchartv2/Barchart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}

package/dist/components/barchartv2/Barchart.component.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import styled, { useTheme } from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
@@ -12,7 +12,7 @@ import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { BarchartTooltip } from './BarchartTooltip';
-import { useChartData } from './utils';
+import { getTicks, useChartData } from './utils';
 const CHART_CONSTANTS = {
     TICK_WIDTH_OFFSET: 4,
     BAR_SIZE: 12,
@@ -25,6 +25,7 @@ const CHART_CONSTANTS = {
         bottom: 0,
     },
 };
+const maxWidthTooltip = { maxWidth: '20rem' };
 /* ---------------------------------- COMPONENTS ---------------------------------- */
 /**
  * Get the format of the date based on the duration
@@ -60,11 +61,12 @@ export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) =
 export const StyledResponsiveContainer = styled(ResponsiveContainer) `
   // Avoid tooltip over constrained text to be cut off
   & .recharts-surface {
+    outline: none;
     overflow: visible;
   }
 `;
 const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
-    return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && _jsx(IconHelp, { tooltipMessage: helpTooltip }), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
+    return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && (_jsx(IconHelp, { tooltipMessage: helpTooltip, overlayStyle: maxWidthTooltip })), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
                             marginLeft: spacing.r8,
                         }, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
 };
@@ -87,6 +89,7 @@ export const Barchart = (props) => {
     const theme = useTheme();
     const { getColor } = useChartLegend();
     const [hoveredValue, setHoveredValue] = useState();
+    const chartRef = useRef(null);
     const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = { type: 'category' }, unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
     // Create colorSet from ChartLegendWrapper
     const colorSet = bars === null || bars === void 0 ? void 0 : bars.reduce((acc, bar) => {
@@ -97,14 +100,15 @@ export const Barchart = (props) => {
         return acc;
     }, {});
     const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
-    return (_jsxs(Stack, { direction: "vertical", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
+    const titleWithUnit = unitLabel ? `${title} (${unitLabel})` : title;
+    return (_jsxs(Stack, { direction: "vertical", style: { gap: '0' }, children: [_jsx(ChartHeader, { title: titleWithUnit, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { ref: chartRef, width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
                         ? type.gap === 0
                             ? undefined
                             : CHART_CONSTANTS.BAR_SIZE
                         : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), rechartsBars.map((bar) => {
                             const { fill, dataKey, stackId } = bar;
                             return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, isAnimationActive: false, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
-                        }), _jsx(YAxis, { tickCount: 1, interval: 0, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
+                        }), _jsx(YAxis, { interval: 0, domain: [0, roundReferenceValue], ticks: getTicks(roundReferenceValue, false), tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value) // Add a space as thousand separator
                             , axisLine: { stroke: theme.border }, tick: {
                                 fill: theme.textSecondary,
                                 fontSize: fontSize.smaller,
@@ -112,5 +116,5 @@ export const Barchart = (props) => {
                                 stroke: theme.border,
                             }, axisLine: {
                                 stroke: theme.border,
-                            } }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel })), cursor: false })] }) }))] }));
+                            } }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel, chartContainerRef: chartRef })), cursor: false })] }) }))] }));
 };

package/dist/components/barchartv2/BarchartTooltip.d.ts

@@ -1,11 +1,12 @@
 import { TooltipContentProps } from 'recharts';
 import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
-export declare const BarchartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }: {
+export declare const BarchartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, chartContainerRef, }: {
     type: TimeType | CategoryType;
     tooltipProps: TooltipContentProps<number, string>;
     colorSet?: Record<string, string>;
     hoveredValue: string | undefined;
     tooltip?: BarchartTooltipFn<T>;
     unitLabel?: string;
-}) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    chartContainerRef: React.RefObject<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=BarchartTooltip.d.ts.map

package/dist/components/barchartv2/BarchartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAS/C,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,YAAY,uEAOnD;IACD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,iIAqDA,CAAC"}
+{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAS/C,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAG9B,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,YAAY,0FAQnD;IACD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CACpD,mDAgEA,CAAC"}

package/dist/components/barchartv2/BarchartTooltip.js

@@ -1,20 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { LegendShape } from '../chartlegend/ChartLegend';
-import { ChartTooltipContainer, ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, TooltipHeader, } from '../charttooltip/ChartTooltip';
+import { ChartTooltipPortal, ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, TooltipHeader, } from '../charttooltip/ChartTooltip';
 import { getCurrentPoint } from './utils';
-export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }) => {
-    const { active } = tooltipProps;
+export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, chartContainerRef, }) => {
+    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 (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: type.type === 'time' ? (_jsx(TooltipHeader, { duration: duration, value: currentPoint.category })) : (currentPoint.category) }), _jsx(ChartTooltipItemsContainer, { children: currentPoint.values.map((value) => {
+    const tooltipContent = tooltip ? (tooltip(currentPoint)) : (_jsxs(_Fragment, { children: [_jsx(ChartTooltipHeader, { children: type.type === 'time' ? (_jsx(TooltipHeader, { duration: duration, value: currentPoint.category })) : (currentPoint.category) }), _jsx(ChartTooltipItemsContainer, { children: currentPoint.values.map((value) => {
                     const legendIcon = colorSet && (_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet }));
                     const formattedValue = Number.isInteger(value.value)
                         ? `${value.value}`
@@ -24,4 +21,5 @@ export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, to
                         : formattedValue;
                     return (_jsx(ChartTooltipItem, { label: value.label, value: valueWithUnit, isHovered: value.isHovered, legendIcon: legendIcon }, value.label));
                 }) })] }));
+    return (_jsx(ChartTooltipPortal, { coordinate: coordinate, chartContainerRef: chartContainerRef, isVisible: active, children: tooltipContent }));
 };

package/dist/components/barchartv2/utils.d.ts

@@ -2,6 +2,7 @@ import { BarchartProps, BarchartBars } from './Barchart.component';
 import { TooltipContentProps } from 'recharts';
 import { ChartColors } from '../../style/theme';
 export declare const getRoundReferenceValue: (value: number) => number;
+export declare const getTicks: (topValue: number, isSymmetrical: boolean) => number[];
 export declare const getMaxBarValue: (data: {
     [key: string]: string | number;
 }[], stacked?: boolean) => number;
@@ -53,6 +54,10 @@ export type UnitRange = {
     label: string;
 }[];
 export declare const computeUnitLabelAndRoundReferenceValue: (data: any, maxValue: number, unitRange: UnitRange | undefined) => {
+    unitLabel: undefined;
+    roundReferenceValue: number;
+    rechartsData: any;
+} | {
     unitLabel: string;
     roundReferenceValue: number;
     rechartsData: any;
@@ -110,7 +115,7 @@ export declare const useChartData: <T extends BarchartBars>(bars: T, type: Barch
         fill: string;
         stackId?: string;
     }[];
-    unitLabel: string;
+    unitLabel: string | undefined;
     roundReferenceValue: number;
     rechartsData: any;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}

package/dist/components/barchartv2/utils.js

@@ -2,23 +2,49 @@ import { chartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 export const getRoundReferenceValue = (value) => {
     if (value <= 0)
-        return 10; // Default for zero or negative values
+        return 1; // Default for zero or negative values
     // Get the magnitude (10^n where n is the number of digits - 1)
     const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+    // Buffer the value by 10% to avoid being too close to the edge of the chart
+    const bufferedValue = value * 1.1;
     // Normalized value between 1 and 10
-    const normalized = value / magnitude;
+    const normalized = bufferedValue / magnitude;
     // Round to nice numbers based on normalized value
+    // skip 1.5, 3, 4, 7.5 as top value for better chart
+    // appearance for small values
     let result;
     if (normalized <= 1)
         result = magnitude;
-    else if (normalized <= 2.5)
-        result = 2.5 * magnitude;
+    else if (normalized <= 2)
+        result = 2 * magnitude;
+    else if (value > 10 && normalized <= 4)
+        result = 4 * magnitude;
     else if (normalized <= 5)
         result = 5 * magnitude;
+    else if (value > 10 && normalized <= 7.5)
+        result = 7.5 * magnitude;
     else
         result = 10 * magnitude;
-    // Ensure minimum value of 5 for better chart appearance
-    return Math.max(result, 5);
+    return result;
+};
+export const getTicks = (topValue, isSymmetrical) => {
+    if (topValue < 10) {
+        if (isSymmetrical) {
+            return [-topValue, 0, topValue];
+        }
+        else {
+            return [0, topValue];
+        }
+    }
+    const numberOfTicks = topValue % 3 === 0 ? 4 : 3;
+    const tickInterval = topValue / (numberOfTicks - 1);
+    const ticks = Array.from({ length: numberOfTicks }, (_, index) => index * tickInterval);
+    if (isSymmetrical) {
+        // Create negative ticks in order without 0
+        const negativeTicks = Array.from({ length: numberOfTicks - 1 }, (_, index) => -(numberOfTicks - 1 - index) * tickInterval);
+        ticks.unshift(...negativeTicks);
+    }
+    return ticks;
 };
 export const getMaxBarValue = (data, stacked) => {
     const values = data.map((item) => {
@@ -189,10 +215,10 @@ export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet,
 export const computeUnitLabelAndRoundReferenceValue = (data, maxValue, unitRange) => {
     if (!unitRange) {
         const roundReferenceValue = getRoundReferenceValue(maxValue);
-        return { unitLabel: '', roundReferenceValue, rechartsData: data };
+        return { unitLabel: undefined, roundReferenceValue, rechartsData: data };
     }
     const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
-    const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+    const topValue = maxValue / valueBase;
     const roundReferenceValue = getRoundReferenceValue(topValue);
     const rechartsData = data.map((dataPoint) => {
         const normalizedDataPoint = { ...dataPoint };

package/dist/components/charttooltip/ChartTooltip.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Middleware } from '@floating-ui/react';
 export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface ChartTooltipItemProps {
     label: React.ReactNode;
@@ -15,5 +16,27 @@ export declare const TooltipHeader: ({ duration, value, }: {
     duration: number;
     value: string | number;
 }) => import("react/jsx-runtime").JSX.Element;
+export interface ChartTooltipPortalProps {
+    children: React.ReactNode;
+    coordinate?: {
+        x: number;
+        y: number;
+    };
+    chartContainerRef: React.RefObject<HTMLDivElement>;
+    isVisible?: boolean;
+    middleware?: Middleware[];
+    offset?: number | (({ placement }: {
+        placement: string;
+    }) => number);
+    customPosition?: (chartRect: DOMRect, coordinate?: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+    containerComponent?: React.ComponentType<any>;
+}
+export declare const ChartTooltipPortal: React.FC<ChartTooltipPortalProps>;
 export {};
 //# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/components/charttooltip/ChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charttooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,qBAAqB,yGAUjC,CAAC;AA+BF,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAe5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,yGAK9B,CAAC;AAEF,eAAO,MAAM,0BAA0B,yGAKtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAKjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,wCAAwC,GACxC,0CAA0C,GAC1C,mCAAmC,CAAC;AAcxC,eAAO,MAAM,aAAa,yBAGvB;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,4CAOA,CAAC"}
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charttooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAML,UAAU,EACX,MAAM,oBAAoB,CAAC;AAM5B,eAAO,MAAM,qBAAqB,yGAWjC,CAAC;AA+BF,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAe5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,yGAK9B,CAAC;AAEF,eAAO,MAAM,0BAA0B,yGAKtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAKjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,wCAAwC,GACxC,0CAA0C,GAC1C,mCAAmC,CAAC;AAcxC,eAAO,MAAM,aAAa,yBAGvB;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,4CAOA,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC,CAAC;IACrE,cAAc,CAAC,EAAE,CACf,SAAS,EAAE,OAAO,EAClB,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAClC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0GhE,CAAC"}

package/dist/components/charttooltip/ChartTooltip.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { useEffect, useState, useRef } from 'react';
+import { useFloating, autoUpdate, offset, flip, shift, } from '@floating-ui/react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
@@ -11,7 +14,8 @@ export const ChartTooltipContainer = styled.div `
   font-size: ${fontSize.small};
   padding: ${spacing.r8};
   min-width: 10rem;
-  max-width: 250px;
+  max-width: 40rem;
+
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 `;
 const TooltipText = styled.div `
@@ -69,3 +73,81 @@ export const TooltipHeader = ({ duration, value, }) => {
     const timeFormat = getTooltipDateFormat(duration);
     return (_jsx(ChartTooltipHeader, { children: _jsx(FormattedDateTime, { format: timeFormat, value: new Date(value) }) }));
 };
+export const ChartTooltipPortal = ({ children, coordinate, chartContainerRef, isVisible = true, middleware, offset: customOffset, customPosition, containerComponent: ContainerComponent = ChartTooltipContainer, }) => {
+    const [virtualElement, setVirtualElement] = useState(null);
+    const previousPositionRef = useRef(null);
+    const [portalContainer, setPortalContainer] = useState(null);
+    // Default middleware configuration
+    const defaultMiddleware = [
+        offset(customOffset || 20),
+        flip(),
+        shift({ padding: 10 }),
+    ];
+    const { refs, floatingStyles } = useFloating({
+        elements: {
+            reference: virtualElement,
+        },
+        placement: 'top',
+        middleware: middleware || defaultMiddleware,
+        whileElementsMounted: autoUpdate,
+    });
+    // Create portal container once
+    useEffect(() => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        setPortalContainer(container);
+        return () => {
+            document.body.removeChild(container);
+        };
+    }, []);
+    // Create virtual element from coordinate or custom position
+    useEffect(() => {
+        if (chartContainerRef.current) {
+            const chartRect = chartContainerRef.current.getBoundingClientRect();
+            let tooltipX;
+            let tooltipY;
+            if (customPosition) {
+                // Use custom positioning function
+                const position = customPosition(chartRect, coordinate);
+                tooltipX = position.x;
+                tooltipY = position.y;
+            }
+            else if (coordinate) {
+                // Use default coordinate-based positioning
+                tooltipX = chartRect.left + coordinate.x;
+                tooltipY = chartRect.top + coordinate.y;
+            }
+            else {
+                return; // No positioning method available
+            }
+            // Check if position has changed significantly
+            const hasPositionChanged = !previousPositionRef.current ||
+                Math.abs(previousPositionRef.current.x - tooltipX) > 5 ||
+                Math.abs(previousPositionRef.current.y - tooltipY) > 5;
+            if (hasPositionChanged) {
+                previousPositionRef.current = { x: tooltipX, y: tooltipY };
+            }
+            setVirtualElement({
+                getBoundingClientRect() {
+                    return {
+                        width: 0,
+                        height: 0,
+                        x: tooltipX,
+                        y: tooltipY,
+                        left: tooltipX,
+                        top: tooltipY,
+                        right: tooltipX,
+                        bottom: tooltipY,
+                    };
+                },
+            });
+        }
+    }, [coordinate, chartContainerRef, customPosition]);
+    if (!isVisible || !virtualElement || !portalContainer)
+        return null;
+    const tooltipContent = (_jsx(ContainerComponent, { ref: refs.setFloating, style: {
+            ...floatingStyles,
+            opacity: isVisible ? 1 : 0,
+        }, children: children }));
+    return createPortal(tooltipContent, portalContainer);
+};

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();