@scality/core-ui 0.193.0 → 0.195.0

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

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

@@ -0,0 +1,77 @@
+import { TooltipContentProps } from 'recharts';
+export type Serie = {
+    /** The name of the resource */
+    resource: string;
+    /** The original data format from prometheus, extend the value to include number type */
+    data: [number, number | string | null][];
+    /** Function to generate the tooltip label - mandatory for tooltip display */
+    getTooltipLabel: (metricPrefix?: string, resource?: string) => string;
+    /** The name of the metric prefix (e.g., read, write, in, out) */
+    metricPrefix?: string;
+    /** Whether the line should be dashed */
+    isLineDashed?: boolean;
+};
+export type NonSymmetricalChartSerie = {
+    yAxisType?: 'default' | 'percentage';
+    series: Serie[] | undefined;
+};
+/**
+ * The symmetrical chart props are used to display two series on the same chart,
+ * such as in/out, write/read
+ */
+export type SymmetricalChartSerie = {
+    yAxisType: 'symmetrical';
+    series: {
+        above: Serie[] | undefined;
+        below: Serie[] | undefined;
+    } | undefined;
+};
+export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie) & {
+    /** The title of the chart */
+    title: string;
+    /** The height of the chart in pixels */
+    height: number;
+    /** Starting timestamp in seconds */
+    startingTimeStamp: number;
+    /** Interval between data points in seconds */
+    interval: number;
+    /** Total duration of the chart in seconds */
+    duration: number;
+    /** Unit range configuration for automatic unit scaling */
+    unitRange?: {
+        threshold: number;
+        label: string;
+    }[];
+    /** Sync ID for synchronizing multiple charts */
+    syncId?: string;
+    /** Whether the chart is in loading state */
+    isLoading?: boolean;
+    /** Y-axis title label */
+    yAxisTitle?: string;
+    /** Help text displayed as a tooltip icon */
+    helpText?: string;
+    /** Custom tooltip renderer */
+    renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, duration?: number) => React.ReactNode;
+};
+export type LineTimeSerieChartTooltipProps = {
+    tooltipProps: TooltipContentProps<number, string>;
+    unitLabel?: string;
+    duration: number;
+    renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, duration?: number) => React.ReactNode;
+    isSymmetrical?: boolean;
+    belowSeriesLabels?: Set<string>;
+    chartContainerRef: React.RefObject<HTMLDivElement>;
+    /** The unique ID of this chart instance */
+    chartId: string;
+};
+/**
+ * Type guard to check if series is symmetrical (has above/below structure)
+ */
+export declare const isSymmetricalSeries: (series: Serie[] | {
+    above: Serie[] | undefined;
+    below: Serie[] | undefined;
+}) => series is {
+    above: Serie[];
+    below: Serie[];
+};
+//# sourceMappingURL=LineTimeSerieChart.types.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * Type guard to check if series is symmetrical (has above/below structure)
+ */
+export const isSymmetricalSeries = (series) => {
+    return 'above' in series && 'below' in series;
+};

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

@@ -1 +1 @@
-{"version":3,"file":"LineTimeSerieChart.utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/linetimeseries/LineTimeSerieChart.utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,cAChB,MAAM,YACP,MAAM,KACf,MAaF,CAAC"}
+{"version":3,"file":"LineTimeSerieChart.utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/linetimeseries/LineTimeSerieChart.utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB,QAA4B,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AAElC;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAC3B,WAAW,MAAM,EACjB,UAAU,MAAM,KACf,MAaF,CAAC"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { LineTimeSerieChartTooltipProps } from './LineTimeSerieChart.types';
+/**
+ * Formats a numeric value for tooltip display
+ * - Non-finite values (NaN, null, undefined) → "-"
+ * - Zero → "0" with unit
+ * - Large values (>= 1000) → compact notation (1k, 1M)
+ * - Normal values (1-999) → up to 2 decimal places
+ * - Small values (0.01-0.99) → 2 decimal places
+ * - Very small values (< 0.01) → scientific notation (e.g., 4.7e-5)
+ */
+export declare const formatTooltipValue: (value: number, unitLabel?: string) => string;
+/**
+ * Custom tooltip component for LineTimeSerieChart
+ * Handles sorting, separator placement for symmetrical charts, and value formatting
+ */
+export declare const LineTimeSerieChartTooltip: React.FC<LineTimeSerieChartTooltipProps>;
+//# sourceMappingURL=LineTimeSerieChartTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LineTimeSerieChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/linetimeseries/LineTimeSerieChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AAI5E;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,EACb,YAAY,MAAM,KACjB,MAKF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAC9C,8BAA8B,CAkG7B,CAAC"}

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { LegendShape } from '../legend/ChartLegend';
+import { ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, ChartTooltipPortal, ChartTooltipSeparator, TooltipHeader, } from '../common/ChartTooltip';
+import { getCurrentlyHoveredChartId } from './useChartHover';
+import { formatISONumber } from '../../../utils';
+/**
+ * Formats a numeric value for tooltip display
+ * - Non-finite values (NaN, null, undefined) → "-"
+ * - Zero → "0" with unit
+ * - Large values (>= 1000) → compact notation (1k, 1M)
+ * - Normal values (1-999) → up to 2 decimal places
+ * - Small values (0.01-0.99) → 2 decimal places
+ * - Very small values (< 0.01) → scientific notation (e.g., 4.7e-5)
+ */
+export const formatTooltipValue = (value, unitLabel) => {
+    if (!Number.isFinite(value))
+        return '-';
+    const formatted = formatISONumber(value, { fixedDecimals: true, compact: true });
+    return `${formatted}${unitLabel ? ` ${unitLabel}` : ''}`;
+};
+/**
+ * Custom tooltip component for LineTimeSerieChart
+ * Handles sorting, separator placement for symmetrical charts, and value formatting
+ */
+export const LineTimeSerieChartTooltip = ({ unitLabel, duration, tooltipProps, renderTooltip, isSymmetrical, belowSeriesLabels, chartContainerRef, chartId, }) => {
+    const { active, payload, label, coordinate } = tooltipProps;
+    // Check at render time if this chart is the currently hovered one
+    // Using only the module-level variable avoids race conditions with React state updates
+    const isActiveChart = getCurrentlyHoveredChartId() === chartId;
+    if (!active || !payload || !payload.length || !label || !isActiveChart)
+        return null;
+    const tooltipContent = renderTooltip ? (renderTooltip(tooltipProps, unitLabel, duration)) : (_jsxs(_Fragment, { children: [_jsx(ChartTooltipHeader, { children: _jsx(TooltipHeader, { duration: duration, value: label }) }), _jsx(ChartTooltipItemsContainer, { children: (() => {
+                    // Sort payload: above series first (descending), then below series (ascending by absolute value)
+                    const sortedPayload = [...payload].sort((a, b) => {
+                        var _a, _b;
+                        const aIsBelow = (_a = belowSeriesLabels === null || belowSeriesLabels === void 0 ? void 0 : belowSeriesLabels.has(a.name)) !== null && _a !== void 0 ? _a : false;
+                        const bIsBelow = (_b = belowSeriesLabels === null || belowSeriesLabels === void 0 ? void 0 : belowSeriesLabels.has(b.name)) !== null && _b !== void 0 ? _b : false;
+                        // Above series come before below series
+                        if (aIsBelow !== bIsBelow) {
+                            return aIsBelow ? 1 : -1;
+                        }
+                        // Within the same group:
+                        // - Above series: higher values first (descending)
+                        // - Below series: higher absolute values last (ascending)
+                        if (aIsBelow) {
+                            return Math.abs(a.value) - Math.abs(b.value);
+                        }
+                        return Math.abs(b.value) - Math.abs(a.value);
+                    });
+                    // Find the transition point between above and below series
+                    const separatorIndex = sortedPayload.findIndex((entry) => belowSeriesLabels === null || belowSeriesLabels === void 0 ? void 0 : belowSeriesLabels.has(entry.name));
+                    const hasBothAboveAndBelow = isSymmetrical &&
+                        belowSeriesLabels &&
+                        belowSeriesLabels.size > 0 &&
+                        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 formattedValue = formatTooltipValue(entry.value, unitLabel);
+                        return (_jsxs(React.Fragment, { children: [hasBothAboveAndBelow && index === separatorIndex && (_jsx(ChartTooltipSeparator, {})), _jsx(ChartTooltipItem, { label: entry.name, value: formattedValue, legendIcon: legendIcon })] }, index));
+                    });
+                })() })] }));
+    return (_jsx(ChartTooltipPortal, { coordinate: coordinate, chartContainerRef: chartContainerRef, isVisible: active && isActiveChart, children: tooltipContent }));
+};

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

@@ -0,0 +1,44 @@
+import { Serie } from './LineTimeSerieChart.types';
+type ChartDataInput = {
+    series: Serie[] | {
+        above: Serie[] | undefined;
+        below: Serie[] | undefined;
+    } | undefined;
+    startingTimeStamp: number;
+    duration: number;
+    interval: number;
+    yAxisType: 'default' | 'percentage' | 'symmetrical';
+    unitRange?: {
+        threshold: number;
+        label: string;
+    }[];
+};
+export type LineToRender = {
+    key: string;
+    dataKey: string;
+    stroke: string;
+    strokeDasharray?: string;
+};
+type ChartDataOutput = {
+    /** Processed data ready for Recharts */
+    rechartsData: Record<string, number | null>[];
+    /** Maximum value for Y-axis domain */
+    topDomain: number;
+    /** Value used for tick calculation */
+    topValue: number;
+    /** Unit label (e.g., "KiB/s", "%") */
+    unitLabel: string | undefined;
+    /** X-axis tick positions */
+    xAxisTicks: number[];
+    /** Line configurations ready for rendering */
+    linesToRender: LineToRender[];
+    /** Set of labels belonging to "below" series (for symmetrical charts) */
+    belowSeriesLabels: Set<string> | undefined;
+};
+/**
+ * Hook that processes chart data for LineTimeSerieChart.
+ * Handles data normalization, unit scaling, empty data handling, and series grouping.
+ */
+export declare function useChartData({ series, startingTimeStamp, duration, interval, yAxisType, unitRange, }: ChartDataInput): ChartDataOutput;
+export {};
+//# sourceMappingURL=useChartData.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChartData.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/linetimeseries/useChartData.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,EAAuB,MAAM,4BAA4B,CAAC;AAExE,KAAK,cAAc,GAAG;IACpB,MAAM,EAAE,KAAK,EAAE,GAAG;QAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;QAAC,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,CAAA;KAAE,GAAG,SAAS,CAAC;IACzF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,GAAG,YAAY,GAAG,aAAa,CAAC;IACpD,SAAS,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,wCAAwC;IACxC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAC9C,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,4BAA4B;IAC5B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,8CAA8C;IAC9C,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,yEAAyE;IACzE,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;CAC5C,CAAC;AAEF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,cAAc,GAAG,eAAe,CA6QlC"}