@scality/core-ui 0.193.0 → 0.194.0

package/dist/components/charts/barchart/Barchart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Barchart.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/barchart/Barchart.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiB7D,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,YAAY,GAAG,QAAQ,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,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,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC,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;AAIF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CA4JvE,CAAC"}
+{"version":3,"file":"Barchart.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/barchart/Barchart.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiB7D,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,YAAY,GAAG,QAAQ,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,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,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC,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;AAIF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,YAAY,SAAS,aAAa,CAAC,CAAC,CAAC,4CA6KvE,CAAC"}

package/dist/components/charts/barchart/Barchart.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef } from 'react';
+import { useState, useRef, useMemo, useCallback } from 'react';
 import { Bar, BarChart as RechartsBarChart, CartesianGrid, Tooltip, XAxis, YAxis, } from 'recharts';
 import { useTheme } from 'styled-components';
 import { Stack } from '../../../spacing';
 import { chartColors, fontSize } from '../../../style/theme';
 import { useChartLegend } from '../legend/ChartLegendWrapper';
 import { BarchartTooltip } from './BarchartTooltip';
-import { formatToISONumber, getTicks } from '../common/chartUtils';
+import { formatTickValue, getTicks } from '../common/chartUtils';
 import { useChartData } from './Barchart.utils';
 import { ChartHeader, ChartError, ChartLoading, CustomTick, StyledResponsiveContainer, } from '../common/SharedComponents';
 const CHART_CONSTANTS = {
@@ -29,28 +29,38 @@ export const Barchart = (props) => {
     const chartRef = useRef(null);
     const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = { type: 'category' }, unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
     // Create colorSet from ChartLegendWrapper
-    const colorSet = bars === null || bars === void 0 ? void 0 : bars.reduce((acc, bar) => {
+    const colorSet = useMemo(() => bars === null || bars === void 0 ? void 0 : bars.reduce((acc, bar) => {
         const color = getColor(bar.label);
         if (color) {
             acc[bar.label] = color;
         }
         return acc;
-    }, {});
+    }, {}), [bars, getColor]);
     const { rechartsBars, unitLabel, roundReferenceValue, rechartsData, topDomain, } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
     const titleWithUnit = unitLabel ? `${title} (${unitLabel})` : title;
-    return (_jsxs(Stack, { direction: "vertical", style: { gap: '0' }, children: [_jsx(ChartHeader, { title: titleWithUnit, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(ChartError, { height: height })) : isLoading ? (_jsx(ChartLoading, { height: height })) : (_jsx(StyledResponsiveContainer, { ref: chartRef, width: "100%", height: height, children: _jsxs(RechartsBarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
-                        ? type.gap === 0
-                            ? undefined
-                            : CHART_CONSTANTS.BAR_SIZE
-                        : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), rechartsBars.map((bar) => {
-                            const { fill, dataKey, stackId } = bar;
-                            return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, isAnimationActive: false, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
-                        }), _jsx(YAxis, { interval: 0, domain: [0, topDomain], ticks: getTicks(roundReferenceValue, false), tickFormatter: (value) => formatToISONumber(value), axisLine: { stroke: theme.border }, tick: {
-                                fill: theme.textSecondary,
-                                fontSize: fontSize.smaller,
-                            }, orientation: "right" }), _jsx(XAxis, { dataKey: "category", tick: (props) => (_jsx(CustomTick, { ...props, type: type, tickWidthOffset: CHART_CONSTANTS.TICK_WIDTH_OFFSET })), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
-                                stroke: theme.border,
-                            }, axisLine: {
-                                stroke: theme.border,
-                            } }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel, chartContainerRef: chartRef })), cursor: false })] }) }))] }));
+    const tickFormatter = useCallback((value) => formatTickValue(value, roundReferenceValue), [roundReferenceValue]);
+    const renderChartContent = () => {
+        if (isError || (!bars && !isLoading)) {
+            return _jsx(ChartError, { height: height });
+        }
+        if (isLoading) {
+            return _jsx(ChartLoading, { height: height });
+        }
+        return (_jsx(StyledResponsiveContainer, { ref: chartRef, width: "100%", height: height, children: _jsxs(RechartsBarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
+                    ? type.gap === 0
+                        ? undefined
+                        : CHART_CONSTANTS.BAR_SIZE
+                    : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), rechartsBars.map((bar) => {
+                        const { fill, dataKey, stackId } = bar;
+                        return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, isAnimationActive: false, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
+                    }), _jsx(YAxis, { interval: 0, domain: [0, topDomain], ticks: getTicks(roundReferenceValue, false), tickFormatter: tickFormatter, axisLine: { stroke: theme.border }, tick: {
+                            fill: theme.textSecondary,
+                            fontSize: fontSize.smaller,
+                        }, orientation: "right" }), _jsx(XAxis, { dataKey: "category", tick: (props) => (_jsx(CustomTick, { ...props, type: type, tickWidthOffset: CHART_CONSTANTS.TICK_WIDTH_OFFSET })), type: "category", interval: 0, allowDataOverflow: true, tickLine: {
+                            stroke: theme.border,
+                        }, axisLine: {
+                            stroke: theme.border,
+                        } }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel, chartContainerRef: chartRef })), cursor: false })] }) }));
+    };
+    return (_jsxs(Stack, { direction: "vertical", style: { gap: '0' }, children: [_jsx(ChartHeader, { title: titleWithUnit, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), renderChartContent()] }));
 };

package/dist/components/charts/common/chartUtils.d.ts

@@ -48,7 +48,7 @@ export declare const normalizeChartDataWithUnits: <T extends Record<string, any>
  * Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
  * Used by LineTimeSerieChart and Sparkline
  *
- * @param orginalValues - The array of the data points are already sorted according to the time series
+ * @param originalValues - The array of the data points are already sorted according to the time series
  * @param startingTimeStamp - The starting timestamp in seconds
  * @param sampleDuration - The time span value in seconds
  * @param sampleInterval - The time difference between two data points in seconds
@@ -87,5 +87,10 @@ export declare const formatXAxisDate: (duration: number) => "time" | "day-month-
  * @returns Formatted string type
  */
 export declare const getTooltipDateFormat: (duration: number) => TooltipDateFormat;
-export declare const formatToISONumber: (value: number) => string;
+/**
+ * Formats a tick value for chart Y-axis display.
+ * - Fixed decimals for alignment when topValue < 1 (e.g., 0.1 → 0.10)
+ * - Compact notation for large values (>= 10k)
+ */
+export declare const formatTickValue: (value: number, topValue: number) => string;
 //# sourceMappingURL=chartUtils.d.ts.map

package/dist/components/charts/common/chartUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chartUtils.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/common/chartUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAMrC,eAAO,MAAM,eAAe;;CAAwB,CAAC;AAMrD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,UAAW,MAAM,KAAG,MA+BtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,aAAc,MAAM,iBAAiB,OAAO,aAmBhE,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,CAyCA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QACjE,CAAC,EAAE,YACC,MAAM,aACL,SAAS,GAAG,SAAS,cACpB,MAAM,KACjB;IACD,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,EAAE,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CAgCnB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EAClD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAoEpC;AACD;;;;;;;;;;;;;;;;;;GAkBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,aAChB,MAAM,KACf,MAAM,GAAG,uBAAuB,GAAG,sBAQrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,iBAUxD,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,MAAM,KAAG,MAKjD,CAAC"}
+{"version":3,"file":"chartUtils.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/common/chartUtils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAOrC,eAAO,MAAM,eAAe;;CAAwB,CAAC;AA+BrD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,UAAW,MAAM,KAAG,MA+BtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,aACT,MAAM,iBACD,OAAO,KACrB,MAAM,EAmBR,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/B,CAyCA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QACjE,CAAC,EAAE,YACC,MAAM,aACL,SAAS,GAAG,SAAS,cACpB,MAAM,KACjB;IACD,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,EAAE,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CAgCnB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EAClD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CA4EpC;AACD;;;;;;;;;;;;;;;;;;GAkBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,eAAe,aAChB,MAAM,KACf,MAAM,GAAG,uBAAuB,GAAG,sBAQrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,iBAUxD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,eAAe,UAAW,MAAM,YAAY,MAAM,KAAG,MAOjE,CAAC"}

package/dist/components/charts/common/chartUtils.js

@@ -1,4 +1,5 @@
 import { NAN_STRING } from '../../constants';
+import { formatISONumber } from '../../../utils';
 /* -------------------------------------------------------------------------- */
 /*                                  constants                                 */
 /* -------------------------------------------------------------------------- */
@@ -6,6 +7,28 @@ export const maxWidthTooltip = { maxWidth: '20rem' };
 /* -------------------------------------------------------------------------- */
 /*                               utils functions                              */
 /* -------------------------------------------------------------------------- */
+/**
+ * Get the appropriate rounding increment based on value magnitude.
+ * - For values < 5 * magnitude: use half magnitude (finer granularity)
+ * - For values >= 5 * magnitude: use full magnitude
+ *
+ * Examples:
+ * - 150 → increment 50 (150 < 500, so use 100/2)
+ * - 550 → increment 100 (550 >= 500, so use 100)
+ * - 1500 → increment 500 (1500 < 5000, so use 1000/2)
+ * - 5500 → increment 1000 (5500 >= 5000, so use 1000)
+ */
+const getIncrement = (value) => {
+    if (value < 10)
+        return 1;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+    // If value is in lower half of magnitude range, use half magnitude
+    if (value < 5 * magnitude) {
+        return magnitude / 2;
+    }
+    // Otherwise use full magnitude
+    return magnitude;
+};
 /**
  * Round a value to a nice number for chart display
  * Used by Barchart and LineTimeSerieChart for Y-axis scaling
@@ -16,23 +39,24 @@ export const getRoundReferenceValue = (value) => {
     // Buffer the value by 10% to avoid being too close to the edge of the chart
     const bufferedValue = value * 1.1;
     if (value >= 10) {
-        const remainder = value % 10;
-        const incremented = value + (10 - remainder);
-        // If the remainder is less than 5, round down to the nearest 10
-        if (remainder < 5) {
-            return value - remainder;
+        const increment = getIncrement(value);
+        const remainder = value % increment;
+        const roundedDown = value - remainder;
+        const roundedUp = roundedDown + increment;
+        // If remainder is less than half the increment, round down
+        if (remainder < increment / 2) {
+            return roundedDown;
         }
-        // If incrementing would exceed the buffered max, also round down
-        if (incremented > bufferedValue) {
-            return value - remainder;
+        // If rounding up would exceed the buffered max, round down
+        if (roundedUp > bufferedValue) {
+            return roundedDown;
         }
-        // Otherwise, round up to the next 10
-        return incremented;
+        // Otherwise, round up
+        return roundedUp;
     }
+    // For values < 10, use the magnitude-based approach
     const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
     const remainder = bufferedValue % magnitude;
-    // Round to nice numbers based on normalized value
-    // appearance for small values
     return remainder === 0 ? bufferedValue : bufferedValue - remainder;
 };
 /**
@@ -131,7 +155,7 @@ export const normalizeChartDataWithUnits = (data, maxValue, unitRange, excludeKe
  * Missing data points are only added when the gap between consecutive data points is bigger than 2 intervals
  * Used by LineTimeSerieChart and Sparkline
  *
- * @param orginalValues - The array of the data points are already sorted according to the time series
+ * @param originalValues - The array of the data points are already sorted according to the time series
  * @param startingTimeStamp - The starting timestamp in seconds
  * @param sampleDuration - The time span value in seconds
  * @param sampleInterval - The time difference between two data points in seconds
@@ -146,9 +170,13 @@ export function addMissingDataPoint(originalValues, startingTimeStamp, sampleDur
         sampleInterval <= 0) {
         return [];
     }
-    // If there are no original values, return empty array
+    // If there are no original values, generate placeholder timestamps for the entire duration
     if (originalValues.length === 0) {
-        return [];
+        const newValues = [];
+        for (let i = startingTimeStamp; i < startingTimeStamp + sampleDuration; i += sampleInterval) {
+            newValues.push([i, NAN_STRING]);
+        }
+        return newValues;
     }
     const newValues = [];
     // add missing data points for the starting time
@@ -235,9 +263,16 @@ export const getTooltipDateFormat = (duration) => {
         return 'day-month-abbreviated-year-hour-minute';
     }
 };
-export const formatToISONumber = (value) => {
-    const formattedValue = new Intl.NumberFormat('fr-FR')
-        .format(value)
-        .replace(',', '.');
-    return formattedValue;
+/**
+ * Formats a tick value for chart Y-axis display.
+ * - Fixed decimals for alignment when topValue < 1 (e.g., 0.1 → 0.10)
+ * - Compact notation for large values (>= 10k)
+ */
+export const formatTickValue = (value, topValue) => {
+    const decimals = topValue < 1 ? Math.ceil(-Math.log10(topValue)) + 1 : 2;
+    return formatISONumber(value, {
+        decimals,
+        fixedDecimals: topValue < 1,
+        compact: topValue >= 10000,
+    });
 };

package/dist/components/charts/index.d.ts

@@ -1,7 +1,7 @@
 export { Barchart } from './barchart/Barchart';
 export type { BarchartProps, BarchartBars, BarchartTooltipFn, BarchartSortFn, Point, } from './barchart/Barchart';
 export { LineTimeSerieChart } from './linetimeseries/LineTimeSerieChart';
-export type { LineChartProps, Serie, } from './linetimeseries/LineTimeSerieChart';
+export type { LineChartProps, Serie, } from './linetimeseries/LineTimeSerieChart.types';
 export { GlobalHealthBar } from './globalhealthbar/GlobalHealthBar';
 export type { GlobalHealthProps } from './globalhealthbar/GlobalHealthBar';
 export type { Alert } from './globalhealthbar/GlobalHealthBar.hooks';

package/dist/components/charts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,YAAY,EACV,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,KAAK,GACN,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,KAAK,GACN,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,YAAY,EAAE,KAAK,EAAE,MAAM,yCAAyC,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,cAAc,GACf,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,EAC1B,kBAAkB,GACnB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,sBAAsB,EACtB,QAAQ,EACR,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charts/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,YAAY,EACV,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,cAAc,EACd,KAAK,GACN,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,KAAK,GACN,MAAM,2CAA2C,CAAC;AAEnD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,YAAY,EAAE,KAAK,EAAE,MAAM,yCAAyC,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,cAAc,GACf,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,EAC1B,kBAAkB,GACnB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,sBAAsB,EACtB,QAAQ,EACR,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/charts/linetimeseries/LineTimeSerieChart.d.ts

@@ -1,55 +1,20 @@
-import React from 'react';
-import { TooltipContentProps } from 'recharts';
-export type Serie = {
-    resource: string;
-    data: [number, number | string | null][];
-    getTooltipLabel: (metricPrefix?: string, resource?: string) => string;
-    metricPrefix?: string;
-    isLineDashed?: boolean;
-};
-type NonSymmetricalChartSerie = {
-    yAxisType?: 'default' | 'percentage';
-    series: Serie[] | undefined;
-};
-type SymmetricalChartSerie = {
-    yAxisType: 'symmetrical';
-    series: {
-        above: Serie[] | undefined;
-        below: Serie[] | undefined;
-    } | undefined;
-};
-export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie) & {
-    title: string;
-    height: number;
-    startingTimeStamp: number;
-    interval: number;
-    duration: number;
-    unitRange?: {
-        threshold: number;
-        label: string;
-    }[];
-    syncId?: string;
-    isLoading?: boolean;
-    /**
-     * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
-     * If you want to display the date only, you can set it to 'date' which is like 2025-09-01
-     * This will affect the format of the tooltip as well
-     */
-    timeFormat?: 'date-time' | 'date';
-    yAxisTitle?: string;
-    helpText?: string;
-    renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, duration?: number) => React.ReactNode;
-};
+import { LineChartProps } from './LineTimeSerieChart.types';
 /**
- * Props for LineTimeSerieChart component
- * @param series - The data series to display
+ * LineTimeSerieChart - A time series line chart component
+ *
+ * @param series - The data series to display (can be symmetrical with above/below)
  * @param title - The title of the chart
  * @param height - The height of the chart in pixels
  * @param startingTimeStamp - Starting timestamp in seconds
  * @param interval - Interval between data points in seconds
  * @param duration - Total duration of the chart in seconds
- *
+ * @param unitRange - Configuration for automatic unit scaling
+ * @param syncId - ID to synchronize multiple charts
+ * @param isLoading - Whether to show loading state
+ * @param yAxisType - Type of Y-axis: 'default', 'percentage', or 'symmetrical'
+ * @param yAxisTitle - Label for the Y-axis
+ * @param helpText - Help text shown as tooltip
+ * @param renderTooltip - Custom tooltip renderer
  */
-export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, syncId, renderTooltip, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, yAxisType, yAxisTitle, helpText, syncId, renderTooltip, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LineTimeSerieChart.d.ts.map

package/dist/components/charts/linetimeseries/LineTimeSerieChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineTimeSerieChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/linetimeseries/LineTimeSerieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EAML,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAiClB,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;CAC7B,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EACF;QACE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;KAC5B,GACD,SAAS,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CACd,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,EACjD,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,MAAM,KACd,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AAiHF;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,EACb,GAAG,IAAI,EACR,EAAE,cAAc,2CA2VhB"}
+{"version":3,"file":"LineTimeSerieChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/linetimeseries/LineTimeSerieChart.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAW5D;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,aAAa,GACd,EAAE,cAAc,2CAgJhB"}

package/dist/components/charts/linetimeseries/LineTimeSerieChart.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
 import { CartesianGrid, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, } from 'recharts';
 import styled, { useTheme } from 'styled-components';
 import { Stack } from '../../../spacing';
@@ -7,241 +7,67 @@ import { fontSize } from '../../../style/theme';
 import { IconHelp } from '../../iconhelper/IconHelper';
 import { Loader } from '../../loader/Loader.component';
 import { ChartTitleText } from '../../text/Text.component';
-import { LegendShape } from '../legend/ChartLegend';
-import { useChartLegend } from '../legend/ChartLegendWrapper';
 import { StyledResponsiveContainer } from '../common/SharedComponents';
-import { ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, ChartTooltipPortal, ChartTooltipSeparator, TooltipHeader, } from '../common/ChartTooltip';
-import { addMissingDataPoint, formatToISONumber, getTicks, maxWidthTooltip, normalizeChartDataWithUnits, } from '../common/chartUtils';
+import { formatTickValue, getTicks, maxWidthTooltip } from '../common/chartUtils';
 import { formatXAxisLabel } from './LineTimeSerieChart.utils';
+import { LineTimeSerieChartTooltip } from './LineTimeSerieChartTooltip';
+import { useChartHover } from './useChartHover';
+import { useChartData } from './useChartData';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 `;
-const LineTimeSerieChartTooltip = ({ unitLabel, duration, isChartActive, tooltipProps, renderTooltip, hoveredValue, isSymmetrical, chartContainerRef, }) => {
-    const { active, payload, label, coordinate } = tooltipProps;
-    if (!active || !payload || !payload.length || !label || !isChartActive)
-        return null;
-    const tooltipContent = renderTooltip ? (renderTooltip(tooltipProps, unitLabel, duration)) : (_jsxs(_Fragment, { children: [_jsx(ChartTooltipHeader, { children: _jsx(TooltipHeader, { duration: duration, value: label }) }), _jsx(ChartTooltipItemsContainer, { children: (() => {
-                    // 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 = a.value;
-                        const bValue = 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
-                    });
-                    // Find the transition point between positive and negative values
-                    const separatorIndex = sortedPayload.findIndex((entry) => entry.value < 0);
-                    const hasBothPositiveAndNegative = separatorIndex > 0 && separatorIndex < sortedPayload.length;
-                    return sortedPayload.map((entry, index) => {
-                        const legendIcon = (_jsx(LegendShape, { color: entry.color, shape: "line", chartColors: { [entry.color]: entry.color } }));
-                        const isHovered = entry.name === hoveredValue;
-                        const formattedValue = !Number.isFinite(entry.value)
-                            ? '-'
-                            : `${entry.value.toFixed(2)}${unitLabel ? ` ${unitLabel}` : ''}`;
-                        return (_jsxs(React.Fragment, { children: [isSymmetrical &&
-                                    hasBothPositiveAndNegative &&
-                                    index === separatorIndex && _jsx(ChartTooltipSeparator, {}), _jsx(ChartTooltipItem, { label: entry.name, value: formattedValue, legendIcon: legendIcon, isHovered: isHovered })] }, index));
-                    });
-                })() })] }));
-    return (_jsx(ChartTooltipPortal, { coordinate: coordinate, chartContainerRef: chartContainerRef, isVisible: active && isChartActive, children: tooltipContent }));
-};
-const isSymmetricalSeries = (series) => {
-    return 'above' in series && 'below' in series;
-};
 /**
- * Props for LineTimeSerieChart component
- * @param series - The data series to display
+ * LineTimeSerieChart - A time series line chart component
+ *
+ * @param series - The data series to display (can be symmetrical with above/below)
  * @param title - The title of the chart
  * @param height - The height of the chart in pixels
  * @param startingTimeStamp - Starting timestamp in seconds
  * @param interval - Interval between data points in seconds
  * @param duration - Total duration of the chart in seconds
- *
+ * @param unitRange - Configuration for automatic unit scaling
+ * @param syncId - ID to synchronize multiple charts
+ * @param isLoading - Whether to show loading state
+ * @param yAxisType - Type of Y-axis: 'default', 'percentage', or 'symmetrical'
+ * @param yAxisTitle - Label for the Y-axis
+ * @param helpText - Help text shown as tooltip
+ * @param renderTooltip - Custom tooltip renderer
  */
-export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, syncId, renderTooltip, ...rest }) {
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, yAxisType = 'default', yAxisTitle, helpText, syncId, renderTooltip, }) {
     const theme = useTheme();
-    const { getColor, selectedResources } = useChartLegend();
     const chartRef = useRef(null);
-    const [isChartActive, setIsChartActive] = useState(false);
-    const [hoveredValue, setHoveredValue] = useState(undefined);
-    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
-                    ? series.above.map((line) => ({
-                        ...line,
-                        data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
-                    }))
-                    : [],
-                // Convert positive values to negative values
-                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,
-                data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
-            }));
-        // 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, interval, yAxisType]);
-    // Calculate evenly spaced ticks that avoid the very beginning and end
-    const xAxisTicks = useMemo(() => {
-        if (!chartData || chartData.length === 0)
-            return [];
-        const timestamps = chartData.map((d) => d.timestamp);
-        const minTimestamp = Math.min(...timestamps);
-        const maxTimestamp = Math.max(...timestamps);
-        const timeRange = maxTimestamp - minTimestamp;
-        // Add padding to avoid labels at the very edges (10% padding on each side)
-        const padding = timeRange * 0.1;
-        const paddedStart = minTimestamp + padding;
-        const paddedEnd = maxTimestamp - padding;
-        const paddedRange = paddedEnd - paddedStart;
-        // Create 5 evenly spaced ticks within the padded range
-        const numTicks = 5;
-        const tickInterval = paddedRange / (numTicks - 1);
-        const evenlySpacedTicks = Array.from({ length: numTicks }, (_, index) => paddedStart + index * tickInterval);
-        return evenlySpacedTicks;
-    }, [chartData]);
-    // 3. Transform the data base on the valuebase
-    const { topValue, unitLabel, rechartsData, topDomain } = useMemo(() => {
-        var _a;
-        const values = chartData.flatMap((dataPoint) => Object.entries(dataPoint)
-            .filter(([key]) => key !== 'timestamp')
-            .map(([_, value]) => {
-            if (value === null || value === undefined)
-                return null;
-            const num = typeof value === 'string' ? Number(value) : value;
-            return !isNaN(num) ? num : null;
-        })
-            .filter((value) => value !== null));
-        // Guard against empty values array
-        if (values.length === 0) {
-            return {
-                topValue: 100, // Default value for empty charts
-                unitLabel: yAxisType === 'percentage' ? '%' : undefined,
-                rechartsData: [],
-                topDomain: 100,
-            };
-        }
-        const top = Math.abs(Math.max(...values));
-        const bottom = Math.abs(Math.min(...values));
-        const maxValue = Math.max(top, bottom);
-        // Use shared normalization function
-        const result = normalizeChartDataWithUnits(chartData, maxValue, unitRange, 'timestamp');
-        // For percentage charts, ensure Y-axis goes to at least 100%
-        const topDomain = yAxisType === 'percentage'
-            ? Math.max(result.topDomain, 100)
-            : result.topDomain;
-        return {
-            topValue: yAxisType === 'percentage' ? Math.max(result.topValue, 100) : result.topValue,
-            unitLabel: (_a = result.unitLabel) !== null && _a !== void 0 ? _a : (yAxisType === 'percentage' ? '%' : undefined),
-            rechartsData: result.rechartsData,
-            topDomain,
-        };
-    }, [chartData, yAxisType, unitRange]);
-    // 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;
-        // Group series by resource
-        const groups = allSeries
-            .filter((serie) => selectedResources.includes(serie.resource))
-            .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, selectedResources]);
-    // Format time for display the tick in the x axis
+    // Hover state management for tooltip display
+    const { handleMouseEnter, handleMouseLeave, chartId } = useChartHover();
+    // Process chart data
+    const { rechartsData, topDomain, topValue, unitLabel, xAxisTicks, linesToRender, belowSeriesLabels, } = useChartData({
+        series,
+        startingTimeStamp,
+        duration,
+        interval,
+        yAxisType,
+        unitRange,
+    });
+    // Format X-axis labels based on duration
     const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, duration), [duration]);
-    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(Stack, { gap: "r4", children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(IconHelp, { tooltipMessage: helpText, overlayStyle: maxWidthTooltip })), isLoading && _jsx(Loader, {})] }), _jsx("div", { children: _jsx(StyledResponsiveContainer, { 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), accessibilityLayer: true, 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", label: {
-                                    value: yAxisTitle,
-                                    angle: 90,
-                                    dx: 20,
-                                    style: {
-                                        fill: theme.textSecondary,
-                                        fontSize: fontSize.smaller,
-                                    },
-                                }, domain: yAxisType === 'symmetrical'
-                                    ? [-topDomain, topDomain]
-                                    : [0, topDomain], axisLine: { stroke: theme.border }, tick: {
+    // Format Y-axis tick values
+    const tickFormatter = useCallback((value) => formatTickValue(value, topValue), [topValue]);
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(Stack, { gap: "r4", children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(IconHelp, { tooltipMessage: helpText, overlayStyle: maxWidthTooltip })), isLoading && _jsx(Loader, {})] }), _jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { ref: chartRef, data: rechartsData, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, accessibilityLayer: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, 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", label: {
+                                value: yAxisTitle,
+                                angle: 90,
+                                dx: 20,
+                                style: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                }, tickFormatter: (value) => formatToISONumber(value), ticks: getTicks(topValue, yAxisType === 'symmetrical'), interval: 0 }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, duration: duration, renderTooltip: renderTooltip, isSymmetrical: yAxisType === 'symmetrical', tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue, chartContainerRef: chartRef })) }), 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, strokeDasharray: serie.isLineDashed ? '4 4' : undefined, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
-                            }))] }) }) })] }));
+                                },
+                            }, domain: yAxisType === 'symmetrical'
+                                ? [-topDomain, topDomain]
+                                : [0, topDomain], allowDataOverflow: true, axisLine: { stroke: theme.border }, tick: {
+                                fill: theme.textSecondary,
+                                fontSize: fontSize.smaller,
+                            }, tickFormatter: tickFormatter, ticks: getTicks(topValue, yAxisType === 'symmetrical'), interval: 0 }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, duration: duration, renderTooltip: renderTooltip, isSymmetrical: yAxisType === 'symmetrical', belowSeriesLabels: belowSeriesLabels, tooltipProps: props, chartContainerRef: chartRef, chartId: chartId })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), linesToRender.map((line) => (_jsx(Line, { type: "monotone", dataKey: line.dataKey, stroke: line.stroke, dot: false, isAnimationActive: false, strokeDasharray: line.strokeDasharray }, `${title}-${line.key}`)))] }) })] }));
 }