@scality/core-ui 0.175.0 → 0.177.0

package/dist/components/barchartv2/Barchart.component.d.ts

@@ -41,6 +41,7 @@ export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['
 }) => 1 | -1 | 0;
 export type BarchartProps<T extends BarchartBars> = {
     type: CategoryType | TimeType;
+    title: string;
     bars?: T;
     tooltip?: BarchartTooltipFn<T>;
     defaultSort?: BarchartSortFn<T>;
@@ -54,7 +55,6 @@ export type BarchartProps<T extends BarchartBars> = {
      * @default 'default'
      */
     stackedBarSort?: 'default' | 'legend';
-    title?: string;
     secondaryTitle?: string;
     rightTitle?: React.ReactNode;
     height?: number;
@@ -72,12 +72,11 @@ interface CustomTickProps {
     type: TimeType;
 }
 /**
- * Formats a date based on the interval
- * @param timestamp - Timestamp
- * @param interval - Interval in milliseconds
+ * Get the format of the date based on the duration
+ * @param duration - Duration in milliseconds
  * @returns Formatted string
  */
-export declare const formatDate: (timestamp: number, interval: number) => React.ReactNode;
+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;

package/dist/components/barchartv2/Barchart.component.d.ts.map

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

package/dist/components/barchartv2/Barchart.component.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
 import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
 import styled, { useTheme } from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
@@ -12,7 +12,7 @@ import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { BarchartTooltip } from './BarchartTooltip';
-import { useChartData } from './utils';
+import { getTicks, useChartData } from './utils';
 const CHART_CONSTANTS = {
     TICK_WIDTH_OFFSET: 4,
     BAR_SIZE: 12,
@@ -25,39 +25,32 @@ const CHART_CONSTANTS = {
         bottom: 0,
     },
 };
+const maxWidthTooltip = { maxWidth: '20rem' };
 /* ---------------------------------- COMPONENTS ---------------------------------- */
 /**
- * Formats a date based on the interval
- * @param timestamp - Timestamp
- * @param interval - Interval in milliseconds
+ * Get the format of the date based on the duration
+ * @param duration - Duration in milliseconds
  * @returns Formatted string
  */
-export const formatDate = (timestamp, interval) => {
-    const date = new Date(timestamp);
-    // More than 24 hours interval - use day and time format
-    if (interval > 24 * 60 * 60 * 1000) {
-        return (_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "chart-date", value: date }), ' ', _jsx(FormattedDateTime, { format: "time", value: date })] }));
+export const formatDate = (duration) => {
+    if (duration <= 24 * 60 * 60 * 1000) {
+        return 'time';
     }
-    else if (interval === 24 * 60 * 60 * 1000) {
-        // Daily interval - use day format
-        return _jsx(FormattedDateTime, { format: "chart-date", value: date });
-    }
-    else if (interval >= 60 * 1000) {
-        //Hourly and minute intervals - use minute format
-        return _jsx(FormattedDateTime, { format: "time", value: date });
+    else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+        return 'day-month-abbreviated';
     }
     else {
-        // minute interval or less - use full timestamp
-        return timestamp;
+        return 'chart-long-term-date';
     }
 };
 export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) => {
     const theme = useTheme();
     const tickWidth = width / visibleTicksCount - CHART_CONSTANTS.TICK_WIDTH_OFFSET;
     const centerX = x - tickWidth / 2;
-    return (_jsx("foreignObject", { x: centerX, y: y - 8, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time'
-                    ? formatDate(payload.value, type.timeRange.interval)
-                    : String(payload.value) }), centered: true, tooltipStyle: {
+    const duration = type.type === 'time'
+        ? type.timeRange.endDate.getTime() - type.timeRange.startDate.getTime()
+        : 0;
+    return (_jsx("foreignObject", { x: centerX, y: y - 8, width: tickWidth, color: theme.textSecondary, overflow: "visible", children: _jsx(ConstrainedText, { color: "textSecondary", text: _jsx(Text, { variant: "Smaller", children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: formatDate(duration), value: new Date(payload.value) })) : (String(payload.value)) }), centered: true, tooltipStyle: {
                 backgroundColor: theme.backgroundLevel1,
                 padding: spacing.r10,
                 borderRadius: spacing.r8,
@@ -68,11 +61,12 @@ export const CustomTick = ({ x, y, payload, visibleTicksCount, width, type, }) =
 export const StyledResponsiveContainer = styled(ResponsiveContainer) `
   // Avoid tooltip over constrained text to be cut off
   & .recharts-surface {
+    outline: none;
     overflow: visible;
   }
 `;
 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 }), secondaryTitle && (_jsx(Text, { color: "textSecondary", style: {
+    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 })] }));
 };
@@ -95,6 +89,7 @@ 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) => {
@@ -105,14 +100,15 @@ export const Barchart = (props) => {
         return acc;
     }, {});
     const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
-    return (_jsxs(Stack, { direction: "vertical", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
+    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(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { ref: chartRef, width: "100%", height: height, children: _jsxs(BarChart, { 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, { tickCount: 1, interval: 0, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
+                        }), _jsx(YAxis, { interval: 0, domain: [0, roundReferenceValue], ticks: getTicks(roundReferenceValue, false), tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value) // Add a space as thousand separator
                             , axisLine: { stroke: theme.border }, tick: {
                                 fill: theme.textSecondary,
                                 fontSize: fontSize.smaller,
@@ -120,5 +116,5 @@ export const Barchart = (props) => {
                                 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 })), cursor: false })] }) }))] }));
+                            } }), _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/BarchartTooltip.d.ts

@@ -1,11 +1,12 @@
-import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
 import { TooltipContentProps } from 'recharts';
-export declare const BarchartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }: {
+import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
+export declare const BarchartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, chartContainerRef, }: {
     type: TimeType | CategoryType;
     tooltipProps: TooltipContentProps<number, string>;
     colorSet?: Record<string, string>;
     hoveredValue: string | undefined;
     tooltip?: BarchartTooltipFn<T>;
     unitLabel?: string;
-}) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    chartContainerRef: React.RefObject<HTMLDivElement>;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=BarchartTooltip.d.ts.map

package/dist/components/barchartv2/BarchartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAU/C,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,YAAY,uEAOnD;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;CACpB,iIAyDA,CAAC"}
+{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAS/C,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAG9B,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/BarchartTooltip.js

@@ -1,20 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { getCurrentPoint } from './utils';
-import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from '../charttooltip/ChartTooltip';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { LegendShape } from '../chartlegend/ChartLegend';
-export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }) => {
-    const { active } = tooltipProps;
+import { ChartTooltipPortal, ChartTooltipHeader, ChartTooltipItem, ChartTooltipItemsContainer, TooltipHeader, } from '../charttooltip/ChartTooltip';
+import { getCurrentPoint } from './utils';
+export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, chartContainerRef, }) => {
+    const { active, coordinate } = tooltipProps;
     if (!active) {
         return null;
     }
     const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
-    if (tooltip) {
-        return tooltip(currentPoint);
-    }
-    return (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: type.timeRange.interval < 24 * 60 * 60 * 1000
-                        ? 'day-month-abbreviated-hour-minute-second'
-                        : 'long-date-without-weekday', value: new Date(currentPoint.category) })) : (currentPoint.category) }), _jsx(ChartTooltipItemsContainer, { children: currentPoint.values.map((value) => {
+    const duration = type.type === 'time'
+        ? type.timeRange.startDate.getTime() - type.timeRange.endDate.getTime()
+        : 0;
+    const tooltipContent = tooltip ? (tooltip(currentPoint)) : (_jsxs(_Fragment, { children: [_jsx(ChartTooltipHeader, { children: type.type === 'time' ? (_jsx(TooltipHeader, { duration: duration, value: currentPoint.category })) : (currentPoint.category) }), _jsx(ChartTooltipItemsContainer, { children: currentPoint.values.map((value) => {
                     const legendIcon = colorSet && (_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet }));
                     const formattedValue = Number.isInteger(value.value)
                         ? `${value.value}`
@@ -24,4 +21,5 @@ export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, to
                         : formattedValue;
                     return (_jsx(ChartTooltipItem, { label: value.label, value: valueWithUnit, isHovered: value.isHovered, legendIcon: legendIcon }, value.label));
                 }) })] }));
+    return (_jsx(ChartTooltipPortal, { coordinate: coordinate, chartContainerRef: chartContainerRef, isVisible: active, children: tooltipContent }));
 };

package/dist/components/barchartv2/utils.d.ts

@@ -2,6 +2,7 @@ import { BarchartProps, BarchartBars } from './Barchart.component';
 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[];
 export declare const getMaxBarValue: (data: {
     [key: string]: string | number;
 }[], stacked?: boolean) => number;
@@ -53,6 +54,10 @@ export type UnitRange = {
     label: string;
 }[];
 export declare const computeUnitLabelAndRoundReferenceValue: (data: any, maxValue: number, unitRange: UnitRange | undefined) => {
+    unitLabel: undefined;
+    roundReferenceValue: number;
+    rechartsData: any;
+} | {
     unitLabel: string;
     roundReferenceValue: number;
     rechartsData: any;
@@ -110,7 +115,7 @@ export declare const useChartData: <T extends BarchartBars>(bars: T, type: Barch
         fill: string;
         stackId?: string;
     }[];
-    unitLabel: string;
+    unitLabel: string | undefined;
     roundReferenceValue: number;
     rechartsData: any;
 };

package/dist/components/barchartv2/utils.d.ts.map

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

package/dist/components/barchartv2/utils.js

@@ -2,23 +2,49 @@ import { chartColors } from '../../style/theme';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 export const getRoundReferenceValue = (value) => {
     if (value <= 0)
-        return 10; // Default for zero or negative values
+        return 1; // Default for zero or negative values
     // Get the magnitude (10^n where n is the number of digits - 1)
     const magnitude = Math.pow(10, Math.floor(Math.log10(value)));
+    // Buffer the value by 10% to avoid being too close to the edge of the chart
+    const bufferedValue = value * 1.1;
     // Normalized value between 1 and 10
-    const normalized = value / magnitude;
+    const normalized = bufferedValue / magnitude;
     // Round to nice numbers based on normalized value
+    // skip 1.5, 3, 4, 7.5 as top value for better chart
+    // appearance for small values
     let result;
     if (normalized <= 1)
         result = magnitude;
-    else if (normalized <= 2.5)
-        result = 2.5 * magnitude;
+    else if (normalized <= 2)
+        result = 2 * magnitude;
+    else if (value > 10 && normalized <= 4)
+        result = 4 * magnitude;
     else if (normalized <= 5)
         result = 5 * magnitude;
+    else if (value > 10 && normalized <= 7.5)
+        result = 7.5 * magnitude;
     else
         result = 10 * magnitude;
-    // Ensure minimum value of 5 for better chart appearance
-    return Math.max(result, 5);
+    return result;
+};
+export const getTicks = (topValue, isSymmetrical) => {
+    if (topValue < 10) {
+        if (isSymmetrical) {
+            return [-topValue, 0, topValue];
+        }
+        else {
+            return [0, topValue];
+        }
+    }
+    const numberOfTicks = topValue % 3 === 0 ? 4 : 3;
+    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;
 };
 export const getMaxBarValue = (data, stacked) => {
     const values = data.map((item) => {
@@ -189,10 +215,10 @@ export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet,
 export const computeUnitLabelAndRoundReferenceValue = (data, maxValue, unitRange) => {
     if (!unitRange) {
         const roundReferenceValue = getRoundReferenceValue(maxValue);
-        return { unitLabel: '', roundReferenceValue, rechartsData: data };
+        return { unitLabel: undefined, roundReferenceValue, rechartsData: data };
     }
     const { valueBase, unitLabel } = getUnitLabel(unitRange, maxValue);
-    const topValue = Math.ceil(maxValue / valueBase / 10) * 10;
+    const topValue = maxValue / valueBase;
     const roundReferenceValue = getRoundReferenceValue(topValue);
     const rechartsData = data.map((dataPoint) => {
         const normalizedDataPoint = { ...dataPoint };

package/dist/components/chartlegend/ChartLegendWrapper.js

@@ -64,7 +64,7 @@ export const ChartLegendWrapper = ({ children, colorSet, }) => {
         return color;
     }, [internalColorSet]);
     const listResources = useCallback(() => {
-        return Object.keys(internalColorSet);
+        return Object.keys(internalColorSet).sort();
     }, [internalColorSet]);
     const chartLegendState = useMemo(() => ({
         selectedResources,

package/dist/components/charttooltip/ChartTooltip.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Middleware } from '@floating-ui/react';
 export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface ChartTooltipItemProps {
     label: React.ReactNode;
@@ -9,5 +10,33 @@ interface ChartTooltipItemProps {
 export declare const ChartTooltipItem: React.FC<ChartTooltipItemProps>;
 export declare const ChartTooltipHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 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, }: {
+    duration: number;
+    value: string | number;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface ChartTooltipPortalProps {
+    children: React.ReactNode;
+    coordinate?: {
+        x: number;
+        y: number;
+    };
+    chartContainerRef: React.RefObject<HTMLDivElement>;
+    isVisible?: boolean;
+    middleware?: Middleware[];
+    offset?: number | (({ placement }: {
+        placement: string;
+    }) => number);
+    customPosition?: (chartRect: DOMRect, coordinate?: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+    containerComponent?: React.ComponentType<any>;
+}
+export declare const ChartTooltipPortal: React.FC<ChartTooltipPortalProps>;
 export {};
 //# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/components/charttooltip/ChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charttooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,qBAAqB,yGAUjC,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"}
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charttooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAML,UAAU,EACX,MAAM,oBAAoB,CAAC;AAM5B,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;AAcxC,eAAO,MAAM,aAAa,yBAGvB;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,4CAOA,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/ChartTooltip.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
 export const ChartTooltipContainer = styled.div `
   border: 1px solid ${({ theme }) => theme.border};
   background-color: ${({ theme }) => theme.backgroundLevel1};
@@ -10,7 +14,8 @@ export const ChartTooltipContainer = styled.div `
   font-size: ${fontSize.small};
   padding: ${spacing.r8};
   min-width: 10rem;
-  max-width: 250px;
+  max-width: 40rem;
+
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 `;
 const TooltipText = styled.div `
@@ -47,3 +52,102 @@ export const ChartTooltipItemsContainer = styled.div `
   gap: ${spacing.r8};
   width: 100%;
 `;
+export const ChartTooltipSeparator = styled.div `
+  height: 1px;
+  background-color: ${({ theme }) => theme.border};
+  margin: ${spacing.r4} 0;
+  width: 100%;
+`;
+const getTooltipDateFormat = (duration) => {
+    if (duration <= 60 * 60 * 1000) {
+        return 'day-month-abbreviated-hour-minute-second';
+    }
+    else if (duration <= 7 * 24 * 60 * 60 * 1000) {
+        return 'day-month-abbreviated-hour-minute';
+    }
+    else {
+        return 'day-month-abbreviated-year-hour-minute';
+    }
+};
+export const TooltipHeader = ({ duration, value, }) => {
+    const timeFormat = getTooltipDateFormat(duration);
+    return (_jsx(ChartTooltipHeader, { children: _jsx(FormattedDateTime, { format: timeFormat, value: new Date(value) }) }));
+};
+export const ChartTooltipPortal = ({ children, coordinate, chartContainerRef, isVisible = true, middleware, offset: customOffset, customPosition, containerComponent: ContainerComponent = ChartTooltipContainer, }) => {
+    const [virtualElement, setVirtualElement] = useState(null);
+    const previousPositionRef = useRef(null);
+    const [portalContainer, setPortalContainer] = useState(null);
+    // Default middleware configuration
+    const defaultMiddleware = [
+        offset(customOffset || 20),
+        flip(),
+        shift({ padding: 10 }),
+    ];
+    const { refs, floatingStyles } = useFloating({
+        elements: {
+            reference: virtualElement,
+        },
+        placement: 'top',
+        middleware: middleware || defaultMiddleware,
+        whileElementsMounted: autoUpdate,
+    });
+    // Create portal container once
+    useEffect(() => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        setPortalContainer(container);
+        return () => {
+            document.body.removeChild(container);
+        };
+    }, []);
+    // Create virtual element from coordinate or custom position
+    useEffect(() => {
+        if (chartContainerRef.current) {
+            const chartRect = chartContainerRef.current.getBoundingClientRect();
+            let tooltipX;
+            let tooltipY;
+            if (customPosition) {
+                // Use custom positioning function
+                const position = customPosition(chartRect, coordinate);
+                tooltipX = position.x;
+                tooltipY = position.y;
+            }
+            else if (coordinate) {
+                // Use default coordinate-based positioning
+                tooltipX = chartRect.left + coordinate.x;
+                tooltipY = chartRect.top + coordinate.y;
+            }
+            else {
+                return; // No positioning method available
+            }
+            // Check if position has changed significantly
+            const hasPositionChanged = !previousPositionRef.current ||
+                Math.abs(previousPositionRef.current.x - tooltipX) > 5 ||
+                Math.abs(previousPositionRef.current.y - tooltipY) > 5;
+            if (hasPositionChanged) {
+                previousPositionRef.current = { x: tooltipX, y: tooltipY };
+            }
+            setVirtualElement({
+                getBoundingClientRect() {
+                    return {
+                        width: 0,
+                        height: 0,
+                        x: tooltipX,
+                        y: tooltipY,
+                        left: tooltipX,
+                        top: tooltipY,
+                        right: tooltipX,
+                        bottom: tooltipY,
+                    };
+                },
+            });
+        }
+    }, [coordinate, chartContainerRef, customPosition]);
+    if (!isVisible || !virtualElement || !portalContainer)
+        return null;
+    const tooltipContent = (_jsx(ContainerComponent, { ref: refs.setFloating, style: {
+            ...floatingStyles,
+            opacity: isVisible ? 1 : 0,
+        }, children: children }));
+    return createPortal(tooltipContent, portalContainer);
+};

package/dist/components/date/FormattedDateTime.d.ts

@@ -1,6 +1,6 @@
 /**
  * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
- * @example Wednesday 6 October 2025
+ * @example Wednesday 06 October 2025
  */
 export declare const LONG_DATE_FORMATER: Intl.DateTimeFormat;
 /**
@@ -15,7 +15,7 @@ export declare const LONG_DATE_FORMATER_WITHOUT_WEEKDAY: Intl.DateTimeFormat;
 export declare const DATE_FORMATER: Intl.DateTimeFormat;
 /**
  * @description Day month formatter, with weekday, day and month. Used for describing long term date.
- * @example Wed 6 Oct
+ * @example Wed 06 Oct
  */
 export declare const DAY_MONTH_FORMATER: Intl.DateTimeFormat;
 /**
@@ -28,16 +28,31 @@ export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
  * @example 18:33
  */
 export declare const TIME_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Day month abbreviated formatter. Used for describing long term date.
+ * @example 06 Oct
+ */
+export declare const DAY_MONTH_ABBREVIATED: Intl.DateTimeFormat;
+/**
+ * @description Day month abbreviated formatter. Used for describing long term date.
+ * @example 06 Oct 25
+ */
+export declare const DAY_MONTH_ABBREVIATED_YEAR: Intl.DateTimeFormat;
 /**
  * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
- * @example 6 Oct 18:33:00
+ * @example 06 Oct 18:33:00
  */
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND: Intl.DateTimeFormat;
 /**
  * @description Day month abbreviated hour minute formatter. Used for describing long term date.
- * @example 6 Oct 18:33
+ * @example 06 Oct 18:33
  */
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE: Intl.DateTimeFormat;
+/**
+ * @description Day month abbreviated year hour minute formatter. Used for describing long term date.
+ * @example 06 Oct 2025 18:33
+ */
+export declare const DAY_MONTH_ABBREVIATED_YEAR_HOUR_MINUTE: Intl.DateTimeFormat;
 /**
  * @description Year month day formatter, without time. Used for describing long term date.
  * @example 2025-01-01
@@ -49,7 +64,7 @@ export declare const YEAR_MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
  */
 export declare const MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
 type FormattedDateTimeProps = {
-    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'long-date-without-weekday' | 'chart-date' | 'year-month-day' | 'month-day';
+    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'day-month-abbreviated-year-hour-minute' | 'long-date' | 'long-date-without-weekday' | 'chart-date' | 'year-month-day' | 'month-day' | 'day-month-abbreviated' | 'chart-long-term-date';
     value: Date;
 };
 /**
@@ -61,10 +76,10 @@ type FormattedDateTimeProps = {
  * time: '00:00'
  * 'time-second': '00:00:00'
  * relative: '1 month ago'
- * 'day-month-abbreviated-hour-minute': '6 Oct 18:33'
- * 'day-month-abbreviated-hour-minute-second': '6 Oct 18:33:00'
+ * 'day-month-abbreviated-hour-minute': '06 Oct 18:33'
+ * 'day-month-abbreviated-hour-minute-second': '06 Oct 18:33:00'
  * 'long-date': 'Wednesday 6 October 2025'
- * 'chart-date': '6 Oct'
+ * 'chart-date': '06 Oct'
  * 'year-month-day': '2025-10-06'
  */
 export declare const FormattedDateTime: ({ format, value, }: FormattedDateTimeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/date/FormattedDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,CAAC;IAEhB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAsIxB,CAAC"}
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,qBAAqB,qBAIhC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,0BAA0B,qBAKrC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,sCAAsC,qBAUlD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,wCAAwC,GACxC,WAAW,GACX,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,GACX,uBAAuB,GACvB,sBAAsB,CAAC;IAE3B,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CA+JxB,CAAC"}