@scality/core-ui 0.171.0 → 0.173.0

package/dist/components/globalhealthbar/useHealthBarData.spec.js

@@ -0,0 +1,207 @@
+import { useHealthBarData } from './useHealthBarData';
+import { renderHook } from '@testing-library/react';
+describe('useHealthBarData', () => {
+    const mockTimestamp = {
+        start: new Date('2023-12-01T00:00:00Z').getTime(),
+        end: new Date('2023-12-01T12:00:00Z').getTime(),
+    };
+    const createMockAlert = (severity, startsAt, endsAt, description = 'Test alert') => ({
+        description,
+        severity,
+        startsAt,
+        endsAt,
+    });
+    describe('Alert Filtering', () => {
+        it('should include alerts that are completely within the time range', () => {
+            const alerts = [
+                createMockAlert('critical', '2023-12-01T02:00:00Z', '2023-12-01T04:00:00Z'),
+                createMockAlert('warning', '2023-12-01T06:00:00Z', '2023-12-01T08:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.chartData[0]).toHaveProperty('critical_0');
+            expect(result.current.chartData[0]).toHaveProperty('warning_1');
+            expect(result.current.alertKeys.criticalKeys).toContain('critical_0');
+            expect(result.current.alertKeys.warningKeys).toContain('warning_1');
+        });
+        it('should include alerts that start before and end within the time range', () => {
+            const alerts = [
+                createMockAlert('critical', '2023-11-30T22:00:00Z', '2023-12-01T04:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.chartData[0]).toHaveProperty('critical_0');
+            expect(result.current.alertKeys.criticalKeys).toContain('critical_0');
+        });
+        it('should include alerts that start within and end after the time range', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T10:00:00Z', '2023-12-01T14:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.chartData[0]).toHaveProperty('warning_0');
+            expect(result.current.alertKeys.warningKeys).toContain('warning_0');
+        });
+        it('should include alerts that span the entire time range', () => {
+            const alerts = [
+                createMockAlert('critical', '2023-11-30T20:00:00Z', '2023-12-01T16:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.chartData[0]).toHaveProperty('critical_0');
+            expect(result.current.alertKeys.criticalKeys).toContain('critical_0');
+        });
+        it('should exclude alerts that are completely before the time range', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-11-30T10:00:00Z', '2023-11-30T20:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.chartData[0]).not.toHaveProperty('warning_0');
+            expect(result.current.alertKeys.warningKeys).toHaveLength(0);
+        });
+        it('should exclude alerts that are completely after the time range', () => {
+            const alerts = [
+                createMockAlert('critical', '2023-12-01T14:00:00Z', '2023-12-01T18:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.chartData[0]).not.toHaveProperty('critical_0');
+            expect(result.current.alertKeys.criticalKeys).toHaveLength(0);
+        });
+    });
+    describe('Data Transformation', () => {
+        it('should create correct data structure with basic properties', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T02:00:00Z', '2023-12-01T04:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            const data = result.current.chartData[0];
+            expect(data.range).toEqual([mockTimestamp.start, mockTimestamp.end]);
+        });
+        it('should create correct alert data keys with timestamps', () => {
+            const alerts = [
+                createMockAlert('critical', '2023-12-01T02:00:00Z', '2023-12-01T04:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            const data = result.current.chartData[0];
+            const expectedStartTime = new Date('2023-12-01T02:00:00Z').getTime();
+            const expectedEndTime = new Date('2023-12-01T04:00:00Z').getTime();
+            expect(data['critical_0']).toEqual([expectedStartTime, expectedEndTime]);
+        });
+        it('should create alert metadata with correct structure', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T02:00:00Z', '2023-12-01T04:00:00Z', 'Test warning'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.alertsMap['warning_0']).toEqual({
+                description: 'Test warning',
+                severity: 'warning',
+                startsAt: '2023-12-01T02:00:00Z',
+                endsAt: '2023-12-01T04:00:00Z',
+            });
+        });
+        it('should handle multiple alerts with correct indexing', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T01:00:00Z', '2023-12-01T02:00:00Z'),
+                createMockAlert('critical', '2023-12-01T03:00:00Z', '2023-12-01T04:00:00Z'),
+                createMockAlert('warning', '2023-12-01T05:00:00Z', '2023-12-01T06:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            const data = result.current.chartData[0];
+            expect(data).toHaveProperty('warning_0');
+            expect(data).toHaveProperty('critical_1');
+            expect(data).toHaveProperty('warning_2');
+            expect(result.current.alertsMap).toHaveProperty('warning_0');
+            expect(result.current.alertsMap).toHaveProperty('critical_1');
+            expect(result.current.alertsMap).toHaveProperty('warning_2');
+        });
+    });
+    describe('Alert Key Categorization', () => {
+        it('should categorize alert keys by severity', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T01:00:00Z', '2023-12-01T02:00:00Z'),
+                createMockAlert('critical', '2023-12-01T03:00:00Z', '2023-12-01T04:00:00Z'),
+                createMockAlert('warning', '2023-12-01T05:00:00Z', '2023-12-01T06:00:00Z'),
+                createMockAlert('critical', '2023-12-01T07:00:00Z', '2023-12-01T08:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.alertKeys.warningKeys).toEqual([
+                'warning_0',
+                'warning_2',
+            ]);
+            expect(result.current.alertKeys.criticalKeys).toEqual([
+                'critical_1',
+                'critical_3',
+            ]);
+            expect(result.current.alertKeys.unavailableKeys).toEqual([]);
+        });
+        it('should handle only warning alerts', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T01:00:00Z', '2023-12-01T02:00:00Z'),
+                createMockAlert('warning', '2023-12-01T03:00:00Z', '2023-12-01T04:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.alertKeys.warningKeys).toEqual([
+                'warning_0',
+                'warning_1',
+            ]);
+            expect(result.current.alertKeys.criticalKeys).toEqual([]);
+            expect(result.current.alertKeys.unavailableKeys).toEqual([]);
+        });
+        it('should handle only critical alerts', () => {
+            const alerts = [
+                createMockAlert('critical', '2023-12-01T01:00:00Z', '2023-12-01T02:00:00Z'),
+                createMockAlert('critical', '2023-12-01T03:00:00Z', '2023-12-01T04:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.alertKeys.warningKeys).toEqual([]);
+            expect(result.current.alertKeys.criticalKeys).toEqual([
+                'critical_0',
+                'critical_1',
+            ]);
+            expect(result.current.alertKeys.unavailableKeys).toEqual([]);
+        });
+        it('should only include alert bar keys and exclude metadata and basic properties', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T01:00:00Z', '2023-12-01T02:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            // Should only contain the actual alert bar keys for rendering
+            expect(result.current.alertKeys.warningKeys).toEqual(['warning_0']);
+            // Should not contain basic data properties
+            expect(result.current.alertKeys.warningKeys).not.toContain('start');
+            expect(result.current.alertKeys.warningKeys).not.toContain('end');
+            expect(result.current.alertKeys.warningKeys).not.toContain('range');
+            expect(result.current.alertKeys.warningKeys).not.toContain('id');
+            // Should not contain alert metadata keys (used for tooltips, not bars)
+            expect(result.current.alertKeys.warningKeys).not.toContain('alert_warning_0');
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle empty alerts array', () => {
+            const { result } = renderHook(() => useHealthBarData([], mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            const data = result.current.chartData[0];
+            expect(data.range).toEqual([mockTimestamp.start, mockTimestamp.end]);
+            expect(result.current.alertKeys.warningKeys).toEqual([]);
+            expect(result.current.alertKeys.criticalKeys).toEqual([]);
+            expect(result.current.alertKeys.unavailableKeys).toEqual([]);
+        });
+        it('should handle overlapping alerts correctly', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T01:00:00Z', '2023-12-01T04:00:00Z'),
+                createMockAlert('critical', '2023-12-01T02:00:00Z', '2023-12-01T05:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.chartData[0]).toHaveProperty('warning_0');
+            expect(result.current.chartData[0]).toHaveProperty('critical_1');
+            expect(result.current.alertKeys.warningKeys).toContain('warning_0');
+            expect(result.current.alertKeys.criticalKeys).toContain('critical_1');
+        });
+        it('should handle alerts with same timestamps', () => {
+            const alerts = [
+                createMockAlert('warning', '2023-12-01T02:00:00Z', '2023-12-01T04:00:00Z'),
+                createMockAlert('critical', '2023-12-01T02:00:00Z', '2023-12-01T04:00:00Z'),
+            ];
+            const { result } = renderHook(() => useHealthBarData(alerts, mockTimestamp.start, mockTimestamp.end, 'test-id'));
+            expect(result.current.chartData[0]).toHaveProperty('warning_0');
+            expect(result.current.chartData[0]).toHaveProperty('critical_1');
+            expect(result.current.alertKeys.warningKeys).toContain('warning_0');
+            expect(result.current.alertKeys.criticalKeys).toContain('critical_1');
+        });
+    });
+});

package/dist/components/icon/Icon.component.js

@@ -131,8 +131,8 @@ export const iconTable = {
     Stop: 'fas faStop',
     Play: 'fas faPlay',
     Mail: 'fas faEnvelope',
-    ThumbsUp: 'fas faThumbsUp',
-    ThumbsDown: 'fas faThumbsDown',
+    ThumbsUp: 'far faThumbsUp',
+    ThumbsDown: 'far faThumbsDown',
 };
 export const customIcons = {
     'Remote-user': ({ 'aria-label': ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts

@@ -1,6 +1,4 @@
 import { TooltipContentProps } from 'recharts';
-export declare const TooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const TooltipTime: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export type Serie = {
     resource: string;
     data: [number, number | string | null][];

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AA8BlB,eAAO,MAAM,gBAAgB,yGAO5B,CAAC;AAEF,eAAO,MAAM,WAAW,yGAMvB,CAAC;AAwCF,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,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6EF,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,2CAmWhB"}
+{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAqClB,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,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,KAC9B,KAAK,CAAC,SAAS,CAAC;CACtB,CAAC;AA6FF,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,2CAwWhB"}

package/dist/components/linetimeseriechart/linetimeseriechart.component.js

@@ -3,7 +3,7 @@ import { CartesianGrid, Line, LineChart, ReferenceLine, ResponsiveContainer, Too
 import { useCallback, useMemo, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { spacing } from '../../spacing';
-import { fontSize, fontWeight } from '../../style/theme';
+import { fontSize } from '../../style/theme';
 import { Box } from '../box/Box';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 import { FormattedDateTime } from '../date/FormattedDateTime';
@@ -13,6 +13,8 @@ import { Loader } from '../loader/Loader.component';
 import { ChartTitleText, SmallerText } from '../text/Text.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
 import { formatXAxisLabel } from './utils';
+import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from '../charttooltip/ChartTooltip';
+import { LegendShape } from '../chartlegend/ChartLegend';
 const LineTemporalChartWrapper = styled.div `
   display: flex;
   flex-direction: column;
@@ -23,56 +25,8 @@ const ChartHeader = styled.div `
   display: flex;
   align-items: center;
 `;
-export const TooltipContainer = styled.div `
-  background-color: ${(props) => props.theme.backgroundLevel1};
-  padding: ${spacing.r8};
-  border: 1px solid ${(props) => props.theme.border};
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  max-width: 250px;
-`;
-export const TooltipTime = styled.div `
-  margin-bottom: ${spacing.r8};
-  color: ${(props) => props.theme.textPrimary};
-  font-size: ${fontSize.smaller};
-  font-weight: ${fontWeight.bold};
-  text-align: center;
-`;
-const TooltipValue = styled.div `
-  font-size: ${fontSize.smaller};
-  margin-top: 4px;
-  color: ${(props) => props.theme.textSecondary};
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  width: 100%;
-`;
-const TooltipLegend = styled.div `
-  width: 12px;
-  height: 3px;
-  background-color: ${(props) => props.color};
-  margin-right: 8px;
-  flex-shrink: 0;
-  margin-top: 8px;
-`;
-const TooltipLeftGroup = styled.div `
-  display: flex;
-  align-items: flex-start;
-  min-width: 0;
-  flex: 1;
-`;
-const TooltipName = styled.div `
-  word-wrap: break-word;
-  word-break: break-word;
-  flex: 1;
-`;
-const TooltipInstanceValue = styled.div `
-  margin-left: 16px;
-  flex-shrink: 0;
-  text-align: right;
-`;
-const CustomTooltip = ({ unitLabel, timeFormat, isChartActive, tooltipProps, renderTooltip, }) => {
-    const { active, payload, label, ...rest } = tooltipProps;
+const LineTimeSerieChartTooltip = ({ unitLabel, timeFormat, isChartActive, tooltipProps, renderTooltip, hoveredValue, }) => {
+    const { active, payload, label } = tooltipProps;
     if (!active || !payload || !payload.length || !label || !isChartActive)
         return null;
     if (renderTooltip) {
@@ -91,11 +45,16 @@ const CustomTooltip = ({ unitLabel, timeFormat, isChartActive, tooltipProps, ren
         }
         return bValue - aValue; // Positives before negatives
     });
-    return (_jsxs(TooltipContainer, { children: [_jsx(TooltipTime, { children: _jsx(FormattedDateTime, { format: timeFormat === 'date-time'
+    return (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: _jsx(FormattedDateTime, { format: timeFormat === 'date-time'
                         ? 'day-month-abbreviated-hour-minute-second'
-                        : 'long-date-without-weekday', value: new Date(label) }) }), sortedPayload.map((entry, index) => (_jsxs(TooltipValue, { children: [_jsxs(TooltipLeftGroup, { children: [_jsx(TooltipLegend, { color: entry.color }), _jsx(TooltipName, { children: entry.name })] }), _jsx(TooltipInstanceValue, { children: !Number.isFinite(entry.value)
-                            ? '-'
-                            : `${entry.value.toFixed(2)} ${unitLabel}` })] }, index)))] }));
+                        : 'long-date-without-weekday', value: new Date(label) }) }), _jsx(ChartTooltipItemsContainer, { children: sortedPayload.map((entry, index) => {
+                    const legendIcon = (_jsx(LegendShape, { color: entry.color, shape: "line", chartColors: { [entry.color]: entry.color } }));
+                    const isHovered = entry.name === hoveredValue;
+                    const formattedValue = !Number.isFinite(entry.value)
+                        ? '-'
+                        : `${entry.value.toFixed(2)} ${unitLabel}`;
+                    return (_jsx(ChartTooltipItem, { label: entry.name, value: formattedValue, legendIcon: legendIcon, isHovered: isHovered }, index));
+                }) })] }));
 };
 const isSymmetricalSeries = (series) => {
     return 'above' in series && 'below' in series;
@@ -105,6 +64,7 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
     const { getColor, selectedResources } = useChartLegend();
     const chartRef = useRef(null);
     const [isChartActive, setIsChartActive] = useState(false);
+    const [hoveredValue, setHoveredValue] = useState(undefined);
     const chartData = useMemo(() => {
         // Guard against empty/undefined series data
         if (!series || (Array.isArray(series) && series.length === 0)) {
@@ -279,8 +239,8 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
                                         : [0, topValue], axisLine: { stroke: theme.border }, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                }, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _jsx(Tooltip, { content: (props) => (_jsx(CustomTooltip, { unitLabel: unitLabel, timeFormat: timeFormat, renderTooltip: renderTooltip, tooltipProps: props, isChartActive: isChartActive })) }), yAxisType === 'symmetrical' && (_jsx(ReferenceLine, { y: 0, stroke: theme.border })), Object.entries(groupedSeries).map(([resource, resourceSeries]) => resourceSeries.map((serie, serieIndex) => {
+                                }, tickFormatter: (value) => Math.round(value).toString(), tickCount: 5, interval: 'preserveStartEnd' }), _jsx(Tooltip, { content: (props) => (_jsx(LineTimeSerieChartTooltip, { unitLabel: unitLabel, timeFormat: timeFormat, renderTooltip: renderTooltip, tooltipProps: props, isChartActive: isChartActive, hoveredValue: hoveredValue })) }), 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 }, `${title}-${resource}-${serieIndex}`));
+                                return (_jsx(Line, { type: "monotone", dataKey: label, stroke: colorMapping[resource], dot: false, isAnimationActive: false, onMouseEnter: () => setHoveredValue(label), onMouseLeave: () => setHoveredValue(undefined) }, `${title}-${resource}-${serieIndex}`));
                             }))] }) }) })] }));
 }

package/dist/components/sparkline/sparkline.component.d.ts

@@ -0,0 +1,16 @@
+type SparklineProps = {
+    serie: {
+        data: [number, number | null][];
+        color?: string;
+    };
+    startingTimeStamp: number;
+    sampleDuration: number;
+    sampleInterval: number;
+};
+/**
+ * Sparkline is a simple dynamically sized area chart.
+ * Used to show trends in data over time.
+ */
+export declare function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: SparklineProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=sparkline.component.d.ts.map

package/dist/components/sparkline/sparkline.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sparkline/sparkline.component.tsx"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE;QACL,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAC,IAAI,CAAC,EAAE,CAAC;QAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,cAAc,2CAiCrG"}

package/dist/components/sparkline/sparkline.component.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import { useTheme } from "styled-components";
+import { chartColors } from "../../style/theme";
+import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
+/**
+ * Sparkline is a simple dynamically sized area chart.
+ * Used to show trends in data over time.
+ */
+export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }) {
+    var _a;
+    const data = useMemo(() => {
+        const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
+        return dataMdp.map(([x, y]) => ({ x, y }));
+    }, [serie.data]);
+    const color = (_a = serie.color) !== null && _a !== void 0 ? _a : chartColors.lineColor1;
+    const strokeGridColor = useTheme().border;
+    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, { data: data, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: `gradient-${color}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.7 }), _jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.1 })] }) }), _jsx(CartesianGrid, { horizontal: false, stroke: strokeGridColor, strokeOpacity: 0.5 }), _jsx(Area, { type: "linear", dataKey: "y", stroke: color, fill: `url(#gradient-${color})`, dot: false, activeDot: false, isAnimationActive: false })] }) }));
+}

package/dist/components/text/Text.component.d.ts

@@ -1,5 +1,5 @@
 import { CoreUITheme } from '../../style/theme';
-export type TextVariant = 'ChartTitle' | 'Basic' | 'Smaller' | 'Larger' | 'Large';
+export type TextVariant = 'ChartTitle' | 'Basic' | 'Smaller' | 'Larger' | 'Large' | 'Small';
 type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
 type Props = {
     children: React.ReactNode | string;

package/dist/components/text/Text.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,WAAW,GACnB,YAAY,GACZ,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,CAAC;AAEZ,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAE1D;AACD,eAAO,MAAM,0BAA0B;iBACxB,OAAO;SAUrB,CAAC;AAEF,eAAO,MAAM,IAAI;cACL,WAAW;YACb,MAAM,WAAW;iBACZ,OAAO;uBACD,OAAO;SA2C3B,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}
+{"version":3,"file":"Text.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/text/Text.component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,WAAW,GACnB,YAAY,GACZ,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,OAAO,CAAC;AAEZ,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAC7D,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAsDF,eAAO,MAAM,uBAAuB;iBACrB,MAAM;SAIpB,CAAC;AAIF,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEzD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEtD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAO9D;AACD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAErD;AACD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAEvD;AACD,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAIhE;AACD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAOtE;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,2CAE1D;AACD,eAAO,MAAM,0BAA0B;iBACxB,OAAO;SAUrB,CAAC;AAEF,eAAO,MAAM,IAAI;cACL,WAAW;YACb,MAAM,WAAW;iBACZ,OAAO;uBACD,OAAO;SAgD3B,CAAC;AAEF,eAAO,MAAM,IAAI,uGAchB,CAAC"}

package/dist/components/text/Text.component.js

@@ -116,7 +116,12 @@ export const Text = styled.span `
   line-height: 1.4;
   letter-spacing: 2%;// to be defined, percentage value is not valid
       `
-            : `
+            : props.variant === 'Small'
+                ? `
+  font-size: 0.85rem;
+  line-height: 1.4;
+      `
+                : `
   font-size: 1rem;
   line-height: ${spacing.r24};
       `}

package/dist/next.d.ts

@@ -14,9 +14,12 @@ export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, BarchartSortFn, BarchartTooltipFn, } from './components/barchartv2/Barchart.component';
-export { ChartTooltip } from './components/barchartv2/ChartTooltip';
+export { BarchartTooltip } from './components/barchartv2/BarchartTooltip';
 export { ChartLegendWrapper, useChartId, } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from './components/charttooltip/ChartTooltip';
 export { CoreUITheme } from './style/theme';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';
+export { Sparkline } from './components/sparkline/sparkline.component';
 //# sourceMappingURL=next.d.ts.map

package/dist/next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EACL,kBAAkB,EAClB,UAAU,GACX,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EACL,kBAAkB,EAClB,UAAU,GACX,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC;AAClG,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,gEAAgE,CAAC;AACjG,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC"}

package/dist/next.js

@@ -14,7 +14,10 @@ export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, } from './components/barchartv2/Barchart.component';
-export { ChartTooltip } from './components/barchartv2/ChartTooltip';
+export { BarchartTooltip } from './components/barchartv2/BarchartTooltip';
 export { ChartLegendWrapper, useChartId, } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from './components/charttooltip/ChartTooltip';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';
+export { Sparkline } from './components/sparkline/sparkline.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.171.0",
+  "version": "0.173.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -20,7 +20,7 @@
     "prepare": "npm run build",
     "postbuild": "npm run copy-files",
     "test": "jest",
-    "storybook": "storybook dev -p 3000",
+    "storybook": "storybook dev -p 3001",
     "build-storybook": "storybook build",
     "storybook:deploy": "npm run build-storybook && gh-pages -d storybook-static -u \"github-actions-bot <support+actions@github.com>\""
   },

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -20,7 +20,7 @@ import { FormattedDateTime } from '../date/FormattedDateTime';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import { ChartTooltip } from './ChartTooltip';
+import { BarchartTooltip } from './BarchartTooltip';
 import { UnitRange, useChartData } from './utils';
 
 const CHART_CONSTANTS = {
@@ -393,12 +393,13 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
 
             <Tooltip
               content={(props: TooltipContentProps<number, string>) => (
-                <ChartTooltip
+                <BarchartTooltip
                   type={type}
                   colorSet={colorSet}
                   tooltipProps={props}
                   hoveredValue={hoveredValue}
                   tooltip={tooltip}
+                  unitLabel={unitLabel}
                 />
               )}
               cursor={false}

package/src/lib/components/barchartv2/{ChartTooltip.test.tsx → BarchartTooltip.test.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ChartTooltip } from './ChartTooltip';
+import { BarchartTooltip } from './BarchartTooltip';
 
 const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
 const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
@@ -27,12 +27,13 @@ describe('ChartTooltip', () => {
     successValue: () => screen.queryByText(SUCCESS_VALUE),
     failed: () => screen.queryByText(/Failed/),
     failedValue: () => screen.queryByText(FAILED_VALUE),
-    date: () => screen.queryByText(/Monday, 01 July 2024/),
-    time: () => screen.queryByText(/00:00/),
+    longDate: () => screen.queryByText(/01 July 2024/),
+    date: () => screen.queryByText(/\b01 Jul\b/),
+    time: () => screen.queryByText(/00:00:00/),
   };
-  it('should render the ChartTooltip component', () => {
+  it('should render the BarchartTooltip component', () => {
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{ type: 'category' }}
         tooltipProps={testTooltipProps}
         hoveredValue="Success"
@@ -47,7 +48,7 @@ describe('ChartTooltip', () => {
   });
   it('should render tooltip when tooltip is provided', () => {
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{ type: 'category' }}
         tooltipProps={testTooltipProps}
         hoveredValue="Success"
@@ -58,7 +59,7 @@ describe('ChartTooltip', () => {
   });
   it('should not render tooltip when tooltipProps is not active', () => {
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{ type: 'category' }}
         tooltipProps={{ ...testTooltipProps, active: false }}
         hoveredValue="Success"
@@ -71,7 +72,7 @@ describe('ChartTooltip', () => {
     // timestamp for Mon Jul 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
     const label = date;
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{
           type: 'time',
           timeRange: {
@@ -84,19 +85,18 @@ describe('ChartTooltip', () => {
         hoveredValue="Success"
       />,
     );
-
     expect(selectors.success()).toBeInTheDocument();
     expect(selectors.successValue()).toBeInTheDocument();
     expect(selectors.failed()).toBeInTheDocument();
     expect(selectors.failedValue()).toBeInTheDocument();
-
-    expect(selectors.date()).toBeInTheDocument();
+    expect(selectors.date()).not.toBeInTheDocument();
+    expect(selectors.longDate()).toBeInTheDocument();
     expect(selectors.time()).not.toBeInTheDocument();
   });
   it('should render time tooltip when type is time and interval is one hour', () => {
     const label = date;
     render(
-      <ChartTooltip
+      <BarchartTooltip
         type={{
           type: 'time',
           timeRange: {
@@ -114,6 +114,29 @@ describe('ChartTooltip', () => {
     expect(selectors.failed()).toBeInTheDocument();
     expect(selectors.failedValue()).toBeInTheDocument();
     expect(selectors.date()).toBeInTheDocument();
+    expect(selectors.longDate()).not.toBeInTheDocument();
     expect(selectors.time()).toBeInTheDocument();
   });
+  it('should render with correctly formatted values when unitLabel is provided', () => {
+    const FREE_VALUE = 123.456789;
+    const USED_VALUE = 20;
+    const tooltipProps = {
+      ...testTooltipProps,
+      payload: [
+        { name: 'Free', value: FREE_VALUE },
+        { name: 'Used', value: USED_VALUE },
+      ],
+    };
+    render(
+      <BarchartTooltip
+        type={{ type: 'category' }}
+        tooltipProps={tooltipProps}
+        hoveredValue="Success"
+        unitLabel="kB"
+      />,
+    );
+
+    expect(screen.getByText('123.46 kB')).toBeInTheDocument();
+    expect(screen.getByText('20 kB')).toBeInTheDocument();
+  });
 });