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

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,12 +252,13 @@ 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>;
   sentiment?: Maybe<Array<SentimentInstrument>>;
   sentimentList?: Maybe<Array<SentimentInstrument>>;
+  sentiments: SentimentData;
   topicalInstruments?: Maybe<Array<TopicalInstrument>>;
   topicalInstrumentsCharts?: Maybe<Array<TopicalInstrumentChart>>;
   topicalInstrumentsTotalCount: Scalars['Int']['output'];
@@ -301,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']>;
@@ -342,6 +355,12 @@ export type QuerySentimentListArgs = {
   sort?: InputMaybe<Sort>;
 };
 
+export type QuerySentimentsArgs = {
+  granularity: Granularity;
+  instrument: Scalars['String']['input'];
+  timeSpan: TimeSpan;
+};
+
 export type QueryTopicalInstrumentsArgs = {
   assetClass?: InputMaybe<AssetClassName>;
   count?: InputMaybe<Scalars['Int']['input']>;
@@ -395,6 +414,11 @@ export type Sentiment = {
   shortPercent: Scalars['Float']['output'];
 };
 
+export type SentimentData = {
+  __typename?: 'SentimentData';
+  sentiments: Array<Maybe<SentimentWithTime>>;
+};
+
 export type SentimentInstrument = {
   __typename?: 'SentimentInstrument';
   displayName: Scalars['String']['output'];
@@ -403,6 +427,12 @@ export type SentimentInstrument = {
   updatedAt: Scalars['String']['output'];
 };
 
+export type SentimentWithTime = {
+  __typename?: 'SentimentWithTime';
+  sentiment: Sentiment;
+  time: Scalars['String']['output'];
+};
+
 export enum Sort {
   Bearish = 'BEARISH',
   Bullish = 'BULLISH',
@@ -532,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<{
@@ -561,6 +598,7 @@ export type GetPriceCandlesQuery = {
   __typename?: 'Query';
   priceCandles: {
     __typename?: 'CandlesData';
+    pipsLocation: number;
     candle: Array<{
       __typename?: 'Candle';
       point: string;
@@ -572,6 +610,28 @@ export type GetPriceCandlesQuery = {
   };
 };
 
+export type GetSentimentsQueryVariables = Exact<{
+  instrument: Scalars['String']['input'];
+  granularity: Granularity;
+  timeSpan: TimeSpan;
+}>;
+
+export type GetSentimentsQuery = {
+  __typename?: 'Query';
+  sentiments: {
+    __typename?: 'SentimentData';
+    sentiments: Array<{
+      __typename?: 'SentimentWithTime';
+      time: string;
+      sentiment: {
+        __typename?: 'Sentiment';
+        longPercent: number;
+        shortPercent: number;
+      };
+    } | null>;
+  };
+};
+
 export const GetOrderPositionBooksDocument = {
   kind: 'Document',
   definitions: [
@@ -652,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',
@@ -708,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' },
+                },
               ],
             },
           },
@@ -884,6 +1002,10 @@ export const GetPriceCandlesDocument = {
                     ],
                   },
                 },
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'pipsLocation' },
+                },
               ],
             },
           },
@@ -895,3 +1017,124 @@ export const GetPriceCandlesDocument = {
   GetPriceCandlesQuery,
   GetPriceCandlesQueryVariables
 >;
+export const GetSentimentsDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'query',
+      name: { kind: 'Name', value: 'GetSentiments' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'instrument' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'String' },
+            },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'granularity' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'Granularity' },
+            },
+          },
+        },
+        {
+          kind: 'VariableDefinition',
+          variable: {
+            kind: 'Variable',
+            name: { kind: 'Name', value: 'timeSpan' },
+          },
+          type: {
+            kind: 'NonNullType',
+            type: {
+              kind: 'NamedType',
+              name: { kind: 'Name', value: 'TimeSpan' },
+            },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'sentiments' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'instrument' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'instrument' },
+                },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'granularity' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'granularity' },
+                },
+              },
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'timeSpan' },
+                value: {
+                  kind: 'Variable',
+                  name: { kind: 'Name', value: 'timeSpan' },
+                },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                {
+                  kind: 'Field',
+                  name: { kind: 'Name', value: 'sentiments' },
+                  selectionSet: {
+                    kind: 'SelectionSet',
+                    selections: [
+                      {
+                        kind: 'Field',
+                        name: { kind: 'Name', value: 'sentiment' },
+                        selectionSet: {
+                          kind: 'SelectionSet',
+                          selections: [
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'longPercent' },
+                            },
+                            {
+                              kind: 'Field',
+                              name: { kind: 'Name', value: 'shortPercent' },
+                            },
+                          ],
+                        },
+                      },
+                      { kind: 'Field', name: { kind: 'Name', value: 'time' } },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<GetSentimentsQuery, GetSentimentsQueryVariables>;

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

@@ -1,3 +1,4 @@
+import type { TooltipParam } from '../../../../src/CrowdViewWidget/components/Chart/types';
 import {
   formatXAxisLabel,
   getLabelData,
@@ -6,16 +7,18 @@ import {
   getTooltipFormatter,
   isDifferenceGreaterThanTwoWeeks,
 } from '../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils';
-import {
-  BOOKS_THRESHOLDS,
-  COLOR_MAP,
-} from '../../../../src/CrowdViewWidget/constants';
+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', () => {
@@ -49,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(
@@ -58,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)
@@ -66,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(
@@ -75,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)
@@ -110,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
@@ -125,7 +148,7 @@ describe('chartUtils', () => {
         '2025-02-15T00:00:00Z',
       ];
       const labels = getLabelData({
-        xAxisData: monthSpanDates,
+        dates: monthSpanDates,
         isGreaterThanTwoWeeks: false,
       });
       expect(labels.length).toBe(1);
@@ -137,12 +160,16 @@ describe('chartUtils', () => {
     const labelCallback = (k: string) => k;
 
     it('renders candle and book details when available', () => {
-      const params = [
+      const params: TooltipParam[] = [
         {
+          seriesId: 'candlestick' as const,
           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] },
+        {
+          seriesId: 'heatmap' as const,
+          value: ['2025-03-15T10:30:00Z', 1.33333, 0],
+        },
       ];
 
       const buckets = [
@@ -157,10 +184,10 @@ describe('chartUtils', () => {
         buckets,
         bucketWidth: 0.0005,
         selectedPrice: 1.3306,
-        precision: 5,
         bookType: BookType.Order,
         labelCallback,
       });
+      expect(html).toBeDefined();
       expect(html).toContain('candle');
       expect(html).toContain('open_price');
       expect(html).toContain('close_price');
@@ -171,5 +198,70 @@ describe('chartUtils', () => {
       // Selected price 1.3306 falls into second bucket 1.3305 - 1.3310 which has negative sentiment
       expect(html).toContain('sell_overbalance');
     });
+
+    it('renders sentiment details when available', () => {
+      const params: TooltipParam[] = [
+        {
+          seriesId: 'candlestick' as const,
+          axisValue: '2025-03-15T10:30:00Z',
+          value: [0, 1.11111, 1.22222, 1.00001, 1.33333],
+        },
+        {
+          seriesId: 'sentiment' as const,
+          value: ['2025-03-15T10:30:00Z', 30.5, 69.5],
+        },
+      ];
+
+      const buckets: never[] = [];
+
+      const html = getTooltipFormatter({
+        params,
+        buckets,
+        bucketWidth: 0.0005,
+        selectedPrice: 1.3306,
+        bookType: BookType.Order,
+        labelCallback,
+      });
+      expect(html).toBeDefined();
+      expect(html).toContain('candle');
+      expect(html).toContain('sentiment');
+      expect(html).toContain('long');
+      expect(html).toContain('short');
+      expect(html).toContain('30.50');
+      expect(html).toContain('69.50');
+    });
+
+    it('returns undefined when no candlestick param is provided', () => {
+      const params: TooltipParam[] = [
+        {
+          seriesId: 'heatmap' as const,
+          value: ['2025-03-15T10:30:00Z', 1.33333, 0],
+        },
+      ];
+
+      const buckets: never[] = [];
+
+      const html = getTooltipFormatter({
+        params,
+        buckets,
+        bucketWidth: 0.0005,
+        selectedPrice: 1.3306,
+        bookType: BookType.Order,
+        labelCallback,
+      });
+      expect(html).toBeUndefined();
+    });
+
+    it('returns undefined when params is empty', () => {
+      const html = getTooltipFormatter({
+        params: [],
+        buckets: [],
+        bucketWidth: 0.0005,
+        selectedPrice: 1.3306,
+        bookType: BookType.Order,
+        labelCallback,
+      });
+      expect(html).toBeUndefined();
+    });
   });
 });

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

@@ -0,0 +1,64 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+
+import { getChartStyles } from '../../../../src/CrowdViewWidget/components/Chart/utils/getChartStyles';
+
+describe('getChartStyles', () => {
+  it('returns correct styles for dark mode', () => {
+    const styles = getChartStyles(true);
+
+    expect(styles.sentimentLongColor).toBe(colorPalette.darkBlue90);
+    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.tooltipLinesColor).toBe(colorPalette.orange);
+    expect(styles.sentimentLabelColor).toBe(colorPalette.white);
+  });
+
+  it('returns correct styles for light mode', () => {
+    const styles = getChartStyles(false);
+
+    expect(styles.sentimentLongColor).toBe(colorPalette.lightBlue90);
+    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.tooltipLinesColor).toBe(colorPalette.bottleGreenLight);
+    expect(styles.sentimentLabelColor).toBe(colorPalette.black);
+  });
+
+  it('returns all required style properties', () => {
+    const darkStyles = getChartStyles(true);
+    const lightStyles = getChartStyles(false);
+
+    const requiredProperties = [
+      'sentimentLongColor',
+      'sentimentShortColor',
+      'candleLongColor',
+      'candleShortColor',
+      'sentimentAreaOpacity',
+      'tooltipLinesColor',
+      'sentimentLabelColor',
+    ];
+
+    requiredProperties.forEach((prop) => {
+      expect(darkStyles).toHaveProperty(prop);
+      expect(lightStyles).toHaveProperty(prop);
+      expect(typeof darkStyles[prop as keyof typeof darkStyles]).not.toBe(
+        'undefined'
+      );
+      expect(typeof lightStyles[prop as keyof typeof lightStyles]).not.toBe(
+        'undefined'
+      );
+    });
+  });
+
+  it('returns different opacity values for dark and light modes', () => {
+    const darkStyles = getChartStyles(true);
+    const lightStyles = getChartStyles(false);
+
+    expect(darkStyles.sentimentAreaOpacity).toBeGreaterThan(
+      lightStyles.sentimentAreaOpacity
+    );
+  });
+});