@scality/core-ui 0.166.0 → 0.168.0

package/dist/components/linetemporalchart/ChartUtil.js

@@ -43,6 +43,12 @@ export function convertDataBaseValue(data, base) {
  * @returns {any}
  */
 export function getUnitLabel(unitRange, maxValue) {
+    if (!unitRange || unitRange.length === 0) {
+        return {
+            valueBase: 1,
+            unitLabel: '',
+        };
+    }
     // first sort the unitRange
     unitRange.sort((unitA, unitB) => {
         return unitA.threshold - unitB.threshold;
@@ -65,42 +71,46 @@ export function getUnitLabel(unitRange, maxValue) {
 }
 /**
  * This function manually adds the missing data points with `null` value caused by downtime of the VMs
+ * Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
  *
  * @param {array} orginalValues - The array of the data points are already sorted according to the time series
  * @param {number} startingTimeStamp - The starting timestamp in seconds
  * @param {number} sampleDuration - The time span value in seconds
- * @param {number} sampleFrequency - The time difference between two data points in seconds
+ * @param {number} sampleInterval - The time difference between two data points in seconds
  *
  */
-export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDuration, sampleFrequency) {
+export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDuration, sampleInterval) {
     if (!orginalValues ||
         startingTimeStamp === undefined ||
         !sampleDuration ||
-        !sampleFrequency ||
+        !sampleInterval ||
         startingTimeStamp < 0 ||
         sampleDuration <= 0 ||
-        sampleFrequency <= 0) {
+        sampleInterval <= 0) {
         return [];
     }
-    const newValues = [];
-    const numberOfDataPoints = sampleDuration / sampleFrequency + 1;
-    let samplingPointTime = startingTimeStamp;
-    // initialize the array with all "NAN" value, in order for the tooltip to display dash(-)
-    for (let i = 0; i < numberOfDataPoints; i++) {
-        newValues.push([samplingPointTime, NAN_STRING]);
-        samplingPointTime += sampleFrequency;
-    }
-    // copy the existing data points from `orginalValue` array to `newValues`
-    if (newValues.length === 0)
+    // If there are no original values, return empty array
+    if (orginalValues.length === 0) {
         return [];
-    let nextIndex = 0;
-    for (let i = 0; i < newValues.length; i++) {
-        if (orginalValues[nextIndex] &&
-            newValues[i][0] === orginalValues[nextIndex][0]) {
-            newValues[i][1] = orginalValues[nextIndex][1];
-            nextIndex++;
+    }
+    const newValues = [];
+    // Process all but the last element
+    for (let i = 0; i < orginalValues.length - 1; i++) {
+        // Always add the current data point
+        newValues.push(orginalValues[i]);
+        const currentTimestamp = orginalValues[i][0];
+        const nextTimestamp = orginalValues[i + 1][0];
+        const gap = nextTimestamp - currentTimestamp;
+        // Calculate how many missing points to add
+        const missingIntervals = Math.floor(gap / sampleInterval) - 1;
+        // Add missing data points with NAN_STRING (only executes if missingIntervals > 0)
+        for (let j = 1; j <= missingIntervals; j++) {
+            const missingTimestamp = currentTimestamp + j * sampleInterval;
+            newValues.push([missingTimestamp, NAN_STRING]);
         }
     }
+    // Add the last element
+    newValues.push(orginalValues[orginalValues.length - 1]);
     return newValues;
 }
 // get the value for the based value

package/dist/components/linetemporalchart/LineTemporalChart.component.d.ts

@@ -37,6 +37,10 @@ export type LineChartProps = {
         unitLabel: string;
     }, tooltipData: any) => string;
 };
+/**
+ * @deprecated Use LineTimeSerieChart instead
+ * @example import { LineTimeSerieChart } from '@scality/core-ui/dist/next';
+ */
 declare function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange, isLoading, isLegendHidden, yAxisType, yAxisTitle, helpText, renderTooltipSerie, onHover, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 export { LineTemporalChart };
 //# sourceMappingURL=LineTemporalChart.component.d.ts.map

package/dist/components/linetemporalchart/LineTemporalChart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,2CAomBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"LineTemporalChart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/LineTemporalChart.component.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,sBAAsB,uBAAuB,CAAC;AAC3D,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,eAAO,MAAM,aAAa;;;GAqBzB,CAAC;AA+BF,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,cAAc,CAAC,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AACF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CACnB,IAAI,EAAE;QACJ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,EACD,WAAW,EAAE,GAAG,KACb,MAAM,CAAC;CACb,CAAC;AAkCF;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,SAAiB,EACjB,cAAsB,EACtB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,GAAG,IAAI,EACR,EAAE,cAAc,2CAomBhB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/linetemporalchart/LineTemporalChart.component.js

@@ -94,6 +94,10 @@ const colorRange = [
     darken(0.3, lineColor8),
 ];
 // Note: we need to make sure the start time and end timefor the prometheus query between the series are the same.
+/**
+ * @deprecated Use LineTimeSerieChart instead
+ * @example import { LineTimeSerieChart } from '@scality/core-ui/dist/next';
+ */
 function LineTemporalChart({ series, title, height, startingTimeStamp, unitRange, isLoading = false, isLegendHidden = false, yAxisType = 'default', yAxisTitle, helpText, renderTooltipSerie, onHover, ...rest }) {
     // property validation
     if (!['default', 'percentage', 'symmetrical'].includes(yAxisType)) {

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

@@ -1,6 +1,6 @@
 export type Serie = {
     resource: string;
-    data: [number, string | null][];
+    data: [number, number | string | null][];
     getTooltipLabel: (metricPrefix?: string, resource?: string) => string;
     metricPrefix?: string;
     isLineDashed?: boolean;
@@ -27,9 +27,15 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
         label: string;
     }[];
     isLoading?: boolean;
+    /**
+     * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
+     * If you want to display the date only, you can set it to 'date' which is like 2025-09-01
+     * This will affect the format of the tooltip as well
+     */
+    timeFormat?: 'date-time' | 'date';
     yAxisTitle?: string;
     helpText?: string;
 };
-export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=linetimeseriechart.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AA0FA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEhC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAiEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CAoShB"}
+{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AA2FA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAuEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CA6ShB"}

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,7 @@ 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 { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, FormattedDateTime, YEAR_MONTH_DAY_FORMATTER, } from '../date/FormattedDateTime';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
   flex-direction: column;
@@ -67,7 +67,7 @@ const TooltipName = styled.div `
 const TooltipInstanceValue = styled.div `
   justify-content: flex-end;
 `;
-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.
@@ -83,14 +83,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))
+    return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: timeFormat === 'date-time'
+                        ? 'day-month-abbreviated-hour-minute-second'
+                        : 'long-date', 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)))] }));
 };
 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);
@@ -217,11 +219,15 @@ 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 formatXAxisLabel = useCallback((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: {
+        return timeFormat === 'date-time'
+            ? DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '')
+            : timeFormat === 'date'
+                ? YEAR_MONTH_DAY_FORMATTER.format(date)
+                : '';
+    }, [timeFormat]);
+    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: formatXAxisLabel, tickCount: 5, tick: {
                                 fill: theme.textSecondary,
                                 fontSize: fontSize.smaller,
                             }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
@@ -240,8 +246,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() }), _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/index.d.ts

@@ -1,8 +1,6 @@
 export { Banner } from './components/banner/Banner.component';
 export { Breadcrumb } from './components/breadcrumb/Breadcrumb.component';
-export { Button } from './components/button/Button.component';
 export { Checkbox } from './components/checkbox/Checkbox.component';
-export { Chips } from './components/chips/Chips.component';
 export { Dropdown } from './components/dropdown/Dropdown.component';
 export { LOADER_SIZE, STATUS_CRITICAL, STATUS_WARNING, STATUS_SUCCESS, STATUS_HEALTHY, STATUS_INFO, STATUS_UNKNOWN, STATUS_NONE, Status, } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
@@ -11,22 +9,14 @@ export { Modal } from './components/modal/Modal.component';
 export { Navbar } from './components/navbar/Navbar.component';
 export { Notifications } from './components/notifications/Notifications.component';
 export { SearchInput } from './components/searchinput/SearchInput.component';
-export { Select } from './components/select/Select.component';
 export { Sidebar } from './components/sidebar/Sidebar.component';
 export { Steppers } from './components/steppers/Steppers.component';
 export { Toggle } from './components/toggle/Toggle.component';
 export { Tooltip } from './components/tooltip/Tooltip.component';
-export { MultiSelect } from './components/multiselect/MultiSelect.component';
-export { VegaChart } from './components/vegachart/VegaChart.component';
-export { LineChart } from './components/linechart/LineChart.component';
 export { ProgressBar } from './components/progressbar/ProgressBar.component';
 export { TextArea } from './components/textarea/TextArea.component';
-export { CloudProgressBar } from './components/cloudprogressbar/CloudProgressBar.component';
-export { Sparkline } from './components/sparkline/SparkLine.component';
 export { BarChart } from './components/barchart/BarChart.component';
 export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
-export { AreaChart } from './components/areachart/AreaChart.component';
-export { CollapsiblePanel } from './components/collapsiblepanel/CollapsiblePanel.component';
 export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
 export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
 export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
@@ -38,7 +28,6 @@ export { ErrorPage404 } from './components/error-pages/ErrorPage404.component';
 export { ErrorPage500 } from './components/error-pages/ErrorPage500.component';
 export { ErrorPageAuth } from './components/error-pages/ErrorPageAuth.component';
 export { TextBadge } from './components/textbadge/TextBadge.component';
-export { SpacedBox } from './components/spacedbox/SpacedBox';
 export { Layout as Layout2 } from './components/layout/v2';
 export { TwoPanelLayout } from './components/layout/v2/panels';
 export { AppContainer } from './components/layout/v2/AppContainer';
@@ -61,4 +50,5 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
+export { CoreUITheme } from './style/theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1,8 +1,6 @@
 export { Banner } from './components/banner/Banner.component';
 export { Breadcrumb } from './components/breadcrumb/Breadcrumb.component';
-export { Button } from './components/button/Button.component';
 export { Checkbox } from './components/checkbox/Checkbox.component';
-export { Chips } from './components/chips/Chips.component';
 export { Dropdown } from './components/dropdown/Dropdown.component';
 export { LOADER_SIZE, STATUS_CRITICAL, STATUS_WARNING, STATUS_SUCCESS, STATUS_HEALTHY, STATUS_INFO, STATUS_UNKNOWN, STATUS_NONE, } from './components/constants';
 export { Layout } from './components/layout/Layout.component';
@@ -11,22 +9,14 @@ export { Modal } from './components/modal/Modal.component';
 export { Navbar } from './components/navbar/Navbar.component';
 export { Notifications } from './components/notifications/Notifications.component';
 export { SearchInput } from './components/searchinput/SearchInput.component';
-export { Select } from './components/select/Select.component';
 export { Sidebar } from './components/sidebar/Sidebar.component';
 export { Steppers } from './components/steppers/Steppers.component';
 export { Toggle } from './components/toggle/Toggle.component';
 export { Tooltip } from './components/tooltip/Tooltip.component';
-export { MultiSelect } from './components/multiselect/MultiSelect.component';
-export { VegaChart } from './components/vegachart/VegaChart.component';
-export { LineChart } from './components/linechart/LineChart.component';
 export { ProgressBar } from './components/progressbar/ProgressBar.component';
 export { TextArea } from './components/textarea/TextArea.component';
-export { CloudProgressBar } from './components/cloudprogressbar/CloudProgressBar.component';
-export { Sparkline } from './components/sparkline/SparkLine.component';
 export { BarChart } from './components/barchart/BarChart.component';
 export { CircularProgressBar } from './components/circularprogressbar/CircularProgressBar.component';
-export { AreaChart } from './components/areachart/AreaChart.component';
-export { CollapsiblePanel } from './components/collapsiblepanel/CollapsiblePanel.component';
 export { LateralNavbarLayout } from './components/lateralnavbarlayout/LateralNavbarLayout.component';
 export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBar.component';
 export { ConstrainedText } from './components/constrainedtext/Constrainedtext.component';
@@ -38,7 +28,6 @@ export { ErrorPage404 } from './components/error-pages/ErrorPage404.component';
 export { ErrorPage500 } from './components/error-pages/ErrorPage500.component';
 export { ErrorPageAuth } from './components/error-pages/ErrorPageAuth.component';
 export { TextBadge } from './components/textbadge/TextBadge.component';
-export { SpacedBox } from './components/spacedbox/SpacedBox';
 export { Layout as Layout2 } from './components/layout/v2';
 export { TwoPanelLayout } from './components/layout/v2/panels';
 export { AppContainer } from './components/layout/v2/AppContainer';

package/dist/next.d.ts

@@ -18,4 +18,5 @@ export { ChartTooltip } from './components/barchartv2/ChartTooltip';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export { CoreUITheme } from './style/theme';
 //# sourceMappingURL=next.d.ts.map

package/dist/next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC"}
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/jest.config.js

@@ -5,4 +5,5 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css|less)$': 'identity-obj-proxy',
   },
+  testEnvironment: 'jsdom'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.166.0",
+  "version": "0.168.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -19,12 +19,10 @@
     "lint": "eslint src/* --ext .js --no-error-on-unmatched-pattern",
     "prepare": "npm run build",
     "postbuild": "npm run copy-files",
-    "plop": "plop",
     "test": "jest",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
-    "storybook:deploy": "storybook-to-ghpages",
-    "preview": "jest-preview"
+    "storybook:deploy": "storybook-to-ghpages"
   },
   "keywords": [],
   "browserslist": [
@@ -40,23 +38,19 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@chromatic-com/storybook": "^1.9.0",
-    "@storybook/addon-actions": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/addon-mdx-gfm": "^8.3.6",
-    "@storybook/addon-storysource": "^8.3.6",
+    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-mdx-gfm": "^8.6.14",
+    "@storybook/addon-storysource": "^8.6.14",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
-    "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^8.3.6",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-webpack5": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-router": "^5.1.20",
@@ -70,21 +64,17 @@
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "csstype": "^3.1.0",
     "eslint": "^8.15.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-storybook": "^0.10.1",
     "husky": "^3.0.5",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
+    "jest": "^30.0.5",
     "jest-canvas-mock": "^2.3.1",
-    "jest-preview": "^0.3.1",
-    "plop": "^2.4.0",
+    "jest-environment-jsdom": "^30.0.5",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.0",
     "source-map-explorer": "^2.0.1",
-    "storybook": "^8.3.6",
+    "storybook": "^8.6.14",
     "typescript": "^5.3.2"
   },
   "husky": {
@@ -92,15 +82,6 @@
       "pre-commit": "npm run lint"
     }
   },
-  "jest": {
-    "setupFiles": [
-      "jest-canvas-mock"
-    ],
-    "transform": {
-      "^.+\\.[tj]sx?$": "babel-jest",
-      "^.+\\.mdx?$": "@storybook/addon-docs/jest-transform-mdx"
-    }
-  },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react": "^0.26.28",
@@ -114,16 +95,14 @@
     "downshift": "^7.0.5",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
-    "react-debounce-input": "3.2.2",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
     "react-query": "^3.34.0",
-    "react-router": "7.0.1",
-    "react-router-dom": "7.0.1",
+    "react-router": "7.8.1",
+    "react-router-dom": "7.8.1",
     "react-select": "4.3.1",
     "react-table": "^7.7.0",
     "react-test-renderer": "^18.3.1",
-    "react-virtualized": "9.22.3",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.6",
     "recharts": "^3.0.2",

package/src/lib/components/barchart/BarChart.component.tsx

@@ -9,6 +9,11 @@ type Props = {
   barConfig?: Record<string, any>;
 };
 
+/**
+ * @deprecated Use Barchart v2 instead
+ * @example import { Barchart } from '@scality/core-ui/dist/next';
+
+ */
 function BarChart({
   id,
   data,

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

@@ -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

@@ -45,6 +45,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 +75,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 +265,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 +319,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}

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

@@ -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) => {

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);
   }