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

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;
@@ -15,9 +21,14 @@ export interface UseCrowdViewDataProps {
 
 interface CrowdViewData {
   xAxisData: string[];
+  // [open, close, low, high]
   candlesSeriesData: [number, number, number, number][];
-  orderPositionBooks: ([string, number, string] | null)[];
+  // [time, price, index]
+  orderPositionBooks: [string, number | null, number][];
   bucketWidth: number;
+  buckets: Bucket[][];
+  precision: number;
+  bookType: BookType;
 }
 
 export interface UseCrowdViewDataReturn {
@@ -28,7 +39,8 @@ export interface UseCrowdViewDataReturn {
 
 export type GetOptionType = (
   props: CrowdViewData,
-  isDark: boolean
+  isDark: boolean,
+  labelCallback: (key: string, params?: Record<string, unknown>) => string
 ) => EChartsOption;
 
 export interface ChartProps {
@@ -38,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,134 +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) => {
-      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!,
-        }));
-
-      const candle = candleMap.get(book.time);
-      const price = candle?.high ?? null;
-
-      return [book.time, price, JSON.stringify(filteredBuckets)] as [
-        string,
-        number,
-        string,
-      ];
-    });
-};
-
-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,
@@ -153,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),
       },
@@ -171,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 {
@@ -193,7 +76,7 @@ export const useCrowdViewData = ({
     getOrderPositionBooks,
     {
       variables: {
-        instrument,
+        instrument: INSTRUMENTS_CONFIG[instrument].v20name,
         bookType: bookType || BookType.Order,
         timeSpan: getTimeSpanForGranularity(granularity),
         granularity,
@@ -212,6 +95,11 @@ export const useCrowdViewData = ({
     [orderPositionData, candleMap]
   );
 
+  const buckets = useMemo(
+    () => processBuckets(orderPositionData, targetBucketWidth),
+    [orderPositionData, targetBucketWidth]
+  );
+
   const error = useMemo((): Error | null => {
     if (priceCandlesError) {
       return new Error(`Price candles error: ${priceCandlesError.message}`);
@@ -248,12 +136,25 @@ export const useCrowdViewData = ({
     );
 
     return {
+      buckets,
       xAxisData,
       candlesSeriesData,
       orderPositionBooks,
-      bucketWidth: orderPositionData.orderPositionBooks?.[0]?.bucketWidth || 0,
+      bucketWidth: targetBucketWidth,
+      precision: INSTRUMENTS_CONFIG[instrument].precision,
+      bookType,
     };
-  }, [priceCandlesData, orderPositionData, error, candles, orderPositionBooks]);
+  }, [
+    priceCandlesData,
+    orderPositionData,
+    error,
+    candles,
+    buckets,
+    orderPositionBooks,
+    targetBucketWidth,
+    instrument,
+    bookType,
+  ]);
 
   return {
     data,

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,
@@ -28,7 +28,7 @@ export const getLabelData = ({
     })
     .map((item) => ({
       name: new Date(item).toLocaleDateString(undefined, {
-        month: 'short',
+        month: isGreaterThanTwoWeeks ? 'short' : 'long',
         day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
       }),
       xAxis: item,
@@ -91,3 +91,96 @@ export const getRectColor = (sentiment: number) =>
   sentiment < 0
     ? 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,
+  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];
+  };
+  const booksParam = arr[1] as { value: [string, number, number] };
+  const time = new Date(candleParam.axisValue as string);
+
+  const candleData = candleParam.value;
+  const booksData = booksParam?.value ?? [];
+  const bucketsIndex = booksData[2];
+  const selectedBuckets = buckets[bucketsIndex];
+
+  const matchedBucket = selectedBuckets?.find(
+    ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth
+  );
+  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',
+    year: 'numeric',
+    day: 'numeric',
+    month: 'numeric',
+    timeZoneName: 'short',
+  })}</p><br />
+${
+  showCandles
+    ? `<p><b>${labelCallback('candle')}:</b></p>
+<p>${labelCallback('open_price')}: ${candleData[1]} </p>
+<p>${labelCallback('close_price')}: ${candleData[2]} </p>
+<p>${labelCallback('low')}: ${candleData[3]} </p>
+<p>${labelCallback('high')}: ${candleData[4]} </p>
+`
+    : ''
+}
+${
+  matchedBucket
+    ? `<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>`
+    : ''
+}`;
+};
+
+export const formatXAxisLabel = (
+  value: unknown,
+  isGreaterThanTwoWeeks: boolean
+) => {
+  const date = new Date(value as string);
+  return isGreaterThanTwoWeeks
+    ? `${date.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+      })}`
+    : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(undefined, {
+        day: 'numeric',
+      })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;
+};

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

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