@scality/core-ui 0.186.0 → 0.188.0

package/dist/components/{linetemporalchart/MetricTimespanProvider.d.ts → charts/MetricsTimeSpanProvider.d.ts}

@@ -6,4 +6,4 @@ export declare const MetricsTimeSpanProvider: ({ children, location, }: {
     location?: ReturnType<typeof useLocation>;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const useMetricsTimeSpan: () => QueryTimeSpan;
-//# sourceMappingURL=MetricTimespanProvider.d.ts.map
+//# sourceMappingURL=MetricsTimeSpanProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsTimeSpanProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charts/MetricsTimeSpanProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAuB,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,eAAO,MAAM,sBAAsB,+CAA4C,CAAC;AAChF,eAAO,MAAM,uBAAuB,4BAGjC;IACD,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;CAC3C,4CA4BA,CAAC;AACF,eAAO,MAAM,kBAAkB,QAAO,aAUrC,CAAC"}

package/dist/components/{barchartv2/Barchart.component.d.ts → charts/barchart/Barchart.d.ts}

@@ -1,16 +1,4 @@
-import { UnitRange } from './utils';
-export type TimeType = {
-    type: 'time';
-    timeRange: {
-        startDate: Date;
-        endDate: Date;
-        interval: number;
-    };
-};
-export type CategoryType = {
-    type: 'category';
-    gap?: number;
-};
+import { TimeType, CategoryType, UnitRange } from '../types';
 export type Point = {
     key: string | number;
     values: {
@@ -61,24 +49,5 @@ export type BarchartProps<T extends BarchartBars> = {
     isLoading?: boolean;
     isError?: boolean;
 };
-interface CustomTickProps {
-    x: number;
-    y: number;
-    payload: {
-        value: number;
-    };
-    visibleTicksCount: number;
-    width: number;
-    type: TimeType;
-}
-/**
- * Get the format of the date based on the duration
- * @param duration - Duration in seconds
- * @returns Formatted string
- */
-export declare const formatDate: (duration: number) => "time" | "day-month-abbreviated" | "chart-long-term-date";
-export declare const CustomTick: ({ x, y, payload, visibleTicksCount, width, type, }: CustomTickProps) => import("react/jsx-runtime").JSX.Element;
-export declare const StyledResponsiveContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("recharts").ResponsiveContainerProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const Barchart: <T extends BarchartBars>(props: BarchartProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Barchart.component.d.ts.map
+//# sourceMappingURL=Barchart.d.ts.map

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

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

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } 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 { useChartData } from './Barchart.utils';
+import { ChartHeader, ChartError, ChartLoading, CustomTick, StyledResponsiveContainer, } from '../common/SharedComponents';
+const CHART_CONSTANTS = {
+    TICK_WIDTH_OFFSET: 4,
+    BAR_SIZE: 12,
+    MIN_POINT_SIZE: 3,
+    DEFAULT_HEIGHT: 200,
+    CHART_MARGIN: {
+        left: 0,
+        right: -10,
+        top: 0,
+        bottom: 0,
+    },
+};
+/* ---------------------------------- MAIN COMPONENT ---------------------------------- */
+export const Barchart = (props) => {
+    const theme = useTheme();
+    const { getColor } = useChartLegend();
+    const [hoveredValue, setHoveredValue] = useState();
+    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 color = getColor(bar.label);
+        if (color) {
+            acc[bar.label] = color;
+        }
+        return acc;
+    }, {});
+    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 })] }) }))] }));
+};

package/dist/components/{barchartv2/utils.d.ts → charts/barchart/Barchart.utils.d.ts}

@@ -1,8 +1,7 @@
-import { BarchartProps, BarchartBars } from './Barchart.component';
+import { BarchartProps, BarchartBars } from './Barchart';
 import { TooltipContentProps } from 'recharts';
-import { ChartColors } from '../../style/theme';
-export declare const getRoundReferenceValue: (value: number) => number;
-export declare const getTicks: (topValue: number, isSymmetrical: boolean) => number[];
+import { ChartColors } from '../../../style/theme';
+import { UnitRange } from '../types';
 export declare const getMaxBarValue: (data: {
     [key: string]: string | number;
 }[], stacked?: boolean) => number;
@@ -49,34 +48,6 @@ export declare const formatPrometheusDataToRechartsDataAndBars: <T extends Barch
         stackId?: string;
     }[];
 };
-export type UnitRange = {
-    threshold: number;
-    label: string;
-}[];
-export declare const computeUnitLabelAndRoundReferenceValue: (data: any, maxValue: number, unitRange: UnitRange | undefined) => {
-    unitLabel: undefined;
-    roundReferenceValue: number;
-    rechartsData: any;
-    topDomain: number;
-} | {
-    unitLabel: string;
-    roundReferenceValue: number;
-    rechartsData: any;
-    topDomain: number;
-};
-/**
- * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
- * @param {any} unitRange
- * @param {any} maxValue the maximum value among the data set
- * @returns {any}
- */
-export declare function getUnitLabel(unitRange: {
-    threshold: number;
-    label: string;
-}[], maxValue: number): {
-    valueBase: number;
-    unitLabel: string;
-};
 export declare const sortStackedBars: (rechartsBars: {
     dataKey: string;
     fill: string;
@@ -118,9 +89,11 @@ export declare const useChartData: <T extends BarchartBars>(bars: T, type: Barch
         stackId?: string;
     }[];
     unitLabel: string | undefined;
-    topDomain: number;
     roundReferenceValue: number;
-    rechartsData: any;
+    rechartsData: {
+        [key: string]: string | number;
+    }[];
+    topDomain: number;
 };
 export declare const getCurrentPoint: <T extends BarchartBars>(props: TooltipContentProps<number, string>, hoveredValue: string | undefined) => {
     category: string | number;
@@ -130,4 +103,4 @@ export declare const getCurrentPoint: <T extends BarchartBars>(props: TooltipCon
         isHovered: boolean;
     }[];
 };
-//# sourceMappingURL=utils.d.ts.map
+//# sourceMappingURL=Barchart.utils.d.ts.map

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

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

package/dist/components/{barchartv2/utils.js → charts/barchart/Barchart.utils.js}

@@ -1,40 +1,6 @@
-import { chartColors } from '../../style/theme';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-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;
-    return remainder === 0 ? bufferedValue : bufferedValue - remainder;
-};
-export const getTicks = (topValue, isSymmetrical) => {
-    const possibleTickNumbers = [4, 3];
-    const numberOfTicks = possibleTickNumbers.find((number) => topValue % (number - 1) === 0) || 3; // Default to 2 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) => -(numberOfTicks - 1 - index) * tickInterval);
-        ticks.unshift(...negativeTicks);
-    }
-    return ticks;
-};
+import { chartColors } from '../../../style/theme';
+import { useChartLegend } from '../legend/ChartLegendWrapper';
+import { normalizeChartDataWithUnits } from '../common/chartUtils';
 export const getMaxBarValue = (data, stacked) => {
     const values = data.map((item) => {
         // If stacked, we need to filter out category and sum the values in the same object
@@ -201,53 +167,6 @@ export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet,
         data,
     };
 };
-export const computeUnitLabelAndRoundReferenceValue = (data, maxValue, unitRange) => {
-    if (!unitRange) {
-        const roundReferenceValue = getRoundReferenceValue(maxValue);
-        return { unitLabel: undefined, roundReferenceValue, rechartsData: data, topDomain: maxValue * 1.1 };
-    }
-    const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
-    const topValue = maxValue / valueBase;
-    const roundReferenceValue = getRoundReferenceValue(topValue);
-    const rechartsData = data.map((dataPoint) => {
-        const normalizedDataPoint = { ...dataPoint };
-        Object.entries(dataPoint).forEach(([key, value]) => {
-            if (key !== 'category' && typeof value === 'number') {
-                normalizedDataPoint[key] = value / valueBase;
-            }
-        });
-        return normalizedDataPoint;
-    });
-    return { unitLabel, roundReferenceValue, rechartsData, topDomain: topValue * 1.1 };
-};
-/**
- * Return the unit label base on the current dataset, and the valueBase which is used to convert the data
- * @param {any} unitRange
- * @param {any} maxValue the maximum value among the data set
- * @returns {any}
- */
-export function getUnitLabel(unitRange, maxValue) {
-    // 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,
-            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,
-    };
-}
 // Sort stacked bars by their average values in descending order or by legend order
 // This ensures the largest bars appear at the bottom of the stack (default) or follow legend order
 export const sortStackedBars = (rechartsBars, data, stacked, legendOrder) => {
@@ -321,13 +240,13 @@ export const useChartData = (bars, type, colorSet, stacked, defaultSort, unitRan
     // Filter both data and bars to only include selected resources for accurate maxValue calculation
     const { filteredData, filteredRechartsBars } = filterChartDataAndBarsByLegendSelection(data, rechartsBars, selectedResources);
     const maxValue = getMaxBarValue(filteredData, stacked);
-    const { unitLabel, roundReferenceValue, rechartsData, topDomain } = computeUnitLabelAndRoundReferenceValue(filteredData, maxValue, unitRange);
+    const { unitLabel, topValue, rechartsData, topDomain } = normalizeChartDataWithUnits(filteredData, maxValue, unitRange, 'category');
     return {
         rechartsBars: filteredRechartsBars,
-        unitLabel,
-        topDomain,
-        roundReferenceValue,
+        unitLabel: unitLabel,
+        roundReferenceValue: topValue,
         rechartsData,
+        topDomain,
     };
 };
 export const getCurrentPoint = (props, hoveredValue) => {

package/dist/components/{barchartv2 → charts/barchart}/BarchartTooltip.d.ts

@@ -1,5 +1,6 @@
 import { TooltipContentProps } from 'recharts';
-import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
+import { BarchartBars, BarchartTooltipFn } from './Barchart';
+import { CategoryType, TimeType } from '../types';
 export declare const BarchartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, chartContainerRef, }: {
     type: TimeType | CategoryType;
     tooltipProps: TooltipContentProps<number, string>;

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

@@ -0,0 +1 @@
+{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/barchart/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAS/C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGlD,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,YAAY,0FAQnD;IACD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CACpD,mDAgEA,CAAC"}

package/dist/components/{barchartv2 → charts/barchart}/BarchartTooltip.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LegendShape } from '../chartlegend/ChartLegend';
-import { ChartTooltipPortal, ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, TooltipHeader, } from '../charttooltip/ChartTooltip';
-import { getCurrentPoint } from './utils';
+import { LegendShape } from '../legend/ChartLegend';
+import { ChartTooltipPortal, ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, TooltipHeader, } from '../common/ChartTooltip';
+import { getCurrentPoint } from './Barchart.utils';
 export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, chartContainerRef, }) => {
     const { active, coordinate } = tooltipProps;
     if (!active) {

package/dist/components/{charttooltip → charts/common}/ChartTooltip.d.ts

@@ -12,10 +12,17 @@ export declare const ChartTooltipHeader: import("styled-components").StyledCompo
 export declare const ChartTooltipItemsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ChartTooltipSeparator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export type TooltipDateFormat = 'day-month-abbreviated-year-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'day-month-abbreviated-hour-minute';
-export declare const TooltipHeader: ({ duration, value, }: {
+export type TooltipHeaderProps = {
     duration: number;
     value: string | number;
-}) => import("react/jsx-runtime").JSX.Element;
+};
+/**
+ * Tooltip header component
+ * @param duration - Duration in seconds
+ * @param value - Value to format
+ * @returns Formatted string type
+ */
+export declare const TooltipHeader: ({ duration, value }: TooltipHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export interface ChartTooltipPortalProps {
     children: React.ReactNode;
     coordinate?: {

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/common/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAML,UAAU,EACX,MAAM,oBAAoB,CAAC;AAO5B,eAAO,MAAM,qBAAqB,yGAWjC,CAAC;AA+BF,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAe5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,yGAK9B,CAAC;AAEF,eAAO,MAAM,0BAA0B,yGAKtC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAKjC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,wCAAwC,GACxC,0CAA0C,GAC1C,mCAAmC,CAAC;AAExC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AACF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,wBAAyB,kBAAkB,4CAOpE,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC,CAAC;IACrE,cAAc,CAAC,EAAE,CACf,SAAS,EAAE,OAAO,EAClB,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAClC;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9B,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0GhE,CAAC"}

package/dist/components/{charttooltip → charts/common}/ChartTooltip.js

@@ -3,9 +3,10 @@ import { createPortal } from 'react-dom';
 import { useEffect, useState, useRef } from 'react';
 import { useFloating, autoUpdate, offset, flip, shift, } from '@floating-ui/react';
 import styled from 'styled-components';
-import { spacing } from '../../spacing';
-import { fontSize, fontWeight } from '../../style/theme';
-import { FormattedDateTime } from '../date/FormattedDateTime';
+import { spacing } from '../../../spacing';
+import { fontSize, fontWeight } from '../../../style/theme';
+import { FormattedDateTime } from '../../date/FormattedDateTime';
+import { getTooltipDateFormat } from './chartUtils';
 export const ChartTooltipContainer = styled.div `
   border: 1px solid ${({ theme }) => theme.border};
   background-color: ${({ theme }) => theme.backgroundLevel1};
@@ -58,18 +59,13 @@ export const ChartTooltipSeparator = styled.div `
   margin: ${spacing.r4} 0;
   width: 100%;
 `;
-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 TooltipHeader = ({ duration, value, }) => {
+/**
+ * Tooltip header component
+ * @param duration - Duration in seconds
+ * @param value - Value to format
+ * @returns Formatted string type
+ */
+export const TooltipHeader = ({ duration, value }) => {
     const timeFormat = getTooltipDateFormat(duration);
     return (_jsx(ChartTooltipHeader, { children: _jsx(FormattedDateTime, { format: timeFormat, value: new Date(value) }) }));
 };

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

@@ -0,0 +1,47 @@
+import { TimeType } from '../types';
+/**
+ * Styled ResponsiveContainer for charts
+ * Shared by Barchart and LineTimeSerieChart
+ * Ensures tooltip overflow is visible and removes outline
+ */
+export declare const StyledResponsiveContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("recharts").ResponsiveContainerProps & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+interface ChartLoadingOrErrorProps {
+    height: number;
+}
+/**
+ * Error state component for charts
+ */
+export declare const ChartError: ({ height }: ChartLoadingOrErrorProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Loading state component for charts
+ */
+export declare const ChartLoading: ({ height }: ChartLoadingOrErrorProps) => import("react/jsx-runtime").JSX.Element;
+interface ChartHeaderProps {
+    title?: string;
+    secondaryTitle?: string;
+    helpTooltip?: React.ReactNode;
+    rightTitle?: React.ReactNode;
+}
+/**
+ * Shared chart header component
+ * Used by Barchart and can be used by other charts
+ */
+export declare const ChartHeader: ({ title, secondaryTitle, helpTooltip, rightTitle, }: ChartHeaderProps) => import("react/jsx-runtime").JSX.Element;
+interface CustomTickProps {
+    x: number;
+    y: number;
+    payload: {
+        value: number;
+    };
+    visibleTicksCount: number;
+    width: number;
+    type: TimeType;
+    tickWidthOffset?: number;
+}
+/**
+ * Custom tick component for charts
+ * Used by Barchart for time-based x-axis ticks
+ */
+export declare const CustomTick: ({ x, y, payload, visibleTicksCount, width, type, tickWidthOffset, }: CustomTickProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SharedComponents.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SharedComponents.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/charts/common/SharedComponents.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,0OAMrC,CAAC;AAUF,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,eAAgB,wBAAwB,4CAa9D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,eAAgB,wBAAwB,4CAahE,CAAC;AAEF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,wDAKrB,gBAAgB,4CA2BlB,CAAC;AAEF,UAAU,eAAe;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,wEAQpB,eAAe,4CAkDjB,CAAC"}

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ResponsiveContainer } from 'recharts';
+import styled, { useTheme } from 'styled-components';
+import { spacing, Stack, Wrap } from '../../../spacing';
+import { Box } from '../../box/Box';
+import { IconHelp } from '../../iconhelper/IconHelper';
+import { Loader } from '../../loader/Loader.component';
+import { Text } from '../../text/Text.component';
+import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
+import { FormattedDateTime } from '../../date/FormattedDateTime';
+import { formatXAxisDate, maxWidthTooltip } from './chartUtils';
+/**
+ * Styled ResponsiveContainer for charts
+ * Shared by Barchart and LineTimeSerieChart
+ * Ensures tooltip overflow is visible and removes outline
+ */
+export const StyledResponsiveContainer = styled(ResponsiveContainer) `
+  // Avoid tooltip over constrained text to be cut off
+  & .recharts-surface {
+    outline: none;
+    overflow: visible;
+  }
+`;
+const TickContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+/**
+ * Error state component for charts
+ */
+export const ChartError = ({ height }) => {
+    return (_jsx(Box, { height: height, style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+        }, children: _jsx(Text, { children: "Chart data is not available" }) }));
+};
+/**
+ * Loading state component for charts
+ */
+export const ChartLoading = ({ height }) => {
+    return (_jsx(Box, { height: height, style: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            display: 'flex',
+        }, children: _jsx(Loader, { size: "larger", children: _jsx(Text, { children: "Loading Chart Data..." }) }) }));
+};
+/**
+ * Shared chart header component
+ * Used by Barchart and can be used by other charts
+ */
+export const ChartHeader = ({ title, secondaryTitle, helpTooltip, rightTitle, }) => {
+    return (_jsxs(Wrap, { children: [_jsxs(Stack, { gap: "r4", children: [_jsx(Text, { variant: "ChartTitle", children: title }), helpTooltip && (_jsx(IconHelp, { tooltipMessage: helpTooltip, overlayStyle: maxWidthTooltip })), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
+                            marginLeft: spacing.r8,
+                        }, children: secondaryTitle }))] }), rightTitle && _jsx(Text, { children: rightTitle })] }));
+};
+/**
+ * Custom tick component for charts
+ * Used by Barchart for time-based x-axis ticks
+ */
+export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, tickWidthOffset = 4, }) => {
+    const theme = useTheme();
+    const tickWidth = width / visibleTicksCount - tickWidthOffset;
+    const centerX = x - tickWidth / 2;
+    const duration = type.type === 'time'
+        ? (type.timeRange.endDate.getTime() -
+            type.timeRange.startDate.getTime()) /
+            1000
+        : 0;
+    return (_jsx("foreignObject", { x: centerX, y: y - 10, width: tickWidth, height: 30, style: {
+            overflow: 'visible',
+            pointerEvents: 'none',
+        }, children: _jsx(TickContainer, { children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: formatXAxisDate(duration), value: new Date(payload.value) })) : (String(payload.value)) }), centered: true, tooltipStyle: {
+                    backgroundColor: theme.backgroundLevel1,
+                    padding: spacing.r10,
+                    borderRadius: spacing.r8,
+                    border: `1px solid ${theme.border}`,
+                    position: 'absolute',
+                } }) }) }));
+};

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

@@ -0,0 +1,91 @@
+import { TooltipDateFormat } from './ChartTooltip';
+import { UnitRange } from '../types';
+export declare const maxWidthTooltip: {
+    maxWidth: string;
+};
+/**
+ * Round a value to a nice number for chart display
+ * Used by Barchart and LineTimeSerieChart for Y-axis scaling
+ */
+export declare const getRoundReferenceValue: (value: number) => number;
+/**
+ * Generate tick values for Y-axis
+ * Used by Barchart and LineTimeSerieChart
+ */
+export declare const getTicks: (topValue: number, isSymmetrical: boolean) => number[];
+/**
+ * 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 declare function getUnitLabel(unitRange: {
+    threshold: number;
+    label: string;
+}[], maxValue: number): {
+    valueBase: number;
+    unitLabel: string | undefined;
+};
+/**
+ * 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 declare const normalizeChartDataWithUnits: <T extends Record<string, any>>(data: T[], maxValue: number, unitRange: UnitRange | undefined, excludeKey: string) => {
+    unitLabel: string | undefined;
+    topValue: number;
+    rechartsData: T[];
+    topDomain: number;
+};
+/**
+ * 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 declare function addMissingDataPoint(originalValues: [number, number | string | null][], startingTimeStamp?: number, sampleDuration?: number, sampleInterval?: number): [number, number | string | null][];
+/**
+ * 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 declare const formatXAxisDate: (duration: number) => "time" | "day-month-abbreviated" | "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 declare const getTooltipDateFormat: (duration: number) => TooltipDateFormat;
+export declare const formatToISONumber: (value: number) => string;
+//# sourceMappingURL=chartUtils.d.ts.map

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

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