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

package/src/CrowdViewWidget/Main.tsx

@@ -12,8 +12,7 @@ import type { Granularity } from '../gql/types/graphql';
 import { BookType } from '../gql/types/graphql';
 import { ChartWithData, Legend } from './components';
 import { granularitySelectConfig, navigationConfig } from './selectConfig';
-import type { MainProps } from './types';
-import type { InstrumentId } from './types/instruments';
+import type { InstrumentId, MainProps } from './types';
 import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
@@ -53,48 +52,55 @@ const Main = ({ division }: MainProps) => {
           className="lw-text-sm lw-tracking-normal"
           data-testid="crowd-view-widget"
         >
-          <Tabs
-            mobileFullWidth
-            activeTab={bookType}
-            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
-            items={navigationConfig}
-            labelCallback={lang}
-          />
-          <div className="lw-mb-6 lw-mt-12 lw-flex">
-            <div
-              className={cn('lw-mr-2', {
-                'lw-w-full': !isDesktop,
-                'lw-w-[280px]': isDesktop,
-              })}
-            >
-              <Select
-                options={instrumentSelectConfigWithDivision}
-                searchPlaceholder={lang('search')}
-                selectLabel={lang('instrument')}
-                selectedOption={instrument}
-                setSelectedOption={(val) =>
-                  setInstrument(val as { id: InstrumentId; label: string })
-                }
-              />
-            </div>
+          <div>
+            <Tabs
+              mobileFullWidth
+              activeTab={bookType}
+              handleClick={(e) =>
+                setBookType(e.currentTarget.value as BookType)
+              }
+              items={navigationConfig}
+              labelCallback={lang}
+            />
             <div
-              className={cn({
-                'lw-w-full': !isDesktop,
-                'lw-w-[280px]': isDesktop,
+              className={cn('lw-mb-6 lw-mt-12', {
+                'lw-flex': isDesktop,
               })}
             >
-              <Select
-                options={granularitySelectConfigWithLang}
-                searchPlaceholder={lang('search')}
-                selectLabel={lang('granularity')}
-                selectedOption={granularity}
-                setSelectedOption={(val) =>
-                  setGranularity(val as { id: Granularity; label: string })
-                }
-              />
+              <div
+                className={cn('lw-mr-2', {
+                  'lw-w-full lw-mb-2': !isDesktop,
+                  'lw-w-[280px]': isDesktop,
+                })}
+              >
+                <Select
+                  options={instrumentSelectConfigWithDivision}
+                  searchPlaceholder={lang('search')}
+                  selectLabel={lang('instrument')}
+                  selectedOption={instrument}
+                  setSelectedOption={(val) =>
+                    setInstrument(val as { id: InstrumentId; label: string })
+                  }
+                />
+              </div>
+              <div
+                className={cn({
+                  'lw-w-full': !isDesktop,
+                  'lw-w-[280px]': isDesktop,
+                })}
+              >
+                <Select
+                  options={granularitySelectConfigWithLang}
+                  searchPlaceholder={lang('search')}
+                  selectLabel={lang('granularity')}
+                  selectedOption={granularity}
+                  setSelectedOption={(val) =>
+                    setGranularity(val as { id: Granularity; label: string })
+                  }
+                />
+              </div>
             </div>
           </div>
-
           <ChartWithData
             bookType={bookType}
             division={division}
@@ -102,7 +108,7 @@ const Main = ({ division }: MainProps) => {
             instrument={instrument.id}
           />
 
-          <Legend />
+          <Legend bookType={bookType} />
         </div>
       )}
     </>

package/src/CrowdViewWidget/components/Chart/Chart.tsx

@@ -48,7 +48,7 @@ echarts.use([
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ data }: ChartProps) => {
+const Chart = ({ data, isDesktop }: ChartProps) => {
   const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
 
@@ -58,7 +58,7 @@ const Chart = ({ data }: ChartProps) => {
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption(data, isDark, lang)}
+      option={getOption(data, isDark, isDesktop, lang)}
       opts={{ renderer: 'canvas' }}
       onEvents={{
         datazoom: (_params: unknown, instance: EChartsType) => {

package/src/CrowdViewWidget/components/Chart/ChartWithData.tsx

@@ -5,7 +5,6 @@ import {
   SpinnerSize,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
-import classnames from 'classnames';
 import React from 'react';
 
 import { Chart } from './Chart';
@@ -30,41 +29,20 @@ const ChartWithData = ({
 
   return (
     <>
-      <div
-        className={classnames('lw-relative lw-w-full', {
-          'lw-h-[450px]': isDesktop,
-          'lw-h-[390px]': !isDesktop,
-        })}
-      >
+      <div className="lw-relative lw-h-[450px] lw-w-full">
         {error && (
-          <div
-            className={classnames(
-              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
-              {
-                'lw-h-full': isDesktop,
-                'lw-h-[calc(100%-40px)]': !isDesktop,
-              }
-            )}
-          >
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <ChartError />
           </div>
         )}
         {loading && (
-          <div
-            className={classnames(
-              'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
-              {
-                'lw-h-full': isDesktop,
-                'lw-h-[calc(100%-40px)]': !isDesktop,
-              }
-            )}
-          >
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-[calc(100%-30px)] lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}
         {!loading && !error && !!data && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-            <Chart data={data} />
+            <Chart data={data} isDesktop={isDesktop} />
           </div>
         )}
       </div>

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,8 +16,17 @@ import {
 
 // @ts-expect-error
 export const getOption: GetOptionType = (
-  { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth, buckets },
+  {
+    xAxisData,
+    candlesSeriesData,
+    orderPositionBooks,
+    bucketWidth,
+    buckets,
+    precision,
+    bookType,
+  },
   isDark,
+  isDesktop,
   labelCallback
 ) => {
   let selectedPrice: number;
@@ -41,7 +50,9 @@ export const getOption: GetOptionType = (
     chartWidth: CHART_CONFIG.WIDTH,
     chartHeight: CHART_CONFIG.HEIGHT,
     xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
-    yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,
+    yLabelSize: isDesktop
+      ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP
+      : CHART_CONFIG.Y_LABEL_SIZE_MOBILE,
     bottomLeftBox: false,
   });
 
@@ -64,7 +75,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 +94,15 @@ export const getOption: GetOptionType = (
       },
       confine: true,
       formatter: (params) =>
-        getTooltipFormatter(
+        getTooltipFormatter({
           params,
           buckets,
           bucketWidth,
           selectedPrice,
-          labelCallback
-        ),
+          labelCallback,
+          precision,
+          bookType,
+        }),
     },
     xAxis: {
       type: 'category',
@@ -114,6 +127,8 @@ export const getOption: GetOptionType = (
       axisLabel: {
         showMaxLabel: false,
         showMinLabel: false,
+        margin: isDesktop ? 4 : 2,
+        formatter: (value: number) => value.toFixed(precision - 1),
       },
     },
     series: [
@@ -125,6 +140,7 @@ export const getOption: GetOptionType = (
           color: colorPalette.raspberryLight,
           color0: colorPalette.bottleGreenLight,
         },
+
         markPoint: {
           symbol: 'circle',
           symbolSize: 0,
@@ -147,26 +163,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',
@@ -183,7 +197,7 @@ export const getOption: GetOptionType = (
         name: 'main-grid',
         top: '0px',
         left: '0px',
-        right: `${CHART_CONFIG.Y_LABEL_SIZE_DESKTOP}px`,
+        right: `${isDesktop ? CHART_CONFIG.Y_LABEL_SIZE_DESKTOP : CHART_CONFIG.Y_LABEL_SIZE_MOBILE}px`,
         bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
       },
     ],

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 {
@@ -32,17 +40,19 @@ export interface UseCrowdViewDataReturn {
 export type GetOptionType = (
   props: CrowdViewData,
   isDark: boolean,
+  isDesktop: boolean,
   labelCallback: (key: string, params?: Record<string, unknown>) => string
 ) => EChartsOption;
 
 export interface ChartProps {
   data: CrowdViewData;
+  isDesktop: boolean;
 }
 
 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;
+};