@scality/core-ui 0.170.0 → 0.172.0

package/src/lib/components/chartlegend/ChartLegendWrapper.tsx

@@ -5,9 +5,22 @@ import {
   ReactNode,
   useMemo,
   useCallback,
+  useEffect,
+  useRef,
 } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { ChartColors } from '../../style/theme';
 
+export const useChartId = (): string => {
+  const idRef = useRef<string | null>(null);
+
+  if (idRef.current === null) {
+    idRef.current = uuidv4();
+  }
+
+  return idRef.current;
+};
+
 export type ChartLegendState = {
   selectedResources: string[];
   addSelectedResource: (resource: string) => void;
@@ -18,23 +31,65 @@ export type ChartLegendState = {
   getColor: (resource: string) => string | undefined;
   listResources: () => string[];
   isOnlyOneSelected: () => boolean;
+  register: (chartId: string, seriesNames: string[]) => void;
 };
 
 const ChartLegendContext = createContext<ChartLegendState | null>(null);
 
 export type ChartLegendWrapperProps = {
   children: ReactNode;
-  colorSet: Record<string, ChartColors | string>;
+  colorSet:
+    | Record<string, ChartColors | string>
+    | ((seriesNames: string[]) => Record<string, ChartColors | string>);
 };
 
 export const ChartLegendWrapper = ({
   children,
   colorSet,
 }: ChartLegendWrapperProps) => {
-  const allResources = Object.keys(colorSet);
+  const [registeredColorSets, setRegisteredColorSets] = useState<
+    Record<string, string[]>
+  >({});
+
+  const [internalColorSet, setInternalColorSet] = useState<
+    Record<string, ChartColors | string>
+  >(() => {
+    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<string[]>(allResources);
 
+  useEffect(() => {
+    setSelectedResources(allResources);
+  }, [allResources]);
+
+  const register = useCallback((chartId: string, seriesNames: string[]) => {
+    setRegisteredColorSets((prev) => ({
+      ...prev,
+      [chartId]: seriesNames,
+    }));
+  }, []);
+
   const addSelectedResource = useCallback((resource: string) => {
     setSelectedResources((prev) =>
       prev.includes(resource) ? prev : [...prev, resource],
@@ -46,8 +101,8 @@ export const ChartLegendWrapper = ({
   }, []);
 
   const selectAllResources = useCallback(() => {
-    setSelectedResources(allResources);
-  }, [allResources]);
+    setSelectedResources(Object.keys(internalColorSet));
+  }, [internalColorSet]);
 
   const selectOnlyResource = useCallback((resource: string) => {
     setSelectedResources([resource]);
@@ -65,7 +120,7 @@ export const ChartLegendWrapper = ({
 
   const getColor = useCallback(
     (resource: string) => {
-      const color = colorSet[resource];
+      const color = internalColorSet[resource];
       if (!color) {
         console.warn(
           `ChartLegendWrapper: No color defined for resource "${resource}"`,
@@ -74,12 +129,12 @@ export const ChartLegendWrapper = ({
       }
       return color;
     },
-    [colorSet],
+    [internalColorSet],
   );
 
   const listResources = useCallback(() => {
-    return Object.keys(colorSet);
-  }, [colorSet]);
+    return Object.keys(internalColorSet);
+  }, [internalColorSet]);
 
   const chartLegendState = useMemo(
     () => ({
@@ -92,6 +147,7 @@ export const ChartLegendWrapper = ({
       getColor,
       listResources,
       isOnlyOneSelected,
+      register,
     }),
     [
       selectedResources,
@@ -103,6 +159,7 @@ export const ChartLegendWrapper = ({
       getColor,
       listResources,
       isOnlyOneSelected,
+      register,
     ],
   );
 
@@ -113,7 +170,6 @@ export const ChartLegendWrapper = ({
   );
 };
 
-// Hook for accessing legend state in custom components
 export const useChartLegend = () => {
   const context = useContext(ChartLegendContext);
   if (!context) {

package/src/lib/components/charttooltip/ChartTooltip.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+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<{
+  isHovered?: boolean;
+  align?: 'left' | 'right';
+}>`
+  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;
+`;
+
+interface ChartTooltipItemProps {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  isHovered?: boolean;
+  legendIcon?: React.ReactNode;
+}
+
+export const ChartTooltipItem: React.FC<ChartTooltipItemProps> = ({
+  label,
+  value,
+  isHovered = false,
+  legendIcon,
+}) => (
+  <TooltipRow>
+    <TooltipLabel>
+      {legendIcon}
+      <TooltipText isHovered={isHovered}>{label}</TooltipText>
+    </TooltipLabel>
+    <TooltipText isHovered={isHovered} align="right">
+      {value}
+    </TooltipText>
+  </TooltipRow>
+);
+
+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/src/lib/components/globalhealthbar/GlobalHealthBar.component.tsx

@@ -19,7 +19,10 @@ export type GlobalHealthProps = {
   height?: number;
   tooltipPosition?: Position;
 };
-
+/**
+ * @deprecated Use GlobalHealthBar v2 instead
+ * @example import { GlobalHealthBar } from '@scality/core-ui/dist/next';
+ */
 function GlobalHealthBar({
   id,
   alerts,

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

@@ -0,0 +1,203 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
+  TooltipContentProps,
+  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 { Alert, useHealthBarData } from './useHealthBarData';
+
+export interface GlobalHealthProps {
+  id: string;
+  alerts: Alert[];
+  start: Date;
+  end: Date;
+}
+
+const ChartInteractiveContainer = styled.div`
+  position: relative;
+`;
+
+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 chartContainerRef = useRef<HTMLDivElement>(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: string) => {
+      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: React.KeyboardEvent<HTMLDivElement>) => {
+      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 (
+    <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}
+    >
+      <ResponsiveContainer width={'100%'} height={CHART_CONFIG.CHART_HEIGHT}>
+        <BarChart
+          data={chartData}
+          layout="vertical"
+          barSize={CHART_CONFIG.BAR_SIZE}
+          accessibilityLayer
+          margin={CHART_CONFIG.MARGINS}
+        >
+          <HealthBarXAxis
+            startTimestamp={startTimestamp}
+            endTimestamp={endTimestamp}
+          />
+
+          <Tooltip
+            allowEscapeViewBox={{ x: true, y: true }}
+            isAnimationActive={false}
+            shared={false}
+            wrapperStyle={{
+              width: '20rem',
+              position: 'fixed',
+            }}
+            content={(props: TooltipContentProps<number, string>) => {
+              return (
+                <GlobalHealthBarTooltip
+                  tooltipData={tooltipData}
+                  tooltipProps={props}
+                  chartContainerRef={chartContainerRef}
+                  isKeyboardActive={keyboardActive}
+                  startTimestamp={startTimestamp}
+                  endTimestamp={endTimestamp}
+                />
+              );
+            }}
+          />
+
+          {/* YAxis for the Background healthy bar */}
+          <YAxis yAxisId={'background'} type="category" hide />
+
+          {/* Generate YAxis for all alert keys */}
+          {allAlertBars.map(({ key }) => (
+            <YAxis key={`yAxis${key}`} yAxisId={key} type="category" hide />
+          ))}
+
+          {/* Background healthy bar */}
+          <Bar
+            dataKey="range"
+            fill={theme.statusHealthy}
+            radius={CHART_CONFIG.RADIUS_SIZE}
+            yAxisId="background"
+            isAnimationActive={false}
+          />
+
+          {/* Alert bars */}
+          {allAlertBars.map(({ key, fill }) => (
+            <Bar
+              dataKey={key}
+              yAxisId={key}
+              fill={fill}
+              onPointerEnter={() => handlePointerEnter(key)}
+              onPointerLeave={() => handlePointerLeave()}
+              isAnimationActive={false}
+            />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+    </ChartInteractiveContainer>
+  );
+}
+
+// Re-export Alert type for external use
+export type { Alert };

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

@@ -0,0 +1,173 @@
+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';
+
+interface GlobalHealthBarTooltipProps {
+  tooltipData: Alert | null;
+  coordinate?: { x: number; y: number };
+  tooltipProps: TooltipContentProps<number, string>;
+  chartContainerRef: React.RefObject<HTMLDivElement>;
+  isKeyboardActive?: boolean;
+  startTimestamp?: number;
+  endTimestamp?: number;
+}
+
+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: GlobalHealthBarTooltipProps) => {
+  const {
+    tooltipData,
+    tooltipProps,
+    chartContainerRef,
+    isKeyboardActive = false,
+    startTimestamp = 0,
+    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();
+
+      let tooltipX: number;
+      let tooltipY: number;
+
+      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?.x;
+        tooltipY = chartRect.top + 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 = (
+    <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>
+  );
+
+  return createPortal(tooltipContent, document.body);
+};