@scality/core-ui 0.163.0 → 0.164.0

package/dist/components/barchartv2/Barchart.component.d.ts

@@ -37,17 +37,25 @@ export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['
 }) => 1 | -1 | 0;
 export type BarchartProps<T extends BarchartBars> = {
     type: 'category' | TimeType;
-    bars: T;
+    bars?: T;
     tooltip?: BarchartTooltipFn<T>;
     defaultSort?: BarchartSortFn<T>;
     unitRange?: UnitRange;
     helpTooltip?: string;
     stacked?: boolean;
+    /**
+     * Sort the bars by default or by legend order
+     * legend will sort the bars by the order of the colorSet property of the ChartLegendWrapper component
+     * default will sort the bars by average values in descending order (biggest values will be at bottom)
+     * @default 'default'
+     */
+    stackedBarSort?: 'default' | 'legend';
     title?: string;
     secondaryTitle?: string;
     rightTitle?: React.ReactNode;
     height?: number;
     isLoading?: boolean;
+    isError?: boolean;
 };
 export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Barchart.component.d.ts.map

package/dist/components/barchartv2/Barchart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAwB,SAAS,EAAgB,MAAM,SAAS,CAAC;AAkBxE,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC;CACvE,EAAE,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,YAAY,IAAI,CAAC,YAAY,EAAE;IACrE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAC5E,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,YAAY,IAAI,CACnD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC1E,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KACvE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEhB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,YAAY,IAAI;IAClD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAiHF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CA4HvE,CAAC"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAwB,SAAS,EAAgB,MAAM,SAAS,CAAC;AAkBxE,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE;QACT,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,SAAS;IAClC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC;CACvE,EAAE,CAAC;AAEJ,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,YAAY,IAAI,CAAC,YAAY,EAAE;IACrE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAC5E,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,YAAY,IAAI,CACnD,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,EAC1E,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KACvE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEhB,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,YAAY,IAAI;IAClD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgIF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CAwIvE,CAAC"}

package/dist/components/barchartv2/Barchart.component.js

@@ -14,7 +14,7 @@ import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 const CHART_CONSTANTS = {
     TICK_WIDTH_OFFSET: 5,
     BAR_SIZE: 12,
-    MIN_POINT_SIZE: 1,
+    MIN_POINT_SIZE: 3,
     DEFAULT_HEIGHT: 200,
     CHART_MARGIN: {
         left: 0,
@@ -47,6 +47,13 @@ const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
                             marginLeft: spacing.r8,
                         }, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
 };
+const Error = ({ height }) => {
+    return (_jsx(Box, { height: height, style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+        }, children: _jsx(Text, { children: "Chart data is not available" }) }));
+};
 const Loading = ({ height }) => {
     return (_jsx(Box, { height: height, style: {
             alignItems: 'center',
@@ -59,19 +66,19 @@ export const Barchart = (props) => {
     const theme = useTheme();
     const { getColor } = useChartLegend();
     const [hoveredValue, setHoveredValue] = useState();
-    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = 'category', unitRange, stacked, defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, } = props;
+    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = 'category', unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
     // Create colorSet from ChartLegendWrapper
-    const colorSet = bars.reduce((acc, bar) => {
+    const colorSet = bars === null || bars === void 0 ? void 0 : bars.reduce((acc, bar) => {
         const color = getColor(bar.label);
         if (color) {
             acc[bar.label] = color;
         }
         return acc;
     }, {});
-    const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars, type, colorSet, stacked, defaultSort, unitRange);
-    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
+    const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
+    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
                             const { fill, dataKey, stackId } = bar;
-                            return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
+                            return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
                         }), _jsx(YAxis, { tickCount: 1, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
                             , axisLine: false, tick: {
                                 fill: theme.textSecondary,

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

@@ -38,7 +38,7 @@ export declare const applySortingToData: <T extends BarchartBars>(data: {
  * @param type - The chart type (category or time)
  * @returns Recharts data format
  */
-export declare const formatPrometheusDataToRechartsDataAndBars: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<string, ChartColors | string>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"]) => {
+export declare const formatPrometheusDataToRechartsDataAndBars: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<string, ChartColors | string>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"], legendOrder?: string[]) => {
     data: {
         [key: string]: string | number;
     }[];
@@ -76,7 +76,7 @@ export declare const sortStackedBars: (rechartsBars: {
     stackId?: string;
 }[], data: {
     [key: string]: string | number;
-}[], stacked?: boolean) => {
+}[], stacked?: boolean, legendOrder?: string[]) => {
     dataKey: string;
     fill: string;
     stackId?: string;
@@ -105,7 +105,7 @@ export declare const filterChartDataAndBarsByLegendSelection: (data: {
         stackId?: string;
     }[];
 };
-export declare const useChartData: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<string, ChartColors | string>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"], unitRange?: UnitRange) => {
+export declare const useChartData: <T extends BarchartBars>(bars: T, type: BarchartProps<T>["type"], colorSet: Record<string, ChartColors | string>, stacked?: boolean, defaultSort?: BarchartProps<T>["defaultSort"], unitRange?: UnitRange, stackedBarSort?: "default" | "legend") => {
     rechartsBars: {
         dataKey: string;
         fill: string;

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

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

package/dist/components/barchartv2/utils.js

@@ -9,13 +9,17 @@ export const getRoundReferenceValue = (value) => {
     // Normalized value between 1 and 10
     const normalized = value / magnitude;
     // Round to nice numbers based on normalized value
+    let result;
     if (normalized <= 1)
-        return magnitude;
-    if (normalized <= 2.5)
-        return 2.5 * magnitude;
-    if (normalized <= 5)
-        return 5 * magnitude;
-    return 10 * magnitude;
+        result = magnitude;
+    else if (normalized <= 2.5)
+        result = 2.5 * magnitude;
+    else if (normalized <= 5)
+        result = 5 * magnitude;
+    else
+        result = 10 * magnitude;
+    // Ensure minimum value of 5 for better chart appearance
+    return Math.max(result, 5);
 };
 export const getMaxBarValue = (data, stacked) => {
     const values = data.map((item) => {
@@ -34,9 +38,9 @@ export const getMaxBarValue = (data, stacked) => {
             .filter((key) => key !== 'category')
             .map((key) => Number(item[key]));
         // Get the max value among the values in the object (corresponding to one bar)
-        return Math.max(...numberValues);
+        return Math.max(...numberValues, 0); // Ensure we don't get -Infinity
     });
-    return Math.max(...values);
+    return Math.max(...values, 0);
 };
 /**
  * Generates time ranges between start and end dates based on the given interval
@@ -47,9 +51,6 @@ export const getMaxBarValue = (data, stacked) => {
  */
 const generateTimeRanges = (startDate, endDate, interval) => {
     const ranges = [];
-    if (!startDate || !endDate || !interval) {
-        return ranges;
-    }
     let currentDate = new Date(startDate.getTime());
     while (currentDate.getTime() <= endDate.getTime()) {
         const rangeEnd = new Date(currentDate.getTime() + interval);
@@ -198,7 +199,7 @@ const getRechartsBarsAndBarDataKeys = (bars, colorSet, stacked) => {
  * @param type - The chart type (category or time)
  * @returns Recharts data format
  */
-export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet, stacked, defaultSort) => {
+export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet, stacked, defaultSort, legendOrder) => {
     const { rechartsBars, barDataKeys } = getRechartsBarsAndBarDataKeys(bars, colorSet, stacked);
     let data = type !== 'category' && type.type === 'time'
         ? transformTimeData(bars, type, barDataKeys)
@@ -206,7 +207,7 @@ export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet,
     if (type === 'category' && defaultSort) {
         data = applySortingToData(data, barDataKeys, defaultSort);
     }
-    const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked);
+    const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked, legendOrder);
     return {
         rechartsBars: sortedRechartsBars,
         data,
@@ -217,7 +218,7 @@ export const computeUnitLabelAndRoundReferenceValue = (data, maxValue, unitRange
         const roundReferenceValue = getRoundReferenceValue(maxValue);
         return { unitLabel: '', roundReferenceValue, rechartsData: data };
     }
-    const { valueBase, unitLabel } = getUnitLabel(unitRange !== null && unitRange !== void 0 ? unitRange : [], maxValue);
+    const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
     const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
     const roundReferenceValue = getRoundReferenceValue(topValue);
     const rechartsData = data.map((dataPoint) => {
@@ -259,12 +260,31 @@ export function getUnitLabel(unitRange, maxValue) {
         unitLabel: unitRange[index - 1].label,
     };
 }
-// Sort stacked bars by their average values in descending order
-// This ensures the largest bars appear at the bottom of the stack
-export const sortStackedBars = (rechartsBars, data, stacked) => {
+// Sort stacked bars by their average values in descending order or by legend order
+// This ensures the largest bars appear at the bottom of the stack (default) or follow legend order
+export const sortStackedBars = (rechartsBars, data, stacked, legendOrder) => {
     if (!stacked) {
         return rechartsBars;
     }
+    // If legend order is provided, sort by legend order
+    if (legendOrder && legendOrder.length > 0) {
+        return [...rechartsBars].sort((a, b) => {
+            const indexA = legendOrder.indexOf(a.dataKey);
+            const indexB = legendOrder.indexOf(b.dataKey);
+            // If both items are in legend order, sort by their position
+            if (indexA !== -1 && indexB !== -1) {
+                return indexA - indexB;
+            }
+            // If only one item is in legend order, prioritize it
+            if (indexA !== -1)
+                return -1;
+            if (indexB !== -1)
+                return 1;
+            // If neither is in legend order, maintain original order
+            return 0;
+        });
+    }
+    // Default behavior: sort by average values
     const barAverages = rechartsBars.map((bar) => {
         const values = data
             .map((item) => Number(item[bar.dataKey]) || 0)
@@ -321,9 +341,11 @@ export const filterChartDataAndBarsByLegendSelection = (data, rechartsBars, sele
     });
     return { filteredData, filteredRechartsBars };
 };
-export const useChartData = (bars, type, colorSet, stacked, defaultSort, unitRange) => {
-    const { selectedResources } = useChartLegend();
-    const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(bars, type, colorSet, stacked, defaultSort);
+export const useChartData = (bars, type, colorSet, stacked, defaultSort, unitRange, stackedBarSort) => {
+    const { selectedResources, listResources } = useChartLegend();
+    // Get legend order when stackedBarSort is 'legend'
+    const legendOrder = stackedBarSort === 'legend' ? listResources() : undefined;
+    const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(bars, type, colorSet, stacked, defaultSort, legendOrder);
     // Filter both data and bars to only include selected resources for accurate maxValue calculation
     const { filteredData, filteredRechartsBars } = filterChartDataAndBarsByLegendSelection(data, rechartsBars, selectedResources);
     const maxValue = getMaxBarValue(filteredData, stacked);

package/dist/next.d.ts

@@ -15,4 +15,5 @@ export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, BarchartSortFn, BarchartTooltipFn, } from './components/barchartv2/Barchart.component';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegend } from './components/chartlegend/ChartLegend';
 //# 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,kBAAkB,EAAE,MAAM,6CAA6C,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,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC"}

package/dist/next.js

@@ -15,3 +15,4 @@ export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, } from './components/barchartv2/Barchart.component';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegend } from './components/chartlegend/ChartLegend';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.163.0",
+  "version": "0.164.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/accordion/Accordion.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Accordion } from './Accordion.component';
 import userEvent from '@testing-library/user-event';
 

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

@@ -1,5 +1,4 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
 import { getWrapper } from '../../testUtils';
 import { Barchart } from './Barchart.component';
 import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
@@ -15,7 +14,7 @@ jest.mock('recharts', () => {
     ...OriginalResponsiveContainerModule,
     ResponsiveContainer: ({ height, children }) => (
       <OriginalResponsiveContainerModule.ResponsiveContainer
-        width={800}
+        aspect={3}
         height={300}
         data-testid="responsive-container"
       >
@@ -93,6 +92,43 @@ describe('Barchart', () => {
       expect(screen.getByText('Sat06Jul')).toBeInTheDocument();
       expect(screen.getByText('Sun07Jul')).toBeInTheDocument();
     });
+    it('should render the Barchart component with error state', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={[]} isError />
+          </ChartLegendWrapper>
+        </Wrapper>,
+      );
+      expect(
+        screen.getByText('Chart data is not available'),
+      ).toBeInTheDocument();
+    });
+    it('should render the Barchart component with loading state', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={[]} isLoading />
+          </ChartLegendWrapper>
+        </Wrapper>,
+      );
+      expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
+    });
+    it('should render the Barchart component with undefined bars', async () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <ChartLegendWrapper colorSet={testColorSet}>
+            <Barchart type="category" bars={undefined} />
+          </ChartLegendWrapper>
+        </Wrapper>,
+      );
+      expect(
+        screen.getByText('Chart data is not available'),
+      ).toBeInTheDocument();
+    });
   });
 
   describe('Time data', () => {
@@ -278,7 +314,7 @@ describe('Barchart', () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <ChartLegendWrapper colorSet={testColorSet}>
+        <ChartLegendWrapper colorSet={{ ...testColorSet, Failed: 'red' }}>
           <Barchart type="category" bars={testStackedBars} stacked={true} />
         </ChartLegendWrapper>
       </Wrapper>,
@@ -326,17 +362,6 @@ describe('Barchart', () => {
     expect(categories[2]).toHaveTextContent('category1'); // 10 (lowest)
   });
 
-  it('should render the Barchart component with loading state', () => {
-    const { Wrapper } = getWrapper();
-    render(
-      <Wrapper>
-        <ChartLegendWrapper colorSet={testColorSet}>
-          <Barchart type="category" bars={[]} isLoading />
-        </ChartLegendWrapper>
-      </Wrapper>,
-    );
-    expect(screen.getByText('Loading Chart Data...')).toBeInTheDocument();
-  });
   it('should render header with title, secondary title, right title and help tooltip', async () => {
     const { Wrapper } = getWrapper();
     render(

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

@@ -24,7 +24,7 @@ import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 5,
   BAR_SIZE: 12,
-  MIN_POINT_SIZE: 1,
+  MIN_POINT_SIZE: 3,
   DEFAULT_HEIGHT: 200,
   CHART_MARGIN: {
     left: 0,
@@ -70,17 +70,25 @@ export type BarchartSortFn<T extends BarchartBars> = (
 
 export type BarchartProps<T extends BarchartBars> = {
   type: 'category' | TimeType;
-  bars: T;
+  bars?: T;
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
   unitRange?: UnitRange;
   helpTooltip?: string;
   stacked?: boolean;
+  /**
+   * Sort the bars by default or by legend order
+   * legend will sort the bars by the order of the colorSet property of the ChartLegendWrapper component
+   * default will sort the bars by average values in descending order (biggest values will be at bottom)
+   * @default 'default'
+   */
+  stackedBarSort?: 'default' | 'legend';
   title?: string;
   secondaryTitle?: string;
   rightTitle?: React.ReactNode;
   height?: number;
   isLoading?: boolean;
+  isError?: boolean;
 };
 
 interface CustomTickProps {
@@ -177,6 +185,21 @@ const ChartHeader = ({
   );
 };
 
+const Error = ({ height }: { height: number }) => {
+  return (
+    <Box
+      height={height}
+      style={{
+        alignItems: 'center',
+        justifyContent: 'center',
+        display: 'flex',
+      }}
+    >
+      <Text>Chart data is not available</Text>
+    </Box>
+  );
+};
+
 const Loading = ({ height }: { height: number }) => {
   return (
     <Box
@@ -205,6 +228,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     type = 'category',
     unitRange,
     stacked,
+    stackedBarSort = 'default',
     defaultSort,
     tooltip,
     title,
@@ -212,10 +236,11 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
     helpTooltip,
     rightTitle,
     isLoading,
+    isError,
   } = props;
 
   // Create colorSet from ChartLegendWrapper
-  const colorSet = bars.reduce(
+  const colorSet = bars?.reduce(
     (acc, bar) => {
       const color = getColor(bar.label);
       if (color) {
@@ -227,7 +252,15 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
   );
 
   const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } =
-    useChartData(bars, type, colorSet, stacked, defaultSort, unitRange);
+    useChartData(
+      bars || [],
+      type,
+      colorSet || {},
+      stacked,
+      defaultSort,
+      unitRange,
+      stackedBarSort,
+    );
 
   return (
     <Stack direction="vertical" gap="r8">
@@ -237,7 +270,9 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
         helpTooltip={helpTooltip}
         rightTitle={rightTitle}
       />
-      {isLoading ? (
+      {isError || (!bars && !isLoading) ? (
+        <Error height={height} />
+      ) : isLoading ? (
         <Loading height={height} />
       ) : (
         <StyledResponsiveContainer width="100%" height={height}>
@@ -260,7 +295,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
                   key={dataKey}
                   dataKey={dataKey}
                   fill={chartColors[fill] || fill}
-                  minPointSize={CHART_CONSTANTS.MIN_POINT_SIZE}
+                  minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
                   stackId={stackId}
                   onMouseOver={() => setHoveredValue(dataKey)}
                   onMouseLeave={() => setHoveredValue(undefined)}

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

@@ -482,8 +482,8 @@ describe('applySortingToData', () => {
 
 describe('getRoundReferenceValue', () => {
   it('should return appropriate rounded values', () => {
-    expect(getRoundReferenceValue(1)).toBe(1);
-    expect(getRoundReferenceValue(2)).toBe(2.5);
+    expect(getRoundReferenceValue(1)).toBe(5);
+    expect(getRoundReferenceValue(2)).toBe(5);
     expect(getRoundReferenceValue(3)).toBe(5);
     expect(getRoundReferenceValue(7)).toBe(10);
     expect(getRoundReferenceValue(15)).toBe(25);
@@ -717,6 +717,14 @@ describe('sortStackedBars', () => {
       { dataKey: 'bar1', fill: 'blue' },
     ]);
   });
+  it('should sort bars by legend order when stacked is true and legendOrder is provided', () => {
+    const result = sortStackedBars(bars, data, true, ['bar3', 'bar2', 'bar1']);
+    expect(result).toEqual([
+      { dataKey: 'bar3', fill: 'green' },
+      { dataKey: 'bar2', fill: 'red' },
+      { dataKey: 'bar1', fill: 'blue' },
+    ]);
+  });
   it('should not sort bars when stacked is false', () => {
     const result = sortStackedBars(bars, data, false);
     expect(result).toEqual([

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

@@ -18,10 +18,14 @@ export const getRoundReferenceValue = (value: number): number => {
   const normalized = value / magnitude;
 
   // Round to nice numbers based on normalized value
-  if (normalized <= 1) return magnitude;
-  if (normalized <= 2.5) return 2.5 * magnitude;
-  if (normalized <= 5) return 5 * magnitude;
-  return 10 * magnitude;
+  let result: number;
+  if (normalized <= 1) result = magnitude;
+  else if (normalized <= 2.5) result = 2.5 * magnitude;
+  else if (normalized <= 5) result = 5 * magnitude;
+  else result = 10 * magnitude;
+
+  // Ensure minimum value of 5 for better chart appearance
+  return Math.max(result, 5);
 };
 
 export const getMaxBarValue = (
@@ -46,9 +50,9 @@ export const getMaxBarValue = (
       .filter((key) => key !== 'category')
       .map((key) => Number(item[key]));
     // Get the max value among the values in the object (corresponding to one bar)
-    return Math.max(...numberValues);
+    return Math.max(...numberValues, 0); // Ensure we don't get -Infinity
   });
-  return Math.max(...values);
+  return Math.max(...values, 0);
 };
 
 /**
@@ -64,9 +68,6 @@ const generateTimeRanges = (
   interval: number,
 ): { start: Date; end: Date }[] => {
   const ranges: { start: Date; end: Date }[] = [];
-  if (!startDate || !endDate || !interval) {
-    return ranges;
-  }
 
   let currentDate = new Date(startDate.getTime());
   while (currentDate.getTime() <= endDate.getTime()) {
@@ -288,6 +289,7 @@ export const formatPrometheusDataToRechartsDataAndBars = <
   colorSet: Record<string, ChartColors | string>,
   stacked?: boolean,
   defaultSort?: BarchartProps<T>['defaultSort'],
+  legendOrder?: string[],
 ): {
   data: { [key: string]: string | number }[];
   rechartsBars: { dataKey: string; fill: string; stackId?: string }[];
@@ -307,7 +309,12 @@ export const formatPrometheusDataToRechartsDataAndBars = <
     data = applySortingToData(data, barDataKeys, defaultSort);
   }
 
-  const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked);
+  const sortedRechartsBars = sortStackedBars(
+    rechartsBars,
+    data,
+    stacked,
+    legendOrder,
+  );
 
   return {
     rechartsBars: sortedRechartsBars,
@@ -330,7 +337,7 @@ export const computeUnitLabelAndRoundReferenceValue = (
     return { unitLabel: '', roundReferenceValue, rechartsData: data };
   }
 
-  const { valueBase, unitLabel } = getUnitLabel(unitRange ?? [], maxValue);
+  const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
   const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
   const roundReferenceValue = getRoundReferenceValue(topValue);
   const rechartsData = data.map((dataPoint) => {
@@ -397,8 +404,8 @@ export function getUnitLabel(
   };
 }
 
-// Sort stacked bars by their average values in descending order
-// This ensures the largest bars appear at the bottom of the stack
+// Sort stacked bars by their average values in descending order or by legend order
+// This ensures the largest bars appear at the bottom of the stack (default) or follow legend order
 export const sortStackedBars = (
   rechartsBars: {
     dataKey: string;
@@ -409,10 +416,33 @@ export const sortStackedBars = (
     [key: string]: string | number;
   }[],
   stacked?: boolean,
+  legendOrder?: string[],
 ) => {
   if (!stacked) {
     return rechartsBars;
   }
+
+  // If legend order is provided, sort by legend order
+  if (legendOrder && legendOrder.length > 0) {
+    return [...rechartsBars].sort((a, b) => {
+      const indexA = legendOrder.indexOf(a.dataKey);
+      const indexB = legendOrder.indexOf(b.dataKey);
+
+      // If both items are in legend order, sort by their position
+      if (indexA !== -1 && indexB !== -1) {
+        return indexA - indexB;
+      }
+
+      // If only one item is in legend order, prioritize it
+      if (indexA !== -1) return -1;
+      if (indexB !== -1) return 1;
+
+      // If neither is in legend order, maintain original order
+      return 0;
+    });
+  }
+
+  // Default behavior: sort by average values
   const barAverages = rechartsBars.map((bar) => {
     const values = data
       .map((item) => Number(item[bar.dataKey]) || 0)
@@ -502,14 +532,20 @@ export const useChartData = <T extends BarchartBars>(
   stacked?: boolean,
   defaultSort?: BarchartProps<T>['defaultSort'],
   unitRange?: UnitRange,
+  stackedBarSort?: 'default' | 'legend',
 ) => {
-  const { selectedResources } = useChartLegend();
+  const { selectedResources, listResources } = useChartLegend();
+
+  // Get legend order when stackedBarSort is 'legend'
+  const legendOrder = stackedBarSort === 'legend' ? listResources() : undefined;
+
   const { data, rechartsBars } = formatPrometheusDataToRechartsDataAndBars(
     bars,
     type,
     colorSet,
     stacked,
     defaultSort,
+    legendOrder,
   );
 
   // Filter both data and bars to only include selected resources for accurate maxValue calculation

package/src/lib/components/healthselectorv2/HealthSelector.component.test.tsx

@@ -2,7 +2,7 @@ import {
   HealthSelector,
   optionsDefaultConfiguration,
 } from './HealthSelector.component';
-import React from 'react';
+import { act } from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { getWrapper } from '../../testUtils';
@@ -18,11 +18,11 @@ describe('HealthSelector', () => {
     const input = screen.getByRole('textbox');
 
     // open the menu
-    userEvent.click(input);
+    await act(() => userEvent.click(input));
     const healthyOption = getByText(/healthy/i);
     expect(healthyOption).toBeInTheDocument();
   });
-  it('should call the onChange function when it change', () => {
+  it('should call the onChange function when it change', async () => {
     const { Wrapper } = getWrapper();
     const onChange = jest.fn();
     const { getByText } = render(
@@ -31,12 +31,12 @@ describe('HealthSelector', () => {
       </Wrapper>,
     );
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
+    await act(() => userEvent.click(input));
     const warningOption = getByText(/warning/i);
-    userEvent.click(warningOption);
+    await act(() => userEvent.click(warningOption));
     expect(onChange).toHaveBeenCalledWith('warning');
   });
-  it('should not display hidden options', () => {
+  it('should not display hidden options', async () => {
     const { Wrapper } = getWrapper();
     const { queryByText } = render(
       <Wrapper>
@@ -55,7 +55,7 @@ describe('HealthSelector', () => {
 
     // open the menu
     const input = screen.getByRole('textbox');
-    userEvent.click(input);
+    await act(() => userEvent.click(input));
     const healthyOption = queryByText(/healthy/i);
     expect(healthyOption).not.toBeInTheDocument();
   });

package/src/lib/components/infomessage/InfoMessageUtils.test.tsx

@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
-import React from 'react';
 import { coreUIAvailableThemes } from '../../style/theme';
 import { CoreUiThemeProvider } from '../coreuithemeprovider/CoreUiThemeProvider';
 import { useComputeBackgroundColor } from './InfoMessageUtils';

package/src/lib/components/inlineinput/InlineInput.test.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import {
   QueryClient,
   QueryClientProvider,
@@ -11,7 +11,6 @@ import {
   render,
   screen,
   waitFor,
-  waitForElementToBeRemoved,
   within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -77,9 +76,10 @@ describe('InlineInput', () => {
       /// Then press enter to edit the input
       await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await act(() => userEvent.type(document.activeElement, 'new value'));
+      await act(() => userEvent.type(document.activeElement!, 'new value'));
       /// Then press enter to confirm the new value
       await act(() => userEvent.keyboard('{enter}'));
+      await waitFor(() => screen.findByText('testnew value'));
       expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
 
       //V
@@ -115,13 +115,16 @@ describe('InlineInput', () => {
       /// Then press enter to edit the input
       await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await act(() => userEvent.type(document.activeElement, 'new value'));
+      await act(() => userEvent.type(document.activeElement!, 'new value'));
       /// Then press enter to confirm the new value
+      
       await act(() => userEvent.keyboard('{enter}'));
+      await waitFor(() => screen.findByRole('dialog', { name: /Confirm/i }));
       /// Expect the confirmation modal to be opened
       expect(selectors.confirmationModal()).toBeInTheDocument()
       /// Click the confirm button
       await act(() => userEvent.click(screen.getByRole('button', { name: /confirm/i })));
+
       /// modal should be closed
       expect(screen.queryByRole('dialog', { name: /Confirm/i })).not.toBeInTheDocument();
 
@@ -156,7 +159,7 @@ describe('InlineInput', () => {
       /// Then press enter to edit the input
       await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await act(() => userEvent.type(document.activeElement, 'new value'));
+      await act(() => userEvent.type(document.activeElement!, 'new value'));
       /// Then press escape to cancel the new value
       await act(() => userEvent.keyboard('{esc}'));
 
@@ -191,7 +194,7 @@ describe('InlineInput', () => {
       /// Then press enter to edit the input
       await act(() => userEvent.keyboard('{enter}'));
       /// Then type a new value
-      await act(() => userEvent.type(document.activeElement, 'new value'));
+      await act(() => userEvent.type(document.activeElement!, 'new value'));
       /// Then press enter to confirm the new value
       await act(() => userEvent.keyboard('{enter}'));
       /// Expect the confirmation modal to be opened
@@ -208,7 +211,7 @@ describe('InlineInput', () => {
       //V
       expect(mock).not.toHaveBeenCalled();
       expect(screen.getByRole('textbox')).toBeInTheDocument();
-      expect(screen.getByRole('textbox').value).toBe('testnew value');
+      expect((screen.getByRole('textbox') as HTMLInputElement).value).toBe('testnew value');
     });
   });
 });

package/src/lib/components/inputlist/InputList.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { InputList, InputListProps } from './InputList.component';
 import { FormSection } from '../form/Form.component';
@@ -6,7 +5,7 @@ import { FormSection } from '../form/Form.component';
 describe('InputList', () => {
   const onChangeMock = jest.fn();
 
-  const renderInputList = (props: InputListProps<string[]>) => {
+  const renderInputList = (props: InputListProps<string>) => {
     render(
       <FormSection>
         <InputList

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

@@ -3,7 +3,8 @@ import {
   getUnitLabel,
   addMissingDataPoint,
 } from './ChartUtil';
-const series = [
+import { Serie } from './LineTemporalChart.component';
+const series: Serie[] = [
   {
     resource: 'node1',
     data: [
@@ -11,7 +12,7 @@ const series = [
       [1627460952, '18.73333333333335'],
     ],
     getTooltipLabel: (metricPrefix, resource) => {
-      return resource;
+      return `${resource}`;
     },
     isLineDashed: false,
   },
@@ -22,12 +23,12 @@ const series = [
       [1627460952, null],
     ],
     getTooltipLabel: (metricPrefix, resource) => {
-      return resource;
+      return `${resource}`;
     },
     isLineDashed: false,
   },
 ];
-const seriesSymmetrical = [
+const seriesSymmetrical: Serie[] = [
   {
     metricPrefix: 'read',
     resource: 'node1',

package/src/lib/components/selectv2/selectv2.test.tsx

@@ -2,6 +2,7 @@ import { act, screen, render as testingRender, waitFor } from '@testing-library/
 import userEvent from '@testing-library/user-event';
 import React, { useState, useRef } from 'react';
 import { Option, Select, SelectRef } from '../selectv2/Selectv2.component';
+import { GroupTypeBase, OptionTypeBase } from 'react-select';
 
 const render = (args) => {
   return testingRender(args);
@@ -66,7 +67,10 @@ describe('SelectV2', () => {
   };
 
   it('should throw error if <Option/> is outside <Select/>', () => {
+    // mock console.error as this is the only way to silent expected error thrown by the component
+    const consoleErrorFn = jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
     expect(() => render(<Option value="Option 1" />)).toThrowError();
+    consoleErrorFn.mockRestore();
   });
 
   it('should open/close on click', async () => {
@@ -458,7 +462,7 @@ describe('SelectV2', () => {
   describe('Ref API', () => {
     it('should expose focus method via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (
@@ -486,7 +490,7 @@ describe('SelectV2', () => {
 
     it('should expose openMenu and closeMenu methods via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (
@@ -529,7 +533,7 @@ describe('SelectV2', () => {
 
       const RefTestComponent = () => {
         const [value, setValue] = useState('');
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
 
         return (
           <div>
@@ -582,7 +586,7 @@ describe('SelectV2', () => {
 
     it('should expose blur method via ref', async () => {
       const RefTestComponent = () => {
-        const selectRef = useRef<SelectRef>(null);
+        const selectRef = useRef<SelectRef<OptionTypeBase, boolean, GroupTypeBase<OptionTypeBase>>>(null);
         const [value, setValue] = useState<string>('');
 
         return (

package/src/lib/components/tablev2/TableSync.test.tsx

@@ -1,12 +1,11 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
 import { TableSync } from './TableSync';
 
 describe('TableSync', () => {
   it('should render correctly', async () => {
     const onSync = jest.fn();
     render(
-      <TableSync onSync={onSync} />
+      <TableSync onSync={onSync} tooltipOverlay='sync' />
     );
     await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 
@@ -17,7 +16,7 @@ describe('TableSync', () => {
   it('should call onSync when clicked', async () => {
     const onSync = jest.fn();
     render(
-      <TableSync onSync={onSync} />
+      <TableSync onSync={onSync} tooltipOverlay='sync' />
     );
     await waitFor(() => screen.queryAllByRole('img', { hidden: true }));
 

package/src/lib/components/tablev2/TableUtils.test.ts

@@ -9,9 +9,12 @@ it('should return -1 or 1 to sort the status', () => {
   expect(result).toEqual(1);
   expect(result2).toEqual(-1);
 });
-it('should return undefine for the unknown status', () => {
-  const result = compareHealth('invalidStatus', 'healthy');
-  const result2 = compareHealth('none', 'invalidStatus');
+it('should return undefined for the unknown status', () => {
+  const consoleErrorMockHandle = jest.spyOn(console, 'error').mockImplementation(() => {});
+  const result = compareHealth('invalidStatus' as any, 'healthy');
+  const result2 = compareHealth('none', 'invalidStatus' as any);
+  expect(consoleErrorMockHandle).toHaveBeenCalled();
+  consoleErrorMockHandle.mockRestore();
   expect(result).toEqual(undefined);
   expect(result2).toEqual(undefined);
 });

package/src/lib/components/tablev2/Tablev2.test.tsx

@@ -1,5 +1,4 @@
-import { Table } from './Tablev2.component';
-import React from 'react';
+import { Table, TableProps } from './Tablev2.component';
 import { render, screen, waitFor } from '@testing-library/react';
 
 jest.mock('./TableUtils', () => ({
@@ -42,7 +41,7 @@ const data = [
     health: 'healthy',
   },
 ];
-const columns = [
+const columns: TableProps['columns'] = [
   {
     Header: 'First Name',
     accessor: 'firstName',

package/src/lib/components/toggle/Toggle.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Props, Toggle } from './Toggle.component';
 import userEvent from '@testing-library/user-event';
 

package/src/lib/next.ts

@@ -22,3 +22,4 @@ export {
   BarchartTooltipFn,
 } from './components/barchartv2/Barchart.component';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegend } from './components/chartlegend/ChartLegend';

package/stories/BarChart/barchart.stories.tsx

@@ -360,7 +360,7 @@ export const CapacityWithUnitRange: Story = {
 
 const stackedData: BarchartProps<
   {
-    label: 'Success' | 'Failed';
+    label: 'Success' | 'Failed' | 'Warning';
     data: [string, number][];
   }[]
 >['bars'] = [
@@ -375,9 +375,17 @@ const stackedData: BarchartProps<
   {
     label: 'Failed',
     data: [
-      ['category1', 8],
-      ['category2', 10],
-      ['category3', 25],
+      ['category1', 0],
+      ['category2', 0],
+      ['category3', 0],
+    ],
+  },
+  {
+    label: 'Warning',
+    data: [
+      ['category1', 0],
+      ['category2', 0],
+      ['category3', 0],
     ],
   },
 ];
@@ -390,6 +398,7 @@ export const Stacked: Story = {
         colorSet={{
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
+          Warning: theme.statusWarning,
         }}
       >
         <Stack direction="vertical" gap="r16">
@@ -736,6 +745,88 @@ export const BarchartsWithSingleLegend: Story = {
     );
   },
 };
+
+export const ErrorState: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          Success: theme.statusHealthy,
+          Failed: theme.statusCritical,
+        }}
+      >
+        <Barchart
+          type="category"
+          bars={[]}
+          isError
+          title="Error State"
+          helpTooltip="This chart data could not be loaded"
+        />
+        <ChartLegend shape="rectangle" />
+      </ChartLegendWrapper>
+    );
+  },
+};
+
+export const StackedBarSort: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    const [sort, setSort] = useState<'default' | 'legend'>('default');
+    const statusesData = [
+      {
+        label: 'Success',
+        data: [
+          ['category1', 100],
+          ['category2', 80],
+          ['category3', 50],
+        ],
+      },
+      {
+        label: 'Warning',
+        data: [
+          ['category1', 10],
+          ['category2', 20],
+          ['category3', 30],
+        ],
+      },
+      {
+        label: 'Failed',
+        data: [
+          ['category1', 30],
+          ['category2', 40],
+          ['category3', 50],
+        ],
+      },
+    ] as const;
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          Success: theme.statusHealthy,
+          Warning: theme.statusWarning,
+          Failed: theme.statusCritical,
+        }}
+      >
+        <Barchart
+          type="category"
+          bars={statusesData}
+          stacked
+          stackedBarSort={sort}
+          title="Stacked Bar Chart"
+          helpTooltip="This chart data could not be loaded"
+          rightTitle={
+            <Button
+              label={sort === 'default' ? 'Sort by Legend' : 'Sort by Default'}
+              onClick={() => setSort(sort === 'default' ? 'legend' : 'default')}
+            />
+          }
+        />
+        <ChartLegend shape="rectangle" />
+      </ChartLegendWrapper>
+    );
+  },
+};
+
 export const CompleteExample: Story = {
   render: () => {
     const theme = useTheme() as CoreUITheme;
@@ -809,7 +900,7 @@ export const CompleteExample: Story = {
                 }}
               />
             }
-            bars={data || []}
+            bars={data}
             tooltip={customTooltip}
             isLoading={isLoading}
             height={200}

package/tsconfig.json

@@ -15,7 +15,6 @@
     "strictFunctionTypes": true,
     "noImplicitAny": false, //For now it is too costly to enable this one
     "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true
   }
 }