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

package/src/CrowdViewWidget/components/Chart/useCrowdViewData.ts

@@ -15,6 +15,7 @@ import type {
 import { BookType, DataSource, Division } from '../../../gql/types/graphql';
 import { BUCKET_CONFIG, INSTRUMENTS_CONFIG } from '../../constants';
 import {
+  getMultiplayerForTimeSpan,
   getTimeSpanForGranularity,
   processOrderPositionBooks,
   processPriceCandles,
@@ -83,7 +84,7 @@ export const useCrowdViewData = ({
         granularity,
         maxBookPrice: maxPrice,
         minBookPrice: minPrice,
-        bucketMultiplier: 2,
+        bucketMultiplier: getMultiplayerForTimeSpan(granularity),
         bucketMargin: BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
       },
       fetchPolicy: 'no-cache',
@@ -161,7 +162,7 @@ export const useCrowdViewData = ({
   ]);
 
   const data = useMemo(() => {
-    if (!priceCandlesData || !orderPositionData || !sentimentsData || error) {
+    if (!priceCandlesData || error) {
       return null;
     }
 
@@ -178,7 +179,10 @@ export const useCrowdViewData = ({
         sentimentLongs,
       },
       additionalData: {
-        bucketWidth,
+        bucketWidth:
+          bucketWidth ||
+          INSTRUMENTS_CONFIG[instrument].defaultBucketWidth *
+            getMultiplayerForTimeSpan(granularity),
         buckets,
         displayPrecision: pipsLocation,
         bookType,
@@ -188,8 +192,6 @@ export const useCrowdViewData = ({
     };
   }, [
     priceCandlesData,
-    orderPositionData,
-    sentimentsData,
     error,
     dates,
     candlesOpen,
@@ -201,6 +203,8 @@ export const useCrowdViewData = ({
     sentimentShorts,
     sentimentLongs,
     bucketWidth,
+    granularity,
+    instrument,
     buckets,
     pipsLocation,
     bookType,
@@ -211,6 +215,9 @@ export const useCrowdViewData = ({
   return {
     mainData: data?.mainData,
     additionalData: data?.additionalData,
+    priceCandlesLoading,
+    orderPositionLoading,
+    sentimentsLoading,
     loading,
     error: !!error,
   };

package/src/CrowdViewWidget/components/Legend/Legend.tsx

@@ -17,7 +17,7 @@ export const Legend = ({ bookType }: LegendProps) => {
     <div className="lw-my-4 lw-w-full">
       <div className="lw-mb-1 lw-flex lw-w-full lw-flex-row lw-justify-between">
         <LegendBar isDark={isDark} type="long" />
-        <div className="lw-w-[250px]" />
+        <div className="lw-w-[200px]" />
         <LegendBar isDark={isDark} type="short" />
       </div>
       <div className="lw-flex lw-w-full lw-flex-row lw-justify-between lw-pb-2 lw-font-sans lw-text-xs lw-text-text-primary">

package/src/CrowdViewWidget/components/Legend/LegendBar.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@oanda/labs-widget-common';
 import React from 'react';
 
 import { COLOR_MAP } from '../../constants';
@@ -15,9 +16,17 @@ export const LegendBar = ({ type, isDark }: LegendBarProps) => {
     type === 'long' ? colorPalette.long[1] : colorPalette.short[0];
   const endColor =
     type === 'long' ? colorPalette.long[0] : colorPalette.short[1];
+  const endGradient =
+    type === 'long'
+      ? `linear-gradient(90deg,${endColor} 0%, transparent 100%)`
+      : `linear-gradient(270deg,${startColor} 0%, transparent 100%)`;
 
   return (
-    <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden">
+    <div
+      className={cn('lw-flex lw-h-2 lw-w-full lw-overflow-hidden', {
+        'lw-flex-row-reverse': type === 'short',
+      })}
+    >
       <div
         className="lw-h-full lw-flex-1"
         data-testid="legend-bar-segment"
@@ -25,6 +34,13 @@ export const LegendBar = ({ type, isDark }: LegendBarProps) => {
           background: `linear-gradient(90deg,${startColor} 0%, ${endColor} 100%)`,
         }}
       />
+      <div
+        className="lw-h-full lw-w-[10px]"
+        data-testid="legend-bar-segment"
+        style={{
+          background: endGradient,
+        }}
+      />
     </div>
   );
 };

package/src/CrowdViewWidget/constants.ts

@@ -4,7 +4,10 @@ import chroma from 'chroma-js';
 import { InstrumentId } from './types';
 
 export const BUCKET_CONFIG = {
-  MULTIPLIER: 4,
+  MULTIPLIER_5M: 1,
+  MULTIPLIER_15M: 1,
+  MULTIPLIER_1H: 2,
+  MULTIPLIER_4H: 4,
   PRICE_MARGIN_MULTIPLIER: 2,
 } as const;
 
@@ -19,14 +22,19 @@ export const CHART_CONFIG = {
   SENTIMENT_HEIGHT: 120,
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
-  Y_LABEL_SIZE_DESKTOP: 60,
+  Y_LABEL_SIZE_DESKTOP: 50,
   Y_LABEL_SIZE_MOBILE: 40,
-  Y_SENTIMENT_LABEL_SIZE: 40,
-  INITIAL_START_ZOOM: 90,
+  Y_SENTIMENT_LABEL_DESKTOP_SIZE: 40,
+  Y_SENTIMENT_LABEL_MOBILE_SIZE: 30,
+  INITIAL_START_ZOOM_DESKTOP: 70,
+  INITIAL_START_ZOOM_MOBILE: 85,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
   SENTIMENT_MAX: 100,
+  TOP_MARGIN_DESKTOP: 0,
+  TOP_MARGIN_MOBILE: 30,
+  TOOLTIP_OFFSET: 5,
 } as const;
 
 export const COLOR_MAP = {

package/src/CrowdViewWidget/selectConfig.ts

@@ -92,14 +92,6 @@ const granularitySelectConfig = [
     id: Granularity.H4,
     label: '4_hours',
   },
-  {
-    id: Granularity.M5,
-    label: '5_minutes',
-  },
-  {
-    id: Granularity.M15,
-    label: '15_minutes',
-  },
 ];
 
 export {

package/src/translations/sources/en.json

@@ -28,5 +28,6 @@
   "sentiment": "Sentiment",
   "short_overbalance": "Short overbalance",
   "short": "Short",
-  "even_market_demand": "Even market demand"
+  "even_market_demand": "Even market demand",
+  "price": "Price"
 }

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

@@ -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');
@@ -236,6 +242,7 @@ describe('chartUtils', () => {
         {
           seriesId: 'heatmap' as const,
           value: ['2025-03-15T10:30:00Z', 1.33333, 0],
+          dataIndex: 0,
         },
       ];
 
@@ -248,6 +255,8 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [],
+        sentimentShorts: [],
       });
       expect(html).toBe('');
     });
@@ -260,6 +269,8 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [],
+        sentimentShorts: [],
       });
       expect(html).toBe('');
     });

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
+      );
+    });
+  });
+});