@scality/core-ui 0.176.0 → 0.177.0

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

@@ -4,23 +4,55 @@ import { chartColors, ChartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 
 export const getRoundReferenceValue = (value: number): number => {
-  if (value <= 0) return 10; // Default for zero or negative values
+  if (value <= 0) 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: number;
+
   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: number, isSymmetrical: boolean) => {
+  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 = (
@@ -300,11 +332,11 @@ export const computeUnitLabelAndRoundReferenceValue = (
 ) => {
   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/src/lib/components/charttooltip/ChartTooltip.tsx

@@ -1,4 +1,14 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
+import { useEffect, useState, useRef } from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  Middleware,
+} from '@floating-ui/react';
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
@@ -12,7 +22,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);
 `;
 
@@ -121,3 +132,125 @@ export const TooltipHeader = ({
     </ChartTooltipHeader>
   );
 };
+
+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 const ChartTooltipPortal: React.FC<ChartTooltipPortalProps> = ({
+  children,
+  coordinate,
+  chartContainerRef,
+  isVisible = true,
+  middleware,
+  offset: customOffset,
+  customPosition,
+  containerComponent: ContainerComponent = ChartTooltipContainer,
+}) => {
+  const [virtualElement, setVirtualElement] = useState<any>(null);
+  const previousPositionRef = useRef<{ x: number; y: number } | null>(null);
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+    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: number;
+      let tooltipY: number;
+
+      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 = (
+    <ContainerComponent
+      ref={refs.setFloating}
+      style={{
+        ...floatingStyles,
+        opacity: isVisible ? 1 : 0,
+      }}
+    >
+      {children}
+    </ContainerComponent>
+  );
+
+  return createPortal(tooltipContent, portalContainer);
+};

package/src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component.tsx

@@ -26,12 +26,17 @@ export interface GlobalHealthProps {
 
 const ChartInteractiveContainer = styled.div`
   position: relative;
+  outline: none;
+  .recharts-surface {
+    outline: none;
+  }
 `;
 
 export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
   const [tooltipData, setTooltipData] = useState<Alert | null>(null);
   const [focusedAlertIndex, setFocusedAlertIndex] = useState<number>(-1);
   const [keyboardActive, setKeyboardActive] = useState<boolean>(false);
+  const [activeBarKey, setActiveBarKey] = useState<string | null>(null);
   const chartContainerRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
   const startTimestamp = new Date(start).getTime();
@@ -47,6 +52,7 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
   const handlePointerEnter = useCallback(
     (key: string) => {
       setTooltipData(alertsMap[key]);
+      setActiveBarKey(key);
     },
     [alertsMap],
   );
@@ -54,6 +60,7 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
   const handlePointerLeave = useCallback(() => {
     if (!keyboardActive) {
       setTooltipData(null);
+      setActiveBarKey(null);
     }
   }, [keyboardActive]);
 
@@ -83,6 +90,11 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
       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],
   );
@@ -93,6 +105,9 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
       setFocusedAlertIndex(0);
       setTooltipData(allAlertKeys[0]);
       setKeyboardActive(true);
+
+      // Set active bar key for initial focus
+      setActiveBarKey(allAlertKeys[0].key);
     }
   }, [allAlertKeys, focusedAlertIndex]);
 
@@ -100,6 +115,7 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
     setKeyboardActive(false);
     setFocusedAlertIndex(-1);
     setTooltipData(null);
+    setActiveBarKey(null);
   }, []);
 
   // Handle mouse enter to disable keyboard mode
@@ -182,17 +198,46 @@ export function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps) {
             isAnimationActive={false}
           />
 
-          {/* Alert bars */}
-          {allAlertBars.map(({ key, fill }) => (
-            <Bar
-              dataKey={key}
-              yAxisId={key}
-              fill={fill}
-              onPointerEnter={() => handlePointerEnter(key)}
-              onPointerLeave={() => handlePointerLeave()}
-              isAnimationActive={false}
-            />
-          ))}
+          {/* Alert bars - render non-active bars first */}
+          {allAlertBars.map(({ key, fill }) => {
+            const isActive = key === activeBarKey;
+            // Skip active bar here - it will be rendered last
+            if (isActive) return null;
+
+            return (
+              <Bar
+                key={key}
+                dataKey={key}
+                yAxisId={key}
+                fill={fill}
+                onPointerEnter={() => handlePointerEnter(key)}
+                onPointerLeave={() => handlePointerLeave()}
+                isAnimationActive={false}
+              />
+            );
+          })}
+
+          {/* Render active bar last to ensure it's on top */}
+          {activeBarKey &&
+            (() => {
+              const activeBar = allAlertBars.find(
+                (bar) => bar.key === activeBarKey,
+              );
+              if (!activeBar) return null;
+
+              return (
+                <Bar
+                  key={`${activeBar.key}-active`}
+                  dataKey={activeBar.key}
+                  yAxisId={activeBar.key}
+                  fill={activeBar.fill}
+                  stroke={theme.selectedActive}
+                  onPointerEnter={() => handlePointerEnter(activeBar.key)}
+                  onPointerLeave={() => handlePointerLeave()}
+                  isAnimationActive={false}
+                />
+              );
+            })()}
         </BarChart>
       </ResponsiveContainer>
     </ChartInteractiveContainer>

package/src/lib/components/globalhealthbar/components/GlobalHealthBarTooltip.tsx

@@ -1,19 +1,11 @@
 import React from 'react';
-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 { Alert } from '../GlobalHealthBarRecharts.component';
 import { TooltipContentProps } from 'recharts';
 import { zIndex } from '../../../style/theme';
 import { CHART_CONFIG, getTooltipPosition } from '../healthBarUtils';
+import { ChartTooltipPortal } from '../../charttooltip/ChartTooltip';
 
 interface GlobalHealthBarTooltipProps {
   tooltipData: Alert | null;
@@ -53,121 +45,87 @@ export const GlobalHealthBarTooltip = (props: GlobalHealthBarTooltipProps) => {
     endTimestamp = 0,
   } = props;
   const { coordinate } = tooltipProps;
-  const [virtualElement, setVirtualElement] = useState<any>(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();
+  if (!tooltipData) return null;
 
-      let tooltipX: number;
-      let tooltipY: number;
+  const { description, startsAt, endsAt, severity } = tooltipData;
 
-      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;
+  const tooltipContent = (
+    <Stack direction="vertical" gap="r8">
+      <Wrap>
+        <Text variant="Smaller">Severity</Text>
+        <Text color="textPrimary" variant="Smaller">
+          {severity}
+        </Text>
+      </Wrap>
+      <Wrap>
+        <Text variant="Smaller">Start</Text>
+        <Text color="textPrimary" variant="Smaller">
+          <FormattedDateTime format="date-time" value={new Date(startsAt)} />
+        </Text>
+      </Wrap>
+      <Wrap>
+        <Text variant="Smaller">End</Text>
+        <Text color="textPrimary" variant="Smaller">
+          <FormattedDateTime format="date-time" value={new Date(endsAt)} />
+        </Text>
+      </Wrap>
+      <Wrap>
+        <Text variant="Smaller" style={{ paddingRight: spacing.r32 }}>
+          Description
+        </Text>
+        <Text
+          color="textPrimary"
+          variant="Smaller"
+          style={{ whiteSpace: 'wrap', textAlign: 'justify' }}
+        >
+          {description}
+        </Text>
+      </Wrap>
+    </Stack>
+  );
 
-        // Use the same positioning logic as alert bars
-        const alertCenterX = getTooltipPosition(
-          tooltipData,
-          startTimestamp,
-          endTimestamp,
-          chartUsableWidth,
-        );
+  return (
+    <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 -
+            CHART_CONFIG.MARGINS.left -
+            CHART_CONFIG.MARGINS.right;
 
-        // 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?.x;
-        tooltipY = chartRect.top + coordinate?.y;
-      }
+          // Use the same positioning logic as alert bars
+          const alertCenterX = getTooltipPosition(
+            tooltipData,
+            startTimestamp,
+            endTimestamp,
+            chartUsableWidth,
+          );
 
-      setVirtualElement({
-        getBoundingClientRect() {
           return {
-            width: 0,
-            height: 0,
-            x: tooltipX,
-            y: tooltipY,
-            left: tooltipX,
-            top: tooltipY,
-            right: tooltipX,
-            bottom: tooltipY,
+            x: chartRect.left + alertCenterX,
+            y: chartRect.top + CHART_CONFIG.BAR_SIZE,
           };
-        },
-      });
-    }
-  }, [
-    coordinate,
-    chartContainerRef,
-    isKeyboardActive,
-    tooltipData,
-    startTimestamp,
-    endTimestamp,
-  ]);
-
-  if (!tooltipData) return null;
-
-  const { description, startsAt, endsAt, severity } = tooltipData;
-
-  const tooltipContent = (
-    <TooltipContainer ref={refs.setFloating} style={floatingStyles}>
-      <Stack direction="vertical" gap="r8">
-        <Wrap>
-          <Text variant="Smaller">Severity</Text>
-          <Text color="textPrimary" variant="Smaller">
-            {severity}
-          </Text>
-        </Wrap>
-        <Wrap>
-          <Text variant="Smaller">Start</Text>
-          <Text color="textPrimary" variant="Smaller">
-            <FormattedDateTime format="date-time" value={new Date(startsAt)} />
-          </Text>
-        </Wrap>
-        <Wrap>
-          <Text variant="Smaller">End</Text>
-          <Text color="textPrimary" variant="Smaller">
-            <FormattedDateTime format="date-time" value={new Date(endsAt)} />
-          </Text>
-        </Wrap>
-        <Wrap>
-          <Text variant="Smaller" style={{ paddingRight: spacing.r32 }}>
-            Description
-          </Text>
-          <Text
-            color="textPrimary"
-            variant="Smaller"
-            style={{ whiteSpace: 'wrap', textAlign: 'justify' }}
-          >
-            {description}
-          </Text>
-        </Wrap>
-      </Stack>
-    </TooltipContainer>
+        } else {
+          // For mouse navigation, use the provided coordinate
+          return {
+            x: chartRect.left + (coordinate?.x || 0),
+            y: chartRect.top + (coordinate?.y || 0),
+          };
+        }
+      }}
+      containerComponent={TooltipContainer}
+      offset={({ placement }) => {
+        // Use larger offset when tooltip is on top
+        // to avoid tooltip over bar
+        return placement.includes('top') ? 20 : 30;
+      }}
+    >
+      {tooltipContent}
+    </ChartTooltipPortal>
   );
-
-  return createPortal(tooltipContent, document.body);
 };

package/src/lib/components/globalhealthbar/components/HealthBarXAxis.tsx

@@ -47,7 +47,7 @@ const CustomTick = ({
           fontSize={fontSize.smaller}
           fill={theme.textSecondary}
         >
-          {is7DaySpan || isDaySpan ? (
+          {is7DaySpan ? (
             <FormattedDateTime
               format="day-month-abbreviated-hour-minute"
               value={new Date(payload.value)}

package/src/lib/components/globalhealthbar/useHealthBarData.spec.tsx

@@ -16,6 +16,7 @@ describe('useHealthBarData', () => {
     severity,
     startsAt,
     endsAt,
+    key: `${severity}_${startsAt}`,
   });
 
   describe('Alert Filtering', () => {
@@ -231,6 +232,7 @@ describe('useHealthBarData', () => {
         severity: 'warning',
         startsAt: '2023-12-01T02:00:00Z',
         endsAt: '2023-12-01T04:00:00Z',
+        key: 'warning_0',
       });
     });
 

package/src/lib/components/globalhealthbar/useHealthBarData.ts

@@ -5,6 +5,7 @@ export interface Alert {
   startsAt: string;
   endsAt: string;
   severity: 'warning' | 'critical' | 'unavailable';
+  key: string;
 }
 
 export const useHealthBarData = (
@@ -44,6 +45,7 @@ export const useHealthBarData = (
       // Store alert data separately for tooltip access
       alertsMapData[uniqueKey] = {
         ...alert,
+        key: uniqueKey, // Add the consistent key to the alert object
       };
     });