@scality/core-ui 0.169.0 → 0.171.0

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

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, } from 'recharts';
-import { useCallback, useMemo, useRef } from 'react';
-import { useTheme } from 'styled-components';
-import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
-import styled from 'styled-components';
+import { CartesianGrid, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
+import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
+import { Box } from '../box/Box';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { ChartTitleText, SmallerText } from '../text/Text.component';
-import { Loader } from '../loader/Loader.component';
-import { spacing } from '../../spacing';
-import { getUnitLabel } from '../linetemporalchart/ChartUtil';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 import { Icon } from '../icon/Icon.component';
+import { addMissingDataPoint, getUnitLabel, } from '../linetemporalchart/ChartUtil';
+import { Loader } from '../loader/Loader.component';
+import { ChartTitleText, SmallerText } from '../text/Text.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { Box } from '../box/Box';
 import { formatXAxisLabel } from './utils';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
@@ -25,7 +23,7 @@ const ChartHeader = styled.div `
   display: flex;
   align-items: center;
 `;
-const TooltipContainer = styled.div `
+export const TooltipContainer = styled.div `
   background-color: ${(props) => props.theme.backgroundLevel1};
   padding: ${spacing.r8};
   border: 1px solid ${(props) => props.theme.border};
@@ -33,7 +31,7 @@ const TooltipContainer = styled.div `
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   max-width: 250px;
 `;
-const TooltipTime = styled.div `
+export const TooltipTime = styled.div `
   margin-bottom: ${spacing.r8};
   color: ${(props) => props.theme.textPrimary};
   font-size: ${fontSize.smaller};
@@ -73,9 +71,13 @@ const TooltipInstanceValue = styled.div `
   flex-shrink: 0;
   text-align: right;
 `;
-const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
-    if (!active || !payload || !payload.length || !label)
+const CustomTooltip = ({ unitLabel, timeFormat, isChartActive, tooltipProps, renderTooltip, }) => {
+    const { active, payload, label, ...rest } = tooltipProps;
+    if (!active || !payload || !payload.length || !label || !isChartActive)
         return null;
+    if (renderTooltip) {
+        return renderTooltip(tooltipProps, unitLabel, timeFormat);
+    }
     // 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) => {
@@ -98,23 +100,42 @@ const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
 const isSymmetricalSeries = (series) => {
     return 'above' in series && 'below' in series;
 };
-export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, syncId, renderTooltip, ...rest }) {
     const theme = useTheme();
-    const { getColor } = useChartLegend();
+    const { getColor, selectedResources } = useChartLegend();
     const chartRef = useRef(null);
+    const [isChartActive, setIsChartActive] = useState(false);
     const chartData = useMemo(() => {
+        // Guard against empty/undefined series data
+        if (!series || (Array.isArray(series) && series.length === 0)) {
+            return [];
+        }
+        // Handle symmetrical series with empty above/below arrays
+        if (isSymmetricalSeries(series)) {
+            if ((!series.above || series.above.length === 0) &&
+                (!series.below || series.below.length === 0)) {
+                return [];
+            }
+        }
         // 1. Add missing data points
         const normalizedSeries = yAxisType === 'symmetrical' && isSymmetricalSeries(series)
             ? {
-                above: series.above.map((line) => ({
-                    ...line,
-                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
-                })),
+                above: series.above
+                    ? series.above.map((line) => ({
+                        ...line,
+                        data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
+                    }))
+                    : [],
                 // Convert positive values to negative values
-                below: series.below.map((line) => ({
-                    ...line,
-                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval).map(([timestamp, value]) => [timestamp, value === null ? null : `-${Number(value)}`]),
-                })),
+                below: series.below
+                    ? series.below.map((line) => ({
+                        ...line,
+                        data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval).map(([timestamp, value]) => [
+                            timestamp,
+                            value === null ? null : `-${Number(value)}`,
+                        ]),
+                    }))
+                    : [],
             }
             : series.map((line) => ({
                 ...line,
@@ -177,6 +198,14 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
             return !isNaN(num) && num !== null ? num : null;
         })
             .filter((value) => value !== null));
+        // Guard against empty values array
+        if (values.length === 0) {
+            return {
+                topValue: 100, // Default value for empty charts
+                unitLabel: '',
+                rechartsData: [],
+            };
+        }
         const top = Math.abs(Math.max(...values));
         const bottom = Math.abs(Math.min(...values));
         const maxValue = Math.max(top, bottom);
@@ -196,11 +225,17 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
     // Group series by resource and create color mapping
     const { colorMapping, groupedSeries } = useMemo(() => {
         const mapping = {};
+        // Guard against empty/undefined series
+        if (!series) {
+            return { colorMapping: mapping, groupedSeries: {} };
+        }
         const allSeries = isSymmetricalSeries(series)
-            ? [...series.above, ...series.below]
+            ? [...(series.above || []), ...(series.below || [])]
             : series;
         // Group series by resource
-        const groups = allSeries.reduce((acc, serie) => {
+        const groups = allSeries
+            .filter((serie) => selectedResources.includes(serie.resource))
+            .reduce((acc, serie) => {
             const key = serie.resource;
             if (!acc[key]) {
                 acc[key] = [];
@@ -222,30 +257,30 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
             colorMapping: mapping,
             groupedSeries: groups,
         };
-    }, [series, getColor]);
+    }, [series, getColor, selectedResources]);
     // Format time for display the tick in the x axis
     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: {
-                                value: yAxisTitle,
-                                angle: 90,
-                                position: 'insideRight',
-                                style: {
-                                    textAnchor: 'middle',
+    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("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _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}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), 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: {
+                                    value: yAxisTitle,
+                                    angle: 90,
+                                    position: 'insideRight',
+                                    style: {
+                                        textAnchor: 'middle',
+                                        fill: theme.textSecondary,
+                                        fontSize: fontSize.smaller,
+                                    },
+                                }, domain: yAxisType === 'percentage'
+                                    ? [0, 100]
+                                    : yAxisType === 'symmetrical'
+                                        ? [-topValue, topValue]
+                                        : [0, topValue], axisLine: { stroke: theme.border }, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                },
-                            }, domain: yAxisType === 'percentage'
-                                ? [0, 100]
-                                : yAxisType === 'symmetrical'
-                                    ? [-topValue, topValue]
-                                    : [0, topValue], axisLine: { stroke: theme.border }, tick: {
-                                fill: theme.textSecondary,
-                                fontSize: fontSize.smaller,
-                            }, 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, isAnimationActive: false }, `${title}-${resource}-${serieIndex}`));
-                        }))] }) })] }));
+                                }, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _jsx(Tooltip, { content: (props) => (_jsx(CustomTooltip, { unitLabel: unitLabel, timeFormat: timeFormat, renderTooltip: renderTooltip, tooltipProps: props, isChartActive: isChartActive })) }), 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, isAnimationActive: false }, `${title}-${resource}-${serieIndex}`));
+                            }))] }) }) })] }));
 }

package/dist/components/text/Text.component.d.ts

@@ -1,4 +1,5 @@
 import { CoreUITheme } from '../../style/theme';
+export type TextVariant = 'ChartTitle' | 'Basic' | 'Smaller' | 'Larger' | 'Large';
 type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
 type Props = {
     children: React.ReactNode | string;
@@ -22,7 +23,7 @@ export declare const GentleEmphaseSecondaryText: import("styled-components").Sty
     alignRight?: boolean;
 }, never>;
 export declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    variant?: "ChartTitle" | "Basic" | "Smaller" | "Larger" | "Large";
+    variant?: TextVariant;
     color?: keyof CoreUITheme;
     isEmphazed?: boolean;
     isGentleEmphazed?: boolean;

package/dist/components/text/Text.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAE1D;AACD,eAAO,MAAM,0BAA0B;iBACxB,OAAO;SAUrB,CAAC;AAEF,eAAO,MAAM,IAAI;cACL,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO;YACzD,MAAM,WAAW;iBACZ,OAAO;uBACD,OAAO;SA2C3B,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}
+{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,WAAW,GACnB,YAAY,GACZ,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,CAAC;AAEZ,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAE1D;AACD,eAAO,MAAM,0BAA0B;iBACxB,OAAO;SAUrB,CAAC;AAEF,eAAO,MAAM,IAAI;cACL,WAAW;YACb,MAAM,WAAW;iBACZ,OAAO;uBACD,OAAO;SA2C3B,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}

package/dist/next.d.ts

@@ -15,7 +15,7 @@ export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, BarchartSortFn, BarchartTooltipFn, } from './components/barchartv2/Barchart.component';
 export { ChartTooltip } from './components/barchartv2/ChartTooltip';
-export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegendWrapper, useChartId, } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
 export { CoreUITheme } from './style/theme';

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;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,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,EACL,kBAAkB,EAClB,UAAU,GACX,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/next.js

@@ -15,6 +15,6 @@ export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, } from './components/barchartv2/Barchart.component';
 export { ChartTooltip } from './components/barchartv2/ChartTooltip';
-export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegendWrapper, useChartId, } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/dist/style/theme.js

@@ -121,7 +121,7 @@ export const coreUIAvailableThemes = {
         selectedActive: '#037AFF',
         highlight: '#1A3C75',
         border: '#4A4A4A',
-        buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 100%)',
+        buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 60%)',
         buttonSecondary: 'linear-gradient(130deg, #595A78 0%, #44455F 100%)',
         buttonDelete: '#3D0808',
         infoPrimary: '#8E8EAC',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.169.0",
+  "version": "0.171.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -61,6 +61,7 @@
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "copyfiles": "^2.4.1",
@@ -109,6 +110,7 @@
     "recharts": "^3.0.2",
     "styled-components": "^5.2.1",
     "styled-system": "^5.1.5",
+    "uuid": "^13.0.0",
     "vega": "^5.17.3",
     "vega-embed": "6.0.0",
     "vega-lite": "5.0.0",

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

@@ -24,13 +24,13 @@ import { ChartTooltip } from './ChartTooltip';
 import { UnitRange, useChartData } from './utils';
 
 const CHART_CONSTANTS = {
-  TICK_WIDTH_OFFSET: 5,
+  TICK_WIDTH_OFFSET: 4,
   BAR_SIZE: 12,
   MIN_POINT_SIZE: 3,
   DEFAULT_HEIGHT: 200,
   CHART_MARGIN: {
     left: 0,
-    right: 0,
+    right: -10,
     top: 0,
     bottom: 0,
   },

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

@@ -27,7 +27,7 @@ describe('ChartTooltip', () => {
     successValue: () => screen.queryByText(SUCCESS_VALUE),
     failed: () => screen.queryByText(/Failed/),
     failedValue: () => screen.queryByText(FAILED_VALUE),
-    date: () => screen.queryByText(/Monday, 1 July 2024/),
+    date: () => screen.queryByText(/Monday, 01 July 2024/),
     time: () => screen.queryByText(/00:00/),
   };
   it('should render the ChartTooltip component', () => {

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

@@ -118,6 +118,7 @@ export const ButtonStyled = styled.button<Props>`
       case 'outline':
         return css`
           border: ${spacing.r1} solid transparent;
+          border-color: ${brand.border}; // fallback for linear-gradient button themes
           border-color: ${brand.buttonSecondary};
           background-color: transparent;
           color: ${brand.textPrimary};
@@ -144,7 +145,6 @@ export const ButtonStyled = styled.button<Props>`
             position: absolute;
             inset: 0;
             padding: ${spacing.r1};
-            background-image: ${brand.buttonSecondary};
             border-radius: inherit;
             mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
             mask-composite: exclude;

package/src/lib/components/chartlegend/ChartLegend.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useChartLegend } from './ChartLegendWrapper';
-import { Text } from '../text/Text.component';
+import { Text, TextVariant } from '../text/Text.component';
 import { chartColors } from '../../style/theme';
 import { useCallback } from 'react';
 
@@ -8,6 +8,7 @@ type ChartLegendProps = {
   shape: 'line' | 'rectangle';
   disabled?: boolean;
   direction?: 'horizontal' | 'vertical';
+  legendSize?: TextVariant;
 };
 
 const Legend = styled.div<{ direction: 'horizontal' | 'vertical' }>`
@@ -65,6 +66,7 @@ export const ChartLegend = ({
   shape,
   disabled = false,
   direction = 'horizontal',
+  legendSize = 'Basic',
 }: ChartLegendProps) => {
   const {
     listResources,
@@ -132,7 +134,7 @@ export const ChartLegend = ({
               shape={shape}
               chartColors={chartColors}
             />
-            <Text variant="Basic">{resource}</Text>
+            <Text variant={legendSize}>{resource}</Text>
           </LegendItem>
         );
       })}

package/src/lib/components/chartlegend/ChartLegendWrapper.test.tsx

@@ -0,0 +1,197 @@
+import { render, screen } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import {
+  ChartLegendWrapper,
+  useChartId,
+  useChartLegend,
+} from './ChartLegendWrapper';
+import { ChartLegend } from './ChartLegend';
+import userEvent from '@testing-library/user-event';
+
+describe('ChartLegendWrapper', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const TestChart = ({ seriesNames }: { seriesNames: string[] }) => {
+    const chartId = useChartId();
+    const { register } = useChartLegend();
+
+    useEffect(() => {
+      register(chartId, seriesNames);
+    }, [chartId, register, seriesNames]);
+
+    return <div data-testid={`chart-${chartId}`}>Test Chart</div>;
+  };
+
+  const generateColors = (seriesNames: string[]) => {
+    const colors: Record<string, string> = {};
+    const colorPalette = ['red', 'blue', 'green', 'yellow', 'purple'];
+    seriesNames.forEach((name, index) => {
+      colors[name] = colorPalette[index % colorPalette.length];
+    });
+    return colors;
+  };
+
+  describe('Dynamic Color Generation', () => {
+    it('should generate colors dynamically based on registered series', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU', 'Memory']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    });
+
+    it('should handle multiple charts with overlapping series', () => {
+      const TestChart1 = () => {
+        const chartId = useChartId();
+        const { register } = useChartLegend();
+
+        useEffect(() => {
+          register(chartId, ['CPU', 'Memory']);
+        }, [chartId, register]);
+
+        return <div data-testid={`chart1-${chartId}`}>Test Chart 1</div>;
+      };
+
+      const TestChart2 = () => {
+        const chartId = useChartId();
+        const { register } = useChartLegend();
+
+        useEffect(() => {
+          register(chartId, ['CPU', 'Disk']);
+        }, [chartId, register]);
+
+        return <div data-testid={`chart2-${chartId}`}>Test Chart 2</div>;
+      };
+
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart1 />
+          <TestChart2 />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should show unique series from both charts
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+
+      // All should be selected by default
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Disk selected')).toBeInTheDocument();
+    });
+
+    it('should handle empty series registration', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={[]} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should not crash and should render empty legend
+      expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    });
+
+    it('should maintain selection state when new series are added', () => {
+      const { rerender } = render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Initially only CPU
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+
+      // Select only CPU
+      userEvent.click(screen.getByText('CPU'));
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+
+      // Add more series
+      rerender(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['CPU', 'Memory']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // New series should be added and all should be selected (reset behavior)
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByLabelText('CPU selected')).toBeInTheDocument();
+      expect(screen.getByLabelText('Memory selected')).toBeInTheDocument();
+    });
+
+    it('should work with different chart configurations', () => {
+      render(
+        <ChartLegendWrapper colorSet={generateColors}>
+          <TestChart seriesNames={['Series1', 'Series2', 'Series3']} />
+          <ChartLegend shape="rectangle" direction="vertical" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('Series1')).toBeInTheDocument();
+      expect(screen.getByText('Series2')).toBeInTheDocument();
+      expect(screen.getByText('Series3')).toBeInTheDocument();
+    });
+  });
+
+  describe('Static Color Set', () => {
+    const staticColorSet = {
+      CPU: 'red',
+      Memory: 'blue',
+      Disk: 'green',
+    };
+
+    it('should work with static color sets', () => {
+      render(
+        <ChartLegendWrapper colorSet={staticColorSet}>
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+    });
+
+    it('should ignore registration when using static color sets', () => {
+      render(
+        <ChartLegendWrapper colorSet={staticColorSet}>
+          <TestChart seriesNames={['DifferentSeries']} />
+          <ChartLegend shape="line" />
+        </ChartLegendWrapper>,
+      );
+
+      // Should only show static color set items, not registered series
+      expect(screen.getByText('CPU')).toBeInTheDocument();
+      expect(screen.getByText('Memory')).toBeInTheDocument();
+      expect(screen.getByText('Disk')).toBeInTheDocument();
+      expect(screen.queryByText('DifferentSeries')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should throw error when useChartLegend is used outside wrapper', () => {
+      const TestComponent = () => {
+        useChartLegend();
+        return <div>Test</div>;
+      };
+
+      expect(() => render(<TestComponent />)).toThrow(
+        'useChartLegend must be used within a ChartLegendWrapper',
+      );
+    });
+  });
+});