@scality/core-ui 0.193.0 → 0.195.0

package/src/lib/components/charts/linetimeseries/LineTimeSerieChart.types.ts

@@ -0,0 +1,93 @@
+import { TooltipContentProps } from 'recharts';
+
+export type Serie = {
+  /** The name of the resource */
+  resource: string;
+  /** The original data format from prometheus, extend the value to include number type */
+  data: [number, number | string | null][];
+  /** Function to generate the tooltip label - mandatory for tooltip display */
+  getTooltipLabel: (metricPrefix?: string, resource?: string) => string;
+  /** The name of the metric prefix (e.g., read, write, in, out) */
+  metricPrefix?: string;
+  /** Whether the line should be dashed */
+  isLineDashed?: boolean;
+};
+
+export type NonSymmetricalChartSerie = {
+  yAxisType?: 'default' | 'percentage';
+  series: Serie[] | undefined;
+};
+
+/**
+ * The symmetrical chart props are used to display two series on the same chart,
+ * such as in/out, write/read
+ */
+export type SymmetricalChartSerie = {
+  yAxisType: 'symmetrical';
+  series:
+    | {
+        above: Serie[] | undefined;
+        below: Serie[] | undefined;
+      }
+    | undefined;
+};
+
+export type LineChartProps = (
+  | NonSymmetricalChartSerie
+  | SymmetricalChartSerie
+) & {
+  /** The title of the chart */
+  title: string;
+  /** The height of the chart in pixels */
+  height: number;
+  /** Starting timestamp in seconds */
+  startingTimeStamp: number;
+  /** Interval between data points in seconds */
+  interval: number;
+  /** Total duration of the chart in seconds */
+  duration: number;
+  /** Unit range configuration for automatic unit scaling */
+  unitRange?: {
+    threshold: number;
+    label: string;
+  }[];
+  /** Sync ID for synchronizing multiple charts */
+  syncId?: string;
+  /** Whether the chart is in loading state */
+  isLoading?: boolean;
+  /** Y-axis title label */
+  yAxisTitle?: string;
+  /** Help text displayed as a tooltip icon */
+  helpText?: string;
+  /** Custom tooltip renderer */
+  renderTooltip?: (
+    tooltipProps: TooltipContentProps<number, string>,
+    unitLabel?: string,
+    duration?: number,
+  ) => React.ReactNode;
+};
+
+export type LineTimeSerieChartTooltipProps = {
+  tooltipProps: TooltipContentProps<number, string>;
+  unitLabel?: string;
+  duration: number;
+  renderTooltip?: (
+    tooltipProps: TooltipContentProps<number, string>,
+    unitLabel?: string,
+    duration?: number,
+  ) => React.ReactNode;
+  isSymmetrical?: boolean;
+  belowSeriesLabels?: Set<string>;
+  chartContainerRef: React.RefObject<HTMLDivElement>;
+  /** The unique ID of this chart instance */
+  chartId: string;
+};
+
+/**
+ * Type guard to check if series is symmetrical (has above/below structure)
+ */
+export const isSymmetricalSeries = (
+  series: Serie[] | { above: Serie[] | undefined; below: Serie[] | undefined },
+): series is { above: Serie[]; below: Serie[] } => {
+  return 'above' in series && 'below' in series;
+};

package/src/lib/components/charts/linetimeseries/LineTimeSerieChartTooltip.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { LegendShape } from '../legend/ChartLegend';
+import {
+  ChartTooltipHeader,
+  ChartTooltipItem,
+  ChartTooltipItemsContainer,
+  ChartTooltipPortal,
+  ChartTooltipSeparator,
+  TooltipHeader,
+} from '../common/ChartTooltip';
+import { LineTimeSerieChartTooltipProps } from './LineTimeSerieChart.types';
+import { getCurrentlyHoveredChartId } from './useChartHover';
+import { formatISONumber } from '../../../utils';
+
+/**
+ * Formats a numeric value for tooltip display
+ * - Non-finite values (NaN, null, undefined) → "-"
+ * - Zero → "0" with unit
+ * - Large values (>= 1000) → compact notation (1k, 1M)
+ * - Normal values (1-999) → up to 2 decimal places
+ * - Small values (0.01-0.99) → 2 decimal places
+ * - Very small values (< 0.01) → scientific notation (e.g., 4.7e-5)
+ */
+export const formatTooltipValue = (
+  value: number,
+  unitLabel?: string,
+): string => {
+  if (!Number.isFinite(value)) return '-';
+
+  const formatted = formatISONumber(value, { fixedDecimals: true, compact: true });
+  return `${formatted}${unitLabel ? ` ${unitLabel}` : ''}`;
+};
+
+/**
+ * Custom tooltip component for LineTimeSerieChart
+ * Handles sorting, separator placement for symmetrical charts, and value formatting
+ */
+export const LineTimeSerieChartTooltip: React.FC<
+  LineTimeSerieChartTooltipProps
+> = ({
+  unitLabel,
+  duration,
+  tooltipProps,
+  renderTooltip,
+  isSymmetrical,
+  belowSeriesLabels,
+  chartContainerRef,
+  chartId,
+}) => {
+    const { active, payload, label, coordinate } = tooltipProps;
+
+    // Check at render time if this chart is the currently hovered one
+    // Using only the module-level variable avoids race conditions with React state updates
+    const isActiveChart = getCurrentlyHoveredChartId() === chartId;
+
+    if (!active || !payload || !payload.length || !label || !isActiveChart)
+      return null;
+
+    const tooltipContent = renderTooltip ? (
+      renderTooltip(tooltipProps, unitLabel, duration)
+    ) : (
+      <>
+        <ChartTooltipHeader>
+          <TooltipHeader duration={duration} value={label} />
+        </ChartTooltipHeader>
+        <ChartTooltipItemsContainer>
+          {(() => {
+            // Sort payload: above series first (descending), then below series (ascending by absolute value)
+            const sortedPayload = [...payload].sort((a, b) => {
+              const aIsBelow = belowSeriesLabels?.has(a.name) ?? false;
+              const bIsBelow = belowSeriesLabels?.has(b.name) ?? false;
+
+              // Above series come before below series
+              if (aIsBelow !== bIsBelow) {
+                return aIsBelow ? 1 : -1;
+              }
+
+              // Within the same group:
+              // - Above series: higher values first (descending)
+              // - Below series: higher absolute values last (ascending)
+              if (aIsBelow) {
+                return Math.abs(a.value) - Math.abs(b.value);
+              }
+              return Math.abs(b.value) - Math.abs(a.value);
+            });
+
+            // Find the transition point between above and below series
+            const separatorIndex = sortedPayload.findIndex((entry) =>
+              belowSeriesLabels?.has(entry.name),
+            );
+            const hasBothAboveAndBelow =
+              isSymmetrical &&
+              belowSeriesLabels &&
+              belowSeriesLabels.size > 0 &&
+              separatorIndex > 0 &&
+              separatorIndex < sortedPayload.length;
+
+            return sortedPayload.map((entry, index) => {
+              const legendIcon = (
+                <LegendShape
+                  color={entry.color}
+                  shape="line"
+                  chartColors={{ [entry.color]: entry.color }}
+                />
+              );
+
+              const formattedValue = formatTooltipValue(entry.value, unitLabel);
+
+              return (
+                <React.Fragment key={index}>
+                  {/* Add separator between above and below series for symmetrical charts */}
+                  {hasBothAboveAndBelow && index === separatorIndex && (
+                    <ChartTooltipSeparator />
+                  )}
+                  <ChartTooltipItem
+                    label={entry.name}
+                    value={formattedValue}
+                    legendIcon={legendIcon}
+                  />
+                </React.Fragment>
+              );
+            });
+          })()}
+        </ChartTooltipItemsContainer>
+      </>
+    );
+
+    return (
+      <ChartTooltipPortal
+        coordinate={coordinate}
+        chartContainerRef={chartContainerRef}
+        isVisible={active && isActiveChart}
+      >
+        {tooltipContent}
+      </ChartTooltipPortal>
+    );
+  };

package/src/lib/components/charts/linetimeseries/useChartData.ts

@@ -0,0 +1,322 @@
+import { useMemo } from 'react';
+import { useChartLegend } from '../legend/ChartLegendWrapper';
+import {
+  addMissingDataPoint,
+  normalizeChartDataWithUnits,
+} from '../common/chartUtils';
+import { Serie, isSymmetricalSeries } from './LineTimeSerieChart.types';
+
+type ChartDataInput = {
+  series: Serie[] | { above: Serie[] | undefined; below: Serie[] | undefined } | undefined;
+  startingTimeStamp: number;
+  duration: number;
+  interval: number;
+  yAxisType: 'default' | 'percentage' | 'symmetrical';
+  unitRange?: { threshold: number; label: string }[];
+};
+
+export type LineToRender = {
+  key: string;
+  dataKey: string;
+  stroke: string;
+  strokeDasharray?: string;
+};
+
+type ChartDataOutput = {
+  /** Processed data ready for Recharts */
+  rechartsData: Record<string, number | null>[];
+  /** Maximum value for Y-axis domain */
+  topDomain: number;
+  /** Value used for tick calculation */
+  topValue: number;
+  /** Unit label (e.g., "KiB/s", "%") */
+  unitLabel: string | undefined;
+  /** X-axis tick positions */
+  xAxisTicks: number[];
+  /** Line configurations ready for rendering */
+  linesToRender: LineToRender[];
+  /** Set of labels belonging to "below" series (for symmetrical charts) */
+  belowSeriesLabels: Set<string> | undefined;
+};
+
+/**
+ * Hook that processes chart data for LineTimeSerieChart.
+ * Handles data normalization, unit scaling, empty data handling, and series grouping.
+ */
+export function useChartData({
+  series,
+  startingTimeStamp,
+  duration,
+  interval,
+  yAxisType,
+  unitRange,
+}: ChartDataInput): ChartDataOutput {
+  const { getColor, selectedResources } = useChartLegend();
+
+  /**
+   * Determines if the series data is empty.
+   * Used for conditional rendering and empty state handling.
+   */
+  const isSeriesEmpty = useMemo(() => {
+    return (
+      !series ||
+      (Array.isArray(series) && series.length === 0) ||
+      (isSymmetricalSeries(series) &&
+        (!series.above || series.above.length === 0) &&
+        (!series.below || series.below.length === 0))
+    );
+  }, [series]);
+
+  /**
+   * Processes raw series data into Recharts-compatible format.
+   * - Fills missing data points based on time interval
+   * - Converts timestamps to milliseconds
+   * - For symmetrical charts, negates "below" series values
+   * - For empty data, generates placeholder data with NaN values
+   */
+  const chartData = useMemo(() => {
+    if (isSeriesEmpty) {
+      // Generate timestamps for the time range with NaN values for each series from legend
+      const emptyDataPoints = addMissingDataPoint(
+        [],
+        startingTimeStamp,
+        duration,
+        interval,
+      );
+      return emptyDataPoints.map(([timestamp]) => {
+        const dataPoint: Record<string, number> = {
+          timestamp: timestamp * 1000,
+        };
+        selectedResources.forEach((resource) => {
+          dataPoint[resource] = NaN;
+        });
+        return dataPoint;
+      });
+    }
+
+    // Add missing data points to each series
+    const normalizedSeries =
+      yAxisType === 'symmetrical' && isSymmetricalSeries(series!)
+        ? {
+            above: series!.above
+              ? series!.above.map((line) => ({
+                  ...line,
+                  data: addMissingDataPoint(
+                    line.data,
+                    startingTimeStamp,
+                    duration,
+                    interval,
+                  ),
+                }))
+              : [],
+            below: series!.below
+              ? series!.below.map((line) => ({
+                  ...line,
+                  data: addMissingDataPoint(
+                    line.data,
+                    startingTimeStamp,
+                    duration,
+                    interval,
+                  ).map(
+                    ([timestamp, value]) =>
+                      [
+                        timestamp,
+                        value === null ? null : `-${Number(value)}`,
+                      ] as [number, string | null],
+                  ),
+                }))
+              : [],
+          }
+        : (series as Serie[]).map((line) => ({
+            ...line,
+            data: addMissingDataPoint(
+              line.data,
+              startingTimeStamp,
+              duration,
+              interval,
+            ),
+          }));
+
+    // Convert to Recharts format (array of objects with timestamp and values)
+    const dataPointsByTime: Record<
+      number,
+      { timestamp: number } & Record<string, number | null>
+    > = {};
+
+    const seriesToProcess =
+      yAxisType === 'symmetrical' && isSymmetricalSeries(normalizedSeries)
+        ? [...normalizedSeries.above, ...normalizedSeries.below]
+        : (normalizedSeries as Serie[]);
+
+    seriesToProcess.forEach((serie) => {
+      const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
+
+      serie.data.forEach((point) => {
+        const timestamp =
+          typeof point[0] === 'number' ? point[0] * 1000 : Number(point[0]);
+        const value = point[1];
+
+        if (!dataPointsByTime[timestamp]) {
+          dataPointsByTime[timestamp] = { timestamp };
+        }
+        dataPointsByTime[timestamp][label] =
+          typeof value === 'string' ? Number(value) : value;
+      });
+    });
+
+    return Object.values(dataPointsByTime).sort(
+      (a, b) => (a.timestamp as number) - (b.timestamp as number),
+    );
+  }, [series, startingTimeStamp, duration, interval, yAxisType, selectedResources, isSeriesEmpty]);
+
+  /**
+   * Calculates evenly spaced X-axis tick positions.
+   * Adds padding to avoid labels at the very edges (10% on each side).
+   */
+  const xAxisTicks = useMemo(() => {
+    if (!chartData || chartData.length === 0) return [];
+
+    const timestamps: number[] = chartData
+      .map((d) => d.timestamp)
+      .filter((t): t is number => t !== null && t !== undefined);
+
+    if (timestamps.length === 0) return [];
+
+    const minTimestamp = Math.min(...timestamps);
+    const maxTimestamp = Math.max(...timestamps);
+    const timeRange = maxTimestamp - minTimestamp;
+
+    const padding = timeRange * 0.1;
+    const paddedStart = minTimestamp + padding;
+    const paddedEnd = maxTimestamp - padding;
+    const paddedRange = paddedEnd - paddedStart;
+
+    const numTicks = 5;
+    const tickInterval = paddedRange / (numTicks - 1);
+
+    return Array.from(
+      { length: numTicks },
+      (_, index) => paddedStart + index * tickInterval,
+    );
+  }, [chartData]);
+
+  /**
+   * Normalizes data values and determines unit scaling.
+   * - Extracts valid numeric values from chart data
+   * - Applies unit range thresholds (e.g., B/s → KiB/s → MiB/s)
+   * - Calculates Y-axis domain
+   */
+  const { topValue, unitLabel, rechartsData, topDomain } = useMemo(() => {
+    const values = chartData.flatMap((dataPoint) =>
+      Object.entries(dataPoint)
+        .filter(([key]) => key !== 'timestamp')
+        .map(([_, value]) => {
+          if (value === null || value === undefined) return null;
+          const num =
+            typeof value === 'string'
+              ? Number(value)
+              : typeof value === 'number'
+                ? value
+                : null;
+          return num !== null && !isNaN(num) ? num : null;
+        })
+        .filter((value): value is number => value !== null),
+    );
+
+    // Default values for empty charts
+    if (values.length === 0 || values.every((value) => value === 0)) {
+      return {
+        topValue: 1,
+        unitLabel: yAxisType === 'percentage' ? '%' : undefined,
+        rechartsData: chartData,
+        topDomain: 1,
+      };
+    }
+
+    const top = Math.abs(Math.max(...values));
+    const bottom = Math.abs(Math.min(...values));
+    const maxValue = Math.max(top, bottom);
+
+    const result = normalizeChartDataWithUnits(
+      chartData as Record<string, number>[],
+      maxValue,
+      unitRange,
+      'timestamp',
+    );
+
+    const finalTopDomain =
+      yAxisType === 'percentage'
+        ? Math.max(result.topDomain, 100)
+        : result.topDomain;
+
+    return {
+      topValue:
+        yAxisType === 'percentage'
+          ? Math.max(result.topValue, 100)
+          : result.topValue,
+      unitLabel: result.unitLabel ?? (yAxisType === 'percentage' ? '%' : undefined),
+      rechartsData: result.rechartsData,
+      topDomain: finalTopDomain,
+    };
+  }, [chartData, yAxisType, unitRange]);
+
+  /**
+   * Computes the line configurations for rendering.
+   * Handles both empty series (using legend resources) and populated series.
+   */
+  const linesToRender = useMemo((): LineToRender[] => {
+    if (isSeriesEmpty) {
+      // For empty series, create lines for each resource from legend
+      return selectedResources.map((resource) => ({
+        key: `empty-${resource}`,
+        dataKey: resource,
+        stroke: getColor(resource) || '',
+      }));
+    }
+
+    // For populated series, create lines from actual series data
+    const allSeries = isSymmetricalSeries(series!)
+      ? [...(series!.above || []), ...(series!.below || [])]
+      : (series as Serie[]);
+
+    return allSeries
+      .filter((serie) => selectedResources.includes(serie.resource))
+      .map((serie, index) => {
+        const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
+        return {
+          key: `${serie.resource}-${index}`,
+          dataKey: label,
+          stroke: getColor(serie.resource) || '',
+          strokeDasharray: serie.isLineDashed ? '4 4' : undefined,
+        };
+      });
+  }, [series, getColor, selectedResources, isSeriesEmpty]);
+
+  /**
+   * Computes the set of "below" series labels for symmetrical charts.
+   * Used to reliably determine separator placement in the tooltip.
+   */
+  const belowSeriesLabels = useMemo(() => {
+    if (yAxisType !== 'symmetrical' || !series || !isSymmetricalSeries(series)) {
+      return undefined;
+    }
+
+    const labels = new Set<string>();
+    (series.below || []).forEach((serie) => {
+      const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
+      labels.add(label);
+    });
+
+    return labels;
+  }, [series, yAxisType]);
+
+  return {
+    rechartsData,
+    topDomain,
+    topValue,
+    unitLabel,
+    xAxisTicks,
+    linesToRender,
+    belowSeriesLabels,
+  };
+}

package/src/lib/components/charts/linetimeseries/useChartHover.ts

@@ -0,0 +1,35 @@
+import { useCallback, useId } from 'react';
+
+/**
+ * Module-level tracker to ensure only one chart tooltip is shown at a time
+ * when multiple charts are synced via syncId.
+ */
+let currentlyHoveredChartId: string | null = null;
+
+/**
+ * Gets the currently hovered chart ID.
+ * Called at tooltip render time to get the latest value.
+ */
+export function getCurrentlyHoveredChartId(): string | null {
+  return currentlyHoveredChartId;
+}
+
+/**
+ * Hook to manage chart hover state for tooltip display.
+ * Ensures only one chart shows its tooltip at a time when using syncId.
+ */
+export function useChartHover() {
+  const chartId = useId();
+
+  const handleMouseEnter = useCallback(() => {
+    currentlyHoveredChartId = chartId;
+  }, [chartId]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (currentlyHoveredChartId === chartId) {
+      currentlyHoveredChartId = null;
+    }
+  }, [chartId]);
+
+  return { handleMouseEnter, handleMouseLeave, chartId };
+}

package/src/lib/components/checkbox/Checkbox.component.tsx

@@ -5,6 +5,19 @@ import { spacing, Stack } from '../../spacing';
 import { Text } from '../text/Text.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
+const getCheckmarkSvgUrl = (color: string) => {
+  const encodedColor = color.replace('#', '%23');
+  return `url('data:image/svg+xml,%3Csvg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cpath d="M3 6.68646L5.0671 9L9 3" stroke="${encodedColor}" stroke-width="1.5"/%3E %3C/svg%3E')`;
+};
+
+const getIndeterminateSvgUrl = (color: string) => {
+  const encodedColor = color.replace('#', '%23');
+  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='6' y1='12' x2='20' y2='12' style='stroke:${encodedColor};stroke-width:4'/%3E %3C/svg%3E")`;
+};
+
+const CheckboxInput = styled.input`
+	transform: scale(1.5);`;
+
 export type Props = {
   label?: string;
   value?: string;
@@ -22,7 +35,7 @@ const Checkbox = forwardRef<HTMLInputElement, Props>(
         className="sc-checkbox"
       >
         <Stack>
-          <input
+          <CheckboxInput
             type="checkbox"
             checked={checked}
             disabled={disabled}
@@ -77,8 +90,7 @@ const StyledCheckbox = styled.label<{
     border: 0;
     background-color: transparent;
     background-size: contain;
-    box-shadow: inset 0 0 0 ${spacing.r1}
-      ${(props) => props.theme.textSecondary};
+    box-shadow: inset 0 0 0 ${spacing.r1} ${(props) => props.theme.textSecondary};
   }
 
   /* Checked */
@@ -89,13 +101,7 @@ const StyledCheckbox = styled.label<{
 
   [type='checkbox']:checked::before {
     box-shadow: none;
-    background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cpath d="M3 6.68646L5.0671 9L9 3" stroke="${(
-      props,
-    ) =>
-      props.theme.textPrimary.replace(
-        '#',
-        '%23',
-      )}" stroke-width="1.5"/%3E %3C/svg%3E');
+    background-image: ${(props) => getCheckmarkSvgUrl(props.theme.textPrimary)};
     background-repeat: no-repeat;
     background-position: center;
   }
@@ -103,16 +109,9 @@ const StyledCheckbox = styled.label<{
   /* Indeterminate */
 
   [type='checkbox']:indeterminate::before {
-    box-shadow: inset 0 0 0 ${spacing.r1}
-      ${(props) => props.theme.selectedActive};
+    box-shadow: inset 0 0 0 ${spacing.r1} ${(props) => props.theme.selectedActive};
     background-color: ${(props) => props.theme.highlight};
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='6' y1='12' x2='20' y2='12' style='stroke:${(
-      props,
-    ) =>
-      props.theme.textPrimary.replace(
-        '#',
-        '%23',
-      )};stroke-width:4'/%3E %3C/svg%3E");
+    background-image: ${(props) => getIndeterminateSvgUrl(props.theme.textPrimary)};
   }
 
   /* Hover & focus */
@@ -142,4 +141,4 @@ const StyledCheckbox = styled.label<{
     cursor: not-allowed;
     background-color: ${(props) => props.theme.textSecondary};
   }
-`;
+`

package/src/lib/components/constrainedtext/Constrainedtext.component.tsx

@@ -31,11 +31,12 @@ const ConstrainedTextContainer = styled.div`
   -webkit-line-clamp: ${props.lineClamp};
   -webkit-box-orient: vertical;
   overflow-wrap: break-word;
-  word-break: break-all;
+  word-break: normal;
+  line-height: 1.2;
   `
       : `overflow-wrap: break-word;
       white-space: nowrap;
-      word-break: break-all;
+      word-break: normal;
       `};
 `;
 const BlockTooltip = styled.div`

package/src/lib/components/dropdown/Dropdown.component.tsx

@@ -79,6 +79,9 @@ const DropdownMenuItemStyled = styled.li`
   &:active {
     background-color: ${getThemePropSelector('highlight')};
   }
+  &:last-child {
+    border-bottom: 0.3px solid ${getThemePropSelector('border')};
+  }
 `;
 const Caret = styled.span`
   margin-left: ${spacing.r16};