@scality/core-ui 0.167.0 → 0.169.0

package/dist/components/linetimeseriechart/linetimeseriechart.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, } from 'recharts';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
 import styled from 'styled-components';
@@ -12,7 +12,9 @@ import { spacing } from '../../spacing';
 import { getUnitLabel } from '../linetemporalchart/ChartUtil';
 import { Icon } from '../icon/Icon.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
-import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, FormattedDateTime, } from '../date/FormattedDateTime';
+import { FormattedDateTime } from '../date/FormattedDateTime';
+import { Box } from '../box/Box';
+import { formatXAxisLabel } from './utils';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
   flex-direction: column;
@@ -44,6 +46,8 @@ const TooltipValue = styled.div `
   color: ${(props) => props.theme.textSecondary};
   display: flex;
   align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
 `;
 const TooltipLegend = styled.div `
   width: 12px;
@@ -53,28 +57,30 @@ const TooltipLegend = styled.div `
   flex-shrink: 0;
   margin-top: 8px;
 `;
-const TooltipContent = styled.div `
+const TooltipLeftGroup = styled.div `
   display: flex;
+  align-items: flex-start;
   min-width: 0;
   flex: 1;
 `;
 const TooltipName = styled.div `
-  margin-right: 4px;
   word-wrap: break-word;
   word-break: break-word;
-  justify-content: flex-start;
+  flex: 1;
 `;
 const TooltipInstanceValue = styled.div `
-  justify-content: flex-end;
+  margin-left: 16px;
+  flex-shrink: 0;
+  text-align: right;
 `;
-const CustomTooltip = ({ active, payload, label, unitLabel, }) => {
+const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
     if (!active || !payload || !payload.length || !label)
         return null;
     // We can't use the default itemSorter method because it's a custom tooltip.
     // Sort the payload here instead
     const sortedPayload = [...payload].sort((a, b) => {
-        const aValue = Number(a.value);
-        const bValue = Number(b.value);
+        const aValue = a.value;
+        const bValue = b.value;
         if (aValue >= 0 && bValue >= 0) {
             return bValue - aValue; // Higher positive values first
         }
@@ -83,14 +89,16 @@ const CustomTooltip = ({ active, payload, label, unitLabel, }) => {
         }
         return bValue - aValue; // Positives before negatives
     });
-    return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsx(TooltipLegend, { color: entry.color }), _jsxs(TooltipContent, { children: [_jsx(TooltipName, { children: entry.name }), _jsx(TooltipInstanceValue, { children: isNaN(Number(entry.value))
-                                    ? '-'
-                                    : `${Number(entry.value).toFixed(2)}${unitLabel}` })] })] }, index)))] }));
+    return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: timeFormat === 'date-time'
+                        ? 'day-month-abbreviated-hour-minute-second'
+                        : 'long-date-without-weekday', value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsxs(TooltipLeftGroup, { children: [_jsx(TooltipLegend, { color: entry.color }), _jsx(TooltipName, { children: entry.name })] }), _jsx(TooltipInstanceValue, { children: !Number.isFinite(entry.value)
+                            ? '-'
+                            : `${entry.value.toFixed(2)} ${unitLabel}` })] }, index)))] }));
 };
 const isSymmetricalSeries = (series) => {
     return 'above' in series && 'below' in series;
 };
-export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
     const theme = useTheme();
     const { getColor } = useChartLegend();
     const chartRef = useRef(null);
@@ -135,25 +143,24 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
         // Convert object to array for Recharts
         return Object.values(dataPointsByTime).sort((a, b) => a.timestamp - b.timestamp);
     }, [series, startingTimeStamp, duration, interval, yAxisType]);
-    // Calculate 5 perfectly evenly spaced ticks
+    // Calculate evenly spaced ticks that avoid the very beginning and end
     const xAxisTicks = useMemo(() => {
         if (!chartData || chartData.length === 0)
             return [];
         const timestamps = chartData.map((d) => d.timestamp);
         const minTimestamp = Math.min(...timestamps);
         const maxTimestamp = Math.max(...timestamps);
-        // Calculate 5 perfectly evenly spaced ticks
         const timeRange = maxTimestamp - minTimestamp;
-        const interval = timeRange / 4; // 4 intervals create 5 points
-        const exactEvenTicks = [
-            minTimestamp,
-            minTimestamp + interval,
-            minTimestamp + interval * 2,
-            minTimestamp + interval * 3,
-            maxTimestamp,
-        ];
-        // Return perfectly even ticks (guaranteed to be evenly divided)
-        return exactEvenTicks;
+        // Add padding to avoid labels at the very edges (10% padding on each side)
+        const padding = timeRange * 0.1;
+        const paddedStart = minTimestamp + padding;
+        const paddedEnd = maxTimestamp - padding;
+        const paddedRange = paddedEnd - paddedStart;
+        // Create 5 evenly spaced ticks within the padded range
+        const numTicks = 5;
+        const tickInterval = paddedRange / (numTicks - 1);
+        const evenlySpacedTicks = Array.from({ length: numTicks }, (_, index) => paddedStart + index * tickInterval);
+        return evenlySpacedTicks;
     }, [chartData]);
     // 3. Transform the data base on the valuebase
     const { topValue, unitLabel, rechartsData } = useMemo(() => {
@@ -217,11 +224,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
         };
     }, [series, getColor]);
     // Format time for display the tick in the x axis
-    const formatTime = useMemo(() => (timestamp) => {
-        const date = new Date(timestamp);
-        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
-    }, []);
-    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatTime, tickCount: 5, tick: {
+    const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, timeFormat, chartData), [timeFormat, chartData]);
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
                                 fill: theme.textSecondary,
                                 fontSize: fontSize.smaller,
                             }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
@@ -240,8 +244,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
                                     : [0, topValue], axisLine: { stroke: theme.border }, tick: {
                                 fill: theme.textSecondary,
                                 fontSize: fontSize.smaller,
-                            }, tickFormatter: (value) => Math.round(value).toString() }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { unitLabel: unitLabel }) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
+                            }, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _jsx(Tooltip, { content: _jsx(CustomTooltip, { unitLabel: unitLabel, timeFormat: timeFormat }) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
                             const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
-                            return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false }, `${title}-${resource}-${serieIndex}`));
+                            return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false }, `${title}-${resource}-${serieIndex}`));
                         }))] }) })] }));
 }

package/dist/components/linetimeseriechart/utils.d.ts

@@ -0,0 +1,16 @@
+export declare const ONE_YEAR_MILLISECONDS: number;
+export type ChartDataPoint = {
+    timestamp: number;
+} & Record<string, number | null>;
+/**
+ * Formats timestamp for X-axis labels based on time format and data range:
+ * For 'date-time' format, return day-month-abbreviated-hour-minute format
+ * For 'date' format, return YYYY-MM-DD format if time range is greater than 1 year, otherwise return MM-DD format
+ *
+ * @param timestamp - The timestamp to format in milliseconds
+ * @param timeFormat - The format type ('date-time' or 'date')
+ * @param chartData - The chart data to determine time range for optimal formatting
+ * @returns Formatted string for display on X-axis
+ */
+export declare const formatXAxisLabel: (timestamp: number, timeFormat?: "date-time" | "date", chartData?: ChartDataPoint[]) => string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/linetimeseriechart/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,cAChB,MAAM,eACL,WAAW,GAAG,MAAM,cACrB,cAAc,EAAE,KAC1B,MAgBF,CAAC"}

package/dist/components/linetimeseriechart/utils.js

@@ -0,0 +1,28 @@
+import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, YEAR_MONTH_DAY_FORMATTER, MONTH_DAY_FORMATTER, } from '../date/FormattedDateTime';
+export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
+/**
+ * Formats timestamp for X-axis labels based on time format and data range:
+ * For 'date-time' format, return day-month-abbreviated-hour-minute format
+ * For 'date' format, return YYYY-MM-DD format if time range is greater than 1 year, otherwise return MM-DD format
+ *
+ * @param timestamp - The timestamp to format in milliseconds
+ * @param timeFormat - The format type ('date-time' or 'date')
+ * @param chartData - The chart data to determine time range for optimal formatting
+ * @returns Formatted string for display on X-axis
+ */
+export const formatXAxisLabel = (timestamp, timeFormat = 'date-time', chartData = []) => {
+    const date = new Date(timestamp);
+    if (!chartData.length) {
+        return YEAR_MONTH_DAY_FORMATTER.format(date);
+    }
+    if (timeFormat === 'date-time') {
+        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
+    }
+    const timestamps = chartData.map((d) => d.timestamp);
+    const minTimestamp = Math.min(...timestamps);
+    const maxTimestamp = Math.max(...timestamps);
+    const timeRangeMilliseconds = maxTimestamp - minTimestamp;
+    return timeRangeMilliseconds >= ONE_YEAR_MILLISECONDS
+        ? YEAR_MONTH_DAY_FORMATTER.format(date)
+        : MONTH_DAY_FORMATTER.format(date);
+};

package/dist/style/theme.d.ts

@@ -52,7 +52,7 @@ export type CoreUITheme = {
     textReverse: string;
     textLink: string;
 };
-export declare const coreUIAvailableThemesNames: readonly ["darkRebrand", "artescaLight", "ring9dark"];
+export declare const coreUIAvailableThemesNames: readonly ["darkRebrand", "artescaLight", "ring9dark", "G-Dark"];
 export type CoreUIThemeName = (typeof coreUIAvailableThemesNames)[number];
 export declare const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme>;
 /**
@@ -62,7 +62,7 @@ export declare const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme>
  *
  * import { coreUIAvailableThemes } from '@scality/core-ui/dist/style/theme';
  */
-export declare const defaultTheme: Record<"darkRebrand" | "artescaLight" | "ring9dark", CoreUITheme>;
+export declare const defaultTheme: Record<"darkRebrand" | "artescaLight" | "ring9dark" | "G-Dark", CoreUITheme>;
 /**
  * @deprecated
  * Instead should use useTheme()

package/dist/style/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/style/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/style/theme.ts"],"names":[],"mappings":"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"}

package/dist/style/theme.js

@@ -33,6 +33,7 @@ export const coreUIAvailableThemesNames = [
     'darkRebrand',
     'artescaLight',
     'ring9dark',
+    'G-Dark'
 ];
 export const coreUIAvailableThemes = {
     darkRebrand: {
@@ -110,6 +111,31 @@ export const coreUIAvailableThemes = {
         textReverse: '#000000',
         textLink: '#71AEFF',
     },
+    'G-Dark': {
+        statusHealthy: '#0AADA6',
+        statusHealthyRGB: '10,173,166',
+        statusWarning: '#F8F32B',
+        statusWarningRGB: '248,243,43',
+        statusCritical: '#E84855',
+        statusCriticalRGB: '232,72,85',
+        selectedActive: '#037AFF',
+        highlight: '#1A3C75',
+        border: '#4A4A4A',
+        buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 100%)',
+        buttonSecondary: 'linear-gradient(130deg, #595A78 0%, #44455F 100%)',
+        buttonDelete: '#3D0808',
+        infoPrimary: '#8E8EAC',
+        infoSecondary: '#333366',
+        backgroundLevel1: '#121219',
+        backgroundLevel2: '#323245',
+        backgroundLevel3: '#232331',
+        backgroundLevel4: '#1B1B27',
+        textPrimary: '#EAEAEA',
+        textSecondary: '#B5B5B5',
+        textTertiary: '#DFDFDF',
+        textReverse: '#000000',
+        textLink: '#71AEFF',
+    },
 };
 /**
  * @deprecated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.167.0",
+  "version": "0.169.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -22,7 +22,7 @@
     "test": "jest",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
-    "storybook:deploy": "storybook-to-ghpages"
+    "storybook:deploy": "npm run build-storybook && gh-pages -d storybook-static -u \"github-actions-bot <support+actions@github.com>\""
   },
   "keywords": [],
   "browserslist": [
@@ -67,6 +67,7 @@
     "eslint": "^8.15.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-storybook": "^0.10.1",
+    "gh-pages": "^6.3.0",
     "husky": "^3.0.5",
     "jest": "^30.0.5",
     "jest-canvas-mock": "^2.3.1",
@@ -84,7 +85,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
-    "@floating-ui/react": "^0.26.28",
+    "@floating-ui/react": "^0.27.15",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
@@ -96,7 +97,7 @@
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
     "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.49.2",
+    "react-hook-form": "^7.62.0",
     "react-query": "^3.34.0",
     "react-router": "7.8.1",
     "react-router-dom": "7.8.1",

package/src/lib/components/barchartv2/Barchart.component.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { getWrapper } from '../../testUtils';
-import { Barchart, CustomTick, formatDate } from './Barchart.component';
+import { Barchart, CustomTick } from './Barchart.component';
 import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
 import React from 'react';
 
@@ -60,7 +60,7 @@ describe('Barchart', () => {
       render(
         <Wrapper>
           <ChartLegendWrapper colorSet={testColorSet}>
-            <Barchart type="category" bars={testBars} />
+            <Barchart type={{ type: 'category' }} bars={testBars} />
           </ChartLegendWrapper>
         </Wrapper>,
       );
@@ -98,7 +98,7 @@ describe('Barchart', () => {
       render(
         <Wrapper>
           <ChartLegendWrapper colorSet={testColorSet}>
-            <Barchart type="category" bars={[]} isError />
+            <Barchart type={{ type: 'category' }} bars={[]} isError />
           </ChartLegendWrapper>
         </Wrapper>,
       );
@@ -111,7 +111,7 @@ describe('Barchart', () => {
       render(
         <Wrapper>
           <ChartLegendWrapper colorSet={testColorSet}>
-            <Barchart type="category" bars={[]} isLoading />
+            <Barchart type={{ type: 'category' }} bars={[]} isLoading />
           </ChartLegendWrapper>
         </Wrapper>,
       );
@@ -122,7 +122,7 @@ describe('Barchart', () => {
       render(
         <Wrapper>
           <ChartLegendWrapper colorSet={testColorSet}>
-            <Barchart type="category" bars={undefined} />
+            <Barchart type={{ type: 'category' }} bars={undefined} />
           </ChartLegendWrapper>
         </Wrapper>,
       );
@@ -316,7 +316,11 @@ describe('Barchart', () => {
     render(
       <Wrapper>
         <ChartLegendWrapper colorSet={{ ...testColorSet, Failed: 'red' }}>
-          <Barchart type="category" bars={testStackedBars} stacked={true} />
+          <Barchart
+            type={{ type: 'category' }}
+            bars={testStackedBars}
+            stacked
+          />
         </ChartLegendWrapper>
       </Wrapper>,
     );
@@ -344,7 +348,7 @@ describe('Barchart', () => {
       <Wrapper>
         <ChartLegendWrapper colorSet={testColorSet}>
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={testBars}
             defaultSort={(pointA, pointB) => {
               const valueA = pointA.Success;
@@ -369,7 +373,7 @@ describe('Barchart', () => {
       <Wrapper>
         <ChartLegendWrapper colorSet={testColorSet}>
           <Barchart
-            type="category"
+            type={{ type: 'category' }}
             bars={[]}
             title="Test Title"
             secondaryTitle="Test Secondary Title"

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -14,13 +14,14 @@ import styled, { useTheme } from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
 import { chartColors, ChartColors, fontSize } from '../../style/theme';
 import { Box } from '../box/Box';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import { renderTooltipContent, UnitRange, useChartData } from './utils';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { FormattedDateTime } from '../date/FormattedDateTime';
+import { ChartTooltip } from './ChartTooltip';
+import { UnitRange, useChartData } from './utils';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 5,
@@ -45,6 +46,11 @@ export type TimeType = {
     interval: number;
   };
 };
+
+export type CategoryType = {
+  type: 'category';
+  gap?: number;
+};
 export type Point = {
   key: string | number;
   values: { label: string; value: number }[];
@@ -70,7 +76,7 @@ export type BarchartSortFn<T extends BarchartBars> = (
 ) => 1 | -1 | 0;
 
 export type BarchartProps<T extends BarchartBars> = {
-  type: 'category' | TimeType;
+  type: CategoryType | TimeType;
   bars?: T;
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
@@ -260,7 +266,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   const {
     height = CHART_CONSTANTS.DEFAULT_HEIGHT,
     bars,
-    type = 'category',
+    type = { type: 'category' },
     unitRange,
     stacked,
     stackedBarSort = 'default',
@@ -314,9 +320,16 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
           <BarChart
             data={rechartsData}
             accessibilityLayer
-            barSize={CHART_CONSTANTS.BAR_SIZE}
+            barSize={
+              type.type === 'category'
+                ? type.gap === 0
+                  ? undefined
+                  : CHART_CONSTANTS.BAR_SIZE
+                : CHART_CONSTANTS.BAR_SIZE
+            }
             height={height}
             margin={CHART_CONSTANTS.CHART_MARGIN}
+            barCategoryGap={type.type === 'category' ? type.gap : undefined}
           >
             <CartesianGrid
               vertical={false}
@@ -332,6 +345,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
                   fill={chartColors[fill] || fill}
                   minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
                   stackId={stackId}
+                  isAnimationActive={false}
                   onMouseOver={() => setHoveredValue(dataKey)}
                   onMouseLeave={() => setHoveredValue(undefined)}
                 />
@@ -378,9 +392,15 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             />
 
             <Tooltip
-              content={(props: TooltipContentProps<number, string>) =>
-                renderTooltipContent(props, tooltip, hoveredValue)
-              }
+              content={(props: TooltipContentProps<number, string>) => (
+                <ChartTooltip
+                  type={type}
+                  colorSet={colorSet}
+                  tooltipProps={props}
+                  hoveredValue={hoveredValue}
+                  tooltip={tooltip}
+                />
+              )}
               cursor={false}
             />
           </BarChart>

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChartTooltip } from './ChartTooltip';
+
+const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
+const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
+const SUCCESS_VALUE = 39;
+const FAILED_VALUE = 13;
+const testTooltipProps = {
+  payload: [
+    { name: 'Success', value: SUCCESS_VALUE },
+    { name: 'Failed', value: FAILED_VALUE },
+  ],
+  label: 'Test',
+  coordinate: { x: 10, y: 10 },
+  active: true,
+  accessibilityLayer: false,
+};
+const testTooltip = () => <div>Test Tooltip</div>;
+const date = new Date('2024-07-01T00:00:00').getTime();
+
+describe('ChartTooltip', () => {
+  const selectors = {
+    tooltip: () => screen.queryByText(/Test Tooltip/),
+    category: () => screen.queryByText(/Test/),
+    success: () => screen.queryByText(/Success/),
+    successValue: () => screen.queryByText(SUCCESS_VALUE),
+    failed: () => screen.queryByText(/Failed/),
+    failedValue: () => screen.queryByText(FAILED_VALUE),
+    date: () => screen.queryByText(/Monday, 1 July 2024/),
+    time: () => screen.queryByText(/00:00/),
+  };
+  it('should render the ChartTooltip component', () => {
+    render(
+      <ChartTooltip
+        type={{ type: 'category' }}
+        tooltipProps={testTooltipProps}
+        hoveredValue="Success"
+        tooltip={undefined}
+      />,
+    );
+    expect(selectors.category()).toBeInTheDocument();
+    expect(selectors.success()).toBeInTheDocument();
+    expect(selectors.successValue()).toBeInTheDocument();
+    expect(selectors.failed()).toBeInTheDocument();
+    expect(selectors.failedValue()).toBeInTheDocument();
+  });
+  it('should render tooltip when tooltip is provided', () => {
+    render(
+      <ChartTooltip
+        type={{ type: 'category' }}
+        tooltipProps={testTooltipProps}
+        hoveredValue="Success"
+        tooltip={testTooltip}
+      />,
+    );
+    expect(selectors.tooltip()).toBeInTheDocument();
+  });
+  it('should not render tooltip when tooltipProps is not active', () => {
+    render(
+      <ChartTooltip
+        type={{ type: 'category' }}
+        tooltipProps={{ ...testTooltipProps, active: false }}
+        hoveredValue="Success"
+        tooltip={testTooltip}
+      />,
+    );
+    expect(selectors.tooltip()).not.toBeInTheDocument();
+  });
+  it('should render time tooltip when type is time', () => {
+    // timestamp for Mon Jul 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
+    const label = date;
+    render(
+      <ChartTooltip
+        type={{
+          type: 'time',
+          timeRange: {
+            startDate: new Date(),
+            endDate: new Date(),
+            interval: ONE_DAY_IN_MILLISECONDS,
+          },
+        }}
+        tooltipProps={{ ...testTooltipProps, label }}
+        hoveredValue="Success"
+      />,
+    );
+
+    expect(selectors.success()).toBeInTheDocument();
+    expect(selectors.successValue()).toBeInTheDocument();
+    expect(selectors.failed()).toBeInTheDocument();
+    expect(selectors.failedValue()).toBeInTheDocument();
+
+    expect(selectors.date()).toBeInTheDocument();
+    expect(selectors.time()).not.toBeInTheDocument();
+  });
+  it('should render time tooltip when type is time and interval is one hour', () => {
+    const label = date;
+    render(
+      <ChartTooltip
+        type={{
+          type: 'time',
+          timeRange: {
+            startDate: new Date(),
+            endDate: new Date(),
+            interval: ONE_HOUR_IN_MILLISECONDS,
+          },
+        }}
+        tooltipProps={{ ...testTooltipProps, label }}
+        hoveredValue="Success"
+      />,
+    );
+    expect(selectors.success()).toBeInTheDocument();
+    expect(selectors.successValue()).toBeInTheDocument();
+    expect(selectors.failed()).toBeInTheDocument();
+    expect(selectors.failedValue()).toBeInTheDocument();
+    expect(selectors.date()).toBeInTheDocument();
+    expect(selectors.time()).toBeInTheDocument();
+  });
+});