@oanda/labs-crowd-view-widget 1.0.53 → 1.0.55

package/test/components/Chart/utils/chartUtils.test.ts

@@ -1,12 +1,12 @@
-import type { TooltipParam } from '../../../../src/CrowdViewWidget/components/Chart/types';
 import {
   formatXAxisLabel,
   getLabelData,
   getRectColor,
-  getTimeSpanForGranularity,
   getTooltipFormatter,
   isDifferenceGreaterThanTwoWeeks,
-} from '../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils';
+} from '../../../../src/CrowdViewWidget/components/Chart/chartUtils';
+import { getTimeSpanForGranularity } from '../../../../src/CrowdViewWidget/components/Chart/dataUtils/getTimeSpanForGranularity';
+import type { TooltipParam } from '../../../../src/CrowdViewWidget/components/Chart/types';
 import { COLOR_MAP } from '../../../../src/CrowdViewWidget/constants';
 import {
   BookType,
@@ -138,7 +138,7 @@ describe('chartUtils', () => {
       });
       // First change happens between 1st and 2nd
       expect(labels.length).toBeGreaterThanOrEqual(2);
-      expect(labels[0]).toHaveProperty('xAxis', '2025-03-02T00:00:00Z');
+      expect(labels[0]).toBe('2025-03-02T00:00:00Z');
     });
 
     it('emits label when month changes for >= two weeks case', () => {
@@ -152,7 +152,7 @@ describe('chartUtils', () => {
         isGreaterThanTwoWeeks: false,
       });
       expect(labels.length).toBe(1);
-      expect(labels[0]).toHaveProperty('xAxis', '2025-02-01T00:00:00Z');
+      expect(labels[0]).toBe('2025-02-01T00:00:00Z');
     });
   });
 
@@ -165,6 +165,7 @@ describe('chartUtils', () => {
           seriesId: 'candlestick' as const,
           axisValue: '2025-03-15T10:30:00Z',
           value: [0, 1.11111, 1.22222, 1.00001, 1.33333],
+          dataIndex: 0,
         },
         {
           seriesId: 'heatmap' as const,
@@ -186,6 +187,8 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [],
+        sentimentShorts: [],
       });
       expect(html).toBeDefined();
       expect(html).toContain('candle');
@@ -205,6 +208,7 @@ describe('chartUtils', () => {
           seriesId: 'candlestick' as const,
           axisValue: '2025-03-15T10:30:00Z',
           value: [0, 1.11111, 1.22222, 1.00001, 1.33333],
+          dataIndex: 0,
         },
         {
           seriesId: 'sentiment' as const,
@@ -221,6 +225,8 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [30.5],
+        sentimentShorts: [69.5],
       });
       expect(html).toBeDefined();
       expect(html).toContain('candle');
@@ -231,11 +237,12 @@ describe('chartUtils', () => {
       expect(html).toContain('69.50');
     });
 
-    it('returns undefined when no candlestick param is provided', () => {
+    it('returns empty string when no candlestick param is provided', () => {
       const params: TooltipParam[] = [
         {
           seriesId: 'heatmap' as const,
           value: ['2025-03-15T10:30:00Z', 1.33333, 0],
+          dataIndex: 0,
         },
       ];
 
@@ -248,11 +255,13 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [],
+        sentimentShorts: [],
       });
-      expect(html).toBeUndefined();
+      expect(html).toBe('');
     });
 
-    it('returns undefined when params is empty', () => {
+    it('returns empty string when params is empty', () => {
       const html = getTooltipFormatter({
         params: [],
         buckets: [],
@@ -260,8 +269,10 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [],
+        sentimentShorts: [],
       });
-      expect(html).toBeUndefined();
+      expect(html).toBe('');
     });
   });
 });

package/test/components/Chart/utils/getChartStyles.test.ts

@@ -1,6 +1,6 @@
 import { colorPalette } from '@oanda/labs-widget-common';
 
-import { getChartStyles } from '../../../../src/CrowdViewWidget/components/Chart/utils/getChartStyles';
+import { getChartStyles } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/getChartStyles';
 
 describe('getChartStyles', () => {
   it('returns correct styles for dark mode', () => {
@@ -10,9 +10,9 @@ describe('getChartStyles', () => {
     expect(styles.sentimentShortColor).toBe(colorPalette.darkYellow90);
     expect(styles.candleLongColor).toBe(colorPalette.bottleGreenDark);
     expect(styles.candleShortColor).toBe(colorPalette.orange);
-    expect(styles.sentimentAreaOpacity).toBe(0.5);
+    expect(styles.sentimentOutlineColor).toBe(colorPalette.black);
+    expect(styles.sentimentOutlineWidth).toBe(3);
     expect(styles.tooltipLinesColor).toBe(colorPalette.orange);
-    expect(styles.sentimentLabelColor).toBe(colorPalette.white);
   });
 
   it('returns correct styles for light mode', () => {
@@ -22,9 +22,9 @@ describe('getChartStyles', () => {
     expect(styles.sentimentShortColor).toBe(colorPalette.lightYellow90);
     expect(styles.candleLongColor).toBe(colorPalette.bottleGreenLight);
     expect(styles.candleShortColor).toBe(colorPalette.raspberryLight);
-    expect(styles.sentimentAreaOpacity).toBe(0.2);
+    expect(styles.sentimentOutlineColor).toBe(colorPalette.white);
+    expect(styles.sentimentOutlineWidth).toBe(2);
     expect(styles.tooltipLinesColor).toBe(colorPalette.bottleGreenLight);
-    expect(styles.sentimentLabelColor).toBe(colorPalette.black);
   });
 
   it('returns all required style properties', () => {
@@ -36,9 +36,9 @@ describe('getChartStyles', () => {
       'sentimentShortColor',
       'candleLongColor',
       'candleShortColor',
-      'sentimentAreaOpacity',
+      'sentimentOutlineColor',
+      'sentimentOutlineWidth',
       'tooltipLinesColor',
-      'sentimentLabelColor',
     ];
 
     requiredProperties.forEach((prop) => {
@@ -53,12 +53,12 @@ describe('getChartStyles', () => {
     });
   });
 
-  it('returns different opacity values for dark and light modes', () => {
+  it('returns different outline width values for dark and light modes', () => {
     const darkStyles = getChartStyles(true);
     const lightStyles = getChartStyles(false);
 
-    expect(darkStyles.sentimentAreaOpacity).toBeGreaterThan(
-      lightStyles.sentimentAreaOpacity
+    expect(darkStyles.sentimentOutlineWidth).toBeGreaterThan(
+      lightStyles.sentimentOutlineWidth
     );
   });
 });

package/test/components/Chart/utils/handleLabelUpdate.test.ts

@@ -0,0 +1,419 @@
+import type { EChartsType } from 'echarts';
+
+import { formatXAxisAdditionalLabel } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel';
+import { formatXAxisLabel } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel';
+import { getLabelData } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/getLabelData';
+import { handleLabelUpdate } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/handleLabelUpdate';
+import { isDifferenceGreaterThanTwoWeeks } from '../../../../src/CrowdViewWidget/components/Chart/chartUtils/isDifferenceGreaterThanTwoWeeks';
+import type { ChartProps } from '../../../../src/CrowdViewWidget/components/Chart/types';
+
+// Mock dependencies
+jest.mock(
+  '../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisAdditionalLabel'
+);
+jest.mock(
+  '../../../../src/CrowdViewWidget/components/Chart/chartUtils/formatXAxisLabel'
+);
+jest.mock(
+  '../../../../src/CrowdViewWidget/components/Chart/chartUtils/getLabelData'
+);
+jest.mock(
+  '../../../../src/CrowdViewWidget/components/Chart/chartUtils/isDifferenceGreaterThanTwoWeeks'
+);
+
+const mockFormatXAxisLabel = formatXAxisLabel as jest.MockedFunction<
+  typeof formatXAxisLabel
+>;
+const mockFormatXAxisAdditionalLabel =
+  formatXAxisAdditionalLabel as jest.MockedFunction<
+    typeof formatXAxisAdditionalLabel
+  >;
+const mockGetLabelData = getLabelData as jest.MockedFunction<
+  typeof getLabelData
+>;
+const mockIsDifferenceGreaterThanTwoWeeks =
+  isDifferenceGreaterThanTwoWeeks as jest.MockedFunction<
+    typeof isDifferenceGreaterThanTwoWeeks
+  >;
+
+describe('handleLabelUpdate', () => {
+  let mockInstance: jest.Mocked<EChartsType>;
+  let labelTimerRef: { current: NodeJS.Timeout | null };
+  let isGreaterThanTwoWeeksRef: { current: boolean | null };
+  let mainData: ChartProps['mainData'];
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllMocks();
+
+    mockInstance = {
+      getOption: jest.fn(),
+      setOption: jest.fn(),
+    } as unknown as jest.Mocked<EChartsType>;
+
+    labelTimerRef = { current: null };
+    isGreaterThanTwoWeeksRef = { current: null };
+
+    mainData = {
+      dates: [
+        '2025-01-01T00:00:00Z',
+        '2025-01-02T00:00:00Z',
+        '2025-01-03T00:00:00Z',
+        '2025-01-04T00:00:00Z',
+        '2025-01-05T00:00:00Z',
+      ],
+      candlesOpen: [1.1, 1.2, 1.3, 1.4, 1.5],
+      candlesClose: [1.15, 1.25, 1.35, 1.45, 1.55],
+      candlesLow: [1.05, 1.15, 1.25, 1.35, 1.45],
+      candlesHigh: [1.2, 1.3, 1.4, 1.5, 1.6],
+      sentimentShorts: [10, 20, 30, 40, 50],
+      sentimentLongs: [90, 80, 70, 60, 50],
+    };
+
+    mockFormatXAxisLabel.mockReturnValue('formatted-label');
+    mockFormatXAxisAdditionalLabel.mockReturnValue('formatted-additional');
+    mockGetLabelData.mockReturnValue([
+      '2025-01-02T00:00:00Z',
+      '2025-01-04T00:00:00Z',
+    ]);
+    mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  describe('when dataZoom is invalid', () => {
+    it('should return early if dataZoom is not an array', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: null,
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if dataZoom array is empty', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if dataZoom[0] is null', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [null],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if startValue is not a number', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 'invalid', endValue: 3 }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if endValue is not a number', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 'invalid' }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when dates are invalid', () => {
+    it('should return early if startValue date is missing', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 10, endValue: 3 }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+
+    it('should return early if endValue date is missing', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 10 }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when state changes', () => {
+    it('should update xAxis when isGreaterThanTwoWeeks changes from null to true', () => {
+      isGreaterThanTwoWeeksRef.current = null;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).toHaveBeenCalledWith({
+        xAxis: [
+          {
+            id: 'main-xAxis',
+            axisLabel: {
+              formatter: expect.any(Function),
+            },
+          },
+          {
+            id: 'additional-xAxis',
+            axisLabel: {
+              customValues: ['2025-01-02T00:00:00Z', '2025-01-04T00:00:00Z'],
+              formatter: expect.any(Function),
+            },
+          },
+        ],
+      });
+      expect(isGreaterThanTwoWeeksRef.current).toBe(true);
+    });
+
+    it('should update xAxis when isGreaterThanTwoWeeks changes from false to true', () => {
+      isGreaterThanTwoWeeksRef.current = false;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).toHaveBeenCalled();
+      expect(isGreaterThanTwoWeeksRef.current).toBe(true);
+    });
+
+    it('should not update xAxis when isGreaterThanTwoWeeks does not change', () => {
+      isGreaterThanTwoWeeksRef.current = false;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(false);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+      expect(isGreaterThanTwoWeeksRef.current).toBe(false);
+    });
+  });
+
+  describe('timer management', () => {
+    it('should clear existing timeout before setting new one', () => {
+      const existingTimeout = setTimeout(() => {}, 1000);
+      labelTimerRef.current = existingTimeout;
+      const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      expect(clearTimeoutSpy).toHaveBeenCalledWith(existingTimeout);
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it('should delay execution by 50ms', () => {
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+      isGreaterThanTwoWeeksRef.current = false;
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      // Should not be called before timeout
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+
+      // Fast-forward 49ms
+      jest.advanceTimersByTime(49);
+      expect(mockInstance.setOption).not.toHaveBeenCalled();
+
+      // Fast-forward 1ms more
+      jest.advanceTimersByTime(1);
+      expect(mockInstance.setOption).toHaveBeenCalled();
+    });
+  });
+
+  describe('formatter functions', () => {
+    it('should call formatXAxisLabel with correct parameters', () => {
+      isGreaterThanTwoWeeksRef.current = false;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      const setOptionCall = mockInstance.setOption.mock.calls[0][0] as {
+        xAxis: Array<{
+          id: string;
+          axisLabel: {
+            formatter: (value: string) => string;
+          };
+        }>;
+      };
+      const mainAxisFormatter = setOptionCall.xAxis[0].axisLabel.formatter;
+      mainAxisFormatter('2025-01-01T00:00:00Z');
+
+      expect(mockFormatXAxisLabel).toHaveBeenCalledWith(
+        '2025-01-01T00:00:00Z',
+        true
+      );
+    });
+
+    it('should call formatXAxisAdditionalLabel with correct parameters', () => {
+      isGreaterThanTwoWeeksRef.current = false;
+      mockInstance.getOption.mockReturnValue({
+        dataZoom: [{ startValue: 0, endValue: 3 }],
+        xAxis: [],
+      });
+      mockIsDifferenceGreaterThanTwoWeeks.mockReturnValue(true);
+
+      handleLabelUpdate(
+        mockInstance,
+        mainData,
+        labelTimerRef,
+        isGreaterThanTwoWeeksRef
+      );
+
+      jest.advanceTimersByTime(50);
+
+      const setOptionCall = mockInstance.setOption.mock.calls[0][0] as {
+        xAxis: Array<{
+          id: string;
+          axisLabel: {
+            formatter: (value: unknown) => string;
+            customValues?: string[];
+          };
+        }>;
+      };
+      const additionalAxisFormatter =
+        setOptionCall.xAxis[1].axisLabel.formatter;
+      additionalAxisFormatter('2025-01-02T00:00:00Z');
+
+      expect(mockFormatXAxisAdditionalLabel).toHaveBeenCalledWith(
+        '2025-01-02T00:00:00Z',
+        true
+      );
+    });
+  });
+});