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

package/src/CrowdViewWidget/components/Chart/chartOptions.ts

@@ -5,7 +5,7 @@ import {
 } from '@oanda/labs-widget-common';
 
 import { CHART_CONFIG } from '../../constants';
-import type { GetOptionType } from './types';
+import type { Bucket, GetOptionType } from './types';
 import {
   formatXAxisLabel,
   getLabelData,
@@ -16,7 +16,15 @@ import {
 
 // @ts-expect-error
 export const getOption: GetOptionType = (
-  { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth, buckets },
+  {
+    xAxisData,
+    candlesSeriesData,
+    orderPositionBooks,
+    bucketWidth,
+    buckets,
+    precision,
+    bookType,
+  },
   isDark,
   labelCallback
 ) => {
@@ -64,7 +72,7 @@ export const getOption: GetOptionType = (
           formatter: (params) => {
             if (params.axisDimension === 'y') {
               selectedPrice = Number(params.value);
-              return Number(params.value).toFixed(5);
+              return Number(params.value).toFixed(precision);
             }
 
             if (params.axisDimension === 'x') {
@@ -83,13 +91,15 @@ export const getOption: GetOptionType = (
       },
       confine: true,
       formatter: (params) =>
-        getTooltipFormatter(
+        getTooltipFormatter({
           params,
           buckets,
           bucketWidth,
           selectedPrice,
-          labelCallback
-        ),
+          labelCallback,
+          precision,
+          bookType,
+        }),
     },
     xAxis: {
       type: 'category',
@@ -114,6 +124,7 @@ export const getOption: GetOptionType = (
       axisLabel: {
         showMaxLabel: false,
         showMinLabel: false,
+        formatter: (value: number) => value.toFixed(precision - 1),
       },
     },
     series: [
@@ -125,6 +136,7 @@ export const getOption: GetOptionType = (
           color: colorPalette.raspberryLight,
           color0: colorPalette.bottleGreenLight,
         },
+
         markPoint: {
           symbol: 'circle',
           symbolSize: 0,
@@ -147,26 +159,24 @@ export const getOption: GetOptionType = (
             bucketWidth,
           ]) as number[];
 
-          const items = metaValues.map(
-            ({ price, sentiment }: { price: number; sentiment: number }) => {
-              const start = api.coord([xVal, price]);
+          const items = metaValues.map(({ price, sentiment }: Bucket) => {
+            const start = api.coord([xVal, price]);
 
-              return {
-                type: 'rect',
-                shape: {
-                  x: start[0] - rectWidth / 2,
-                  y: start[1] - rectHeight,
-                  width: rectWidth,
-                  height: rectHeight,
-                },
-                style: {
-                  fill: getRectColor(sentiment),
-                },
-                silent: true,
-                emphasisDisabled: true,
-              };
-            }
-          );
+            return {
+              type: 'rect',
+              shape: {
+                x: start[0] - rectWidth / 2,
+                y: start[1] - rectHeight,
+                width: rectWidth + 1,
+                height: rectHeight,
+              },
+              style: {
+                fill: getRectColor(sentiment),
+              },
+              silent: true,
+              emphasisDisabled: true,
+            };
+          });
 
           return {
             type: 'group',

package/src/CrowdViewWidget/components/Chart/index.ts

@@ -3,4 +3,4 @@ export * from './chartOptions';
 export * from './ChartWithData';
 export * from './types';
 export * from './useCrowdViewData';
-export * from './utils/chartUtils';
+export * from './utils';

package/src/CrowdViewWidget/components/Chart/types.ts

@@ -5,9 +5,15 @@ import type {
   Division,
   Granularity,
 } from '../../../gql/types/graphql';
+import type { InstrumentId } from '../../types';
+
+export interface Bucket {
+  price: number;
+  sentiment: number;
+}
 
 export interface UseCrowdViewDataProps {
-  instrument: string;
+  instrument: InstrumentId;
   bookType: BookType;
   division: Division;
   granularity: Granularity;
@@ -18,9 +24,11 @@ interface CrowdViewData {
   // [open, close, low, high]
   candlesSeriesData: [number, number, number, number][];
   // [time, price, index]
-  orderPositionBooks: ([string, number, number] | null)[];
+  orderPositionBooks: [string, number | null, number][];
   bucketWidth: number;
-  buckets: { price: number; sentiment: number }[][];
+  buckets: Bucket[][];
+  precision: number;
+  bookType: BookType;
 }
 
 export interface UseCrowdViewDataReturn {
@@ -42,7 +50,7 @@ export interface ChartProps {
 export interface ChartWithDataProps {
   bookType: BookType;
   division: Division;
-  instrument: string;
+  instrument: InstrumentId;
   granularity: Granularity;
 }
 

package/src/CrowdViewWidget/components/Chart/useCrowdViewData.ts

@@ -10,146 +10,16 @@ import type {
   GetPriceCandlesQueryVariables,
 } from '../../../gql/types/graphql';
 import { BookType, DataSource, Division } from '../../../gql/types/graphql';
-import { BOOKS_THRESHOLDS, BUCKET_CONFIG } from '../../constants';
+import { BUCKET_CONFIG, INSTRUMENTS_CONFIG } from '../../constants';
 import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
-import { getTimeSpanForGranularity } from './utils/chartUtils';
-
-const processPriceCandles = (
-  priceCandlesData: GetPriceCandlesQuery | undefined
-) => {
-  if (!priceCandlesData?.priceCandles?.candle?.length) {
-    return {
-      minPrice: 0,
-      maxPrice: 0,
-      hasValidCandles: false,
-      candleMap: new Map(),
-      candles: [],
-    };
-  }
-
-  const candles = priceCandlesData.priceCandles.candle;
-  let calculatedMinPrice = Number.MAX_VALUE;
-  let calculatedMaxPrice = Number.MIN_VALUE;
-
-  const candleMap = new Map<
-    string,
-    {
-      point?: string;
-      high?: number;
-      low?: number;
-      open?: number;
-      close?: number;
-    }
-  >();
-
-  candles.forEach((candle) => {
-    if (!candle) return;
-
-    if (candle.high > calculatedMaxPrice) {
-      calculatedMaxPrice = candle.high;
-    }
-    if (candle.low < calculatedMinPrice) {
-      calculatedMinPrice = candle.low;
-    }
-
-    if (candle.point) {
-      candleMap.set(candle.point, candle);
-    }
-  });
-
-  return {
-    minPrice: calculatedMinPrice,
-    maxPrice: calculatedMaxPrice,
-    hasValidCandles: true,
-    candleMap,
-    candles,
-  };
-};
-
-const processOrderPositionBooks = (
-  orderPositionData: GetOrderPositionBooksQuery | undefined,
-  candleMap: Map<
-    string,
-    {
-      point?: string;
-      high?: number;
-      low?: number;
-      open?: number;
-      close?: number;
-    }
-  >
-) => {
-  if (!orderPositionData?.orderPositionBooks?.length) {
-    return [];
-  }
-
-  return orderPositionData.orderPositionBooks
-    .filter((book): book is NonNullable<typeof book> => {
-      return book !== null && book.buckets?.length > 0;
-    })
-    .map((book, index) => {
-      const candle = candleMap.get(book.time);
-      const price = candle?.high ?? null;
-
-      return [book.time, price, index] as [string, number, number];
-    });
-};
-
-const processBuckets = (
-  orderPositionData: GetOrderPositionBooksQuery | undefined
-) => {
-  if (!orderPositionData?.orderPositionBooks?.length) {
-    return [];
-  }
-
-  return orderPositionData.orderPositionBooks
-    .filter((book): book is NonNullable<typeof book> => {
-      return book !== null && book.buckets?.length > 0;
-    })
-    .map((book) => {
-      const filteredBuckets = book.buckets
-        .filter((bucket) => {
-          if (
-            !bucket ||
-            bucket.sentiment === undefined ||
-            bucket.sentiment === null ||
-            bucket.price === undefined
-          ) {
-            return false;
-          }
-          return Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN;
-        })
-        .map((bucket) => ({
-          price: bucket!.price!,
-          sentiment: bucket!.sentiment!,
-        }));
-
-      return filteredBuckets;
-    });
-};
-
-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;
-};
+import {
+  getTargetBucketWidth,
+  getTimeSpanForGranularity,
+  processBuckets,
+  processOrderPositionBooks,
+  processPriceCandles,
+  validateData,
+} from './utils';
 
 export const useCrowdViewData = ({
   instrument,
@@ -165,9 +35,12 @@ export const useCrowdViewData = ({
     getPriceCandles,
     {
       variables: {
-        dataSource: division === Division.Oc ? DataSource.V20 : DataSource.Mt5,
+        dataSource: division === Division.Ogm ? DataSource.Mt5 : DataSource.V20,
         division,
-        instrument,
+        instrument:
+          division === Division.Ogm
+            ? INSTRUMENTS_CONFIG[instrument].mt5name
+            : INSTRUMENTS_CONFIG[instrument].v20name,
         granularity,
         timeSpan: getTimeSpanForGranularity(granularity),
       },
@@ -183,18 +56,16 @@ export const useCrowdViewData = ({
   const { minPrice, maxPrice, hasValidCandles, candleMap, candles } =
     priceCandlesProcessed;
 
+  const targetBucketWidth = getTargetBucketWidth(granularity, instrument);
+
   const maxBookPrice = useMemo(
-    () =>
-      maxPrice +
-      BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
-    [maxPrice]
+    () => maxPrice + targetBucketWidth * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
+    [maxPrice, targetBucketWidth]
   );
 
   const minBookPrice = useMemo(
-    () =>
-      minPrice -
-      BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
-    [minPrice]
+    () => minPrice - targetBucketWidth * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
+    [minPrice, targetBucketWidth]
   );
 
   const {
@@ -205,7 +76,7 @@ export const useCrowdViewData = ({
     getOrderPositionBooks,
     {
       variables: {
-        instrument,
+        instrument: INSTRUMENTS_CONFIG[instrument].v20name,
         bookType: bookType || BookType.Order,
         timeSpan: getTimeSpanForGranularity(granularity),
         granularity,
@@ -225,8 +96,8 @@ export const useCrowdViewData = ({
   );
 
   const buckets = useMemo(
-    () => processBuckets(orderPositionData),
-    [orderPositionData]
+    () => processBuckets(orderPositionData, targetBucketWidth),
+    [orderPositionData, targetBucketWidth]
   );
 
   const error = useMemo((): Error | null => {
@@ -269,15 +140,20 @@ export const useCrowdViewData = ({
       xAxisData,
       candlesSeriesData,
       orderPositionBooks,
-      bucketWidth: orderPositionData.orderPositionBooks?.[0]?.bucketWidth || 0,
+      bucketWidth: targetBucketWidth,
+      precision: INSTRUMENTS_CONFIG[instrument].precision,
+      bookType,
     };
   }, [
     priceCandlesData,
     orderPositionData,
     error,
     candles,
-    orderPositionBooks,
     buckets,
+    orderPositionBooks,
+    targetBucketWidth,
+    instrument,
+    bookType,
   ]);
 
   return {

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

@@ -0,0 +1,44 @@
+import Decimal from 'decimal.js';
+
+import type { Bucket } from '../types';
+
+export const aggregateBuckets = (
+  buckets: Bucket[],
+  newBucketWidth: number
+): Bucket[] => {
+  if (!buckets.length) {
+    return [];
+  }
+
+  const bucketWidthDecimal = new Decimal(newBucketWidth);
+
+  const aggregatedMap = new Map<string, Decimal>();
+
+  for (const bucket of buckets) {
+    const priceDecimal = new Decimal(bucket.price);
+    const sentimentDecimal = new Decimal(bucket.sentiment);
+
+    const bucketIndex = priceDecimal.div(bucketWidthDecimal).floor();
+    const groupingKey = bucketIndex.mul(bucketWidthDecimal);
+
+    const groupingKeyStr = groupingKey.toString();
+
+    const currentSentiment =
+      aggregatedMap.get(groupingKeyStr) ?? new Decimal(0);
+    aggregatedMap.set(groupingKeyStr, currentSentiment.add(sentimentDecimal));
+  }
+
+  const aggregatedBuckets = Array.from(aggregatedMap.entries()).map(
+    ([priceStr, sentimentDecimal]) => {
+      const price = new Decimal(priceStr).toNumber();
+      const sentiment = sentimentDecimal.toNumber();
+
+      return {
+        price,
+        sentiment,
+      };
+    }
+  );
+
+  return aggregatedBuckets;
+};

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

@@ -1,13 +1,13 @@
 import chroma from 'chroma-js';
 
-import { Granularity, TimeSpan } from '../../../../gql/types/graphql';
+import { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';
 import {
   BOOKS_THRESHOLDS,
   CHART_CONFIG,
   COLOR_MAP,
   TIME_THRESHOLDS,
 } from '../../../constants';
-import type { GetLabelsDataProps } from '../types';
+import type { Bucket, GetLabelsDataProps } from '../types';
 
 export const getLabelData = ({
   xAxisData,
@@ -92,14 +92,27 @@ export const getRectColor = (sentiment: number) =>
     ? getGradientColor(sentiment * -1, COLOR_MAP.short[0], COLOR_MAP.short[1])
     : getGradientColor(sentiment, COLOR_MAP.long[0], COLOR_MAP.long[1]);
 
-export const getTooltipFormatter = (
-  params: unknown,
-  buckets: Array<Array<{ price: number; sentiment: number }>>,
-  bucketWidth: number,
-  selectedPrice: number,
-  labelCallback: (key: string) => string
-) => {
+export const getTooltipFormatter = ({
+  params,
+  buckets,
+  bucketWidth,
+  selectedPrice,
+  precision,
+  bookType,
+  labelCallback,
+}: {
+  params: unknown;
+  buckets: Bucket[][];
+  bucketWidth: number;
+  selectedPrice: number;
+  precision: number;
+  bookType: BookType;
+  labelCallback: (key: string) => string;
+}) => {
   const arr = params as unknown as Array<Record<string, unknown>>;
+  if (!arr || !Array.isArray(arr) || arr.length === 0) {
+    return undefined;
+  }
   const candleParam = arr[0] as {
     axisValue: string;
     value: [number, number, number, number, number];
@@ -118,6 +131,10 @@ export const getTooltipFormatter = (
   const showCandles =
     !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];
 
+  if (!showCandles && !matchedBucket) {
+    return undefined;
+  }
+
   return `<p>${time.toLocaleString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
@@ -138,9 +155,17 @@ ${
 }
 ${
   matchedBucket
-    ? `<br /><p><b>${labelCallback('orders')}:</b></p>
-<p>${labelCallback('price_range')}: ${matchedBucket.price} - ${Number(matchedBucket.price + bucketWidth).toFixed(4)} </p>
-<p>${matchedBucket.sentiment < 0 ? labelCallback('sell_advantage') : labelCallback('buy_advantage')}: ${Math.abs(matchedBucket.sentiment)}% </p>`
+    ? `<br /><p><b>${labelCallback(bookType === BookType.Order ? 'orders' : 'positions')}:</b></p>
+<p>${labelCallback('price_range')}: ${matchedBucket.price.toFixed(precision - 1)} - ${Number(matchedBucket.price + bucketWidth).toFixed(precision - 1)} </p>
+<p>${
+        matchedBucket.sentiment < 0
+          ? labelCallback(
+              bookType === BookType.Order ? 'sell_advantage' : 'short_advantage'
+            )
+          : labelCallback(
+              bookType === BookType.Order ? 'buy_advantage' : 'long_advantage'
+            )
+      }: ${Math.abs(matchedBucket.sentiment)}% </p>`
     : ''
 }`;
 };

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

@@ -0,0 +1,13 @@
+import { Granularity } from '../../../../gql/types/graphql';
+import { BUCKET_CONFIG, INSTRUMENTS_CONFIG } from '../../../constants';
+import type { InstrumentId } from '../../../types';
+
+export const getTargetBucketWidth = (
+  granularity: Granularity,
+  instrument: InstrumentId
+): number => {
+  const bucketWidth = INSTRUMENTS_CONFIG[instrument].defaultBucketWidth;
+  return granularity === Granularity.H1 || granularity === Granularity.H4
+    ? bucketWidth * BUCKET_CONFIG.MULTIPLIER
+    : bucketWidth;
+};

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

@@ -0,0 +1,7 @@
+export * from './aggregateBuckets';
+export * from './chartUtils';
+export * from './getTargetBucketWidth';
+export * from './processBuckets';
+export * from './processOrderPositionBooks';
+export * from './processPriceCandles';
+export * from './validateData';

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

@@ -0,0 +1,43 @@
+import type { GetOrderPositionBooksQuery } from '../../../../gql/types/graphql';
+import { BOOKS_THRESHOLDS } from '../../../constants';
+import type { Bucket } from '../types';
+import { aggregateBuckets } from './aggregateBuckets';
+
+export const processBuckets = (
+  orderPositionData: GetOrderPositionBooksQuery | undefined,
+  targetBucketWidth: number
+): Bucket[][] => {
+  if (!orderPositionData?.orderPositionBooks?.length) {
+    return [];
+  }
+
+  return orderPositionData.orderPositionBooks
+    .filter((book): book is NonNullable<typeof book> => {
+      return book !== null && book.buckets?.length > 0;
+    })
+    .map((book) => {
+      const validBuckets = book.buckets
+        .filter(
+          (bucket): bucket is NonNullable<typeof bucket> =>
+            bucket !== null &&
+            bucket.price !== undefined &&
+            bucket.sentiment !== undefined &&
+            bucket.sentiment !== null
+        )
+        .map((bucket) => ({
+          price: bucket.price!,
+          sentiment: bucket.sentiment!,
+        }));
+
+      const bucketsToFilter =
+        targetBucketWidth > (book.bucketWidth ?? 0)
+          ? aggregateBuckets(validBuckets, targetBucketWidth)
+          : validBuckets;
+
+      const filteredBuckets = bucketsToFilter.filter(
+        (bucket: Bucket) => Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN
+      );
+
+      return filteredBuckets;
+    });
+};

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

@@ -0,0 +1,30 @@
+import type { GetOrderPositionBooksQuery } from '../../../../gql/types/graphql';
+
+export const processOrderPositionBooks = (
+  orderPositionData: GetOrderPositionBooksQuery | undefined,
+  candleMap: Map<
+    string,
+    {
+      point?: string;
+      high?: number;
+      low?: number;
+      open?: number;
+      close?: number;
+    }
+  >
+): [string, number | null, number][] => {
+  if (!orderPositionData?.orderPositionBooks?.length) {
+    return [];
+  }
+
+  return orderPositionData.orderPositionBooks
+    .filter((book): book is NonNullable<typeof book> => {
+      return book !== null && book.buckets?.length > 0;
+    })
+    .map((book, index) => {
+      const candle = candleMap.get(book.time);
+      const price = candle?.high ?? null;
+
+      return [book.time, price, index] as [string, number | null, number];
+    });
+};

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

@@ -0,0 +1,53 @@
+import type { GetPriceCandlesQuery } from '../../../../gql/types/graphql';
+
+export const processPriceCandles = (
+  priceCandlesData: GetPriceCandlesQuery | undefined
+) => {
+  if (!priceCandlesData?.priceCandles?.candle?.length) {
+    return {
+      minPrice: 0,
+      maxPrice: 0,
+      hasValidCandles: false,
+      candleMap: new Map(),
+      candles: [],
+    };
+  }
+
+  const candles = priceCandlesData.priceCandles.candle;
+  let calculatedMinPrice = Number.MAX_VALUE;
+  let calculatedMaxPrice = Number.MIN_VALUE;
+
+  const candleMap = new Map<
+    string,
+    {
+      point?: string;
+      high?: number;
+      low?: number;
+      open?: number;
+      close?: number;
+    }
+  >();
+
+  candles.forEach((candle) => {
+    if (!candle) return;
+
+    if (candle.high > calculatedMaxPrice) {
+      calculatedMaxPrice = candle.high;
+    }
+    if (candle.low < calculatedMinPrice) {
+      calculatedMinPrice = candle.low;
+    }
+
+    if (candle.point) {
+      candleMap.set(candle.point, candle);
+    }
+  });
+
+  return {
+    minPrice: calculatedMinPrice,
+    maxPrice: calculatedMaxPrice,
+    hasValidCandles: true,
+    candleMap,
+    candles,
+  };
+};