@scality/core-ui 0.170.0 → 0.172.0

package/__mocks__/uuid.js

@@ -0,0 +1,11 @@
+// Mock uuid module for Jest tests
+let counter = 0;
+
+const v4 = () => {
+  counter += 1;
+  return `mock-uuid-${Math.random().toString(36)}-${counter}`;
+};
+
+module.exports = {
+  v4,
+};

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

@@ -11,16 +11,16 @@ import { FormattedDateTime } from '../date/FormattedDateTime';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import { ChartTooltip } from './ChartTooltip';
+import { BarchartTooltip } from './BarchartTooltip';
 import { useChartData } from './utils';
 const CHART_CONSTANTS = {
-    TICK_WIDTH_OFFSET: 5,
+    TICK_WIDTH_OFFSET: 4,
     BAR_SIZE: 12,
     MIN_POINT_SIZE: 3,
     DEFAULT_HEIGHT: 200,
     CHART_MARGIN: {
         left: 0,
-        right: 0,
+        right: -10,
         top: 0,
         bottom: 0,
     },
@@ -122,5 +122,5 @@ export const Barchart = (props) => {
                                 stroke: theme.textSecondary,
                             }, axisLine: {
                                 stroke: theme.textSecondary,
-                            } }), _jsx(Tooltip, { content: (props) => (_jsx(ChartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip })), cursor: false })] }) }))] }));
+                            } }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel })), cursor: false })] }) }))] }));
 };

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

@@ -0,0 +1,11 @@
+import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
+import { TooltipContentProps } from 'recharts';
+export declare const BarchartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }: {
+    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;
+//# sourceMappingURL=BarchartTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAU/C,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,iIAyDA,CAAC"}

package/dist/components/barchartv2/BarchartTooltip.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormattedDateTime } from '../date/FormattedDateTime';
+import { getCurrentPoint } from './utils';
+import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from '../charttooltip/ChartTooltip';
+import { LegendShape } from '../chartlegend/ChartLegend';
+export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }) => {
+    const { active } = tooltipProps;
+    if (!active) {
+        return null;
+    }
+    const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
+    if (tooltip) {
+        return tooltip(currentPoint);
+    }
+    return (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: type.timeRange.interval < 24 * 60 * 60 * 1000
+                        ? 'day-month-abbreviated-hour-minute-second'
+                        : 'long-date-without-weekday', value: new Date(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}`
+                        : value.value.toFixed(2);
+                    const valueWithUnit = unitLabel
+                        ? `${formattedValue} ${unitLabel}`
+                        : formattedValue;
+                    return (_jsx(ChartTooltipItem, { label: value.label, value: valueWithUnit, isHovered: value.isHovered, legendIcon: legendIcon }, value.label));
+                }) })] }));
+};

package/dist/components/chartlegend/ChartLegend.d.ts

@@ -1,7 +1,9 @@
+import { TextVariant } from '../text/Text.component';
 type ChartLegendProps = {
     shape: 'line' | 'rectangle';
     disabled?: boolean;
     direction?: 'horizontal' | 'vertical';
+    legendSize?: TextVariant;
 };
 export declare const LegendItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     disabled?: boolean;
@@ -12,6 +14,6 @@ export declare const LegendShape: import("styled-components").StyledComponent<"d
     shape: "line" | "rectangle";
     chartColors: Record<string, string>;
 }, never>;
-export declare const ChartLegend: ({ shape, disabled, direction, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartLegend: ({ shape, disabled, direction, legendSize, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ChartLegend.d.ts.map

package/dist/components/chartlegend/ChartLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAMA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,4CAyElB,CAAC"}
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegend.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAI3D,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,gDAKrB,gBAAgB,4CAyElB,CAAC"}

package/dist/components/chartlegend/ChartLegend.js

@@ -44,7 +44,7 @@ export const LegendShape = styled.div `
     }
 }}
 `;
-export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', }) => {
+export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal', legendSize = 'Basic', }) => {
     const { listResources, getColor, isSelected, addSelectedResource, removeSelectedResource, selectAllResources, selectOnlyResource, isOnlyOneSelected, } = useChartLegend();
     const resources = listResources();
     const handleLegendClick = useCallback((resource, event) => {
@@ -83,6 +83,6 @@ export const ChartLegend = ({ shape, disabled = false, direction = 'horizontal',
     return (_jsx(Legend, { direction: direction, children: resources.map((resource) => {
             const color = getColor(resource);
             const selected = isSelected(resource);
-            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, "aria-label": `${resource} ${selected ? 'selected' : 'not selected'}`, onClick: (event) => handleLegendClick(resource, event), children: [_jsx(LegendShape, { color: color, shape: shape, chartColors: chartColors }), _jsx(Text, { variant: "Basic", children: resource })] }, resource));
+            return (_jsxs(LegendItem, { disabled: disabled, selected: selected, "aria-label": `${resource} ${selected ? 'selected' : 'not selected'}`, onClick: (event) => handleLegendClick(resource, event), children: [_jsx(LegendShape, { color: color, shape: shape, chartColors: chartColors }), _jsx(Text, { variant: legendSize, children: resource })] }, resource));
         }) }));
 };

package/dist/components/chartlegend/ChartLegendWrapper.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ChartColors } from '../../style/theme';
+export declare const useChartId: () => string;
 export type ChartLegendState = {
     selectedResources: string[];
     addSelectedResource: (resource: string) => void;
@@ -10,10 +11,11 @@ export type ChartLegendState = {
     getColor: (resource: string) => string | undefined;
     listResources: () => string[];
     isOnlyOneSelected: () => boolean;
+    register: (chartId: string, seriesNames: string[]) => void;
 };
 export type ChartLegendWrapperProps = {
     children: ReactNode;
-    colorSet: Record<string, ChartColors | string>;
+    colorSet: Record<string, ChartColors | string> | ((seriesNames: string[]) => Record<string, ChartColors | string>);
 };
 export declare const ChartLegendWrapper: ({ children, colorSet, }: ChartLegendWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useChartLegend: () => ChartLegendState;

package/dist/components/chartlegend/ChartLegendWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAGV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;CAClC,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CAiFzB,CAAC;AAGF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}
+{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../src/lib/components/chartlegend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,eAAO,MAAM,UAAU,QAAO,MAQ7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5D,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EACJ,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,GACpC,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC;CACvE,CAAC;AAEF,eAAO,MAAM,kBAAkB,4BAG5B,uBAAuB,4CA0HzB,CAAC;AAEF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}

package/dist/components/chartlegend/ChartLegendWrapper.js

@@ -1,9 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useMemo, useCallback, } from 'react';
+import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef, } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+export const useChartId = () => {
+    const idRef = useRef(null);
+    if (idRef.current === null) {
+        idRef.current = uuidv4();
+    }
+    return idRef.current;
+};
 const ChartLegendContext = createContext(null);
 export const ChartLegendWrapper = ({ children, colorSet, }) => {
-    const allResources = Object.keys(colorSet);
+    const [registeredColorSets, setRegisteredColorSets] = useState({});
+    const [internalColorSet, setInternalColorSet] = useState(() => {
+        return typeof colorSet === 'function' ? {} : colorSet;
+    });
+    useEffect(() => {
+        if (typeof colorSet === 'function') {
+            const allUniqueSeriesNames = Array.from(new Set(Object.values(registeredColorSets).flat()));
+            if (allUniqueSeriesNames.length > 0) {
+                const newColorSet = colorSet(allUniqueSeriesNames);
+                setInternalColorSet(newColorSet);
+            }
+        }
+        else {
+            setInternalColorSet(colorSet);
+        }
+    }, [registeredColorSets, colorSet]);
+    const allResources = useMemo(() => Object.keys(internalColorSet), [internalColorSet]);
     const [selectedResources, setSelectedResources] = useState(allResources);
+    useEffect(() => {
+        setSelectedResources(allResources);
+    }, [allResources]);
+    const register = useCallback((chartId, seriesNames) => {
+        setRegisteredColorSets((prev) => ({
+            ...prev,
+            [chartId]: seriesNames,
+        }));
+    }, []);
     const addSelectedResource = useCallback((resource) => {
         setSelectedResources((prev) => prev.includes(resource) ? prev : [...prev, resource]);
     }, []);
@@ -11,8 +44,8 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         setSelectedResources((prev) => prev.filter((r) => r !== resource));
     }, []);
     const selectAllResources = useCallback(() => {
-        setSelectedResources(allResources);
-    }, [allResources]);
+        setSelectedResources(Object.keys(internalColorSet));
+    }, [internalColorSet]);
     const selectOnlyResource = useCallback((resource) => {
         setSelectedResources([resource]);
     }, []);
@@ -23,16 +56,16 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         return selectedResources.includes(resource);
     }, [selectedResources]);
     const getColor = useCallback((resource) => {
-        const color = colorSet[resource];
+        const color = internalColorSet[resource];
         if (!color) {
             console.warn(`ChartLegendWrapper: No color defined for resource "${resource}"`);
             return undefined;
         }
         return color;
-    }, [colorSet]);
+    }, [internalColorSet]);
     const listResources = useCallback(() => {
-        return Object.keys(colorSet);
-    }, [colorSet]);
+        return Object.keys(internalColorSet);
+    }, [internalColorSet]);
     const chartLegendState = useMemo(() => ({
         selectedResources,
         addSelectedResource,
@@ -43,6 +76,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         getColor,
         listResources,
         isOnlyOneSelected,
+        register,
     }), [
         selectedResources,
         addSelectedResource,
@@ -53,10 +87,10 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         getColor,
         listResources,
         isOnlyOneSelected,
+        register,
     ]);
     return (_jsx(ChartLegendContext.Provider, { value: chartLegendState, children: children }));
 };
-// Hook for accessing legend state in custom components
 export const useChartLegend = () => {
     const context = useContext(ChartLegendContext);
     if (!context) {

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface ChartTooltipItemProps {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    isHovered?: boolean;
+    legendIcon?: React.ReactNode;
+}
+export declare const ChartTooltipItem: React.FC<ChartTooltipItemProps>;
+export declare const ChartTooltipHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ChartTooltipItemsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};
+//# sourceMappingURL=ChartTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charttooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,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"}

package/dist/components/charttooltip/ChartTooltip.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+export const ChartTooltipContainer = styled.div `
+  border: 1px solid ${({ theme }) => theme.border};
+  background-color: ${({ theme }) => theme.backgroundLevel1};
+  color: ${({ theme }) => theme.textPrimary};
+  border-radius: 4px;
+  font-size: ${fontSize.small};
+  padding: ${spacing.r8};
+  min-width: 10rem;
+  max-width: 250px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+const TooltipText = styled.div `
+  color: ${({ theme, isHovered }) => isHovered ? theme.textPrimary : theme.textSecondary};
+  font-size: ${fontSize.smaller};
+  font-weight: ${({ isHovered }) => isHovered ? fontWeight.bold : fontWeight.base};
+  text-align: ${({ align }) => align || 'left'};
+  ${({ align }) => align === 'right' && 'flex-shrink: 0;'}
+`;
+const TooltipRow = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${spacing.r32};
+  width: 100%;
+`;
+const TooltipLabel = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${spacing.r8};
+  flex: 1;
+  min-width: 0;
+`;
+export const ChartTooltipItem = ({ label, value, isHovered = false, legendIcon, }) => (_jsxs(TooltipRow, { children: [_jsxs(TooltipLabel, { children: [legendIcon, _jsx(TooltipText, { isHovered: isHovered, children: label })] }), _jsx(TooltipText, { isHovered: isHovered, align: "right", children: value })] }));
+export const ChartTooltipHeader = styled.div `
+  color: ${({ theme }) => theme.textPrimary};
+  font-weight: ${fontWeight.bold};
+  text-align: center;
+  margin-bottom: ${spacing.r8};
+`;
+export const ChartTooltipItemsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.r8};
+  width: 100%;
+`;

package/dist/components/globalhealthbar/GlobalHealthBar.component.d.ts

@@ -14,6 +14,10 @@ export type GlobalHealthProps = {
     height?: number;
     tooltipPosition?: Position;
 };
+/**
+ * @deprecated Use GlobalHealthBar v2 instead
+ * @example import { GlobalHealthBar } from '@scality/core-ui/dist/next';
+ */
 declare function GlobalHealthBar({ id, alerts, start, end, height, tooltipPosition, }: GlobalHealthProps): import("react/jsx-runtime").JSX.Element;
 export { GlobalHealthBar };
 //# sourceMappingURL=GlobalHealthBar.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalHealthBar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/GlobalHealthBar.component.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE;QACN,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,EAAE,EACF,MAAM,EACN,KAAK,EACL,GAAG,EACH,MAAU,EACV,eAAqB,GACtB,EAAE,iBAAiB,2CAyKnB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"GlobalHealthBar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/GlobalHealthBar.component.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE;QACN,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B,CAAC;AACF;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,EAAE,EACF,MAAM,EACN,KAAK,EACL,GAAG,EACH,MAAU,EACV,eAAqB,GACtB,EAAE,iBAAiB,2CAyKnB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

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

@@ -6,6 +6,10 @@ import { useTheme } from 'styled-components';
 import { formatValue } from './tooltip/index';
 export const TOP = 'top';
 export const BOTTOM = 'bottom';
+/**
+ * @deprecated Use GlobalHealthBar v2 instead
+ * @example import { GlobalHealthBar } from '@scality/core-ui/dist/next';
+ */
 function GlobalHealthBar({ id, alerts, start, end, height = 8, tooltipPosition = TOP, }) {
     const theme = useTheme();
     const trimAlerts = alerts.map((alert) => {

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

@@ -0,0 +1,10 @@
+import { Alert } from './useHealthBarData';
+export interface GlobalHealthProps {
+    id: string;
+    alerts: Alert[];
+    start: Date;
+    end: Date;
+}
+export declare function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps): import("react/jsx-runtime").JSX.Element;
+export type { Alert };
+//# sourceMappingURL=GlobalHealthBarRecharts.component.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, YAxis, } from 'recharts';
+import styled, { useTheme } from 'styled-components';
+import { GlobalHealthBarTooltip } from './components/GlobalHealthBarTooltip';
+import { HealthBarXAxis } from './components/HealthBarXAxis';
+import { CHART_CONFIG, getNavigationAction, getNavigationStateUpdate, } from './healthBarUtils';
+import { useHealthBarData } from './useHealthBarData';
+const ChartInteractiveContainer = styled.div `
+  position: relative;
+`;
+export function GlobalHealthBar({ id, alerts, start, end }) {
+    const [tooltipData, setTooltipData] = useState(null);
+    const [focusedAlertIndex, setFocusedAlertIndex] = useState(-1);
+    const [keyboardActive, setKeyboardActive] = useState(false);
+    const chartContainerRef = useRef(null);
+    const theme = useTheme();
+    const startTimestamp = new Date(start).getTime();
+    const endTimestamp = new Date(end).getTime();
+    const { chartData, alertsMap, alertKeys } = useHealthBarData(alerts, startTimestamp, endTimestamp, id);
+    const handlePointerEnter = useCallback((key) => {
+        setTooltipData(alertsMap[key]);
+    }, [alertsMap]);
+    const handlePointerLeave = useCallback(() => {
+        if (!keyboardActive) {
+            setTooltipData(null);
+        }
+    }, [keyboardActive]);
+    const { warningKeys, criticalKeys, unavailableKeys } = alertKeys;
+    // Get all alert keys in order for keyboard navigation
+    const allAlertKeys = useMemo(() => {
+        return Object.values(alertsMap).sort((a, b) => {
+            return new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime();
+        });
+    }, [alertsMap]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        const action = getNavigationAction(event.key);
+        if (!action || allAlertKeys.length === 0)
+            return;
+        event.preventDefault();
+        const update = getNavigationStateUpdate(action, focusedAlertIndex, allAlertKeys);
+        setFocusedAlertIndex(update.newIndex);
+        setTooltipData(update.selectedAlert);
+        setKeyboardActive(update.shouldActivateKeyboard);
+    }, [allAlertKeys, focusedAlertIndex]);
+    // Handle focus events
+    const handleFocus = useCallback(() => {
+        if (allAlertKeys.length > 0 && focusedAlertIndex === -1) {
+            setFocusedAlertIndex(0);
+            setTooltipData(allAlertKeys[0]);
+            setKeyboardActive(true);
+        }
+    }, [allAlertKeys, focusedAlertIndex]);
+    const handleBlur = useCallback(() => {
+        setKeyboardActive(false);
+        setFocusedAlertIndex(-1);
+        setTooltipData(null);
+    }, []);
+    // Handle mouse enter to disable keyboard mode
+    const handleMouseEnter = useCallback(() => {
+        setKeyboardActive(false);
+    }, []);
+    const allAlertBars = useMemo(() => {
+        const configs = [
+            { keys: unavailableKeys, fill: theme.textSecondary },
+            { keys: warningKeys, fill: theme.statusWarning },
+            { keys: criticalKeys, fill: theme.statusCritical },
+        ];
+        return configs.flatMap(({ keys, fill }) => keys.map((key) => ({ key, fill })));
+    }, [unavailableKeys, warningKeys, criticalKeys, theme]);
+    return (_jsx(ChartInteractiveContainer, { ref: chartContainerRef, tabIndex: 0, role: "application", "aria-label": `Health bar chart with ${allAlertKeys.length} alerts. Use arrow keys to navigate, Escape to close tooltip.`, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onMouseEnter: handleMouseEnter, children: _jsx(ResponsiveContainer, { width: '100%', height: CHART_CONFIG.CHART_HEIGHT, children: _jsxs(BarChart, { data: chartData, layout: "vertical", barSize: CHART_CONFIG.BAR_SIZE, accessibilityLayer: true, margin: CHART_CONFIG.MARGINS, children: [_jsx(HealthBarXAxis, { startTimestamp: startTimestamp, endTimestamp: endTimestamp }), _jsx(Tooltip, { allowEscapeViewBox: { x: true, y: true }, isAnimationActive: false, shared: false, wrapperStyle: {
+                            width: '20rem',
+                            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 })))] }) }) }));
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Alert } from '../GlobalHealthBarRecharts.component';
+import { TooltipContentProps } from 'recharts';
+interface GlobalHealthBarTooltipProps {
+    tooltipData: Alert | null;
+    coordinate?: {
+        x: number;
+        y: number;
+    };
+    tooltipProps: TooltipContentProps<number, string>;
+    chartContainerRef: React.RefObject<HTMLDivElement>;
+    isKeyboardActive?: boolean;
+    startTimestamp?: number;
+    endTimestamp?: number;
+}
+export declare const GlobalHealthBarTooltip: (props: GlobalHealthBarTooltipProps) => React.ReactPortal | null;
+export {};
+//# sourceMappingURL=GlobalHealthBarTooltip.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,95 @@
+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';
+const TooltipContainer = styled.div `
+  ${(props) => {
+    const theme = useTheme();
+    return css `
+      border: 1px solid ${theme.border};
+      width: 24rem;
+      z-index: ${zIndex.tooltip};
+      color: ${theme.textSecondary};
+      background-color: ${theme.backgroundLevel1};
+      border-radius: 4px;
+      padding: ${spacing.r8};
+      pointer-events: none;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    `;
+}}
+`;
+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 (isKeyboardActive && tooltipData && startTimestamp && endTimestamp) {
+                // Calculate the chart's usable width (excluding margins)
+                const chartUsableWidth = chartRect.width -
+                    CHART_CONFIG.MARGINS.left -
+                    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;
+            }
+            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);
+            }
+            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);
+};

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

@@ -0,0 +1,7 @@
+interface HealthBarXAxisProps {
+    startTimestamp: number;
+    endTimestamp: number;
+}
+export declare const HealthBarXAxis: ({ startTimestamp, endTimestamp, }: HealthBarXAxisProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HealthBarXAxis.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HealthBarXAxis.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/globalhealthbar/components/HealthBarXAxis.tsx"],"names":[],"mappings":"AAWA,UAAU,mBAAmB;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB;AAiDD,eAAO,MAAM,cAAc,sCAGxB,mBAAmB,4CA2BrB,CAAC"}

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XAxis } from 'recharts';
+import { useTheme } from 'styled-components';
+import { fontSize } from '../../../style/theme';
+import { getTicks, calculateLabelVisibility, TIME_CONSTANTS, getEdgeMargin, } from '../healthBarUtils';
+import { FormattedDateTime } from '../../date/FormattedDateTime';
+const CustomTick = ({ tickProps, startTimestamp, endTimestamp, }) => {
+    const theme = useTheme();
+    const { y, payload, width, index, visibleTicksCount } = tickProps;
+    const span = endTimestamp - startTimestamp;
+    const is7DaySpan = span === 7 * TIME_CONSTANTS.ONE_DAY;
+    const isDaySpan = span === TIME_CONSTANTS.ONE_DAY;
+    const shouldShowLabel = calculateLabelVisibility(width, visibleTicksCount, span, index, 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) })) }) })));
+};
+export const HealthBarXAxis = ({ startTimestamp, endTimestamp, }) => {
+    const theme = useTheme();
+    const ticks = getTicks(startTimestamp, endTimestamp);
+    return (_jsx(XAxis, { allowDataOverflow: true, dataKey: "start", type: "number", domain: [startTimestamp, endTimestamp], tickSize: 5, minTickGap: 10, interval: 0, tick: (props) => {
+            return (_jsx(CustomTick, { tickProps: props, startTimestamp: startTimestamp, endTimestamp: endTimestamp }));
+        }, ticks: ticks, tickLine: { stroke: theme.textSecondary }, axisLine: false }));
+};