@scality/core-ui 0.169.0 → 0.171.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/date/FormattedDateTime.spec.tsx

@@ -224,7 +224,7 @@ describe('FormatttedDateTime', () => {
       />,
     );
     //V
-    expect(screen.getByText('6 Oct 18:33')).toBeInTheDocument();
+    expect(screen.getByText('06 Oct 18:33')).toBeInTheDocument();
   });
 
   it('should display the date in the expected format of date in the chart', () => {
@@ -236,6 +236,31 @@ describe('FormatttedDateTime', () => {
       />,
     );
     //V
-    expect(screen.getByText('6 Oct 18:33:00')).toBeInTheDocument();
+    expect(screen.getByText('06 Oct 18:33:00')).toBeInTheDocument();
+  });
+  it('should display 3 letter month for September date', () => {
+    //S
+    render(
+      <>
+        <FormattedDateTime
+          format="day-month-abbreviated-hour-minute"
+          value={new Date('2022-09-06T18:33:00Z')}
+        />
+        <FormattedDateTime
+          format="day-month-abbreviated-hour-minute-second"
+          value={new Date('2022-09-06T18:33:00Z')}
+        />
+
+        <FormattedDateTime
+          format="chart-date"
+          value={new Date('2022-09-06T18:33:00Z')}
+        />
+      </>,
+    );
+    //V
+    expect(screen.getByText(/06 Sep 18:33/)).toBeInTheDocument();
+    expect(screen.getByText(/06 Sep 18:33:00/)).toBeInTheDocument();
+    expect(screen.getByText(/Tue06Sep/)).toBeInTheDocument();
+    expect(screen.queryByText(/Sept/)).not.toBeInTheDocument();
   });
 });

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

@@ -1,11 +1,15 @@
 import { getDateDaysDiff } from './dateDiffer';
 import { Tooltip } from '../tooltip/Tooltip.component';
 
+/**
+ * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
+ * @example Wednesday 6 October 2025
+ */
 export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
   weekday: 'long',
   year: 'numeric',
   month: 'long',
-  day: 'numeric',
+  day: '2-digit',
 });
 
 /**
@@ -18,6 +22,10 @@ export const LONG_DATE_FORMATER_WITHOUT_WEEKDAY = Intl.DateTimeFormat('en-GB', {
   day: '2-digit',
 });
 
+/**
+ * @description Date formatter, with year, month and day. Used for describing long term date.
+ * @example 2025-01-01
+ */
 export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
   year: 'numeric',
   month: '2-digit',
@@ -25,12 +33,20 @@ export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
   hour12: false,
 });
 
+/**
+ * @description Day month formatter, with weekday, day and month. Used for describing long term date.
+ * @example Wed 6 Oct
+ */
 export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
   weekday: 'short',
   day: '2-digit',
   month: 'short',
 });
 
+/**
+ * @description Time formatter, with hour, minute and second. Used for describing long term date.
+ * @example 18:33:00
+ */
 export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
   hour12: false,
   hour: '2-digit',
@@ -38,16 +54,24 @@ export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
   second: '2-digit',
 });
 
+/**
+ * @description Time formatter, with hour and minute. Used for describing long term date.
+ * @example 18:33
+ */
 export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
   hour12: false,
   hour: '2-digit',
   minute: '2-digit',
 });
 
+/**
+ * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
+ * @example 6 Oct 18:33:00
+ */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
   'en-GB',
   {
-    day: 'numeric',
+    day: '2-digit',
     month: 'short',
     hour: '2-digit',
     minute: '2-digit',
@@ -57,11 +81,11 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
 );
 
 /**
- * @description Day month abbreviated hour minute formatter, without second.
- * @example 15 Sept 14:30
+ * @description Day month abbreviated hour minute formatter. Used for describing long term date.
+ * @example 6 Oct 18:33
  */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
-  day: 'numeric',
+  day: '2-digit',
   month: 'short',
   hour: '2-digit',
   minute: '2-digit',
@@ -117,6 +141,21 @@ const isItFutureOrIsItPast = (
   }
 };
 
+/**
+ * @description Formats the date and time according to the format specified.
+ * @example
+ * date: '2025-01-01'
+ * 'date-time': '2025-01-01 00:00'
+ * 'date-time-second': '2025-01-01 00:00:00'
+ * time: '00:00'
+ * 'time-second': '00:00:00'
+ * relative: '1 month ago'
+ * 'day-month-abbreviated-hour-minute': '6 Oct 18:33'
+ * 'day-month-abbreviated-hour-minute-second': '6 Oct 18:33:00'
+ * 'long-date': 'Wednesday 6 October 2025'
+ * 'chart-date': '6 Oct'
+ * 'year-month-day': '2025-10-06'
+ */
 export const FormattedDateTime = ({
   format,
   value,
@@ -219,15 +258,19 @@ export const FormattedDateTime = ({
       );
     case 'day-month-abbreviated-hour-minute':
       return (
-        <>{DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value).replace(',', '')}</>
+        <>
+          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value)
+            .replace(',', '')
+            .replace(/Sept/g, 'Sep')}
+        </>
       );
     case 'day-month-abbreviated-hour-minute-second':
       return (
         <>
-          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(
-            ',',
-            '',
-          )}
+          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value)
+            .replace(',', '')
+            // replace Sept with Sep to keep 3 letter month
+            .replace(/Sept/g, 'Sep')}
         </>
       );
     case 'long-date':
@@ -235,7 +278,14 @@ export const FormattedDateTime = ({
     case 'long-date-without-weekday':
       return <>{LONG_DATE_FORMATER_WITHOUT_WEEKDAY.format(value)}</>;
     case 'chart-date':
-      return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
+      return (
+        <>
+          {DAY_MONTH_FORMATER.format(value)
+            .replace(/[ ,]/g, '')
+            // replace Sept with Sep to keep 3 letter month
+            .replace(/Sept/g, 'Sep')}
+        </>
+      );
     case 'year-month-day':
       return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
     case 'month-day':

package/src/lib/components/icon/Icon.component.tsx

@@ -140,6 +140,8 @@ export const iconTable = {
   Stop: 'fas faStop',
   Play: 'fas faPlay',
   Mail: 'fas faEnvelope',
+  ThumbsUp: 'fas faThumbsUp',
+  ThumbsDown: 'fas faThumbsDown',
 };
 
 type IconProps = {

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

@@ -2,12 +2,12 @@ import { ReactElement } from 'react';
 import styled from 'styled-components';
 import { navbarHeight } from '../../../style/theme';
 
-const LayoutContainer = styled.div`
+const LayoutContainer = styled.div<{ variant?: 'transparent' }>`
   display: flex;
   flex-direction: column;
   height: 100vh;
   box-sizing: border-box;
-  background: ${(props) => props.theme['backgroundLevel1']};
+  background: ${props => props.variant === 'transparent' ? 'transparent' : props.theme.backgroundLevel1};
 `;
 
 const Navigation = styled.div`
@@ -17,12 +17,14 @@ const Navigation = styled.div`
 export function Layout({
   children: app,
   headerNavigation,
+  variant,
 }: {
   children: ReactElement | ReactElement[];
   headerNavigation: ReactElement;
+  variant?: 'transparent';
 }) {
   return (
-    <LayoutContainer className="layout-container">
+    <LayoutContainer className="layout-container" variant={variant}>
       <Navigation>{headerNavigation}</Navigation>
       {app}
     </LayoutContainer>

package/src/lib/components/linetemporalchart/ChartUtil.ts

@@ -148,8 +148,24 @@ export function addMissingDataPoint(
 
   const newValues: [number, number | string | null][] = [];
 
+  // add missing data points for the starting time
+  for (
+    let i = startingTimeStamp;
+    i < orginalValues[0][0];
+    i += sampleInterval
+  ) {
+    newValues.push([i, NAN_STRING]);
+  }
+
   // Process all but the last element
   for (let i = 0; i < orginalValues.length - 1; i++) {
+    if (
+      orginalValues[i][0] < startingTimeStamp ||
+      orginalValues[i][0] > startingTimeStamp + sampleDuration
+    ) {
+      continue;
+    }
+
     // Always add the current data point
     newValues.push(orginalValues[i]);
 
@@ -170,8 +186,18 @@ export function addMissingDataPoint(
   // Add the last element
   newValues.push(orginalValues[orginalValues.length - 1]);
 
+  // add missing data points for the ending time
+  for (
+    let i = orginalValues[orginalValues.length - 1][0] + sampleInterval;
+    i < startingTimeStamp + sampleDuration;
+    i += sampleInterval
+  ) {
+    newValues.push([i, NAN_STRING]);
+  }
+
   return newValues;
 }
+
 // get the value for the based value
 // TODO: We need to handle the negative value in the future
 export const getRelativeValue = (value: number, base: number) => {