@scality/core-ui 0.161.0 → 0.162.0

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

@@ -0,0 +1,486 @@
+import {
+  BarchartProps,
+  BarchartBars,
+  BarchartTooltipFn,
+} from './Barchart.component';
+import { DAY_MONTH_FORMATER, TIME_FORMATER } from '../date/FormattedDateTime';
+import { TooltipContentProps } from 'recharts';
+import { chartColors, ChartColors } from '../../style/theme';
+
+export const getRoundReferenceValue = (value: number): number => {
+  if (value <= 0) return 10; // 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)));
+
+  // Normalized value between 1 and 10
+  const normalized = value / magnitude;
+
+  // Round to nice numbers based on normalized value
+  if (normalized <= 1) return magnitude;
+  if (normalized <= 2.5) return 2.5 * magnitude;
+  if (normalized <= 5) return 5 * magnitude;
+  return 10 * magnitude;
+};
+
+export const getMaxBarValue = (
+  data: { [key: string]: string | number }[],
+  stacked?: boolean,
+) => {
+  const values = data.map((item) => {
+    // If stacked, we need to filter out category and sum the values in the same object
+    if (stacked) {
+      // Get objects keys except category
+      const filterOutCategory = Object.keys(item).filter(
+        (key) => key !== 'category',
+      );
+      // Sum the values in the same object (corresponding to one bar) based on the keys
+      const sumValues = filterOutCategory.reduce((acc, curr) => {
+        return acc + Number(item[curr]);
+      }, 0);
+      return sumValues;
+    }
+    //filter out the category key
+    const numberValues = Object.keys(item)
+      .filter((key) => key !== 'category')
+      .map((key) => Number(item[key]));
+    // Get the max value among the values in the object (corresponding to one bar)
+    return Math.max(...numberValues);
+  });
+  return Math.max(...values);
+};
+
+/**
+ * Generates time ranges between start and end dates based on the given interval
+ * @param startDate - Start date
+ * @param endDate - End date
+ * @param interval - Interval in milliseconds
+ * @returns Array of time ranges with start and end properties as Date objects
+ */
+const generateTimeRanges = (
+  startDate: Date,
+  endDate: Date,
+  interval: number,
+): { start: Date; end: Date }[] => {
+  const ranges: { start: Date; end: Date }[] = [];
+  if (!startDate || !endDate || !interval) {
+    return ranges;
+  }
+
+  let currentDate = new Date(startDate.getTime());
+  while (currentDate.getTime() <= endDate.getTime()) {
+    const rangeEnd = new Date(currentDate.getTime() + interval);
+
+    ranges.push({
+      start: new Date(currentDate.getTime()),
+      end: rangeEnd,
+    });
+
+    currentDate = new Date(currentDate.getTime() + interval);
+  }
+
+  return ranges;
+};
+
+/**
+ * Formats a date based on the interval
+ * @param date - Date object
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+const formatDate = (date: Date, interval: number): string => {
+  if (interval > 24 * 60 * 60 * 1000) {
+    return (
+      DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
+      ' ' +
+      TIME_FORMATER.format(date)
+    );
+  } else if (interval === 24 * 60 * 60 * 1000) {
+    // Daily or longer intervals - use day format
+    return DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '');
+  } else if (interval >= 60 * 1000) {
+    //Handle hourly and minute intervals - use minute format
+    return TIME_FORMATER.format(date);
+  } else {
+    // Second intervals or less - use full timestamp
+    return date.toISOString();
+  }
+};
+
+/**
+ * Finds the time range that contains the given date
+ * @param date - Data point date
+ * @param ranges - Array of time ranges
+ * @returns The range that contains the date, or null if not found
+ */
+const findRangeForDate = (
+  date: Date,
+  ranges: { start: Date; end: Date }[],
+): { start: Date; end: Date } | null => {
+  const timestamp = date.getTime();
+  return (
+    ranges.find(
+      (range) =>
+        timestamp >= range.start.getTime() && timestamp < range.end.getTime(),
+    ) || null
+  );
+};
+
+/**
+ * Transforms time-based data into chart format
+ */
+export const transformTimeData = <T extends BarchartBars>(
+  bars: T,
+  type: {
+    type: 'time';
+    timeRange: {
+      startDate: Date;
+      endDate: Date;
+      interval: number;
+    };
+  },
+  barDataKeys: string[],
+) => {
+  const timeRanges = generateTimeRanges(
+    type.timeRange.startDate,
+    type.timeRange.endDate,
+    type.timeRange.interval,
+  );
+
+  const categoryMap = new Map<
+    string | number,
+    { [key: string]: string | number }
+  >();
+
+  // Initialize all ranges with zeros
+  timeRanges.forEach((range) => {
+    const categoryDisplay = formatDate(range.start, type.timeRange.interval);
+    const initialData: { [key: string]: string | number } = {
+      category: categoryDisplay,
+    };
+    barDataKeys.forEach((dataKey) => {
+      initialData[dataKey] = 0;
+    });
+    categoryMap.set(range.start.getTime(), initialData);
+  });
+
+  // Populate with actual data
+  bars.forEach((bar) => {
+    bar.data.forEach(([dateValue, value]) => {
+      // Convert to Date if it's not already a Date object
+      const date =
+        dateValue instanceof Date
+          ? dateValue
+          : new Date(dateValue as string | number);
+      const range = findRangeForDate(date, timeRanges);
+      if (range) {
+        const existingData = categoryMap.get(range.start.getTime())!;
+        existingData[bar.label] = value;
+      }
+    });
+  });
+
+  return Array.from(categoryMap.values());
+};
+
+/**
+ * Transforms category-based data into chart format
+ */
+export const transformCategoryData = <T extends BarchartBars>(
+  bars: T,
+  barDataKeys: string[],
+) => {
+  const categoryMap = new Map<
+    string | number,
+    { [key: string]: string | number }
+  >();
+
+  bars.forEach((bar) => {
+    bar.data.forEach(([key, value]) => {
+      const categoryKey = String(key);
+
+      if (!categoryMap.has(categoryKey)) {
+        const newData: { [key: string]: string | number } = {
+          category: categoryKey,
+        };
+        barDataKeys.forEach((dataKey) => {
+          newData[dataKey] = 0;
+        });
+        categoryMap.set(categoryKey, newData);
+      }
+
+      const existingData = categoryMap.get(categoryKey)!;
+      existingData[bar.label] = value;
+    });
+  });
+
+  return Array.from(categoryMap.values());
+};
+
+/**
+ * Applies custom sorting to chart data
+ */
+export const applySortingToData = <T extends BarchartBars>(
+  data: { [key: string]: string | number }[],
+  barDataKeys: string[],
+  defaultSort: BarchartProps<T>['defaultSort'],
+) => {
+  const points = data.map((item) => {
+    const point: any = { category: item.category };
+    barDataKeys.forEach((dataKey) => {
+      point[dataKey] = Number(item[dataKey]) || 0;
+    });
+    return point;
+  });
+
+  points.sort(defaultSort);
+
+  return points.map((point) => {
+    const dataItem: { [key: string]: string | number } = {
+      category: point.category,
+    };
+    barDataKeys.forEach((dataKey) => {
+      dataItem[dataKey] = point[dataKey];
+    });
+    return dataItem;
+  });
+};
+
+const getRechartsBarsAndBarDataKeys = (
+  bars: BarchartBars,
+  colorSet: Record<BarchartBars[number]['label'], ChartColors | (string & {})>,
+  stacked?: boolean,
+) => {
+  const rechartsBars: { dataKey: string; fill: string; stackId?: string }[] =
+    [];
+  const barDataKeys: string[] = [];
+
+  bars.forEach((bar) => {
+    const colorName = colorSet[bar.label];
+    const rechartsBar = {
+      dataKey: bar.label,
+      fill: chartColors[colorName] || colorName,
+      stackId: stacked ? 'stacked' : undefined,
+    };
+
+    rechartsBars.push(rechartsBar);
+    barDataKeys.push(bar.label);
+  });
+
+  return {
+    rechartsBars,
+    barDataKeys,
+  };
+};
+
+/**
+ * Converts prometheus data to recharts data format
+ * @param bars - The bars to convert
+ * @param type - The chart type (category or time)
+ * @returns Recharts data format
+ */
+export const formatPrometheusDataToRechartsDataAndBars = <
+  T extends BarchartBars,
+>(
+  bars: T,
+  type: BarchartProps<T>['type'],
+  colorSet: Record<T[number]['label'], ChartColors | (string & {})>,
+  stacked?: boolean,
+  defaultSort?: BarchartProps<T>['defaultSort'],
+): {
+  data: { [key: string]: string | number }[];
+  rechartsBars: { dataKey: string; fill: string; stackId?: string }[];
+} => {
+  const { rechartsBars, barDataKeys } = getRechartsBarsAndBarDataKeys(
+    bars,
+    colorSet,
+    stacked,
+  );
+
+  let data =
+    type !== 'category' && type.type === 'time'
+      ? transformTimeData(bars, type, barDataKeys)
+      : transformCategoryData(bars, barDataKeys);
+
+  if (type === 'category' && defaultSort) {
+    data = applySortingToData(data, barDataKeys, defaultSort);
+  }
+
+  const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked);
+
+  return {
+    rechartsBars: sortedRechartsBars,
+    data,
+  };
+};
+
+export type UnitRange = {
+  threshold: number;
+  label: string;
+}[];
+
+export const computeUnitLabelAndRoundReferenceValue = (
+  data: any,
+  maxValue: number,
+  unitRange: UnitRange | undefined,
+) => {
+  if (!unitRange) {
+    const roundReferenceValue = getRoundReferenceValue(maxValue);
+    return { unitLabel: '', roundReferenceValue, rechartsData: data };
+  }
+
+  const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
+  const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+  const roundReferenceValue = getRoundReferenceValue(topValue);
+  const rechartsData = data.map((dataPoint) => {
+    const normalizedDataPoint = { ...dataPoint };
+    Object.entries(dataPoint).forEach(([key, value]) => {
+      if (key !== 'category' && typeof value === 'number') {
+        normalizedDataPoint[key] = value / valueBase;
+      }
+    });
+    return normalizedDataPoint;
+  });
+  return { unitLabel, roundReferenceValue, rechartsData };
+};
+
+/**
+ * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
+ * @param {any} unitRange
+ * @param {any} maxValue the maximum value among the data set
+ * @returns {any}
+ */
+export function getUnitLabel(
+  unitRange: {
+    threshold: number;
+    label: string;
+  }[],
+  maxValue: number,
+): {
+  valueBase: number;
+  unitLabel: string;
+} {
+  // first sort the unitRange
+  unitRange.sort(
+    (
+      unitA: {
+        threshold: number;
+        label: string;
+      },
+      unitB: {
+        threshold: number;
+        label: string;
+      },
+    ) => {
+      return unitA.threshold - unitB.threshold;
+    },
+  );
+  let index = unitRange.findIndex((range) => range.threshold > maxValue);
+
+  // last unit
+  if (index === -1) {
+    index = unitRange.length;
+  }
+
+  if (index === 0) {
+    return {
+      valueBase: unitRange[index].threshold,
+      unitLabel: unitRange[index].label,
+    };
+  }
+
+  return {
+    // if the threshold is 0, we use 1 as the value base to avoid division by 0
+    valueBase: unitRange[index - 1].threshold || 1,
+    unitLabel: unitRange[index - 1].label,
+  };
+}
+
+// Sort stacked bars by their average values in descending order
+// This ensures the largest bars appear at the bottom of the stack
+export const sortStackedBars = (
+  rechartsBars: {
+    dataKey: string;
+    fill: string;
+    stackId?: string;
+  }[],
+  data: {
+    [key: string]: string | number;
+  }[],
+  stacked?: boolean,
+) => {
+  if (!stacked) {
+    return rechartsBars;
+  }
+  const barAverages = rechartsBars.map((bar) => {
+    const values = data
+      .map((item) => Number(item[bar.dataKey]) || 0)
+      .filter((value) => !isNaN(value));
+    const average =
+      values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+    return { ...bar, average };
+  });
+
+  // Sort by average in descending order (largest first, which will be at bottom in stack)
+  barAverages.sort((a, b) => b.average - a.average);
+  // Remove the average property and keep only the bar data
+  return barAverages.map(({ average, ...bar }) => bar);
+};
+
+export const renderTooltipContent = <T extends BarchartBars>(
+  props: TooltipContentProps<number, string>,
+  tooltip: BarchartTooltipFn<T> | undefined,
+  hoveredValue: string | undefined,
+) => {
+  const { active, payload, label } = props;
+
+  if (!active || !tooltip) {
+    return null;
+  }
+
+  const tooltipValues: {
+    label: T[number]['label'];
+    value: number;
+    isHovered: boolean;
+  }[] = payload.map((item) => ({
+    label: item.name,
+    value: item.value,
+    isHovered: item.name === hoveredValue,
+  }));
+
+  const currentPoint = {
+    category: label as string | number,
+    values: tooltipValues,
+  };
+
+  return tooltip(currentPoint);
+};
+
+export const useChartData = <T extends BarchartBars>(
+  bars: T,
+  type: BarchartProps<T>['type'],
+  colorSet: Record<T[number]['label'], ChartColors | (string & {})>,
+  stacked?: boolean,
+  defaultSort?: BarchartProps<T>['defaultSort'],
+  unitRange?: UnitRange,
+) => {
+  const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(
+    bars,
+    type,
+    colorSet,
+    stacked,
+    defaultSort,
+  );
+
+  const maxValue = getMaxBarValue(data, stacked);
+
+  const { unitLabel, roundReferenceValue, rechartsData } =
+    computeUnitLabelAndRoundReferenceValue(data, maxValue, unitRange);
+
+  return {
+    rechartsBars,
+    unitLabel,
+    roundReferenceValue,
+    rechartsData,
+  };
+};

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';

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

@@ -12,6 +12,7 @@ type Props = {
   tooltipStyle?: $PropertyType<TooltipProps, 'overlayStyle'>;
   tooltipPlacement?: $PropertyType<TooltipProps, 'placement'>;
   lineClamp?: number;
+  centered?: boolean;
 };
 // for lineClamp cf https://css-tricks.com/almanac/properties/l/line-clamp/
 // it should work on all major navigator, despite the --webkit prefix
@@ -19,6 +20,7 @@ type Props = {
 const ConstrainedTextContainer = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: ${(props) => (props.centered ? 'center' : 'left')};
 
   ${(props) =>
     props.lineClamp > 1
@@ -49,12 +51,18 @@ function isEllipsisActive(element: HTMLDivElement) {
   );
 }
 
-function getConstrainedTextContainer(constrainedTextRef, lineClamp, text) {
+function getConstrainedTextContainer(
+  constrainedTextRef,
+  lineClamp,
+  text,
+  centered,
+) {
   return (
     <ConstrainedTextContainer
       ref={constrainedTextRef}
       className="sc-constrainedtext"
       lineClamp={lineClamp}
+      centered={centered}
     >
       {text}
     </ConstrainedTextContainer>
@@ -66,6 +74,7 @@ function ConstrainedText({
   tooltipStyle,
   tooltipPlacement,
   lineClamp = 1,
+  centered = false,
 }: Props): JSX.Element {
   const [displayToolTip, setDisplayToolTip] = useState(false);
   const constrainedTextRef = useCallback(
@@ -83,12 +92,22 @@ function ConstrainedText({
           placement={tooltipPlacement}
         >
           <Text>
-            {getConstrainedTextContainer(constrainedTextRef, lineClamp, text)}
+            {getConstrainedTextContainer(
+              constrainedTextRef,
+              lineClamp,
+              text,
+              centered,
+            )}
           </Text>
         </Tooltip>
       ) : (
         <Text>
-          {getConstrainedTextContainer(constrainedTextRef, lineClamp, text)}
+          {getConstrainedTextContainer(
+            constrainedTextRef,
+            lineClamp,
+            text,
+            centered,
+          )}
         </Text>
       )}
     </BlockTooltip>

package/src/lib/components/coreuithemeprovider/CoreUiThemeProvider.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { space, fontSize, CoreUITheme } from '../../style/theme';
 

package/src/lib/components/date/FormattedDateTime.tsx

@@ -8,6 +8,12 @@ export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
   hour12: false,
 });
 
+export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
+  weekday: 'short',
+  day: '2-digit',
+  month: 'short',
+});
+
 export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
   hour12: false,
   hour: '2-digit',

package/src/lib/components/emptytable/Emptytable.component.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import * as React from 'react';
+
 import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 

package/src/lib/components/error-pages/ErrorPage401.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   ErrorPageContainer,
   Row,

package/src/lib/components/error-pages/ErrorPage404.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   ErrorPageContainer,
   Row,

package/src/lib/components/error-pages/ErrorPage500.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   ErrorPageContainer,
   Row,

package/src/lib/components/error-pages/ErrorPageAuth.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Icon } from '../icon/Icon.component';
 import {
   ErrorPageContainer,

package/src/lib/components/form/Form.component.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   Children,
   createContext,
   FormHTMLAttributes,

package/src/lib/components/infomessage/InfoMessage.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { Stack } from '../../spacing';
 import { Icon } from '../icon/Icon.component';

package/src/lib/components/lateralnavbarlayout/LateralNavbarLayout.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { Props as SidebarProps } from '../sidebar/Sidebar.component';

package/src/lib/components/layout/Layout.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from 'styled-components';
 
 import { Navbar } from '../navbar/Navbar.component';

package/src/lib/components/layout/v2/panels.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
 import styled from 'styled-components';
+import { ReactElement } from 'react';
 import { ThemeColors } from '../../../style/theme';
 import { AppContainer } from './AppContainer';
 

package/src/lib/components/modal/Modal.component.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useEffect, useLayoutEffect, useRef } from 'react';
-import ReactDom from 'react-dom';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { Wrap, spacing } from '../../spacing';
 import { zIndex } from '../../style/theme';
@@ -95,7 +95,7 @@ const Modal = ({
     }
   }, [isOpen]);
   return isOpen
-    ? ReactDom.createPortal(
+    ? createPortal(
         <ModalContainer
           className="sc-modal"
           role={role}

package/src/lib/components/navbar/Navbar.component.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { cloneElement, Fragment } from 'react';
 import styled, { css } from 'styled-components';
 import { Logo } from '../../icons/branding';
 import { spacing } from '../../spacing';
@@ -210,7 +210,7 @@ function NavBar({
               );
             }
             return link ? (
-              React.cloneElement(link, {
+              cloneElement(link, {
                 className: selected ? 'selected' : '',
                 'aria-selected': selected,
                 role: 'tab',

package/src/lib/components/scrollbarwrapper/ScrollbarWrapper.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled, { createGlobalStyle, css } from 'styled-components';
 
 type Props = {

package/src/lib/components/searchinput/SearchInput.component.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ChangeEvent, forwardRef, useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../icon/Icon.component';