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

package/src/CrowdViewWidget/components/Chart/utils/validateData.ts

@@ -0,0 +1,27 @@
+import type {
+  GetOrderPositionBooksQuery,
+  GetPriceCandlesQuery,
+} from '../../../../gql/types/graphql';
+
+export const validateData = (
+  priceCandlesData: GetPriceCandlesQuery | undefined,
+  orderPositionData: GetOrderPositionBooksQuery | undefined,
+  hasValidCandles: boolean
+): Error | null => {
+  const hasValidPriceData =
+    (priceCandlesData?.priceCandles?.candle?.length ?? 0) >= 1;
+  const hasValidOrderData =
+    (orderPositionData?.orderPositionBooks?.length ?? 0) >= 1;
+
+  if (!hasValidPriceData) {
+    return new Error('Insufficient price candle data');
+  }
+  if (!hasValidOrderData) {
+    return new Error('Insufficient order position data');
+  }
+  if (!hasValidCandles) {
+    return new Error('Invalid candle data');
+  }
+
+  return null;
+};

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

@@ -1,24 +1,35 @@
 import { useLocale } from '@oanda/mono-i18n';
 import React from 'react';
 
+import { BookType } from '../../../gql/types/graphql';
 import { BOOKS_THRESHOLDS } from '../../constants';
 import { LegendBar } from './LegendBar';
 
 interface LegendProps {
   longValues?: [number, number];
   shortValues?: [number, number];
+  bookType: BookType;
 }
 
 export const Legend = ({
   longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
   shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
+  bookType,
 }: LegendProps) => {
   const { lang } = useLocale();
 
   return (
     <div className="lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-py-6 sm:lw-max-w-md lg:lw-max-w-xl">
-      <LegendBar label={lang('long')} type="long" values={longValues} />
-      <LegendBar label={lang('short')} type="short" values={shortValues} />
+      <LegendBar
+        label={lang(bookType === BookType.Order ? 'buy' : 'long')}
+        type="long"
+        values={longValues}
+      />
+      <LegendBar
+        label={lang(bookType === BookType.Order ? 'sell' : 'short')}
+        type="short"
+        values={shortValues}
+      />
     </div>
   );
 };

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;
 
@@ -17,12 +19,119 @@ export const CHART_CONFIG = {
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
-  INITIAL_START_ZOOM: 0,
+  INITIAL_START_ZOOM: 80,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
 } as const;
 
 export const COLOR_MAP = {
-  long: ['#fcedca', '#FAB313'],
-  short: ['#c8ebfa', '#309DCC'],
+  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,26 +1,31 @@
 {
-  "data_unavailable": "Data unavailable",
-  "no_matching_results": "No matching results",
-  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
-  "order_book": "Order book",
-  "position_book": "Position book",
-  "long": "Long",
-  "short": "Short",
-  "instrument": "Instrument",
-  "granularity": "Granularity",
-  "search": "Search",
-  "5_minutes": "5 minutes",
-  "15_minutes": "15 minutes",
   "1_hour": "1 hour",
+  "15_minutes": "15 minutes",
   "4_hours": "4 hours",
+  "5_minutes": "5 minutes",
+  "buy_advantage": "Buy advantage",
+  "buy": "Buy",
   "candle": "Candle",
-  "open_price": "Open price",
   "close_price": "Close price",
-  "low": "Low",
+  "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",
-  "buy_advantage": "Buy advantage",
-  "sell_advantage": "Sell advantage"
+  "short_advantage": "Buy advantage",
+  "short": "Short"
 }

package/test/Main.test.tsx

@@ -7,7 +7,7 @@ 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 { getPriceCandles } from '../src/gql/getPriceCandles';
 import {

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

@@ -10,7 +10,11 @@ import {
   BOOKS_THRESHOLDS,
   COLOR_MAP,
 } from '../../../../src/CrowdViewWidget/constants';
-import { Granularity, TimeSpan } from '../../../../src/gql/types/graphql';
+import {
+  BookType,
+  Granularity,
+  TimeSpan,
+} from '../../../../src/gql/types/graphql';
 
 describe('chartUtils', () => {
   describe('getTimeSpanForGranularity', () => {
@@ -131,13 +135,15 @@ describe('chartUtils', () => {
         ],
       ];
 
-      const html = getTooltipFormatter(
+      const html = getTooltipFormatter({
         params,
         buckets,
-        0.0005,
-        1.3306,
-        labelCallback
-      );
+        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');
@@ -148,25 +154,5 @@ describe('chartUtils', () => {
       // Selected price 1.3306 falls into second bucket 1.3305 - 1.3310 which has negative sentiment
       expect(html).toContain('sell_advantage');
     });
-
-    it('omits sections when data is missing', () => {
-      const params = [
-        {
-          axisValue: '2025-03-15T10:30:00Z',
-          value: [0, 0, 0, 0, 0], // no candle values
-        },
-        { value: ['2025-03-15T10:30:00Z', 0, 0] },
-      ];
-      const buckets: Array<Array<{ price: number; sentiment: number }>> = [[]];
-      const html = getTooltipFormatter(
-        params,
-        buckets,
-        0.0005,
-        0,
-        labelCallback
-      );
-      expect(html).not.toContain('open_price');
-      expect(html).not.toContain('orders');
-    });
   });
 });

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

package/test/utils/instrumentUtils.test.ts

@@ -14,11 +14,13 @@ describe('instrumentUtils', () => {
       expect(Array.isArray(result)).toBe(true);
       expect(result.length).toBeGreaterThan(0);
 
-      // Check that the first instrument has the expected OC format
+      // Check that the first instrument has the expected structure
       const firstInstrument = result[0];
       expect(firstInstrument).toHaveProperty('id');
       expect(firstInstrument).toHaveProperty('label');
-      expect(firstInstrument.id).toMatch(/^[A-Z]{3}_[A-Z]{3}$/); // OC format: EUR_USD
+      // Instrument IDs are now enum values like 'EURAUD', not 'EUR_AUD'
+      expect(typeof firstInstrument.id).toBe('string');
+      expect(firstInstrument.id.length).toBeGreaterThan(0);
     });
 
     it('should return OAP instrument config for OAP division', () => {
@@ -28,11 +30,13 @@ describe('instrumentUtils', () => {
       expect(Array.isArray(result)).toBe(true);
       expect(result.length).toBeGreaterThan(0);
 
-      // Check that the first instrument has the expected OAP format
+      // Check that the first instrument has the expected structure
       const firstInstrument = result[0];
       expect(firstInstrument).toHaveProperty('id');
       expect(firstInstrument).toHaveProperty('label');
-      expect(firstInstrument.id).toMatch(/^[A-Z]{6}$/); // OAP format: EURUSD
+      // Instrument IDs are now enum values like 'EURAUD', not 'EURUSD'
+      expect(typeof firstInstrument.id).toBe('string');
+      expect(firstInstrument.id.length).toBeGreaterThan(0);
     });
 
     it('should return different configs for different divisions', () => {
@@ -41,12 +45,14 @@ describe('instrumentUtils', () => {
 
       expect(ocConfig).not.toEqual(oapConfig);
 
-      // Check that the instrument IDs have different formats
+      // Both configs should have valid instrument IDs
       const ocFirstId = ocConfig[0].id;
       const oapFirstId = oapConfig[0].id;
 
-      expect(ocFirstId).toMatch(/^[A-Z]{3}_[A-Z]{3}$/);
-      expect(oapFirstId).toMatch(/^[A-Z]{6}$/);
+      expect(typeof ocFirstId).toBe('string');
+      expect(typeof oapFirstId).toBe('string');
+      // OAP config includes XAU_USD and XAG_USD which OC doesn't have
+      expect(oapConfig.length).toBeGreaterThan(ocConfig.length);
     });
   });
 });