@scality/core-ui 0.167.0 → 0.169.0

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

@@ -1,10 +1,17 @@
 import styled from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
 import { Text } from '../text/Text.component';
-import { BarchartBars } from './Barchart.component';
+import {
+  BarchartBars,
+  BarchartTooltipFn,
+  CategoryType,
+  TimeType,
+} from './Barchart.component';
 import { fontSize, fontWeight } from '../../style/theme';
 import { LegendShape } from '../chartlegend/ChartLegend';
 import { FormattedDateTime } from '../date/FormattedDateTime';
+import { TooltipContentProps } from 'recharts';
+import { getCurrentPoint } from './utils';
 
 export const ChartTooltipContainer = styled.div`
   background-color: ${({ theme }) => theme.backgroundLevel1};
@@ -30,24 +37,45 @@ export const ChartTooltipItem = styled.div<{ isHovered: boolean }>`
 
 export const ChartTooltip = <T extends BarchartBars>({
   type,
-  currentPoint,
+  tooltipProps,
   colorSet,
+  hoveredValue,
+  tooltip,
 }: {
-  type: 'time' | 'category';
-  currentPoint: {
-    category: string | number;
-    values: { label: T[number]['label']; value: number; isHovered: boolean }[];
-  };
-  colorSet: Record<string, string>;
+  type: TimeType | CategoryType;
+  tooltipProps: TooltipContentProps<number, string>;
+  colorSet?: Record<string, string>;
+  hoveredValue: string | undefined;
+  tooltip?: BarchartTooltipFn<T>;
 }) => {
+  const { active } = tooltipProps;
+
+  if (!active) {
+    return null;
+  }
+
+  const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
+  if (tooltip) {
+    return tooltip(currentPoint);
+  }
+
   return (
     <ChartTooltipContainer>
       <Text isEmphazed>
-        {type === 'time' ? (
-          <FormattedDateTime
-            format="long-date"
-            value={new Date(currentPoint.category)}
-          />
+        {type.type === 'time' ? (
+          <>
+            <FormattedDateTime
+              format="long-date"
+              value={new Date(currentPoint.category)}
+            />{' '}
+            {type.type === 'time' &&
+              type.timeRange.interval < 24 * 60 * 60 * 1000 && (
+                <FormattedDateTime
+                  format="time"
+                  value={new Date(currentPoint.category)}
+                />
+              )}
+          </>
         ) : (
           currentPoint.category
         )}
@@ -55,13 +83,15 @@ export const ChartTooltip = <T extends BarchartBars>({
       <Stack direction="vertical" gap="r8" style={{ width: '100%' }}>
         {currentPoint.values.map((value) => {
           return (
-            <Wrap key={value.label}>
+            <Wrap key={value.label} gap={spacing.r32}>
               <ChartTooltipItem isHovered={value.isHovered}>
-                <LegendShape
-                  color={colorSet[value.label as keyof typeof colorSet]}
-                  shape="rectangle"
-                  chartColors={colorSet}
-                />
+                {colorSet && (
+                  <LegendShape
+                    color={colorSet[value.label as keyof typeof colorSet]}
+                    shape="rectangle"
+                    chartColors={colorSet}
+                  />
+                )}
                 {value.label}
               </ChartTooltipItem>
               <ChartTooltipItem isHovered={value.isHovered}>

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

@@ -4,9 +4,9 @@ import {
   computeUnitLabelAndRoundReferenceValue,
   filterChartDataAndBarsByLegendSelection,
   formatPrometheusDataToRechartsDataAndBars,
+  getCurrentPoint,
   getMaxBarValue,
   getRoundReferenceValue,
-  renderTooltipContent,
   sortStackedBars,
   transformCategoryData,
   transformTimeData,
@@ -570,7 +570,7 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
 
     const result = formatPrometheusDataToRechartsDataAndBars(
       bars,
-      'category',
+      { type: 'category' },
       {
         Success: coreUIAvailableThemes.darkRebrand.statusHealthy,
         Failed: coreUIAvailableThemes.darkRebrand.statusCritical,
@@ -647,7 +647,7 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
 
     const result = formatPrometheusDataToRechartsDataAndBars(
       bars,
-      'category',
+      { type: 'category' },
       mockTheme,
       false,
       (pointA, pointB) => {
@@ -770,53 +770,38 @@ describe('sortStackedBars', () => {
   });
 });
 
-describe('renderTooltipContent', () => {
-  it('should return null when active is false', () => {
-    const props = {
-      active: false,
-      payload: [],
-      label: 'test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    const result = renderTooltipContent(props, undefined, undefined);
-    expect(result).toBeNull();
-  });
-
-  it('should return null when tooltip is undefined', () => {
-    const props = {
-      active: true,
-      payload: [{ name: 'test', value: 10 }],
-      label: 'test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    const result = renderTooltipContent(props, undefined, 'test');
-    expect(result).toBeNull();
-  });
-  it('should call tooltip with the correct props', () => {
-    const tooltip = jest.fn();
-    const props = {
-      active: true,
-      payload: [
-        { name: 'Success', value: 10 },
-        { name: 'Failed', value: 20 },
-      ],
-      label: 'Test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    renderTooltipContent(props, tooltip, 'Success');
-    expect(tooltip).toHaveBeenCalledWith({
+describe('getCurrentPoint', () => {
+  it('should return the current point', () => {
+    const result = getCurrentPoint(
+      {
+        payload: [{ name: 'Success', value: 10 }],
+        label: 'Test',
+        coordinate: { x: 10, y: 10 },
+        active: true,
+        accessibilityLayer: false,
+      },
+      'Success',
+    );
+    expect(result).toEqual({
       category: 'Test',
-      values: [
-        { label: 'Success', value: 10, isHovered: true },
-        { label: 'Failed', value: 20, isHovered: false },
-      ],
+      values: [{ label: 'Success', value: 10, isHovered: true }],
+    });
+    const result2 = getCurrentPoint(
+      {
+        payload: [{ name: 'Success', value: 10 }],
+        label: 'Test',
+        coordinate: { x: 10, y: 10 },
+        active: true,
+        accessibilityLayer: false,
+      },
+      'Failed',
+    );
+    expect(result2).toEqual({
+      category: 'Test',
+      values: [{ label: 'Success', value: 10, isHovered: false }],
     });
   });
 });
-
 describe('filterChartDataAndBarsByLegendSelection', () => {
   const mockChartData = [
     { category: 'Jan', Success: 10, Failed: 5, Warning: 3, Pending: 2 },

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

@@ -271,11 +271,11 @@ export const formatPrometheusDataToRechartsDataAndBars = <
   );
 
   let data =
-    type !== 'category' && type.type === 'time'
+    type.type !== 'category' && type.type === 'time'
       ? transformTimeData(bars, type, barDataKeys)
       : transformCategoryData(bars, barDataKeys);
 
-  if (type === 'category' && defaultSort) {
+  if (type.type === 'category' && defaultSort) {
     data = applySortingToData(data, barDataKeys, defaultSort);
   }
 
@@ -428,35 +428,6 @@ export const sortStackedBars = (
   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);
-};
-
 /**
  * Filters both chart data and recharts bars to only include selected resources from legend
  * @param data - Array of chart data objects with category and resource values
@@ -538,3 +509,25 @@ export const useChartData = <T extends BarchartBars>(
     rechartsData,
   };
 };
+
+export const getCurrentPoint = <T extends BarchartBars>(
+  props: TooltipContentProps<number, string>,
+  hoveredValue: string | undefined,
+) => {
+  const { payload, label } = props;
+
+  const tooltipValues: {
+    label: T[number]['label'];
+    value: number;
+    isHovered: boolean;
+  }[] = payload.map((item) => ({
+    label: item.name,
+    value: item.value,
+    isHovered: item.name === hoveredValue,
+  }));
+
+  return {
+    category: label as string | number,
+    values: tooltipValues,
+  };
+};

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

@@ -51,8 +51,10 @@ export const ButtonStyled = styled.button<Props>`
     switch (props.variant) {
       case 'primary':
         return css`
-          background-color: ${brand.buttonPrimary};
-          border: ${spacing.r1} solid ${brand.buttonPrimary};
+          background: ${brand.buttonPrimary};
+          background-clip: padding-box, border-box;
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonPrimary};
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
@@ -73,8 +75,10 @@ export const ButtonStyled = styled.button<Props>`
 
       case 'secondary':
         return css`
-          background-color: ${brand.buttonSecondary};
-          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          background: ${brand.buttonSecondary};
+          background-clip: padding-box, border-box;
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonSecondary};
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
@@ -88,7 +92,8 @@ export const ButtonStyled = styled.button<Props>`
           &:active:enabled {
             cursor: pointer;
             color: ${brand.textPrimary};
-            border: ${spacing.r1} solid ${brand.buttonSecondary};
+            border: ${spacing.r1} solid transparent;
+            border-color: ${brand.buttonSecondary};
           }
         `;
 
@@ -112,13 +117,18 @@ export const ButtonStyled = styled.button<Props>`
 
       case 'outline':
         return css`
-          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonSecondary};
           background-color: transparent;
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
             border-color: ${brand.infoPrimary};
             color: ${brand.textPrimary};
+
+            &::before {
+              background-image: ${brand.buttonPrimary};
+            }
           }
           &:focus-visible:enabled {
             ${FocusVisibleStyle}
@@ -129,6 +139,17 @@ export const ButtonStyled = styled.button<Props>`
             border: ${spacing.r1} solid ${brand.infoSecondary};
             color: ${brand.textPrimary};
           }
+          &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            padding: ${spacing.r1};
+            background-image: ${brand.buttonSecondary};
+            border-radius: inherit;
+            mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
+            mask-composite: exclude;
+            pointer-events: none;
+          }
         `;
 
       default:

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

@@ -8,6 +8,16 @@ export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
   day: 'numeric',
 });
 
+/**
+ * @description Long date formatter, without weekday.
+ * @example 01 September 2025
+ */
+export const LONG_DATE_FORMATER_WITHOUT_WEEKDAY = Intl.DateTimeFormat('en-GB', {
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit',
+});
+
 export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
   year: 'numeric',
   month: '2-digit',
@@ -46,6 +56,10 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
   },
 );
 
+/**
+ * @description Day month abbreviated hour minute formatter, without second.
+ * @example 15 Sept 14:30
+ */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   day: 'numeric',
   month: 'short',
@@ -54,6 +68,25 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
   hour12: false,
 });
 
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
+
+/**
+ * @description Month day formatter, without year. Used for short term date ranges.
+ * @example 01-15
+ */
+export const MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+  month: '2-digit',
+  day: '2-digit',
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
@@ -65,7 +98,10 @@ type FormattedDateTimeProps = {
     | 'day-month-abbreviated-hour-minute'
     | 'day-month-abbreviated-hour-minute-second'
     | 'long-date'
-    | 'chart-date';
+    | 'long-date-without-weekday'
+    | 'chart-date'
+    | 'year-month-day'
+    | 'month-day';
 
   value: Date;
 };
@@ -196,8 +232,14 @@ export const FormattedDateTime = ({
       );
     case 'long-date':
       return <>{LONG_DATE_FORMATER.format(value)}</>;
+    case 'long-date-without-weekday':
+      return <>{LONG_DATE_FORMATER_WITHOUT_WEEKDAY.format(value)}</>;
     case 'chart-date':
       return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
+    case 'year-month-day':
+      return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
+    case 'month-day':
+      return <>{MONTH_DAY_FORMATTER.format(value)}</>;
     default:
       return <></>;
   }

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

@@ -72,6 +72,12 @@ export function getUnitLabel(
   valueBase: number;
   unitLabel: string;
 } {
+  if (!unitRange || unitRange.length === 0) {
+    return {
+      valueBase: 1,
+      unitLabel: '',
+    };
+  }
   // first sort the unitRange
   unitRange.sort(
     (