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

package/src/gql/types/graphql.ts

@@ -248,6 +248,7 @@ export type Query = {
   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'];
@@ -342,6 +343,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 +402,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 +415,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',
@@ -572,6 +590,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: [
@@ -895,3 +935,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,
@@ -137,12 +138,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 = [
@@ -161,6 +166,7 @@ describe('chartUtils', () => {
         bookType: BookType.Order,
         labelCallback,
       });
+      expect(html).toBeDefined();
       expect(html).toContain('candle');
       expect(html).toContain('open_price');
       expect(html).toContain('close_price');
@@ -171,5 +177,73 @@ 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,
+        precision: 5,
+        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,
+        precision: 5,
+        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,
+        precision: 5,
+        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
+    );
+  });
+});

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

@@ -0,0 +1,130 @@
+import { processSentiments } from '../../../../src/CrowdViewWidget/components/Chart/utils/processSentiments';
+import type { GetSentimentsQuery } from '../../../../src/gql/types/graphql';
+
+describe('processSentiments', () => {
+  it('returns empty array when sentimentsData is undefined', () => {
+    const result = processSentiments(undefined, ['2025-03-15T10:30:00Z']);
+    expect(result).toEqual([]);
+  });
+
+  it('returns empty array when sentiments array is empty', () => {
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: [],
+      },
+    };
+    const result = processSentiments(sentimentsData, ['2025-03-15T10:30:00Z']);
+    expect(result).toEqual([]);
+  });
+
+  it('returns empty array when sentiments is null', () => {
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: null as never,
+      },
+    };
+    const result = processSentiments(sentimentsData, ['2025-03-15T10:30:00Z']);
+    expect(result).toEqual([]);
+  });
+
+  it('processes sentiments and matches with xAxisData', () => {
+    const xAxisData = [
+      '2025-03-15T10:30:00Z',
+      '2025-03-15T11:30:00Z',
+      '2025-03-15T12:30:00Z',
+    ];
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: [
+          {
+            time: '2025-03-15T10:30:00Z',
+            sentiment: {
+              shortPercent: 30.5,
+              longPercent: 69.5,
+            },
+          },
+          {
+            time: '2025-03-15T11:30:00Z',
+            sentiment: {
+              shortPercent: 40.2,
+              longPercent: 59.8,
+            },
+          },
+        ],
+      },
+    };
+
+    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],
+    ]);
+  });
+
+  it('filters out sentiments that do not match xAxisData', () => {
+    const xAxisData = ['2025-03-15T10:30:00Z', '2025-03-15T11:30:00Z'];
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: [
+          {
+            time: '2025-03-15T10:30:00Z',
+            sentiment: {
+              shortPercent: 30.5,
+              longPercent: 69.5,
+            },
+          },
+          {
+            time: '2025-03-15T12:30:00Z', // Not in xAxisData
+            sentiment: {
+              shortPercent: 50.0,
+              longPercent: 50.0,
+            },
+          },
+        ],
+      },
+    };
+
+    const result = processSentiments(sentimentsData, xAxisData);
+    expect(result).toEqual([['2025-03-15T10:30:00Z', 30.5, 69.5]]);
+  });
+
+  it('filters out sentiments with missing values', () => {
+    const xAxisData = ['2025-03-15T10:30:00Z'];
+    const sentimentsData: GetSentimentsQuery = {
+      sentiments: {
+        sentiments: [
+          {
+            time: '2025-03-15T10:30:00Z',
+            sentiment: {
+              shortPercent: null as never,
+              longPercent: null as never,
+            },
+          },
+        ],
+      },
+    };
+
+    const result = processSentiments(sentimentsData, xAxisData);
+    expect(result).toEqual([]);
+  });
+
+  it('returns empty array when no sentiments match xAxisData', () => {
+    const xAxisData = ['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, xAxisData);
+    expect(result).toEqual([]);
+  });
+});