@oanda/labs-crowd-view-widget 1.0.44 → 1.0.46

package/src/CrowdViewWidget/constants.ts

@@ -1,10 +1,12 @@
+import { InstrumentId } from './types';
+
 export const BOOKS_THRESHOLDS = {
   MIN: 0.15,
   MAX: 0.55,
 } as const;
 
 export const BUCKET_CONFIG = {
-  DEFAULT_WIDTH: 0.0005,
+  MULTIPLIER: 4,
   PRICE_PADDING_MULTIPLIER: 2,
 } as const;
 
@@ -19,9 +21,117 @@ export const CHART_CONFIG = {
   Y_LABEL_SIZE_DESKTOP: 60,
   INITIAL_START_ZOOM: 80,
   INITIAL_END_ZOOM: 100,
+  X_AXIS_DATE_PADDING: '        ',
 } as const;
 
 export const COLOR_MAP = {
-  long: ['#ffffff', '#fdb833'],
-  short: ['#ffffff', '#0096c7'],
+  long: ['#eaf5fa', '#83c4e0'],
+  short: ['#fef7e7', '#fcd171'],
 } as const;
+
+export const INSTRUMENTS_CONFIG: Record<
+  InstrumentId,
+  {
+    precision: number;
+    defaultBucketWidth: number;
+    v20name: string;
+    mt5name: string;
+  }
+> = {
+  [InstrumentId.EUR_AUD]: {
+    mt5name: 'EURAUD',
+    v20name: 'EUR_AUD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.EUR_GBP]: {
+    mt5name: 'EURGBP',
+    v20name: 'EUR_GBP',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.EUR_JPY]: {
+    mt5name: 'EURJPY',
+    v20name: 'EUR_JPY',
+    precision: 3,
+    defaultBucketWidth: 0.05,
+  },
+  [InstrumentId.EUR_USD]: {
+    mt5name: 'EURUSD',
+    v20name: 'EUR_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.EUR_CHF]: {
+    mt5name: 'EURCHF',
+    v20name: 'EUR_CHF',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.USD_CHF]: {
+    mt5name: 'USDCHF',
+    v20name: 'USD_CHF',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.USD_JPY]: {
+    mt5name: 'USDJPY',
+    v20name: 'USD_JPY',
+    precision: 3,
+    defaultBucketWidth: 0.05,
+  },
+  [InstrumentId.USD_CAD]: {
+    mt5name: 'USDCAD',
+    v20name: 'USD_CAD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.GBP_USD]: {
+    mt5name: 'GBPUSD',
+    v20name: 'GBP_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.GBP_JPY]: {
+    mt5name: 'GBPJPY',
+    v20name: 'GBP_JPY',
+    precision: 3,
+    defaultBucketWidth: 0.05,
+  },
+  [InstrumentId.GBP_CHF]: {
+    mt5name: 'GBPCHF',
+    v20name: 'GBP_CHF',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.AUD_JPY]: {
+    mt5name: 'AUDJPY',
+    v20name: 'AUD_JPY',
+    precision: 3,
+    defaultBucketWidth: 0.05,
+  },
+  [InstrumentId.AUD_USD]: {
+    mt5name: 'AUDUSD',
+    v20name: 'AUD_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.NZD_USD]: {
+    mt5name: 'NZDUSD',
+    v20name: 'NZD_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.XAU_USD]: {
+    mt5name: 'XAUUSD',
+    v20name: 'XAU_USD',
+    precision: 3,
+    defaultBucketWidth: 0.5,
+  },
+  [InstrumentId.XAG_USD]: {
+    mt5name: 'XAGUSD',
+    v20name: 'XAG_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+};

package/src/CrowdViewWidget/selectConfig.ts

@@ -1,5 +1,5 @@
 import { BookType, Granularity } from '../gql/types/graphql';
-import { InstrumentId, InstrumentIdOC } from './types/instruments';
+import { InstrumentId } from './types';
 
 const navigationConfig = [
   {
@@ -13,65 +13,6 @@ const navigationConfig = [
 ];
 
 const instrumentSelectConfigOC = [
-  {
-    id: InstrumentIdOC.EUR_AUD,
-    label: 'EUR/AUD',
-  },
-  {
-    id: InstrumentIdOC.EUR_GBP,
-    label: 'EUR/GBP',
-  },
-  {
-    id: InstrumentIdOC.EUR_JPY,
-    label: 'EUR/JPY',
-  },
-  {
-    id: InstrumentIdOC.EUR_USD,
-    label: 'EUR/USD',
-  },
-  {
-    id: InstrumentIdOC.EUR_CHF,
-    label: 'EUR/CHF',
-  },
-  {
-    id: InstrumentIdOC.USD_CHF,
-    label: 'USD/CHF',
-  },
-  {
-    id: InstrumentIdOC.USD_JPY,
-    label: 'USD/JPY',
-  },
-  {
-    id: InstrumentIdOC.USD_CAD,
-    label: 'USD/CAD',
-  },
-  {
-    id: InstrumentIdOC.GBP_USD,
-    label: 'GBP/USD',
-  },
-  {
-    id: InstrumentIdOC.GBP_JPY,
-    label: 'GBP/JPY',
-  },
-  {
-    id: InstrumentIdOC.GBP_CHF,
-    label: 'GBP/CHF',
-  },
-  {
-    id: InstrumentIdOC.AUD_JPY,
-    label: 'AUD/JPY',
-  },
-  {
-    id: InstrumentIdOC.AUD_USD,
-    label: 'AUD/USD',
-  },
-  {
-    id: InstrumentIdOC.NZD_USD,
-    label: 'NZD/USD',
-  },
-];
-
-const instrumentSelectConfig = [
   {
     id: InstrumentId.EUR_AUD,
     label: 'EUR/AUD',
@@ -128,6 +69,10 @@ const instrumentSelectConfig = [
     id: InstrumentId.NZD_USD,
     label: 'NZD/USD',
   },
+];
+
+const instrumentSelectConfig = [
+  ...instrumentSelectConfigOC,
   {
     id: InstrumentId.XAU_USD,
     label: 'XAU/USD',

package/src/CrowdViewWidget/types.ts

@@ -1,8 +1,25 @@
 import type { WidgetConfig } from '@oanda/labs-widget-common';
 
 import type { Division } from '../gql/types/graphql';
-import type { InstrumentId } from './types/instruments';
 
+export enum InstrumentId {
+  EUR_AUD = 'EURAUD',
+  EUR_GBP = 'EURGBP',
+  EUR_JPY = 'EURJPY',
+  EUR_USD = 'EURUSD',
+  EUR_CHF = 'EURCHF',
+  USD_CHF = 'USDCHF',
+  USD_JPY = 'USDJPY',
+  USD_CAD = 'USDCAD',
+  GBP_USD = 'GBPUSD',
+  GBP_JPY = 'GBPJPY',
+  GBP_CHF = 'GBPCHF',
+  AUD_JPY = 'AUDJPY',
+  AUD_USD = 'AUDUSD',
+  NZD_USD = 'NZDUSD',
+  XAU_USD = 'XAUUSD',
+  XAG_USD = 'XAGUSD',
+}
 export interface CrowdViewConfig extends WidgetConfig {
   division: Division;
 }

package/src/translations/sources/en.json

@@ -1,2 +1,31 @@
 {
+  "1_hour": "1 hour",
+  "15_minutes": "15 minutes",
+  "4_hours": "4 hours",
+  "5_minutes": "5 minutes",
+  "buy_advantage": "Buy advantage",
+  "buy": "Buy",
+  "candle": "Candle",
+  "close_price": "Close price",
+  "data_unavailable": "Data unavailable",
+  "granularity": "Granularity",
+  "high": "High",
+  "instrument": "Instrument",
+  "long_advantage": "Sell advantage",
+  "long": "Long",
+  "low": "Low",
+  "no_matching_results": "No matching results",
+  "open_price": "Open price",
+  "order_book": "Order book",
+  "orders": "Orders",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
+  "position_book": "Position book",
+  "positions": "Positions",
+  "price_range": "Price range",
+  "search": "Search",
+  "sell_advantage": "Sell advantage",
+  "sell": "Sell",
+  "sentiment": "Sentiment",
+  "short_advantage": "Buy advantage",
+  "short": "Short"
 }

package/test/Main.test.tsx

@@ -7,48 +7,94 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { Main } from '../src/CrowdViewWidget/Main';
-import { InstrumentId } from '../src/CrowdViewWidget/types/instruments';
+import { InstrumentId } from '../src/CrowdViewWidget/types';
 import { getOrderPositionBooks } from '../src/gql/getOrderPositionBooks';
-import { BookType, Division } from '../src/gql/types/graphql';
+import { getPriceCandles } from '../src/gql/getPriceCandles';
+import {
+  BookType,
+  DataSource,
+  Division,
+  Granularity,
+  TimeSpan,
+} from '../src/gql/types/graphql';
+
+const instrument = InstrumentId.EUR_AUD;
+const division = Division.Oap;
+const granularity = Granularity.H4;
+const timeSpan = TimeSpan.NinetyDays;
+
+const candles = [
+  {
+    point: '2024-02-21T10:00:00Z',
+    high: 1.334,
+    low: 1.33,
+    open: 1.331,
+    close: 1.333,
+  },
+  {
+    point: '2024-02-21T10:30:00Z',
+    high: 1.335,
+    low: 1.3295,
+    open: 1.33,
+    close: 1.334,
+  },
+  {
+    point: '2024-02-21T11:00:00Z',
+    high: 1.333,
+    low: 1.329,
+    open: 1.331,
+    close: 1.332,
+  },
+];
+
+const maxPrice = 1.335;
+const minPrice = 1.329;
+const bucketWidth = 0.0005;
+const maxBookPrice = maxPrice + bucketWidth * 2;
+const minBookPrice = minPrice - bucketWidth * 2;
 
 const mocks = [
+  {
+    request: {
+      query: getPriceCandles,
+      variables: {
+        dataSource: DataSource.Mt5,
+        division,
+        instrument,
+        granularity,
+        timeSpan,
+      },
+    },
+    result: {
+      data: {
+        priceCandles: {
+          candle: candles,
+        },
+      },
+    },
+  },
   {
     request: {
       query: getOrderPositionBooks,
       variables: {
-        instrument: InstrumentId.EUR_AUD,
+        instrument,
         bookType: BookType.Order,
-        recentHours: 1,
+        timeSpan,
+        granularity,
+        maxBookPrice,
+        minBookPrice,
       },
     },
     result: {
       data: {
         orderPositionBooks: [
           {
-            bucketWidth: 0.0005,
-            price: 0.8,
+            bucketWidth,
+            price: maxPrice,
             time: '2024-02-21T10:30:00Z',
             buckets: [
-              {
-                price: 0.02,
-                longCountPercent: 0.0582,
-                shortCountPercent: 0.0,
-              },
-              {
-                price: 0.7,
-                longCountPercent: 0.0582,
-                shortCountPercent: 0.0,
-              },
-              {
-                price: 0.9925,
-                longCountPercent: 0.0582,
-                shortCountPercent: 0.0,
-              },
-              {
-                price: 1.0,
-                longCountPercent: 0.1163,
-                shortCountPercent: 0.0,
-              },
+              { price: 1.3345, sentiment: 0.2 },
+              { price: 1.3305, sentiment: -0.3 },
             ],
           },
         ],
@@ -62,7 +108,7 @@ describe('Main component', () => {
     const { findByTestId } = render(
       <MockedProvider mocks={mocks}>
         <MockLayoutProvider>
-          <Main division={Division.Oap} />
+          <Main division={division} />
         </MockLayoutProvider>
       </MockedProvider>
     );

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

@@ -0,0 +1,158 @@
+import {
+  formatXAxisLabel,
+  getLabelData,
+  getRectColor,
+  getTimeSpanForGranularity,
+  getTooltipFormatter,
+  isDifferenceGreaterThanTwoWeeks,
+} from '../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils';
+import {
+  BOOKS_THRESHOLDS,
+  COLOR_MAP,
+} from '../../../../src/CrowdViewWidget/constants';
+import {
+  BookType,
+  Granularity,
+  TimeSpan,
+} from '../../../../src/gql/types/graphql';
+
+describe('chartUtils', () => {
+  describe('getTimeSpanForGranularity', () => {
+    it('maps granularity to expected TimeSpan', () => {
+      expect(getTimeSpanForGranularity(Granularity.M5)).toBe(TimeSpan.TwoDays);
+      expect(getTimeSpanForGranularity(Granularity.M15)).toBe(
+        TimeSpan.FiveDays
+      );
+      expect(getTimeSpanForGranularity(Granularity.H1)).toBe(
+        TimeSpan.TwentyDays
+      );
+      expect(getTimeSpanForGranularity(Granularity.H4)).toBe(
+        TimeSpan.NinetyDays
+      );
+    });
+  });
+
+  describe('isDifferenceGreaterThanTwoWeeks', () => {
+    // Note: Function returns true when difference is LESS than threshold (14 days)
+    it('returns true when time difference is less than 14 days', () => {
+      const start = new Date('2025-01-01T00:00:00Z').toISOString();
+      const end = new Date('2025-01-05T00:00:00Z').toISOString();
+      expect(isDifferenceGreaterThanTwoWeeks(start, end)).toBe(true);
+    });
+
+    it('returns false when time difference is 14 days or more', () => {
+      const start = new Date('2025-01-01T00:00:00Z').toISOString();
+      const end = new Date('2025-02-10T00:00:00Z').toISOString();
+      expect(isDifferenceGreaterThanTwoWeeks(start, end)).toBe(false);
+    });
+  });
+
+  describe('getRectColor', () => {
+    it('uses long color scale for positive sentiment', () => {
+      const color = getRectColor(BOOKS_THRESHOLDS.MAX);
+      expect(typeof color).toBe('string');
+      // At max threshold, should be at or near target color
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.long[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+
+    it('uses short color scale for negative sentiment', () => {
+      const color = getRectColor(-BOOKS_THRESHOLDS.MAX);
+      expect(typeof color).toBe('string');
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.short[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+  });
+
+  describe('formatXAxisLabel', () => {
+    const sampleIso = '2025-03-15T10:30:00Z';
+
+    it('formats time when flag is true', () => {
+      const result = formatXAxisLabel(sampleIso, true);
+      expect(typeof result).toBe('string');
+      expect(result).toContain(':');
+    });
+
+    it('formats day when flag is false', () => {
+      const result = formatXAxisLabel(sampleIso, false);
+      expect(typeof result).toBe('string');
+      // Contains day of month (15) with surrounding spaces per implementation
+      expect(result).toMatch(/\s15\s/);
+    });
+  });
+
+  describe('getLabelData', () => {
+    const dates = [
+      '2025-03-01T00:00:00Z',
+      '2025-03-01T12:00:00Z',
+      '2025-03-02T00:00:00Z',
+      '2025-03-03T00:00:00Z',
+    ];
+
+    it('emits label when day changes for < two weeks case', () => {
+      const labels = getLabelData({
+        xAxisData: dates,
+        isGreaterThanTwoWeeks: true,
+      });
+      // First change happens between 1st and 2nd
+      expect(labels.length).toBeGreaterThanOrEqual(2);
+      expect(labels[0]).toHaveProperty('xAxis', '2025-03-02T00:00:00Z');
+    });
+
+    it('emits label when month changes for >= two weeks case', () => {
+      const monthSpanDates = [
+        '2025-01-31T00:00:00Z',
+        '2025-02-01T00:00:00Z',
+        '2025-02-15T00:00:00Z',
+      ];
+      const labels = getLabelData({
+        xAxisData: monthSpanDates,
+        isGreaterThanTwoWeeks: false,
+      });
+      expect(labels.length).toBe(1);
+      expect(labels[0]).toHaveProperty('xAxis', '2025-02-01T00:00:00Z');
+    });
+  });
+
+  describe('getTooltipFormatter', () => {
+    const labelCallback = (k: string) => k;
+
+    it('renders candle and book details when available', () => {
+      const params = [
+        {
+          axisValue: '2025-03-15T10:30:00Z',
+          value: [0, 1.11111, 1.22222, 1.00001, 1.33333],
+        },
+        { value: ['2025-03-15T10:30:00Z', 1.33333, 0] },
+      ];
+
+      const buckets = [
+        [
+          { price: 1.33, sentiment: 0.2 },
+          { price: 1.3305, sentiment: -0.3 },
+        ],
+      ];
+
+      const html = getTooltipFormatter({
+        params,
+        buckets,
+        bucketWidth: 0.0005,
+        selectedPrice: 1.3306,
+        precision: 5,
+        bookType: BookType.Order,
+        labelCallback,
+      });
+      expect(html).toContain('candle');
+      expect(html).toContain('open_price');
+      expect(html).toContain('close_price');
+      expect(html).toContain('low');
+      expect(html).toContain('high');
+      expect(html).toContain('orders');
+      expect(html).toContain('price_range');
+      // Selected price 1.3306 falls into second bucket 1.3305 - 1.3310 which has negative sentiment
+      expect(html).toContain('sell_advantage');
+    });
+  });
+});

package/test/components/Legend.test.tsx

@@ -6,13 +6,18 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { Legend } from '../../src/CrowdViewWidget/components';
+import { BookType } from '../../src/gql/types/graphql';
 
 describe('Crowd View Widget', () => {
   describe('components', () => {
     describe('<Legend />', () => {
       it('renders two LegendBar components', () => {
         const { getAllByText } = render(
-          <Legend longValues={[0.15, 0.55]} shortValues={[0.15, 0.55]} />
+          <Legend
+            bookType={BookType.Position}
+            longValues={[0.15, 0.55]}
+            shortValues={[0.15, 0.55]}
+          />
         );
 
         expect(getAllByText(/long/)).toHaveLength(2);

package/test/utils/aggregateBuckets.test.ts

@@ -0,0 +1,82 @@
+import { aggregateBuckets } from '../../src/CrowdViewWidget/components';
+
+describe('aggregateBuckets', () => {
+  it('should correctly aggregate a standard set of buckets', () => {
+    const buckets = [
+      { price: 1, sentiment: 1 },
+      { price: 1.05, sentiment: 2 },
+      { price: 1.1, sentiment: 4 },
+      { price: 1.15, sentiment: 3 },
+      { price: 1.2, sentiment: 7 },
+      { price: 1.35, sentiment: 8 },
+      { price: 1.6, sentiment: 10 },
+      { price: 1.65, sentiment: 1 },
+      { price: 1.8, sentiment: 18 },
+    ];
+    const newBucketWidth = 0.1;
+    const expected = [
+      { price: 1.0, sentiment: 3 },
+      { price: 1.1, sentiment: 7 },
+      { price: 1.2, sentiment: 7 },
+      { price: 1.3, sentiment: 8 },
+      { price: 1.6, sentiment: 11 },
+      { price: 1.8, sentiment: 18 },
+    ];
+
+    expect(aggregateBuckets(buckets, newBucketWidth)).toEqual(expected);
+  });
+
+  it('should return an empty array if the input array is empty', () => {
+    expect(aggregateBuckets([], 0.1)).toEqual([]);
+  });
+
+  it('should correctly process an array with a single bucket', () => {
+    const buckets = [{ price: 2.58, sentiment: 15 }];
+    const newBucketWidth = 0.2;
+    const expected = [{ price: 2.4, sentiment: 15 }];
+
+    expect(aggregateBuckets(buckets, newBucketWidth)).toEqual(expected);
+  });
+
+  it('should handle gaps in data without creating empty buckets', () => {
+    const buckets = [
+      { price: 10.1, sentiment: 5 }, // Belongs to bucket 10.0
+      { price: 10.9, sentiment: 8 }, // Belongs to bucket 10.8
+    ];
+    const newBucketWidth = 0.2;
+    const expected = [
+      { price: 10.0, sentiment: 5 },
+      { price: 10.8, sentiment: 8 },
+    ];
+
+    expect(aggregateBuckets(buckets, newBucketWidth)).toEqual(expected);
+  });
+
+  it('should aggregate all items into a single bucket if they fall within the new width', () => {
+    const buckets = [
+      { price: 1.1, sentiment: 10 },
+      { price: 1.5, sentiment: 20 },
+      { price: 1.9, sentiment: 30 },
+    ];
+    const newBucketWidth = 2.0;
+    const expected = [{ price: 0.0, sentiment: 60 }];
+
+    expect(aggregateBuckets(buckets, newBucketWidth)).toEqual(expected);
+  });
+
+  it('should correctly sum sentiments including zero and negative values', () => {
+    const buckets = [
+      { price: 5.0, sentiment: 100 },
+      { price: 5.05, sentiment: -20 },
+      { price: 5.11, sentiment: 0 },
+      { price: 5.18, sentiment: 5 },
+    ];
+    const newBucketWidth = 0.1;
+    const expected = [
+      { price: 5.0, sentiment: 80 },
+      { price: 5.1, sentiment: 5 },
+    ];
+
+    expect(aggregateBuckets(buckets, newBucketWidth)).toEqual(expected);
+  });
+});

package/test/utils/getTargetBucketWidth.test.ts

@@ -0,0 +1,37 @@
+import { getTargetBucketWidth } from '../../src/CrowdViewWidget/components';
+import {
+  BUCKET_CONFIG,
+  INSTRUMENTS_CONFIG,
+} from '../../src/CrowdViewWidget/constants';
+import { InstrumentId } from '../../src/CrowdViewWidget/types';
+import { Granularity } from '../../src/gql/types/graphql';
+
+describe('getTargetBucketWidth', () => {
+  const instrument = InstrumentId.EUR_AUD;
+  const { defaultBucketWidth } = INSTRUMENTS_CONFIG[instrument];
+  const optimizedBucketWidth = defaultBucketWidth * BUCKET_CONFIG.MULTIPLIER;
+
+  it('should return optimized width for H1 granularity', () => {
+    expect(getTargetBucketWidth(Granularity.H1, instrument)).toBe(
+      optimizedBucketWidth
+    );
+  });
+
+  it('should return optimized width for H4 granularity', () => {
+    expect(getTargetBucketWidth(Granularity.H4, instrument)).toBe(
+      optimizedBucketWidth
+    );
+  });
+
+  it('should return default width for M5 granularity', () => {
+    expect(getTargetBucketWidth(Granularity.M5, instrument)).toBe(
+      defaultBucketWidth
+    );
+  });
+
+  it('should return default width for M15 granularity', () => {
+    expect(getTargetBucketWidth(Granularity.M15, instrument)).toBe(
+      defaultBucketWidth
+    );
+  });
+});