@scality/core-ui 0.162.0 → 0.163.0

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

@@ -0,0 +1,249 @@
+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 { useTheme } from 'styled-components';
+import { useMetricsTimeSpan } from '../linetemporalchart/MetricTimespanProvider';
+import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
+import styled from 'styled-components';
+import { fontSize, fontWeight } from '../../style/theme';
+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 { Icon } from '../icon/Icon.component';
+import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
+import { DAY_MONTH_ABBREVIATED_HOUR_MINUTE, FormattedDateTime, } from '../date/FormattedDateTime';
+const LineTemporalChartWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  flex: 1;
+`;
+const ChartHeader = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const TooltipContainer = styled.div `
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  padding: ${spacing.r8};
+  border: 1px solid ${(props) => props.theme.border};
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  max-width: 250px;
+`;
+const TooltipTime = styled.div `
+  margin-bottom: ${spacing.r8};
+  color: ${(props) => props.theme.textPrimary};
+  font-size: ${fontSize.smaller};
+  font-weight: ${fontWeight.bold};
+  text-align: center;
+`;
+const TooltipValue = styled.div `
+  font-size: ${fontSize.smaller};
+  margin-top: 4px;
+  color: ${(props) => props.theme.textSecondary};
+  display: flex;
+  align-items: flex-start;
+`;
+const TooltipLegend = styled.div `
+  width: 12px;
+  height: 3px;
+  background-color: ${(props) => props.color};
+  margin-right: 8px;
+  flex-shrink: 0;
+  margin-top: 8px;
+`;
+const TooltipContent = styled.div `
+  display: flex;
+  min-width: 0;
+  flex: 1;
+`;
+const TooltipName = styled.div `
+  margin-right: 4px;
+  word-wrap: break-word;
+  word-break: break-word;
+  justify-content: flex-start;
+`;
+const TooltipInstanceValue = styled.div `
+  justify-content: flex-end;
+`;
+const CustomTooltip = ({ active, payload, label, unitLabel, }) => {
+    if (!active || !payload || !payload.length || !label)
+        return null;
+    // We can't use the default itemSorter method because it's a custom tooltip.
+    // Sort the payload here instead
+    const sortedPayload = [...payload].sort((a, b) => {
+        const aValue = Number(a.value);
+        const bValue = Number(b.value);
+        if (aValue >= 0 && bValue >= 0) {
+            return bValue - aValue; // Higher positive values first
+        }
+        if (aValue < 0 && bValue < 0) {
+            return bValue - aValue; // Lower negative values first
+        }
+        return bValue - aValue; // Positives before negatives
+    });
+    return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsx(TooltipLegend, { color: entry.color }), _jsxs(TooltipContent, { children: [_jsx(TooltipName, { children: entry.name }), _jsx(TooltipInstanceValue, { children: isNaN(Number(entry.value))
+                                    ? '-'
+                                    : `${Number(entry.value).toFixed(2)}${unitLabel}` })] })] }, index)))] }));
+};
+const isSymmetricalSeries = (series) => {
+    return 'above' in series && 'below' in series;
+};
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, unitRange, isLoading = false, yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
+    const theme = useTheme();
+    const { frequency, duration } = useMetricsTimeSpan();
+    const { getColor } = useChartLegend();
+    const chartRef = useRef(null);
+    const chartData = useMemo(() => {
+        // 1. Add missing data points
+        const normalizedSeries = yAxisType === 'symmetrical' && isSymmetricalSeries(series)
+            ? {
+                above: series.above.map((line) => ({
+                    ...line,
+                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, frequency),
+                })),
+                // Convert positive values to negative values
+                below: series.below.map((line) => ({
+                    ...line,
+                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, frequency).map(([timestamp, value]) => [timestamp, value === null ? null : `-${Number(value)}`]),
+                })),
+            }
+            : series.map((line) => ({
+                ...line,
+                data: addMissingDataPoint(line.data, startingTimeStamp, duration, frequency),
+            }));
+        // 2. Convert directly to Recharts format
+        // Initialize an object to hold data points by timestamp
+        const dataPointsByTime = {};
+        const seriesToProcess = yAxisType === 'symmetrical' && isSymmetricalSeries(normalizedSeries)
+            ? [...normalizedSeries.above, ...normalizedSeries.below]
+            : normalizedSeries;
+        seriesToProcess.forEach((serie) => {
+            const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
+            serie.data.forEach((point) => {
+                const timestamp = typeof point[0] === 'number' ? point[0] * 1000 : Number(point[0]);
+                const value = point[1];
+                // Initialize this timestamp if it doesn't exist
+                if (!dataPointsByTime[timestamp]) {
+                    dataPointsByTime[timestamp] = { timestamp };
+                }
+                // Add this metric's value to the data point, and convert the value to a number if it's a string
+                dataPointsByTime[timestamp][label] =
+                    typeof value === 'string' ? Number(value) : value;
+            });
+        });
+        // Convert object to array for Recharts
+        return Object.values(dataPointsByTime).sort((a, b) => a.timestamp - b.timestamp);
+    }, [series, startingTimeStamp, duration, frequency, yAxisType]);
+    // Calculate 5 perfectly evenly spaced ticks
+    const xAxisTicks = useMemo(() => {
+        if (!chartData || chartData.length === 0)
+            return [];
+        const timestamps = chartData.map((d) => d.timestamp);
+        const minTimestamp = Math.min(...timestamps);
+        const maxTimestamp = Math.max(...timestamps);
+        // Calculate 5 perfectly evenly spaced ticks
+        const timeRange = maxTimestamp - minTimestamp;
+        const interval = timeRange / 4; // 4 intervals create 5 points
+        const exactEvenTicks = [
+            minTimestamp,
+            minTimestamp + interval,
+            minTimestamp + interval * 2,
+            minTimestamp + interval * 3,
+            maxTimestamp,
+        ];
+        // Return perfectly even ticks (guaranteed to be evenly divided)
+        return exactEvenTicks;
+    }, [chartData]);
+    // 3. Transform the data base on the valuebase
+    const { topValue, unitLabel, rechartsData } = useMemo(() => {
+        if (yAxisType === 'percentage')
+            return {
+                topValue: 100,
+                unitLabel: '%',
+                rechartsData: chartData,
+            };
+        const values = chartData.flatMap((dataPoint) => Object.entries(dataPoint)
+            .filter(([key]) => key !== 'timestamp')
+            .map(([_, value]) => {
+            const num = typeof value === 'string' ? Number(value) : (value !== null && value !== void 0 ? value : Infinity);
+            return !isNaN(num) && num !== null ? num : null;
+        })
+            .filter((value) => value !== null));
+        const top = Math.abs(Math.max(...values));
+        const bottom = Math.abs(Math.min(...values));
+        const maxValue = Math.max(top, bottom);
+        const { valueBase, unitLabel } = getUnitLabel(unitRange !== null && unitRange !== void 0 ? unitRange : [], maxValue);
+        const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+        const rechartsData = chartData.map((dataPoint) => {
+            const normalizedDataPoint = { ...dataPoint };
+            Object.entries(dataPoint).forEach(([key, value]) => {
+                if (key !== 'timestamp' && typeof value === 'number') {
+                    normalizedDataPoint[key] = value / valueBase;
+                }
+            });
+            return normalizedDataPoint;
+        });
+        return { topValue, unitLabel, rechartsData };
+    }, [chartData, yAxisType, unitRange]);
+    // Group series by resource and create color mapping
+    const { colorMapping, groupedSeries } = useMemo(() => {
+        const mapping = {};
+        const allSeries = isSymmetricalSeries(series)
+            ? [...series.above, ...series.below]
+            : series;
+        // Group series by resource
+        const groups = allSeries.reduce((acc, serie) => {
+            const key = serie.resource;
+            if (!acc[key]) {
+                acc[key] = [];
+            }
+            acc[key].push(serie);
+            return acc;
+        }, {});
+        // Get colors from the ChartLegend context
+        Object.keys(groups).forEach((resource) => {
+            const color = getColor(resource);
+            if (color) {
+                mapping[resource] = color;
+            }
+            else {
+                console.warn(`Color not defined for resource: ${resource}`);
+            }
+        });
+        return {
+            colorMapping: mapping,
+            groupedSeries: groups,
+        };
+    }, [series, getColor]);
+    // Format time for display the tick in the x axis
+    const formatTime = useMemo(() => (timestamp) => {
+        const date = new Date(timestamp);
+        return DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(date).replace(',', '');
+    }, []);
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatTime, tickCount: 5, tick: {
+                                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,
+                            }, 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) => {
+                            const label = serie.getTooltipLabel(serie.metricPrefix, serie.resource);
+                            return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false }, `${title}-${resource}-${serieIndex}`));
+                        }))] }) })] }));
+}

package/dist/components/selectv2/Selectv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,yBAAyB,EACzB,aAAa,EAEb,SAAS,EAEV,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,aAAa,EACb,cAAc,EAEf,MAAM,cAAc,CAAC;AAQtB,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAuOD,MAAM,WAAW,SAAS,CACxB,UAAU,SAAS,cAAc,EACjC,OAAO,SAAS,OAAO,EACvB,SAAS,SAAS,aAAa,CAAC,UAAU,CAAC;IAE3C,MAAM,EAAE,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAWF,KAAK,mBAAmB,CACtB,UAAU,SAAS,cAAc,EACjC,OAAO,SAAS,OAAO,EACvB,SAAS,SAAS,aAAa,CAAC,UAAU,CAAC,IACzC,yBAAyB,CAC3B,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CACvE,GAAG;IACF,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,CAAC;AAkOF,eAAO,MAAM,MAAM,6EAA0B,CAAC"}
+{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,yBAAyB,EACzB,aAAa,EAEb,SAAS,EAIV,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,aAAa,EACb,cAAc,EAEf,MAAM,cAAc,CAAC;AAQtB,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAKlD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAuOD,MAAM,WAAW,SAAS,CACxB,UAAU,SAAS,cAAc,EACjC,OAAO,SAAS,OAAO,EACvB,SAAS,SAAS,aAAa,CAAC,UAAU,CAAC;IAE3C,MAAM,EAAE,WAAW,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAWF,KAAK,mBAAmB,CACtB,UAAU,SAAS,cAAc,EACjC,OAAO,SAAS,OAAO,EACvB,SAAS,SAAS,aAAa,CAAC,UAAU,CAAC,IACzC,yBAAyB,CAC3B,WAAW,GAAG,aAAa,CAAC,SAAS,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CACvE,GAAG;IACF,MAAM,EAAE,OAAO,MAAM,CAAC;CACvB,CAAC;AAwOF,eAAO,MAAM,MAAM,6EAA0B,CAAC"}

package/dist/components/selectv2/Selectv2.component.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState, useEffect, useRef, forwardRef, useImperativeHandle, } from 'react';
+import { createContext, useContext, useState, useEffect, useRef, forwardRef, useImperativeHandle, useMemo, useCallback, } from 'react';
 import { ScrollbarWrapper, Tooltip } from '../../index';
 import { components, } from 'react-select';
 import { Icon } from '../icon/Icon.component';
@@ -284,19 +284,24 @@ function SelectBox({ placeholder = 'Select...', disabled = false, value, onChang
 }
 const SelectWithOptionContext = forwardRef((props, ref) => {
     const [options, setOptions] = useState({});
-    const register = (option) => {
+    const register = useCallback((option) => {
         setOptions((prevOptions) => ({
             ...prevOptions,
             [option.value]: option,
         }));
-    };
-    const unregister = (value) => {
+    }, []);
+    const unregister = useCallback((value) => {
         setOptions((prevOptions) => {
             const { [value]: _, ...rest } = prevOptions;
             return rest;
         });
-    };
-    return (_jsx(OptionContext.Provider, { value: { options, register, unregister }, children: _jsxs(_Fragment, { children: [_jsx(SelectBox, { ...props, selectRef: ref }), props.children] }) }));
+    }, []);
+    const contextValue = useMemo(() => ({
+        options,
+        register,
+        unregister
+    }), [options, register, unregister]);
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsxs(_Fragment, { children: [_jsx(SelectBox, { ...props, selectRef: ref }), props.children] }) }));
 });
 SelectWithOptionContext.displayName = 'Select';
 SelectWithOptionContext.Option = Option;

package/dist/components/steppers/Stepper.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/steppers/Stepper.component.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC/C,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CAChD;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;KAC1D;CACF;AAMD,eAAO,MAAM,UAAU,EAAE,UASxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAgCrB,CAAC"}
+{"version":3,"file":"Stepper.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/steppers/Stepper.component.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC/C,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CAChD;AACD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,cAAc,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC,CAAC;KAC1D;CACF;AAMD,eAAO,MAAM,UAAU,EAAE,UASxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,OAkCrB,CAAC"}

package/dist/components/steppers/Stepper.component.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference path="./Stepper.component.d.ts" />
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
 import { Steppers } from './Steppers.component';
 import { Box } from '../box/Box';
 if (!window.StepperContext) {
@@ -17,15 +17,16 @@ export const useStepper = (index, steps) => {
 };
 export const Stepper = ({ steps }) => {
     const [stepProps, setStepProps] = useState({ step: 0, props: {} });
-    const next = (props) => {
-        setStepProps({ step: stepProps.step + 1, props });
-    };
-    const prev = (props) => {
-        setStepProps({ step: stepProps.step - 1, props });
-    };
+    const next = useCallback((props) => {
+        setStepProps(current => ({ step: current.step + 1, props }));
+    }, []);
+    const prev = useCallback((props) => {
+        setStepProps(current => ({ step: current.step - 1, props }));
+    }, []);
     const { Component } = steps[stepProps.step];
     const StepperContext = window.StepperContext;
-    return (_jsx(StepperContext.Provider, { value: { next, prev }, children: _jsxs(Box, { display: "flex", gap: 32, flex: 1, height: "100%", children: [_jsx(Steppers, { activeStep: stepProps.step, steps: steps.map((step) => {
+    const stepperValue = useMemo(() => ({ next, prev }), [next, prev]);
+    return (_jsx(StepperContext.Provider, { value: stepperValue, children: _jsxs(Box, { display: "flex", gap: 32, flex: 1, height: "100%", children: [_jsx(Steppers, { activeStep: stepProps.step, steps: steps.map((step) => {
                         return {
                             title: step.label,
                         };

package/dist/components/toast/ToastProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuC,MAAM,OAAO,CAAC;AACvE,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,YAAY,uDAExB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAgB5C,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAMpB,CAAC"}
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/ToastProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6D,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,CAAC,UAAU,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,YAAY,uDAExB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAsB5C,CAAC;AAEF,eAAO,MAAM,QAAQ,wBAOpB,CAAC"}

package/dist/components/toast/ToastProvider.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { Toast } from './Toast.component';
 export const ToastContext = createContext(undefined);
 export const ToastProvider = ({ children }) => {
     const [toastProps, setToastProps] = useState(null);
-    const showToast = (toastProps) => {
-        setToastProps(toastProps);
-    };
-    return (_jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toastProps && (_jsx(Toast, { ...toastProps, onClose: () => setToastProps(null) }))] }));
+    const toastCtxValue = useMemo(() => ({ showToast: setToastProps }), []);
+    const closeToast = useCallback(() => setToastProps(null), []);
+    return (_jsxs(ToastContext.Provider, { value: toastCtxValue, children: [children, toastProps && (_jsx(Toast, { ...toastProps, onClose: closeToast }))] }));
 };
 export const useToast = () => {
     const context = useContext(ToastContext);

package/dist/components/vegachartv2/SyncedCursorCharts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SyncedCursorCharts.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachartv2/SyncedCursorCharts.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,yBAAyB;aAC3B,MAAM;gBACH,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;SACxB,CAAC;AAChB,eAAO,MAAM,UAAU,QAAO;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,GAAG,IAQH,CAAC;AACF,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,2CAYzE"}
+{"version":3,"file":"SyncedCursorCharts.d.ts","sourceRoot":"","sources":["../../../src/lib/components/vegachartv2/SyncedCursorCharts.tsx"],"names":[],"mappings":"AACA,eAAO,MAAM,yBAAyB;aAC3B,MAAM;gBACH,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI;SACxB,CAAC;AAChB,eAAO,MAAM,UAAU,QAAO;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,GAAG,IAQH,CAAC;AACF,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,2CAUzE"}

package/dist/components/vegachartv2/SyncedCursorCharts.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, createContext, useContext } from 'react';
+import { useState, createContext, useContext, useMemo } from 'react';
 export const SyncedCursorChartsContext = createContext(null);
 export const useCursorX = () => {
     const contextValue = useContext(SyncedCursorChartsContext);
@@ -10,8 +10,6 @@ export const useCursorX = () => {
 };
 export function SyncedCursorCharts({ children }) {
     const [cursorX, setCursorX] = useState(0);
-    return (_jsx(SyncedCursorChartsContext.Provider, { value: {
-            cursorX,
-            setCursorX,
-        }, children: children }));
+    const contextValue = useMemo(() => ({ cursorX, setCursorX }), [cursorX]);
+    return (_jsx(SyncedCursorChartsContext.Provider, { value: contextValue, children: children }));
 }

package/dist/index.d.ts

@@ -61,4 +61,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 { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
 //# 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

@@ -61,3 +61,4 @@ 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 { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/dist/next.d.ts

@@ -14,4 +14,5 @@ export { Box } from './components/box/Box';
 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';
 //# 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"}
+{"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"}

package/dist/next.js

@@ -14,3 +14,4 @@ export { Box } from './components/box/Box';
 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';

package/dist/style/theme.d.ts

@@ -176,4 +176,5 @@ export declare const navbarHeight = "3rem";
 export declare const navbarItemWidth = "4.286rem";
 export declare const sidebarItemHeight: string;
 export declare const sidebarWidth: string;
+export declare const lineTimeSeriesColorRange: string[];
 //# sourceMappingURL=theme.d.ts.map

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

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

package/dist/style/theme.js

@@ -1,3 +1,4 @@
+import { lighten, darken } from 'polished';
 //== Colors
 export const hotPink = '#E40046';
 export const pink = '#EB4962';
@@ -249,3 +250,30 @@ export const navbarItemWidth = '4.286rem';
 //sidebar
 export const sidebarItemHeight = spacing.sp40;
 export const sidebarWidth = spacing.sp40;
+// We use 8 main color from the palette and decline them (lighter/ darker) when we have more than 8 datasets
+export const lineTimeSeriesColorRange = [
+    lineColor1,
+    lineColor2,
+    lineColor3,
+    lineColor4,
+    lineColor5,
+    lineColor6,
+    lineColor7,
+    lineColor8,
+    lighten(0.3, lineColor1),
+    lighten(0.3, lineColor2),
+    lighten(0.3, lineColor3),
+    lighten(0.3, lineColor4),
+    lighten(0.3, lineColor5),
+    lighten(0.3, lineColor6),
+    lighten(0.3, lineColor7),
+    lighten(0.3, lineColor8),
+    darken(0.2, lineColor1),
+    darken(0.2, lineColor2),
+    darken(0.2, lineColor3),
+    darken(0.2, lineColor4),
+    darken(0.3, lineColor5),
+    darken(0.3, lineColor6),
+    darken(0.3, lineColor7),
+    darken(0.3, lineColor8),
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.162.0",
+  "version": "0.163.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -108,7 +108,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@fortawesome/react-fontawesome": "^0.2.3",
     "@js-temporal/polyfill": "^0.4.4",
     "@storybook/preview-api": "^8.3.6",
     "downshift": "^7.0.5",

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

@@ -1,8 +1,7 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React, { useState } from 'react';
 import { Accordion } from './Accordion.component';
 import userEvent from '@testing-library/user-event';
-import { QueryClient, QueryClientProvider } from 'react-query';
 
 describe('Accordion', () => {
   const selectors = {
@@ -11,20 +10,18 @@ describe('Accordion', () => {
     accordionContent: () => screen.queryByText(/Test content/i),
   };
   const SUT = ({ open = false }) => {
-    const queryClient = new QueryClient();
     return (
-      <QueryClientProvider client={queryClient}>
-        <Accordion title="Advanced Testings" id="test-accordion" open={open}>
-          <div>Test content</div>
-        </Accordion>
-      </QueryClientProvider>
+      <Accordion title="Advanced Testings" id="test-accordion" open={open}>
+        <div>Test content</div>
+      </Accordion>
     );
   };
   const renderAccordion = (open = false) => {
     render(<SUT open={open} />);
   };
-  it('should render the Accordion component with title and content', () => {
+  it('should render the Accordion component with title and content', async () => {
     renderAccordion();
+    await waitFor(() => screen.findByRole('img', { hidden: true }));
 
     const accordionToggle = selectors.accordionToggle();
     expect(accordionToggle).toBeInTheDocument();
@@ -54,7 +51,6 @@ describe('Accordion', () => {
   });
 
   it('should toggle the content when open prop changes', () => {
-    const queryClient = new QueryClient();
     const TestWrapper = () => {
       const [isOpen, setisOpen] = useState(false);
       return (
@@ -65,11 +61,7 @@ describe('Accordion', () => {
       );
     };
 
-    render(
-      <QueryClientProvider client={queryClient}>
-        <TestWrapper />
-      </QueryClientProvider>,
-    );
+    render(<TestWrapper />);
 
     userEvent.click(screen.getByRole('button', { name: /Test button/i }));
     expect(selectors.accordionContent()).toBeInTheDocument();