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

package/src/gql/types/graphql.ts

@@ -42,6 +42,7 @@ export enum AssetClassName {
   EquityShares = 'EQUITY_SHARES',
   Etfs = 'ETFS',
   Indices = 'INDICES',
+  Metals = 'METALS',
   Rates = 'RATES',
 }
 
@@ -211,6 +212,15 @@ export enum OrderBookDataSource {
   Ty3 = 'TY3',
 }
 
+export type OrderPositionBooksData = {
+  __typename?: 'OrderPositionBooksData';
+  books?: Maybe<Array<OrderPositionData>>;
+  bucketWidth: Scalars['Float']['output'];
+  displayPrecision: Scalars['Int']['output'];
+  sentimentThresholdMax: Scalars['Float']['output'];
+  sentimentThresholdMin: Scalars['Float']['output'];
+};
+
 export type OrderPositionBucket = {
   __typename?: 'OrderPositionBucket';
   longCountPercent?: Maybe<Scalars['Float']['output']>;
@@ -242,7 +252,7 @@ export type Query = {
   mapInstrumentNames?: Maybe<Array<Maybe<Instrument>>>;
   marginRates?: Maybe<Array<MarginRate>>;
   orderPositionBook: Array<Maybe<OrderPositionData>>;
-  orderPositionBooks: Array<Maybe<OrderPositionData>>;
+  orderPositionBooks: OrderPositionBooksData;
   priceCandles: CandlesData;
   resolveInstrumentsByDivision?: Maybe<Array<Instrument>>;
   resolveInstrumentsWithFilters?: Maybe<InstrumentTableResult>;
@@ -302,6 +312,8 @@ export type QueryOrderPositionBookArgs = {
 
 export type QueryOrderPositionBooksArgs = {
   bookType: BookType;
+  bucketMargin?: Scalars['Int']['input'];
+  bucketMultiplier?: Scalars['Int']['input'];
   granularity: Granularity;
   instrument: Scalars['String']['input'];
   maxBookPrice?: InputMaybe<Scalars['Float']['input']>;
@@ -550,21 +562,28 @@ export type GetOrderPositionBooksQueryVariables = Exact<{
   granularity: Granularity;
   maxBookPrice?: InputMaybe<Scalars['Float']['input']>;
   minBookPrice?: InputMaybe<Scalars['Float']['input']>;
+  bucketMultiplier: Scalars['Int']['input'];
+  bucketMargin: Scalars['Int']['input'];
 }>;
 
 export type GetOrderPositionBooksQuery = {
   __typename?: 'Query';
-  orderPositionBooks: Array<{
-    __typename?: 'OrderPositionData';
+  orderPositionBooks: {
+    __typename?: 'OrderPositionBooksData';
     bucketWidth: number;
-    price?: number | null;
-    time: string;
-    buckets: Array<{
-      __typename?: 'OrderPositionBucket';
-      price: number;
-      sentiment?: number | null;
-    } | null>;
-  } | null>;
+    sentimentThresholdMax: number;
+    sentimentThresholdMin: number;
+    books?: Array<{
+      __typename?: 'OrderPositionData';
+      time: string;
+      price?: number | null;
+      buckets: Array<{
+        __typename?: 'OrderPositionBucket';
+        price: number;
+        sentiment?: number | null;
+      } | null>;
+    }> | null;
+  };
 };
 
 export type GetPriceCandlesQueryVariables = Exact<{
@@ -579,6 +598,7 @@ export type GetPriceCandlesQuery = {
   __typename?: 'Query';
   priceCandles: {
     __typename?: 'CandlesData';
+    pipsLocation: number;
     candle: Array<{
       __typename?: 'Candle';
       point: string;
@@ -692,6 +712,28 @@ export const GetOrderPositionBooksDocument = {
           },
           type: { kind: 'NamedType', name: { kind: 'Name', value: 'Float' } },
         },
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'bucketMultiplier' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'Int' } },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'bucketMargin' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'Int' } },
+          },
+        },
       ],
       selectionSet: {
         kind: 'SelectionSet',
@@ -748,27 +790,63 @@ export const GetOrderPositionBooksDocument = {
                   name: { kind: 'Name', value: 'minBookPrice' },
                 },
               },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'bucketMultiplier' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'bucketMultiplier' },
+                },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'bucketMargin' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'bucketMargin' },
+                },
+              },
             ],
             selectionSet: {
               kind: 'SelectionSet',
               selections: [
-                { kind: 'Field', name: { kind: 'Name', value: 'bucketWidth' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'price' } },
-                { kind: 'Field', name: { kind: 'Name', value: 'time' } },
                 {
                   kind: 'Field',
-                  name: { kind: 'Name', value: 'buckets' },
+                  name: { kind: 'Name', value: 'books' },
                   selectionSet: {
                     kind: 'SelectionSet',
                     selections: [
+                      { kind: 'Field', name: { kind: 'Name', value: 'time' } },
                       { kind: 'Field', name: { kind: 'Name', value: 'price' } },
                       {
                         kind: 'Field',
-                        name: { kind: 'Name', value: 'sentiment' },
+                        name: { kind: 'Name', value: 'buckets' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'price' },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'sentiment' },
+                            },
+                          ],
+                        },
                       },
                     ],
                   },
                 },
+                { kind: 'Field', name: { kind: 'Name', value: 'bucketWidth' } },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'sentimentThresholdMax' },
+                },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'sentimentThresholdMin' },
+                },
               ],
             },
           },
@@ -924,6 +1002,10 @@ export const GetPriceCandlesDocument = {
                     ],
                   },
                 },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'pipsLocation' },
+                },
               ],
             },
           },

package/src/translations/sources/en.json

@@ -27,5 +27,6 @@
   "sell": "Sell",
   "sentiment": "Sentiment",
   "short_overbalance": "Short overbalance",
-  "short": "Short"
+  "short": "Short",
+  "even_market_demand": "Even market demand"
 }

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

@@ -1,22 +1,24 @@
-import type { TooltipParam } from '../../../../src/CrowdViewWidget/components/Chart/types';
 import {
   formatXAxisLabel,
   getLabelData,
   getRectColor,
-  getTimeSpanForGranularity,
   getTooltipFormatter,
   isDifferenceGreaterThanTwoWeeks,
-} from '../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils';
-import {
-  BOOKS_THRESHOLDS,
-  COLOR_MAP,
-} from '../../../../src/CrowdViewWidget/constants';
+} 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,
   Granularity,
   TimeSpan,
 } from '../../../../src/gql/types/graphql';
 
+const TEST_THRESHOLDS = {
+  MIN: 0.15,
+  MAX: 0.55,
+} as const;
+
 describe('chartUtils', () => {
   describe('getTimeSpanForGranularity', () => {
     it('maps granularity to expected TimeSpan', () => {
@@ -50,7 +52,12 @@ describe('chartUtils', () => {
 
   describe('getRectColor', () => {
     it('uses long color scale for positive sentiment in light mode', () => {
-      const color = getRectColor(BOOKS_THRESHOLDS.MAX, false);
+      const color = getRectColor(
+        TEST_THRESHOLDS.MAX,
+        false,
+        TEST_THRESHOLDS.MIN,
+        TEST_THRESHOLDS.MAX
+      );
       expect(typeof color).toBe('string');
       // At max threshold, should be at or near target color
       expect(color.toLowerCase()).toContain(
@@ -59,7 +66,12 @@ describe('chartUtils', () => {
     });
 
     it('uses short color scale for negative sentiment in light mode', () => {
-      const color = getRectColor(-BOOKS_THRESHOLDS.MAX, false);
+      const color = getRectColor(
+        -TEST_THRESHOLDS.MAX,
+        false,
+        TEST_THRESHOLDS.MIN,
+        TEST_THRESHOLDS.MAX
+      );
       expect(typeof color).toBe('string');
       expect(color.toLowerCase()).toContain(
         COLOR_MAP.light.short[1].slice(1).toLowerCase().substring(0, 3)
@@ -67,7 +79,12 @@ describe('chartUtils', () => {
     });
 
     it('uses long color scale for positive sentiment in dark mode', () => {
-      const color = getRectColor(BOOKS_THRESHOLDS.MAX, true);
+      const color = getRectColor(
+        TEST_THRESHOLDS.MAX,
+        true,
+        TEST_THRESHOLDS.MIN,
+        TEST_THRESHOLDS.MAX
+      );
       expect(typeof color).toBe('string');
       // At max threshold, should be at or near target color
       expect(color.toLowerCase()).toContain(
@@ -76,7 +93,12 @@ describe('chartUtils', () => {
     });
 
     it('uses short color scale for negative sentiment in dark mode', () => {
-      const color = getRectColor(-BOOKS_THRESHOLDS.MAX, true);
+      const color = getRectColor(
+        -TEST_THRESHOLDS.MAX,
+        true,
+        TEST_THRESHOLDS.MIN,
+        TEST_THRESHOLDS.MAX
+      );
       expect(typeof color).toBe('string');
       expect(color.toLowerCase()).toContain(
         COLOR_MAP.dark.short[1].slice(1).toLowerCase().substring(0, 3)
@@ -111,7 +133,7 @@ describe('chartUtils', () => {
 
     it('emits label when day changes for < two weeks case', () => {
       const labels = getLabelData({
-        xAxisData: dates,
+        dates,
         isGreaterThanTwoWeeks: true,
       });
       // First change happens between 1st and 2nd
@@ -126,7 +148,7 @@ describe('chartUtils', () => {
         '2025-02-15T00:00:00Z',
       ];
       const labels = getLabelData({
-        xAxisData: monthSpanDates,
+        dates: monthSpanDates,
         isGreaterThanTwoWeeks: false,
       });
       expect(labels.length).toBe(1);
@@ -162,7 +184,6 @@ describe('chartUtils', () => {
         buckets,
         bucketWidth: 0.0005,
         selectedPrice: 1.3306,
-        precision: 5,
         bookType: BookType.Order,
         labelCallback,
       });
@@ -198,7 +219,6 @@ describe('chartUtils', () => {
         buckets,
         bucketWidth: 0.0005,
         selectedPrice: 1.3306,
-        precision: 5,
         bookType: BookType.Order,
         labelCallback,
       });
@@ -211,7 +231,7 @@ 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,
@@ -226,24 +246,22 @@ describe('chartUtils', () => {
         buckets,
         bucketWidth: 0.0005,
         selectedPrice: 1.3306,
-        precision: 5,
         bookType: BookType.Order,
         labelCallback,
       });
-      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: [],
         bucketWidth: 0.0005,
         selectedPrice: 1.3306,
-        precision: 5,
         bookType: BookType.Order,
         labelCallback,
       });
-      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/processSentiments.test.ts

@@ -1,34 +1,46 @@
-import { processSentiments } from '../../../../src/CrowdViewWidget/components/Chart/utils/processSentiments';
+import { processSentiments } from '../../../../src/CrowdViewWidget/components/Chart/dataUtils/processSentiments';
 import type { GetSentimentsQuery } from '../../../../src/gql/types/graphql';
 
 describe('processSentiments', () => {
-  it('returns empty array when sentimentsData is undefined', () => {
+  it('returns empty arrays when sentimentsData is undefined', () => {
     const result = processSentiments(undefined, ['2025-03-15T10:30:00Z']);
-    expect(result).toEqual([]);
+    expect(result).toEqual({
+      sentimentLongs: [],
+      sentimentShorts: [],
+      hasValidSentiments: false,
+    });
   });
 
-  it('returns empty array when sentiments array is empty', () => {
+  it('returns empty arrays when sentiments array is empty', () => {
     const sentimentsData: GetSentimentsQuery = {
       sentiments: {
         sentiments: [],
       },
     };
     const result = processSentiments(sentimentsData, ['2025-03-15T10:30:00Z']);
-    expect(result).toEqual([]);
+    expect(result).toEqual({
+      sentimentLongs: [],
+      sentimentShorts: [],
+      hasValidSentiments: false,
+    });
   });
 
-  it('returns empty array when sentiments is null', () => {
+  it('returns empty arrays when sentiments is null', () => {
     const sentimentsData: GetSentimentsQuery = {
       sentiments: {
         sentiments: null as never,
       },
     };
     const result = processSentiments(sentimentsData, ['2025-03-15T10:30:00Z']);
-    expect(result).toEqual([]);
+    expect(result).toEqual({
+      sentimentLongs: [],
+      sentimentShorts: [],
+      hasValidSentiments: false,
+    });
   });
 
-  it('processes sentiments and matches with xAxisData', () => {
-    const xAxisData = [
+  it('processes sentiments and matches with dates', () => {
+    const dates = [
       '2025-03-15T10:30:00Z',
       '2025-03-15T11:30:00Z',
       '2025-03-15T12:30:00Z',
@@ -54,15 +66,14 @@ describe('processSentiments', () => {
       },
     };
 
-    const result = processSentiments(sentimentsData, xAxisData);
-    expect(result).toEqual([
-      ['2025-03-15T10:30:00Z', 30.5, 69.5],
-      ['2025-03-15T11:30:00Z', 40.2, 59.8],
-    ]);
+    const result = processSentiments(sentimentsData, dates);
+    expect(result.hasValidSentiments).toBe(true);
+    expect(result.sentimentShorts).toEqual([30.5, 40.2, null]);
+    expect(result.sentimentLongs).toEqual([69.5, 59.8, null]);
   });
 
-  it('filters out sentiments that do not match xAxisData', () => {
-    const xAxisData = ['2025-03-15T10:30:00Z', '2025-03-15T11:30:00Z'];
+  it('returns null for dates that do not match any sentiment', () => {
+    const dates = ['2025-03-15T10:30:00Z', '2025-03-15T11:30:00Z'];
     const sentimentsData: GetSentimentsQuery = {
       sentiments: {
         sentiments: [
@@ -74,7 +85,7 @@ describe('processSentiments', () => {
             },
           },
           {
-            time: '2025-03-15T12:30:00Z', // Not in xAxisData
+            time: '2025-03-15T12:30:00Z', // Not in dates
             sentiment: {
               shortPercent: 50.0,
               longPercent: 50.0,
@@ -84,37 +95,133 @@ describe('processSentiments', () => {
       },
     };
 
-    const result = processSentiments(sentimentsData, xAxisData);
-    expect(result).toEqual([['2025-03-15T10:30:00Z', 30.5, 69.5]]);
+    const result = processSentiments(sentimentsData, dates);
+    expect(result.sentimentShorts).toEqual([30.5, null]);
+    expect(result.sentimentLongs).toEqual([69.5, null]);
   });
 
-  it('filters out sentiments with missing values', () => {
-    const xAxisData = ['2025-03-15T10:30:00Z'];
+  it('returns null arrays when no sentiments match dates', () => {
+    const dates = ['2025-03-15T10:30:00Z'];
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: [
+          {
+            time: '2025-03-15T11:30:00Z',
+            sentiment: {
+              shortPercent: 30.5,
+              longPercent: 69.5,
+            },
+          },
+        ],
+      },
+    };
+
+    const result = processSentiments(sentimentsData, dates);
+    expect(result.sentimentShorts).toEqual([null]);
+    expect(result.sentimentLongs).toEqual([null]);
+  });
+
+  it('handles multiple dates with mixed matching sentiments', () => {
+    const dates = [
+      '2025-03-15T10:30:00Z',
+      '2025-03-15T11:30:00Z',
+      '2025-03-15T12:30:00Z',
+      '2025-03-15T13:30:00Z',
+    ];
     const sentimentsData: GetSentimentsQuery = {
       sentiments: {
         sentiments: [
           {
             time: '2025-03-15T10:30:00Z',
             sentiment: {
-              shortPercent: null as never,
-              longPercent: null as never,
+              shortPercent: 30.5,
+              longPercent: 69.5,
+            },
+          },
+          {
+            time: '2025-03-15T12:30:00Z',
+            sentiment: {
+              shortPercent: 25.0,
+              longPercent: 75.0,
             },
           },
         ],
       },
     };
 
-    const result = processSentiments(sentimentsData, xAxisData);
-    expect(result).toEqual([]);
+    const result = processSentiments(sentimentsData, dates);
+    expect(result.sentimentShorts).toEqual([30.5, null, 25.0, null]);
+    expect(result.sentimentLongs).toEqual([69.5, null, 75.0, null]);
   });
 
-  it('returns empty array when no sentiments match xAxisData', () => {
-    const xAxisData = ['2025-03-15T10:30:00Z'];
+  it('should handle null sentiment objects gracefully', () => {
+    const dates = ['2025-03-15T10:30:00Z'];
     const sentimentsData: GetSentimentsQuery = {
       sentiments: {
         sentiments: [
           {
-            time: '2025-03-15T11:30:00Z',
+            time: '2025-03-15T10:30:00Z',
+            sentiment: null as never,
+          },
+        ],
+      },
+    };
+
+    const result = processSentiments(sentimentsData, dates);
+    expect(result.sentimentShorts).toEqual([null]);
+    expect(result.sentimentLongs).toEqual([null]);
+  });
+
+  it('should handle undefined sentiment properties', () => {
+    const dates = ['2025-03-15T10:30:00Z'];
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: [
+          {
+            time: '2025-03-15T10:30:00Z',
+            sentiment: {
+              shortPercent: undefined as never,
+              longPercent: undefined as never,
+            },
+          },
+        ],
+      },
+    };
+
+    const result = processSentiments(sentimentsData, dates);
+    expect(result.sentimentShorts).toEqual([null]);
+    expect(result.sentimentLongs).toEqual([null]);
+  });
+
+  it('should return empty arrays when dates array is empty', () => {
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: [
+          {
+            time: '2025-03-15T10:30:00Z',
+            sentiment: {
+              shortPercent: 30.5,
+              longPercent: 69.5,
+            },
+          },
+        ],
+      },
+    };
+
+    const result = processSentiments(sentimentsData, []);
+    expect(result).toEqual({
+      sentimentLongs: [],
+      sentimentShorts: [],
+      hasValidSentiments: false,
+    });
+  });
+
+  it('should return empty arrays when dates is not an array', () => {
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: [
+          {
+            time: '2025-03-15T10:30:00Z',
             sentiment: {
               shortPercent: 30.5,
               longPercent: 69.5,
@@ -124,7 +231,8 @@ describe('processSentiments', () => {
       },
     };
 
-    const result = processSentiments(sentimentsData, xAxisData);
-    expect(result).toEqual([]);
+    // @ts-expect-error - Testing invalid input
+    const result = processSentiments(sentimentsData, null);
+    expect(result.hasValidSentiments).toBe(false);
   });
 });