@scality/core-ui 0.186.0 → 0.187.0

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

@@ -0,0 +1,243 @@
+import { NAN_STRING } from '../../constants';
+/* -------------------------------------------------------------------------- */
+/*                                  constants                                 */
+/* -------------------------------------------------------------------------- */
+export const maxWidthTooltip = { maxWidth: '20rem' };
+/* -------------------------------------------------------------------------- */
+/*                               utils functions                              */
+/* -------------------------------------------------------------------------- */
+/**
+ * Round a value to a nice number for chart display
+ * Used by Barchart and LineTimeSerieChart for Y-axis scaling
+ */
+export const getRoundReferenceValue = (value) => {
+    if (value <= 0)
+        return 1; // Default for zero or negative values
+    // 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;
+        }
+        // If incrementing would exceed the buffered max, also round down
+        if (incremented > bufferedValue) {
+            return value - remainder;
+        }
+        // Otherwise, round up to the next 10
+        return incremented;
+    }
+    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;
+};
+/**
+ * Generate tick values for Y-axis
+ * Used by Barchart and LineTimeSerieChart
+ */
+export const getTicks = (topValue, isSymmetrical) => {
+    const possibleTickNumbers = [4, 3];
+    const numberOfTicks = possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 3; // Default to 3 ticks if no match
+    const tickInterval = topValue / (numberOfTicks - 1);
+    const ticks = Array.from({ length: numberOfTicks }, (_, index) => index * tickInterval);
+    if (isSymmetrical) {
+        // Create negative ticks in order without 0
+        const negativeTicks = Array.from({ length: numberOfTicks - 1 }, (_, index) => (index - numberOfTicks + 1) * tickInterval);
+        ticks.unshift(...negativeTicks);
+    }
+    return ticks;
+};
+/**
+ * Return the unit label based on the current dataset, and the valueBase which is used to convert the data
+ * Used by LineTimeSerieChart
+ * @param unitRange - Array of threshold and label pairs
+ * @param maxValue - The maximum value among the data set
+ * @returns Object with valueBase and unitLabel
+ */
+export function getUnitLabel(unitRange, maxValue) {
+    if (!unitRange || unitRange.length === 0) {
+        return {
+            valueBase: 1,
+            unitLabel: undefined,
+        };
+    }
+    // first sort the unitRange
+    unitRange.sort((unitA, unitB) => {
+        return unitA.threshold - unitB.threshold;
+    });
+    let index = unitRange.findIndex((range) => range.threshold > maxValue);
+    // last unit
+    if (index === -1) {
+        index = unitRange.length;
+    }
+    if (index === 0) {
+        return {
+            valueBase: unitRange[index].threshold || 1,
+            unitLabel: unitRange[index].label,
+        };
+    }
+    return {
+        // if the threshold is 0, we use 1 as the value base to avoid division by 0
+        valueBase: unitRange[index - 1].threshold || 1,
+        unitLabel: unitRange[index - 1].label,
+    };
+}
+/**
+ * Computes unit label and normalizes chart data based on unit range.
+ * This is shared logic used by both Barchart and LineTimeSerieChart.
+ *
+ * @param data - Chart data to normalize
+ * @param maxValue - Maximum value in the dataset
+ * @param unitRange - Optional unit range configuration for automatic scaling
+ * @param excludeKey - Key to exclude from normalization (e.g., 'category' for Barchart, 'timestamp' for LineTimeSerieChart)
+ * @returns Object containing unit label, top value for Y-axis, and normalized data
+ */
+export const normalizeChartDataWithUnits = (data, maxValue, unitRange, excludeKey) => {
+    // If no unit range provided, just calculate top value without unit conversion
+    if (!unitRange || unitRange.length === 0) {
+        const topValue = getRoundReferenceValue(maxValue);
+        return {
+            unitLabel: undefined,
+            topValue,
+            rechartsData: data,
+            topDomain: maxValue * 1.1,
+        };
+    }
+    // Get appropriate unit and value base for normalization
+    const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
+    const basedValue = maxValue / valueBase;
+    const topValue = getRoundReferenceValue(basedValue);
+    const topDomain = basedValue * 1.1;
+    // Normalize all numeric values by dividing by valueBase
+    const rechartsData = data.map((dataPoint) => {
+        const normalizedDataPoint = {
+            ...dataPoint,
+        };
+        Object.entries(dataPoint).forEach(([key, value]) => {
+            if (key !== excludeKey && typeof value === 'number') {
+                normalizedDataPoint[key] = value / valueBase;
+            }
+        });
+        return normalizedDataPoint;
+    });
+    return { unitLabel, topValue, rechartsData, topDomain };
+};
+/**
+ * This function manually adds the missing data points with `null` value caused by downtime of the VMs
+ * 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 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
+ */
+export function addMissingDataPoint(originalValues, startingTimeStamp, sampleDuration, sampleInterval) {
+    if (!originalValues ||
+        startingTimeStamp === undefined ||
+        !sampleDuration ||
+        !sampleInterval ||
+        startingTimeStamp < 0 ||
+        sampleDuration <= 0 ||
+        sampleInterval <= 0) {
+        return [];
+    }
+    // If there are no original values, return empty array
+    if (originalValues.length === 0) {
+        return [];
+    }
+    const newValues = [];
+    // add missing data points for the starting time
+    for (let i = startingTimeStamp; i < originalValues[0][0]; i += sampleInterval) {
+        newValues.push([i, NAN_STRING]);
+    }
+    // Process all but the last element
+    for (let i = 0; i < originalValues.length - 1; i++) {
+        if (originalValues[i][0] < startingTimeStamp ||
+            originalValues[i][0] > startingTimeStamp + sampleDuration) {
+            continue;
+        }
+        // Always add the current data point
+        newValues.push(originalValues[i]);
+        const currentTimestamp = originalValues[i][0];
+        const nextTimestamp = originalValues[i + 1][0];
+        const gap = nextTimestamp - currentTimestamp;
+        // Calculate how many missing points to add
+        const missingIntervals = Math.floor(gap / sampleInterval) - 1;
+        // Add missing data points with NAN_STRING (only executes if missingIntervals > 0)
+        for (let j = 1; j <= missingIntervals; j++) {
+            const missingTimestamp = currentTimestamp + j * sampleInterval;
+            newValues.push([missingTimestamp, NAN_STRING]);
+        }
+    }
+    // Add the last element
+    newValues.push(originalValues[originalValues.length - 1]);
+    // add missing data points for the ending time
+    for (let i = originalValues[originalValues.length - 1][0] + sampleInterval; i < startingTimeStamp + sampleDuration; i += sampleInterval) {
+        newValues.push([i, NAN_STRING]);
+    }
+    return newValues;
+}
+/**
+ * Date Format Reference Table
+ * ============================
+ *
+ * This table documents the date formatting logic used across charts:
+ * - X-Axis Format: Used for chart axis labels (formatXAxisDate + LineTimeSerieChart's formatXAxisLabel)
+ * - Tooltip Format: Used for tooltip headers (getTooltipDateFormat)
+ *
+ * ┌─────────────────┬──────────────┬────────────────────────┬──────────────────┬──────────────────────────────────────────┬───────────────────────────┐
+ * │ Interval        │ Duration (s) │ X-axis format          │ Example (X-axis) │ Tooltip format                           │ Example (Tooltip)         │
+ * ├─────────────────┼──────────────┼────────────────────────┼──────────────────┼──────────────────────────────────────────┼───────────────────────────┤
+ * │ Last hour       │ ≤ 3,600      │ HH:MM                  │ 14:05            │ DD MMM HH:MM:SS                          │ 01 Oct 00:15:00           │
+ * │ Last 24 hours   │ ≤ 86,400     │ HH:MM                  │ 23:00            │ DD MMM HH:MM                             │ 01 Oct 00:15              │
+ * │ Last 7 days     │ ≤ 604,800    │ DD MMM HH:MM           │ 27 Sep 10:12     │ DD MMM HH:MM                             │ 01 Oct 00:15              │
+ * │ Long term       │ > 604,800    │ DDMMMYY                │ 15Sep25          │ DD MMM YYYY HH:MM                        │ 01 Oct 2025 00:15         │
+ * └─────────────────┴──────────────┴────────────────────────┴──────────────────┴──────────────────────────────────────────┴───────────────────────────┘
+ *
+ * Note: Duration is in seconds. Some intervals share the same format, which is why both functions only have 3 cases.
+ */
+/**
+ * Get the format of the date based on the duration
+ * Used by Barchart CustomTick component
+ * @param duration - Duration in seconds
+ * @returns Formatted string type
+ */
+export const formatXAxisDate = (duration) => {
+    if (duration <= 24 * 60 * 60) {
+        return 'time';
+    }
+    else if (duration <= 7 * 24 * 60 * 60) {
+        return 'day-month-abbreviated';
+    }
+    else {
+        return 'chart-long-term-date';
+    }
+};
+/**
+ * Get the format of the date based on the duration
+ * Used by TooltipHeader component
+ * @param duration - Duration in seconds
+ * @returns Formatted string type
+ */
+export const getTooltipDateFormat = (duration) => {
+    if (duration <= 60 * 60) {
+        return 'day-month-abbreviated-hour-minute-second';
+    }
+    else if (duration <= 7 * 24 * 60 * 60) {
+        return 'day-month-abbreviated-hour-minute';
+    }
+    else {
+        return 'day-month-abbreviated-year-hour-minute';
+    }
+};
+export const formatToISONumber = (value) => {
+    const formattedValue = new Intl.NumberFormat('fr-FR')
+        .format(value)
+        .replace(',', '.');
+    return formattedValue;
+};

package/dist/components/{globalhealthbar/GlobalHealthBarRecharts.component.d.ts → charts/globalhealthbar/GlobalHealthBar.d.ts}

@@ -1,4 +1,4 @@
-import { Alert } from './useHealthBarData';
+import { Alert } from './GlobalHealthBar.hooks';
 export interface GlobalHealthProps {
     id: string;
     alerts: Alert[];
@@ -7,4 +7,4 @@ export interface GlobalHealthProps {
 }
 export declare function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps): import("react/jsx-runtime").JSX.Element;
 export type { Alert };
-//# sourceMappingURL=GlobalHealthBarRecharts.component.d.ts.map
+//# sourceMappingURL=GlobalHealthBar.d.ts.map

package/dist/components/charts/globalhealthbar/GlobalHealthBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHealthBar.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/globalhealthbar/GlobalHealthBar.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,EAAoB,MAAM,yBAAyB,CAAC;AAElE,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX;AAUD,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,iBAAiB,2CAkN5E;AAGD,YAAY,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/{globalhealthbar/useHealthBarData.d.ts → charts/globalhealthbar/GlobalHealthBar.hooks.d.ts}

@@ -16,4 +16,4 @@ export declare const useHealthBarData: (alerts: Alert[], startTimestamp: number,
         unavailableKeys: string[];
     };
 };
-//# sourceMappingURL=useHealthBarData.d.ts.map
+//# sourceMappingURL=GlobalHealthBar.hooks.d.ts.map

package/dist/components/charts/globalhealthbar/GlobalHealthBar.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHealthBar.hooks.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/globalhealthbar/GlobalHealthBar.hooks.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,KAAK;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,aAAa,CAAC;IACjD,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,gBAAgB,WACnB,KAAK,EAAE,kBACC,MAAM,gBACR,MAAM,MAChB,MAAM;;;;;;;;;;CA6DX,CAAC"}

package/dist/components/{globalhealthbar/GlobalHealthBarRecharts.component.js → charts/globalhealthbar/GlobalHealthBar.js}

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { Bar, BarChart, ResponsiveContainer, Tooltip, YAxis, } from 'recharts';
 import styled, { useTheme } from 'styled-components';
-import { GlobalHealthBarTooltip } from './components/GlobalHealthBarTooltip';
-import { HealthBarXAxis } from './components/HealthBarXAxis';
-import { CHART_CONFIG, getNavigationAction, getNavigationStateUpdate, } from './healthBarUtils';
-import { useHealthBarData } from './useHealthBarData';
+import { GlobalHealthBarTooltip } from './GlobalHealthBarTooltip';
+import { HealthBarXAxis } from './HealthBarXAxis';
+import { CHART_CONFIG, getNavigationAction, getNavigationStateUpdate, } from './GlobalHealthBar.utils';
+import { useHealthBarData } from './GlobalHealthBar.hooks';
 const ChartInteractiveContainer = styled.div `
   position: relative;
   outline: none;

package/dist/components/{globalhealthbar/healthBarUtils.d.ts → charts/globalhealthbar/GlobalHealthBar.utils.d.ts}

@@ -74,4 +74,4 @@ export declare const getTooltipPosition: (alert: {
     startsAt: string;
     endsAt: string;
 }, startTimestamp: number, endTimestamp: number, chartUsableWidth: number) => number;
-//# sourceMappingURL=healthBarUtils.d.ts.map
+//# sourceMappingURL=GlobalHealthBar.utils.d.ts.map

package/dist/components/charts/globalhealthbar/GlobalHealthBar.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHealthBar.utils.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/globalhealthbar/GlobalHealthBar.utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;CAOjB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;CAOf,CAAC;AA4BX,eAAO,MAAM,sBAAsB,iBAAkB,MAAM,KAAG,MAAM,EAInE,CAAC;AAEF,eAAO,MAAM,iBAAiB,iBAAkB,MAAM,KAAG,MAAM,EAM9D,CAAC;AAEF,eAAO,MAAM,kBAAkB,iBAAkB,MAAM,KAAG,MAAM,EAO/D,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,MAAM,cACD,MAAM,aACP,OAAO,KACjB,MAKF,CAAC;AAEF,eAAO,MAAM,QAAQ,mBACH,MAAM,gBACR,MAAM,KACnB,MAAM,EAYR,CAAC;AAMF,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB,eACvB,MAAM,cACN,MAAM,QACZ,MAAM,SACL,MAAM,gBACC,MAAM,KACnB,OA+BF,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,sBAAsB,wBACZ,MAAM,qBACR,MAAM,uBACJ,MAAM,qBACR,MAAM,kBACT,MAAM,UACf,MAAM;;;;CAkBd,CAAC;AAMF,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,GAAG,GAAG,IAAI,CAAC;IAC1B,sBAAsB,EAAE,OAAO,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,KAAG,gBAAgB,GAAG,IAiBpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,WAC3B,gBAAgB,gBACV,MAAM,eACP,MAAM,KAClB,MAiBF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GAAI,CAAC,UAChC,gBAAgB,gBACV,MAAM,UACZ,CAAC,EAAE,KACV,eAYF,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,kBAAkB,UACtB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,kBAC3B,MAAM,gBACR,MAAM,oBACF,MAAM,WAgBzB,CAAC"}

package/dist/components/{globalhealthbar/healthBarUtils.js → charts/globalhealthbar/GlobalHealthBar.utils.js}

@@ -1,4 +1,4 @@
-import { fontSize } from '../../style/theme';
+import { fontSize } from '../../../style/theme';
 // =============================================================================
 // CONSTANTS
 // =============================================================================

package/dist/components/{globalhealthbar/components → charts/globalhealthbar}/GlobalHealthBarTooltip.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Alert } from '../GlobalHealthBarRecharts.component';
 import { TooltipContentProps } from 'recharts';
+import { Alert } from './GlobalHealthBar.hooks';
 interface GlobalHealthBarTooltipProps {
     tooltipData: Alert | null;
     coordinate?: {

package/dist/components/charts/globalhealthbar/GlobalHealthBarTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHealthBarTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/globalhealthbar/GlobalHealthBarTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAM/C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKhD,UAAU,2BAA2B;IACnC,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoBD,eAAO,MAAM,sBAAsB,UAAW,2BAA2B,mDA6FxE,CAAC"}

package/dist/components/{globalhealthbar/components → charts/globalhealthbar}/GlobalHealthBarTooltip.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css, useTheme } from 'styled-components';
-import { FormattedDateTime, Stack, Text, Wrap, spacing } from '../../../index';
+import { FormattedDateTime } from '../../date/FormattedDateTime';
+import { Stack } from '../../../spacing';
+import { Text } from '../../text/Text.component';
+import { Wrap } from '../../../spacing';
+import { spacing } from '../../../spacing';
 import { zIndex } from '../../../style/theme';
-import { CHART_CONFIG, getTooltipPosition } from '../healthBarUtils';
-import { ChartTooltipPortal } from '../../charttooltip/ChartTooltip';
+import { CHART_CONFIG, getTooltipPosition } from './GlobalHealthBar.utils';
+import { ChartTooltipPortal } from '../common/ChartTooltip';
 const TooltipContainer = styled.div `
   ${(props) => {
     const theme = useTheme();

package/dist/components/charts/globalhealthbar/HealthBarXAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HealthBarXAxis.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/globalhealthbar/HealthBarXAxis.tsx"],"names":[],"mappings":"AAWA,UAAU,mBAAmB;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB;AAiDD,eAAO,MAAM,cAAc,sCAGxB,mBAAmB,4CA4BrB,CAAC"}

package/dist/components/{globalhealthbar/components → charts/globalhealthbar}/HealthBarXAxis.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { XAxis } from 'recharts';
 import { useTheme } from 'styled-components';
 import { fontSize } from '../../../style/theme';
-import { getTicks, calculateLabelVisibility, TIME_CONSTANTS, getEdgeMargin, } from '../healthBarUtils';
+import { getTicks, calculateLabelVisibility, TIME_CONSTANTS, getEdgeMargin, } from './GlobalHealthBar.utils';
 import { FormattedDateTime } from '../../date/FormattedDateTime';
 const CustomTick = ({ tickProps, startTimestamp, endTimestamp, }) => {
     const theme = useTheme();

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

@@ -0,0 +1,16 @@
+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 { GlobalHealthBar } from './globalhealthbar/GlobalHealthBar';
+export type { GlobalHealthProps } from './globalhealthbar/GlobalHealthBar';
+export type { Alert } from './globalhealthbar/GlobalHealthBar.hooks';
+export { Sparkline } from './sparkline/Sparkline';
+export { ChartLegend } from './legend/ChartLegend';
+export { ChartLegendWrapper, useChartId, useChartLegend, } from './legend/ChartLegendWrapper';
+export { BarchartTooltip } from './barchart/BarchartTooltip';
+export { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, ChartTooltipPortal, } from './common/ChartTooltip';
+export { getRoundReferenceValue, getTicks, getUnitLabel, addMissingDataPoint, formatXAxisDate, getTooltipDateFormat, normalizeChartDataWithUnits, } from './common/chartUtils';
+export { MetricsTimeSpanProvider, useMetricsTimeSpan, } from './MetricsTimeSpanProvider';
+export type { UnitRange, TimeType, CategoryType } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/charts/index.js

@@ -0,0 +1,15 @@
+// Components
+export { Barchart } from './barchart/Barchart';
+export { LineTimeSerieChart } from './linetimeseries/LineTimeSerieChart';
+export { GlobalHealthBar } from './globalhealthbar/GlobalHealthBar';
+export { Sparkline } from './sparkline/Sparkline';
+// Legend
+export { ChartLegend } from './legend/ChartLegend';
+export { ChartLegendWrapper, useChartId, useChartLegend, } from './legend/ChartLegendWrapper';
+// Tooltips (for advanced usage)
+export { BarchartTooltip } from './barchart/BarchartTooltip';
+export { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, ChartTooltipPortal, } from './common/ChartTooltip';
+// Shared utilities (for advanced usage)
+export { getRoundReferenceValue, getTicks, getUnitLabel, addMissingDataPoint, formatXAxisDate, getTooltipDateFormat, normalizeChartDataWithUnits, } from './common/chartUtils';
+// Context Providers (for backward compatibility)
+export { MetricsTimeSpanProvider, useMetricsTimeSpan, } from './MetricsTimeSpanProvider';

package/dist/components/{chartlegend → charts/legend}/ChartLegend.d.ts

@@ -1,4 +1,4 @@
-import { TextVariant } from '../text/Text.component';
+import { TextVariant } from '../../text/Text.component';
 type ChartLegendProps = {
     shape: 'line' | 'rectangle';
     disabled?: boolean;

package/dist/components/charts/legend/ChartLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/legend/ChartLegend.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAI9D,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B,CAAC;AAUF,eAAO,MAAM,UAAU;eACV,OAAO;eACP,OAAO;SAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;YACd,MAAM;WACP,MAAM,GAAG,WAAW;iBACd,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;SAsBpC,CAAC;AAEF,eAAO,MAAM,WAAW,gDAKrB,gBAAgB,4CAyElB,CAAC"}

package/dist/components/{chartlegend → charts/legend}/ChartLegend.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { useChartLegend } from './ChartLegendWrapper';
-import { Text } from '../text/Text.component';
-import { chartColors } from '../../style/theme';
+import { Text } from '../../text/Text.component';
+import { chartColors } from '../../../style/theme';
 import { useCallback } from 'react';
 const Legend = styled.div `
   display: flex;

package/dist/components/{chartlegend → charts/legend}/ChartLegendWrapper.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ChartColors } from '../../style/theme';
+import { ChartColors } from '../../../style/theme';
 export declare const useChartId: () => string;
 export type ChartLegendState = {
     selectedResources: string[];

package/dist/components/charts/legend/ChartLegendWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartLegendWrapper.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/legend/ChartLegendWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAKV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,eAAO,MAAM,UAAU,QAAO,MAQ7B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,MAAM,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,OAAO,CAAC;IACjC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5D,CAAC;AAIF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EACJ,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,GACpC,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC;IACtE,SAAS,CAAC,EAAE,cAAc,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,kBAAkB,uCAI5B,uBAAuB,4CAsIzB,CAAC;AAEF,eAAO,MAAM,cAAc,wBAM1B,CAAC"}

package/dist/components/{linetimeseriechart/linetimeseriechart.component.d.ts → charts/linetimeseries/LineTimeSerieChart.d.ts}

@@ -1,5 +1,5 @@
-import { TooltipContentProps } from 'recharts';
 import React from 'react';
+import { TooltipContentProps } from 'recharts';
 export type Serie = {
     resource: string;
     data: [number, number | string | null][];
@@ -40,6 +40,16 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
     helpText?: string;
     renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, duration?: number) => React.ReactNode;
 };
+/**
+ * Props for LineTimeSerieChart component
+ * @param series - The data series to display
+ * @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
+ *
+ */
 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 {};
-//# sourceMappingURL=linetimeseriechart.component.d.ts.map
+//# sourceMappingURL=LineTimeSerieChart.d.ts.map

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

@@ -0,0 +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,2CA0VhB"}

package/dist/components/{linetimeseriechart/linetimeseriechart.component.js → charts/linetimeseries/LineTimeSerieChart.js}

@@ -1,20 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CartesianGrid, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, } from 'recharts';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { CartesianGrid, Line, LineChart, ReferenceLine, Tooltip, XAxis, YAxis, } from 'recharts';
 import styled, { useTheme } from 'styled-components';
-import { Stack } from '../../spacing';
-import { fontSize } from '../../style/theme';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { addMissingDataPoint, getUnitLabel, } from '../linetemporalchart/ChartUtil';
-import { Loader } from '../loader/Loader.component';
-import { ChartTitleText } from '../text/Text.component';
-import { formatXAxisLabel } from './utils';
-import { ChartTooltipPortal, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, ChartTooltipSeparator, TooltipHeader, } from '../charttooltip/ChartTooltip';
-import { LegendShape } from '../chartlegend/ChartLegend';
-import { StyledResponsiveContainer } from '../barchartv2/Barchart.component';
-import { getRoundReferenceValue, getTicks } from '../barchartv2/utils';
-import { IconHelp } from '../iconhelper/IconHelper';
-const maxWidthTooltip = { maxWidth: '20rem' };
+import { Stack } from '../../../spacing';
+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 { formatXAxisLabel } from './LineTimeSerieChart.utils';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
   flex-direction: column;
@@ -57,6 +55,16 @@ const LineTimeSerieChartTooltip = ({ unitLabel, duration, isChartActive, tooltip
 const isSymmetricalSeries = (series) => {
     return 'above' in series && 'below' in series;
 };
+/**
+ * Props for LineTimeSerieChart component
+ * @param series - The data series to display
+ * @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
+ *
+ */
 export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, syncId, renderTooltip, ...rest }) {
     const theme = useTheme();
     const { getColor, selectedResources } = useChartLegend();
@@ -162,21 +170,14 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
         const top = Math.abs(Math.max(...values));
         const bottom = Math.abs(Math.min(...values));
         const maxValue = Math.max(top, bottom);
-        const { valueBase, unitLabel } = yAxisType === 'percentage' ? { valueBase: 1, unitLabel: '%' } : getUnitLabel(unitRange !== null && unitRange !== void 0 ? unitRange : [], maxValue);
-        // Use round reference value to add extra padding to the top value
-        const basedValue = maxValue / valueBase;
-        const topDomain = basedValue * 1.1;
-        const topValue = getRoundReferenceValue(basedValue);
-        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, topDomain };
+        // Use shared normalization function
+        const result = normalizeChartDataWithUnits(chartData, maxValue, unitRange, 'timestamp');
+        return {
+            topValue: result.topValue,
+            unitLabel: result.unitLabel,
+            rechartsData: result.rechartsData,
+            topDomain: result.topDomain,
+        };
     }, [chartData, yAxisType, unitRange]);
     // Group series by resource and create color mapping
     const { colorMapping, groupedSeries } = useMemo(() => {
@@ -227,14 +228,12 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
                                         fill: theme.textSecondary,
                                         fontSize: fontSize.smaller,
                                     },
-                                }, domain: yAxisType === 'percentage'
-                                    ? [0, topDomain]
-                                    : yAxisType === 'symmetrical'
-                                        ? [-topDomain, topDomain]
-                                        : [0, topDomain], axisLine: { stroke: theme.border }, tick: {
+                                }, domain: yAxisType === 'symmetrical'
+                                    ? [-topDomain, topDomain]
+                                    : [0, topDomain], axisLine: { stroke: theme.border }, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                }, tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(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) => {
+                                }, 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}`));
                             }))] }) }) })] }));

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

@@ -0,0 +1,14 @@
+export declare const ONE_YEAR_MILLISECONDS: number;
+export type ChartDataPoint = {
+    timestamp: number;
+} & Record<string, number | null>;
+/**
+ * Formats timestamp for X-axis labels based on duration
+ *
+ *
+ * @param timestamp - The timestamp to format in milliseconds
+ * @param duration - The duration in seconds
+ * @returns Formatted string for display on X-axis
+ */
+export declare const formatXAxisLabel: (timestamp: number, duration: number) => string;
+//# sourceMappingURL=LineTimeSerieChart.utils.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/{linetimeseriechart/utils.js → charts/linetimeseries/LineTimeSerieChart.utils.js}

@@ -1,13 +1,11 @@
-import { TIME_FORMATER, DAY_MONTH_ABBREVIATED_YEAR, DAY_MONTH_ABBREVIATED_HOUR_MINUTE, } from '../date/FormattedDateTime';
+import { TIME_FORMATER, DAY_MONTH_ABBREVIATED_YEAR, DAY_MONTH_ABBREVIATED_HOUR_MINUTE, } from '../../date/FormattedDateTime';
 export const ONE_YEAR_MILLISECONDS = 366 * 24 * 60 * 60 * 1000;
 /**
- * Formats timestamp for X-axis labels based on time format and data range:
- * For 'date-time' format, return day-month-abbreviated-hour-minute format
- * For 'date' format, return YYYY-MM-DD format if time range is greater than 1 year, otherwise return MM-DD format
+ * Formats timestamp for X-axis labels based on duration
+ *
  *
  * @param timestamp - The timestamp to format in milliseconds
- * @param timeFormat - The format type ('date-time' or 'date')
- * @param chartData - The chart data to determine time range for optimal formatting
+ * @param duration - The duration in seconds
  * @returns Formatted string for display on X-axis
  */
 export const formatXAxisLabel = (timestamp, duration) => {

package/dist/components/charts/sparkline/Sparkline.d.ts

@@ -0,0 +1,23 @@
+type SparklineProps = {
+    serie: {
+        data: [number, number | null][];
+        color?: string;
+    };
+    startingTimeStamp: number;
+    sampleDuration: number;
+    sampleInterval: number;
+    yAxisType?: 'default' | 'percentage';
+};
+/**
+ * Sparkline is a simple dynamically sized area chart.
+ * Used to show trends in data over time.
+ * @param serie - The data series to display
+ * @param startingTimeStamp - The starting timestamp in seconds
+ * @param sampleDuration - The total duration in seconds to cover in the sparkline
+ * @param sampleInterval - The interval in seconds between data points
+ * @param yAxisType - The type of y-axis to display
+ * @returns The sparkline component
+ */
+export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval, yAxisType, }: SparklineProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Sparkline.d.ts.map