@scality/core-ui 0.170.0 → 0.172.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.d.ts

@@ -126,6 +126,8 @@ export declare const iconTable: {
     Stop: string;
     Play: string;
     Mail: string;
+    ThumbsUp: string;
+    ThumbsDown: string;
 };
 type IconProps = {
     'aria-label'?: string;

package/dist/components/icon/Icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HrB,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAOtG,CAAC;AAgBF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AA2DF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

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

@@ -131,6 +131,8 @@ export const iconTable = {
     Stop: 'fas faStop',
     Play: 'fas faPlay',
     Mail: 'fas faEnvelope',
+    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/linetemporalchart/ChartUtil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;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,CAAC;CACnB,CAwCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,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,CA2CpC;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}
+{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;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,CAAC;CACnB,CAwCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,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;AAID,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}

package/dist/components/linetemporalchart/ChartUtil.js

@@ -94,8 +94,16 @@ export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDura
         return [];
     }
     const newValues = [];
+    // add missing data points for the starting time
+    for (let i = startingTimeStamp; i < orginalValues[0][0]; i += sampleInterval) {
+        newValues.push([i, NAN_STRING]);
+    }
     // Process all but the last element
     for (let i = 0; i < orginalValues.length - 1; i++) {
+        if (orginalValues[i][0] < startingTimeStamp ||
+            orginalValues[i][0] > startingTimeStamp + sampleDuration) {
+            continue;
+        }
         // Always add the current data point
         newValues.push(orginalValues[i]);
         const currentTimestamp = orginalValues[i][0];
@@ -111,6 +119,10 @@ export function addMissingDataPoint(orginalValues, startingTimeStamp, sampleDura
     }
     // Add the last element
     newValues.push(orginalValues[orginalValues.length - 1]);
+    // add missing data points for the ending time
+    for (let i = orginalValues[orginalValues.length - 1][0] + sampleInterval; i < startingTimeStamp + sampleDuration; i += sampleInterval) {
+        newValues.push([i, NAN_STRING]);
+    }
     return newValues;
 }
 // get the value for the based value

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

@@ -1,3 +1,4 @@
+import { TooltipContentProps } from 'recharts';
 export type Serie = {
     resource: string;
     data: [number, number | string | null][];
@@ -7,14 +8,14 @@ export type Serie = {
 };
 type NonSymmetricalChartSerie = {
     yAxisType?: 'default' | 'percentage';
-    series: Serie[];
+    series: Serie[] | undefined;
 };
 type SymmetricalChartSerie = {
     yAxisType: 'symmetrical';
     series: {
-        above: Serie[];
-        below: Serie[];
-    };
+        above: Serie[] | undefined;
+        below: Serie[] | undefined;
+    } | undefined;
 };
 export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie) & {
     title: string;
@@ -26,6 +27,7 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
         threshold: number;
         label: string;
     }[];
+    syncId?: string;
     isLoading?: boolean;
     /**
      * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
@@ -35,7 +37,8 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
     timeFormat?: 'date-time' | 'date';
     yAxisTitle?: string;
     helpText?: string;
+    renderTooltip?: (tooltipProps: TooltipContentProps<number, string>, unitLabel?: string, timeFormat?: 'date-time' | 'date') => React.ReactNode;
 };
-export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, syncId, renderTooltip, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=linetimeseriechart.component.d.ts.map

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":"AAoGA,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,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,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,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;CACnB,CAAC;AAkEF,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,GAAG,IAAI,EACR,EAAE,cAAc,2CA6ShB"}
+{"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

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, } from 'recharts';
-import { useCallback, useMemo, useRef } from 'react';
-import { useTheme } from 'styled-components';
-import { addMissingDataPoint } from '../linetemporalchart/ChartUtil';
-import styled from 'styled-components';
-import { fontSize, fontWeight } from '../../style/theme';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { ChartTitleText, SmallerText } from '../text/Text.component';
-import { Loader } from '../loader/Loader.component';
+import { CartesianGrid, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
 import { spacing } from '../../spacing';
-import { getUnitLabel } from '../linetemporalchart/ChartUtil';
+import { fontSize } from '../../style/theme';
+import { Box } from '../box/Box';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 import { Icon } from '../icon/Icon.component';
+import { addMissingDataPoint, getUnitLabel, } from '../linetemporalchart/ChartUtil';
+import { Loader } from '../loader/Loader.component';
+import { ChartTitleText, SmallerText } from '../text/Text.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { Box } from '../box/Box';
 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;
@@ -25,57 +25,13 @@ const ChartHeader = styled.div `
   display: flex;
   align-items: center;
 `;
-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;
-`;
-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 = ({ active, payload, label, unitLabel, timeFormat, }) => {
-    if (!active || !payload || !payload.length || !label)
+const LineTimeSerieChartTooltip = ({ unitLabel, timeFormat, isChartActive, tooltipProps, renderTooltip, hoveredValue, }) => {
+    const { active, payload, label } = tooltipProps;
+    if (!active || !payload || !payload.length || !label || !isChartActive)
         return null;
+    if (renderTooltip) {
+        return renderTooltip(tooltipProps, unitLabel, timeFormat);
+    }
     // We can't use the default itemSorter method because it's a custom tooltip.
     // Sort the payload here instead
     const sortedPayload = [...payload].sort((a, b) => {
@@ -89,32 +45,57 @@ const CustomTooltip = ({ active, payload, label, unitLabel, timeFormat, }) => {
         }
         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;
 };
-export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, ...rest }) {
+export function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading = false, timeFormat = 'date-time', yAxisType = 'default', yAxisTitle, helpText, syncId, renderTooltip, ...rest }) {
     const theme = useTheme();
-    const { getColor } = useChartLegend();
+    const { getColor, selectedResources } = useChartLegend();
     const chartRef = useRef(null);
+    const [isChartActive, setIsChartActive] = useState(false);
+    const [hoveredValue, setHoveredValue] = useState(undefined);
     const chartData = useMemo(() => {
+        // Guard against empty/undefined series data
+        if (!series || (Array.isArray(series) && series.length === 0)) {
+            return [];
+        }
+        // Handle symmetrical series with empty above/below arrays
+        if (isSymmetricalSeries(series)) {
+            if ((!series.above || series.above.length === 0) &&
+                (!series.below || series.below.length === 0)) {
+                return [];
+            }
+        }
         // 1. Add missing data points
         const normalizedSeries = yAxisType === 'symmetrical' && isSymmetricalSeries(series)
             ? {
-                above: series.above.map((line) => ({
-                    ...line,
-                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
-                })),
+                above: series.above
+                    ? series.above.map((line) => ({
+                        ...line,
+                        data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval),
+                    }))
+                    : [],
                 // Convert positive values to negative values
-                below: series.below.map((line) => ({
-                    ...line,
-                    data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval).map(([timestamp, value]) => [timestamp, value === null ? null : `-${Number(value)}`]),
-                })),
+                below: series.below
+                    ? series.below.map((line) => ({
+                        ...line,
+                        data: addMissingDataPoint(line.data, startingTimeStamp, duration, interval).map(([timestamp, value]) => [
+                            timestamp,
+                            value === null ? null : `-${Number(value)}`,
+                        ]),
+                    }))
+                    : [],
             }
             : series.map((line) => ({
                 ...line,
@@ -177,6 +158,14 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
             return !isNaN(num) && num !== null ? num : null;
         })
             .filter((value) => value !== null));
+        // Guard against empty values array
+        if (values.length === 0) {
+            return {
+                topValue: 100, // Default value for empty charts
+                unitLabel: '',
+                rechartsData: [],
+            };
+        }
         const top = Math.abs(Math.max(...values));
         const bottom = Math.abs(Math.min(...values));
         const maxValue = Math.max(top, bottom);
@@ -196,11 +185,17 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
     // Group series by resource and create color mapping
     const { colorMapping, groupedSeries } = useMemo(() => {
         const mapping = {};
+        // Guard against empty/undefined series
+        if (!series) {
+            return { colorMapping: mapping, groupedSeries: {} };
+        }
         const allSeries = isSymmetricalSeries(series)
-            ? [...series.above, ...series.below]
+            ? [...(series.above || []), ...(series.below || [])]
             : series;
         // Group series by resource
-        const groups = allSeries.reduce((acc, serie) => {
+        const groups = allSeries
+            .filter((serie) => selectedResources.includes(serie.resource))
+            .reduce((acc, serie) => {
             const key = serie.resource;
             if (!acc[key]) {
                 acc[key] = [];
@@ -222,30 +217,30 @@ export function LineTimeSerieChart({ series, title, height, startingTimeStamp, i
             colorMapping: mapping,
             groupedSeries: groups,
         };
-    }, [series, getColor]);
+    }, [series, getColor, selectedResources]);
     // Format time for display the tick in the x axis
     const formatXAxisLabelCallback = useCallback((timestamp) => formatXAxisLabel(timestamp, timeFormat, chartData), [timeFormat, chartData]);
-    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
-                                fill: theme.textSecondary,
-                                fontSize: fontSize.smaller,
-                            }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
-                                value: yAxisTitle,
-                                angle: 90,
-                                position: 'insideRight',
-                                style: {
-                                    textAnchor: 'middle',
+    return (_jsxs(LineTemporalChartWrapper, { children: [_jsxs(ChartHeader, { children: [_jsxs(ChartTitleText, { children: [title, " ", unitLabel && `(${unitLabel})`] }), helpText && (_jsx(Box, { ml: spacing.r4, children: _jsx(TooltipComponent, { placement: 'right', overlay: _jsx(SmallerText, { children: helpText }), children: _jsx(Icon, { name: "Info", color: theme.buttonSecondary }) }) })), isLoading && _jsx(Loader, {})] }), _jsx("div", { onFocus: () => setIsChartActive(true), onBlur: () => setIsChartActive(false), onFocusCapture: () => setIsChartActive(true), onBlurCapture: () => setIsChartActive(false), children: _jsx(ResponsiveContainer, { width: "100%", height: height, children: _jsxs(LineChart, { data: rechartsData, ref: chartRef, margin: { top: 0, right: 0, bottom: 0, left: 0 }, "aria-label": `Time series chart for ${title}`, syncId: syncId, onMouseEnter: () => setIsChartActive(true), onMouseLeave: () => setIsChartActive(false), children: [_jsx(CartesianGrid, { vertical: true, horizontal: true, verticalPoints: [0], horizontalPoints: [0], stroke: theme.border, fill: theme.backgroundLevel4, strokeWidth: 1 }), _jsx(XAxis, { dataKey: "timestamp", type: "number", domain: ['dataMin', 'dataMax'], ticks: xAxisTicks, tickFormatter: formatXAxisLabelCallback, tickCount: 5, tick: {
+                                    fill: theme.textSecondary,
+                                    fontSize: fontSize.smaller,
+                                }, axisLine: { stroke: theme.border } }), _jsx(YAxis, { orientation: "right", allowDataOverflow: false, label: {
+                                    value: yAxisTitle,
+                                    angle: 90,
+                                    position: 'insideRight',
+                                    style: {
+                                        textAnchor: 'middle',
+                                        fill: theme.textSecondary,
+                                        fontSize: fontSize.smaller,
+                                    },
+                                }, domain: yAxisType === 'percentage'
+                                    ? [0, 100]
+                                    : yAxisType === 'symmetrical'
+                                        ? [-topValue, topValue]
+                                        : [0, topValue], axisLine: { stroke: theme.border }, tick: {
                                     fill: theme.textSecondary,
                                     fontSize: fontSize.smaller,
-                                },
-                            }, domain: yAxisType === 'percentage'
-                                ? [0, 100]
-                                : yAxisType === 'symmetrical'
-                                    ? [-topValue, topValue]
-                                    : [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: _jsx(CustomTooltip, { unitLabel: unitLabel, timeFormat: timeFormat }) }), 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}`));
-                        }))] }) })] }));
+                                }, 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, 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 })] }) }));
+}