@scality/core-ui 0.171.0 → 0.172.0

package/src/lib/components/barchartv2/BarchartTooltip.tsx

@@ -0,0 +1,89 @@
+import {
+  BarchartBars,
+  BarchartTooltipFn,
+  CategoryType,
+  TimeType,
+} from './Barchart.component';
+import { FormattedDateTime } from '../date/FormattedDateTime';
+import { TooltipContentProps } from 'recharts';
+import { getCurrentPoint } from './utils';
+import {
+  ChartTooltipContainer,
+  ChartTooltipItem,
+  ChartTooltipHeader,
+  ChartTooltipItemsContainer,
+} from '../charttooltip/ChartTooltip';
+import { LegendShape } from '../chartlegend/ChartLegend';
+
+export 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;
+}) => {
+  const { active } = tooltipProps;
+
+  if (!active) {
+    return null;
+  }
+
+  const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
+  if (tooltip) {
+    return tooltip(currentPoint);
+  }
+
+  return (
+    <ChartTooltipContainer>
+      <ChartTooltipHeader>
+        {type.type === 'time' ? (
+          <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
+        )}
+      </ChartTooltipHeader>
+      <ChartTooltipItemsContainer>
+        {currentPoint.values.map((value) => {
+          const legendIcon = colorSet && (
+            <LegendShape
+              color={colorSet[value.label as keyof typeof colorSet]}
+              shape="rectangle"
+              chartColors={colorSet}
+            />
+          );
+
+          const formattedValue = Number.isInteger(value.value)
+            ? `${value.value}`
+            : value.value.toFixed(2);
+          const valueWithUnit = unitLabel
+            ? `${formattedValue} ${unitLabel}`
+            : formattedValue;
+          return (
+            <ChartTooltipItem
+              key={value.label}
+              label={value.label}
+              value={valueWithUnit}
+              isHovered={value.isHovered}
+              legendIcon={legendIcon}
+            />
+          );
+        })}
+      </ChartTooltipItemsContainer>
+    </ChartTooltipContainer>
+  );
+};

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);
+};

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

@@ -0,0 +1,94 @@
+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';
+
+interface HealthBarXAxisProps {
+  startTimestamp: number;
+  endTimestamp: number;
+}
+const CustomTick = ({
+  tickProps,
+  startTimestamp,
+  endTimestamp,
+}: {
+  tickProps: any;
+  startTimestamp: number;
+  endTimestamp: number;
+}) => {
+  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 && (
+      <g transform={`translate(${payload.coordinate},${y})`}>
+        <text
+          textAnchor="middle"
+          dy={10}
+          dx={edgeMargin}
+          fontSize={fontSize.smaller}
+          fill={theme.textSecondary}
+        >
+          {is7DaySpan || isDaySpan ? (
+            <FormattedDateTime
+              format="day-month-abbreviated-hour-minute"
+              value={new Date(payload.value)}
+            />
+          ) : (
+            <FormattedDateTime format="time" value={new Date(payload.value)} />
+          )}
+        </text>
+      </g>
+    )
+  );
+};
+
+export const HealthBarXAxis = ({
+  startTimestamp,
+  endTimestamp,
+}: HealthBarXAxisProps) => {
+  const theme = useTheme();
+  const ticks = getTicks(startTimestamp, endTimestamp);
+
+  return (
+    <XAxis
+      allowDataOverflow={true}
+      dataKey="start"
+      type="number"
+      domain={[startTimestamp, endTimestamp]}
+      tickSize={5}
+      minTickGap={10}
+      interval={0}
+      tick={(props: any) => {
+        return (
+          <CustomTick
+            tickProps={props}
+            startTimestamp={startTimestamp}
+            endTimestamp={endTimestamp}
+          />
+        );
+      }}
+      ticks={ticks}
+      tickLine={{ stroke: theme.textSecondary }}
+      axisLine={false}
+    />
+  );
+};