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

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,21 @@ ${
 }
 ${
   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_overbalance'
+                : 'short_overbalance'
+            )
+          : labelCallback(
+              bookType === BookType.Order
+                ? 'buy_overbalance'
+                : 'long_overbalance'
+            )
+      }: ${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,
+  };
+};

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} />
+    <div className="lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl">
+      <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>
   );
 };

package/src/CrowdViewWidget/components/Legend/LegendBar.tsx

@@ -15,6 +15,9 @@ export const LegendBar = ({ values, type, label }: LegendBarProps) => {
 
   return (
     <div className="lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary">
+      <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
+        {label}
+      </span>
       <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary">
         <div
           className="lw-h-full lw-flex-1"
@@ -27,10 +30,10 @@ export const LegendBar = ({ values, type, label }: LegendBarProps) => {
 
       <div className="lw-flex lw-w-full lw-justify-between">
         <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-          {values[0].toFixed(2)}% {label}
+          {values[0].toFixed(2)}%
         </span>
         <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-          {values[1].toFixed(2)}% {label}
+          {`≤ ${values[1].toFixed(2)}`}%
         </span>
       </div>
     </div>

package/src/CrowdViewWidget/constants.ts

@@ -1,10 +1,12 @@
+import { InstrumentId } from './types';
+
 export const BOOKS_THRESHOLDS = {
   MIN: 0.15,
   MAX: 0.55,
 } as const;
 
 export const BUCKET_CONFIG = {
-  DEFAULT_WIDTH: 0.0005,
+  MULTIPLIER: 4,
   PRICE_PADDING_MULTIPLIER: 2,
 } as const;
 
@@ -17,12 +19,120 @@ export const CHART_CONFIG = {
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
-  INITIAL_START_ZOOM: 0,
+  Y_LABEL_SIZE_MOBILE: 40,
+  INITIAL_START_ZOOM: 80,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
 } as const;
 
 export const COLOR_MAP = {
-  long: ['#fcedca', '#FAB313'],
-  short: ['#c8ebfa', '#309DCC'],
+  long: ['#eaf5fa', '#83c4e0'],
+  short: ['#fef7e7', '#fcd171'],
 } as const;
+
+export const INSTRUMENTS_CONFIG: Record<
+  InstrumentId,
+  {
+    precision: number;
+    defaultBucketWidth: number;
+    v20name: string;
+    mt5name: string;
+  }
+> = {
+  [InstrumentId.EUR_AUD]: {
+    mt5name: 'EURAUD',
+    v20name: 'EUR_AUD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.EUR_GBP]: {
+    mt5name: 'EURGBP',
+    v20name: 'EUR_GBP',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.EUR_JPY]: {
+    mt5name: 'EURJPY',
+    v20name: 'EUR_JPY',
+    precision: 3,
+    defaultBucketWidth: 0.05,
+  },
+  [InstrumentId.EUR_USD]: {
+    mt5name: 'EURUSD',
+    v20name: 'EUR_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.EUR_CHF]: {
+    mt5name: 'EURCHF',
+    v20name: 'EUR_CHF',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.USD_CHF]: {
+    mt5name: 'USDCHF',
+    v20name: 'USD_CHF',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.USD_JPY]: {
+    mt5name: 'USDJPY',
+    v20name: 'USD_JPY',
+    precision: 3,
+    defaultBucketWidth: 0.05,
+  },
+  [InstrumentId.USD_CAD]: {
+    mt5name: 'USDCAD',
+    v20name: 'USD_CAD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.GBP_USD]: {
+    mt5name: 'GBPUSD',
+    v20name: 'GBP_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.GBP_JPY]: {
+    mt5name: 'GBPJPY',
+    v20name: 'GBP_JPY',
+    precision: 3,
+    defaultBucketWidth: 0.05,
+  },
+  [InstrumentId.GBP_CHF]: {
+    mt5name: 'GBPCHF',
+    v20name: 'GBP_CHF',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.AUD_JPY]: {
+    mt5name: 'AUDJPY',
+    v20name: 'AUD_JPY',
+    precision: 3,
+    defaultBucketWidth: 0.05,
+  },
+  [InstrumentId.AUD_USD]: {
+    mt5name: 'AUDUSD',
+    v20name: 'AUD_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.NZD_USD]: {
+    mt5name: 'NZDUSD',
+    v20name: 'NZD_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+  [InstrumentId.XAU_USD]: {
+    mt5name: 'XAUUSD',
+    v20name: 'XAU_USD',
+    precision: 3,
+    defaultBucketWidth: 0.5,
+  },
+  [InstrumentId.XAG_USD]: {
+    mt5name: 'XAGUSD',
+    v20name: 'XAG_USD',
+    precision: 5,
+    defaultBucketWidth: 0.0005,
+  },
+};

package/src/CrowdViewWidget/selectConfig.ts

@@ -1,5 +1,5 @@
 import { BookType, Granularity } from '../gql/types/graphql';
-import { InstrumentId, InstrumentIdOC } from './types/instruments';
+import { InstrumentId } from './types';
 
 const navigationConfig = [
   {
@@ -13,65 +13,6 @@ const navigationConfig = [
 ];
 
 const instrumentSelectConfigOC = [
-  {
-    id: InstrumentIdOC.EUR_AUD,
-    label: 'EUR/AUD',
-  },
-  {
-    id: InstrumentIdOC.EUR_GBP,
-    label: 'EUR/GBP',
-  },
-  {
-    id: InstrumentIdOC.EUR_JPY,
-    label: 'EUR/JPY',
-  },
-  {
-    id: InstrumentIdOC.EUR_USD,
-    label: 'EUR/USD',
-  },
-  {
-    id: InstrumentIdOC.EUR_CHF,
-    label: 'EUR/CHF',
-  },
-  {
-    id: InstrumentIdOC.USD_CHF,
-    label: 'USD/CHF',
-  },
-  {
-    id: InstrumentIdOC.USD_JPY,
-    label: 'USD/JPY',
-  },
-  {
-    id: InstrumentIdOC.USD_CAD,
-    label: 'USD/CAD',
-  },
-  {
-    id: InstrumentIdOC.GBP_USD,
-    label: 'GBP/USD',
-  },
-  {
-    id: InstrumentIdOC.GBP_JPY,
-    label: 'GBP/JPY',
-  },
-  {
-    id: InstrumentIdOC.GBP_CHF,
-    label: 'GBP/CHF',
-  },
-  {
-    id: InstrumentIdOC.AUD_JPY,
-    label: 'AUD/JPY',
-  },
-  {
-    id: InstrumentIdOC.AUD_USD,
-    label: 'AUD/USD',
-  },
-  {
-    id: InstrumentIdOC.NZD_USD,
-    label: 'NZD/USD',
-  },
-];
-
-const instrumentSelectConfig = [
   {
     id: InstrumentId.EUR_AUD,
     label: 'EUR/AUD',
@@ -128,6 +69,10 @@ const instrumentSelectConfig = [
     id: InstrumentId.NZD_USD,
     label: 'NZD/USD',
   },
+];
+
+const instrumentSelectConfig = [
+  ...instrumentSelectConfigOC,
   {
     id: InstrumentId.XAU_USD,
     label: 'XAU/USD',

package/src/CrowdViewWidget/types.ts

@@ -1,8 +1,25 @@
 import type { WidgetConfig } from '@oanda/labs-widget-common';
 
 import type { Division } from '../gql/types/graphql';
-import type { InstrumentId } from './types/instruments';
 
+export enum InstrumentId {
+  EUR_AUD = 'EURAUD',
+  EUR_GBP = 'EURGBP',
+  EUR_JPY = 'EURJPY',
+  EUR_USD = 'EURUSD',
+  EUR_CHF = 'EURCHF',
+  USD_CHF = 'USDCHF',
+  USD_JPY = 'USDJPY',
+  USD_CAD = 'USDCAD',
+  GBP_USD = 'GBPUSD',
+  GBP_JPY = 'GBPJPY',
+  GBP_CHF = 'GBPCHF',
+  AUD_JPY = 'AUDJPY',
+  AUD_USD = 'AUDUSD',
+  NZD_USD = 'NZDUSD',
+  XAU_USD = 'XAUUSD',
+  XAG_USD = 'XAGUSD',
+}
 export interface CrowdViewConfig extends WidgetConfig {
   division: Division;
 }

package/src/translations/sources/en.json

@@ -1,26 +1,31 @@
 {
-  "data_unavailable": "Data unavailable",
-  "no_matching_results": "No matching results",
-  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
-  "order_book": "Order book",
-  "position_book": "Position book",
-  "long": "Long",
-  "short": "Short",
-  "instrument": "Instrument",
-  "granularity": "Granularity",
-  "search": "Search",
-  "5_minutes": "5 minutes",
-  "15_minutes": "15 minutes",
   "1_hour": "1 hour",
+  "15_minutes": "15 minutes",
   "4_hours": "4 hours",
+  "5_minutes": "5 minutes",
+  "buy_overbalance": "Buy overbalance",
+  "buy": "Buy",
   "candle": "Candle",
-  "open_price": "Open price",
   "close_price": "Close price",
-  "low": "Low",
+  "data_unavailable": "Data unavailable",
+  "granularity": "Granularity",
   "high": "High",
+  "instrument": "Instrument",
+  "long_overbalance": "Long overbalance",
+  "long": "Long",
+  "low": "Low",
+  "no_matching_results": "No matching results",
+  "open_price": "Open price",
+  "order_book": "Order book",
   "orders": "Orders",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
+  "position_book": "Position book",
+  "positions": "Positions",
   "price_range": "Price range",
+  "search": "Search",
+  "sell_overbalance": "Sell overbalance",
+  "sell": "Sell",
   "sentiment": "Sentiment",
-  "buy_advantage": "Buy advantage",
-  "sell_advantage": "Sell advantage"
+  "short_overbalance": "Short overbalance",
+  "short": "Short"
 }

package/test/Main.test.tsx

@@ -7,7 +7,7 @@ import { render } from '@testing-library/react';
 import React from 'react';
 
 import { Main } from '../src/CrowdViewWidget/Main';
-import { InstrumentId } from '../src/CrowdViewWidget/types/instruments';
+import { InstrumentId } from '../src/CrowdViewWidget/types';
 import { getOrderPositionBooks } from '../src/gql/getOrderPositionBooks';
 import { getPriceCandles } from '../src/gql/getPriceCandles';
 import {