@oanda/labs-crowd-view-widget 1.0.56 → 1.0.58

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

@@ -1,9 +1,6 @@
-import { colorPalette } from '@oanda/labs-widget-common';
-import chroma from 'chroma-js';
 import type { TooltipComponentOption } from 'echarts';
 
 import type { BookType } from '../../../../gql/types/graphql';
-import { CHART_CONFIG } from '../../../constants';
 import { getTooltipFormatter } from '../chartUtils';
 import type { Bucket, TooltipParam } from '../types';
 
@@ -11,7 +8,6 @@ interface GetTooltipConfigParams {
   bookType: BookType;
   bucketWidth: number;
   buckets: Bucket[][];
-  displayPrecision: number;
   labelCallback: (key: string, params?: Record<string, unknown>) => string;
   selectedPriceRef: { current: number };
   tooltipLinesColor: string;
@@ -26,7 +22,6 @@ export const getTooltipConfig = ({
   bookType,
   bucketWidth,
   buckets,
-  displayPrecision,
   labelCallback,
   selectedPriceRef,
   tooltipLinesColor,
@@ -35,83 +30,47 @@ export const getTooltipConfig = ({
   isDesktop,
   isDark,
   locale,
-}: GetTooltipConfigParams): TooltipComponentOption => {
-  const styles = isDesktop
+}: GetTooltipConfigParams): TooltipComponentOption => ({
+  backgroundColor: 'transparent',
+  shadowColor: 'transparent',
+  extraCssText: 'width: 100%; z-index: 5;',
+  padding: 4,
+  textStyle: isDesktop
     ? {
-        backgroundColor: isDark
-          ? chroma(colorPalette.darkGray).alpha(0.95).hex()
-          : chroma(colorPalette.darkWhite).alpha(0.95).hex(),
-        shadowColor: colorPalette.black10,
-        extraCssText: 'z-index: 5;',
-        padding: 8,
-        alwaysShowContent: false,
-        textStyle: {
-          fontSize: 11,
-        },
+        fontSize: 12,
       }
     : {
-        backgroundColor: 'transparent',
-        shadowColor: 'transparent',
-        extraCssText: 'width: 100%; z-index: 5;',
-        padding: 4,
-        alwaysShowContent: true,
-        textStyle: {
-          fontSize: 10,
-          lineHeight: 12,
-        },
-      };
-  return {
-    ...styles,
-    trigger: 'axis' as const,
-    formatter: (params) =>
-      getTooltipFormatter({
-        bookType,
-        bucketWidth,
-        buckets,
-        labelCallback,
-        params: params as unknown as TooltipParam[],
-        selectedPrice: selectedPriceRef.current,
-        sentimentLongs,
-        sentimentShorts,
-        isDesktop,
-        locale,
-        isDark,
-      }),
-    hideDelay: 0,
-    axisPointer: {
-      type: 'cross' as const,
-      axis: 'x' as const,
-      lineStyle: {
-        color: tooltipLinesColor,
-      },
-      crossStyle: {
-        color: tooltipLinesColor,
-      },
-      label: {
-        padding: 0,
-        lineHeight: 24,
-        formatter: (params: {
-          axisDimension?: string;
-          axisIndex?: number;
-          value: unknown;
-        }) => {
-          if (params.axisDimension === 'y' && params.axisIndex === 0) {
-            selectedPriceRef.current = Number(params.value);
-            return ` ${Number(params.value).toFixed(displayPrecision)} `;
-          }
-          return '';
-        },
+        fontSize: 10,
+        lineHeight: 12,
       },
+  alwaysShowContent: true,
+  trigger: 'axis' as const,
+  formatter: (params) =>
+    getTooltipFormatter({
+      bookType,
+      bucketWidth,
+      buckets,
+      labelCallback,
+      params: params as unknown as TooltipParam[],
+      selectedPrice: selectedPriceRef.current,
+      sentimentLongs,
+      sentimentShorts,
+      isDesktop,
+      locale,
+      isDark,
+    }),
+  hideDelay: 0,
+  axisPointer: {
+    type: 'cross' as const,
+    axis: 'x' as const,
+    lineStyle: {
+      color: tooltipLinesColor,
     },
-    confine: true,
-    position: (point) => {
-      if (isDesktop) {
-        return [
-          point[0] + CHART_CONFIG.TOOLTIP_OFFSET,
-          point[1] + CHART_CONFIG.TOOLTIP_OFFSET,
-        ];
-      }
-      return [0, 0];
+    crossStyle: {
+      color: tooltipLinesColor,
     },
-  };
-};
+    z: 30,
+  },
+  confine: true,
+  position: [0, 0],
+});

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

@@ -1,6 +1,7 @@
 import type { XAXisComponentOption } from 'echarts';
 
 import {
+  formatFullDate,
   formatXAxisAdditionalLabel,
   formatXAxisLabel,
   getLabelData,
@@ -10,12 +11,14 @@ interface GetXAxisConfigParams {
   dates: string[];
   isGreaterThanTwoWeeks: boolean;
   locale: string;
+  isDesktop: boolean;
 }
 
 export const getXAxisConfig = ({
   dates,
   isGreaterThanTwoWeeks,
   locale,
+  isDesktop,
 }: GetXAxisConfigParams): XAXisComponentOption[] => {
   const labelsData = getLabelData({
     dates,
@@ -38,14 +41,32 @@ export const getXAxisConfig = ({
         },
       },
       axisLabel: {
-        showMaxLabel: false,
         padding: [8, 16, 8, 16],
         margin: 0,
         formatter: (value: unknown) =>
-          formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
+          value === dates[dates.length - 1]
+            ? ''
+            : formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
       },
       boundaryGap: false,
       z: 2,
+      axisPointer: {
+        label: {
+          lineHeight: 22,
+          margin: -22,
+          padding: [0, 8, 0, 8],
+          formatter: (params: {
+            axisDimension?: string;
+            axisIndex?: number;
+            value: unknown;
+          }) => {
+            const date = new Date(params.value as string);
+
+            return isDesktop ? formatFullDate(date, locale) : '';
+          },
+        },
+        z: 100,
+      },
     },
     {
       type: 'category',
@@ -67,6 +88,9 @@ export const getXAxisConfig = ({
         formatter: (value: unknown) =>
           formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks, locale),
       },
+      axisPointer: {
+        show: false,
+      },
       data: dates,
       boundaryGap: false,
       z: 2,

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

@@ -5,13 +5,13 @@ import { CHART_CONFIG } from '../../../constants';
 interface GetYAxisConfigParams {
   bucketWidth: number;
   displayPrecision: number;
-  isDesktop: boolean;
+  selectedPriceRef: { current: number };
 }
 
 export const getYAxisConfig = ({
   bucketWidth,
   displayPrecision,
-  isDesktop,
+  selectedPriceRef,
 }: GetYAxisConfigParams): YAXisComponentOption[] => [
   {
     type: 'value',
@@ -35,6 +35,23 @@ export const getYAxisConfig = ({
       verticalAlignMaxLabel: 'top',
       formatter: (value: number) => value.toFixed(displayPrecision),
     },
+    axisPointer: {
+      label: {
+        padding: [4, 4, 4, 4],
+        margin: -1,
+        formatter: (params: {
+          axisDimension?: string;
+          axisIndex?: number;
+          value: unknown;
+        }) => {
+          if (params.axisDimension === 'y' && params.axisIndex === 0) {
+            selectedPriceRef.current = Number(params.value);
+            return Number(params.value).toFixed(displayPrecision);
+          }
+          return '';
+        },
+      },
+    },
     z: 30,
   },
   {
@@ -51,7 +68,7 @@ export const getYAxisConfig = ({
       margin: 4,
       lineHeight: 20,
       verticalAlignMinLabel: 'bottom',
-      verticalAlignMaxLabel: isDesktop ? 'middle' : 'top',
+      verticalAlignMaxLabel: 'top',
       customValues: [
         CHART_CONFIG.SENTIMENT_MIN,
         CHART_CONFIG.SENTIMENT_MAX / 5,

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

@@ -0,0 +1,26 @@
+export const formatFullDate = (date: Date, locale: string): string => {
+  const formattedDate = date
+    .toLocaleDateString(locale, {
+      day: 'numeric',
+      month: '2-digit',
+      year: '2-digit',
+    })
+    .replace(/\//g, '.');
+
+  const formattedTime = date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  });
+
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZoneName: 'shortOffset',
+  });
+
+  const parts = formatter.formatToParts(date);
+  const timeZoneOffset = parts.find(
+    (part) => part.type === 'timeZoneName'
+  )?.value;
+
+  return `${formattedDate} ${formattedTime} ${timeZoneOffset}`;
+};

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

@@ -2,18 +2,7 @@ import { colorPalette } from '@oanda/labs-widget-common';
 
 import { BookType } from '../../../../gql/types/graphql';
 import type { Bucket, TooltipParam } from '../types';
-
-const DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
-  day: 'numeric',
-  month: 'numeric',
-  year: 'numeric',
-
-  hour: 'numeric',
-  minute: '2-digit',
-  hour12: false,
-
-  timeZoneName: 'shortOffset',
-};
+import { formatFullDate } from './formatFullDate';
 
 const SENTIMENT_DISPLAY_PRECISION = 2;
 
@@ -67,7 +56,8 @@ const getSentimentOverbalanceLabel = (
 
 const formatCandleData = (
   candleData: [number, number, number, number, number],
-  labelCallback: (key: string) => string
+  labelCallback: (key: string) => string,
+  isDesktop: boolean
 ): string => {
   const [, open, close, low, high] = candleData;
   const candleLabel = labelCallback('candle');
@@ -76,11 +66,19 @@ const formatCandleData = (
   const lowLabel = labelCallback('low');
   const highLabel = labelCallback('high');
 
-  return `<div><b>${candleLabel}:</b></div>
+  return isDesktop
+    ? `<div><b>${candleLabel}:</b></div>
+<div style="display: flex; gap: 4px; margin-right: 4px;">
 <div>${openLabel}: ${open} </div>
-<div>${closeLabel}: ${close} </div>
+<div>${highLabel}: ${high} </div>
 <div>${lowLabel}: ${low} </div>
+<div>${closeLabel}: ${close} </div>
+</div>`
+    : `<div><b>${candleLabel}:</b></div>
+<div>${openLabel}: ${open} </div>
 <div>${highLabel}: ${high} </div>
+<div>${lowLabel}: ${low} </div>
+<div>${closeLabel}: ${close} </div>
 `;
 };
 
@@ -112,8 +110,8 @@ const formatBookData = ({
 
   return isDesktop
     ? `<div><b>${labelCallback(bookLabelKey)}:</b></div>
-<div>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </div>
-<div>${labelCallback(sentimentLabel)}: ${sentimentValue}% </div>`
+<span style="margin-right: 4px;">${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </span>
+<span style="margin-right: 4px;">${labelCallback(sentimentLabel)}: ${sentimentValue}% </span>`
     : `<div><b>${labelCallback(bookLabelKey)}:</b></div>
 <div>${labelCallback('price_range')}:</div>
 <div>${priceRangeStart} - ${priceRangeEnd} </div>
@@ -124,9 +122,14 @@ const formatBookData = ({
 const formatSentimentData = (
   sentimentLong: number,
   sentimentShort: number,
-  labelCallback: (key: string) => string
+  labelCallback: (key: string) => string,
+  isDesktop: boolean
 ): string => {
-  return `<div><b>${labelCallback('sentiment')}:</b></div>
+  return isDesktop
+    ? `<div><b>${labelCallback('sentiment')}:</b></div>
+  <span style="margin-right: 4px;">${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </span>
+  <span style="margin-right: 4px;">${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </span>`
+    : `<div><b>${labelCallback('sentiment')}:</b></div>
 <div>${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>
 <div>${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>`;
 };
@@ -214,11 +217,9 @@ export const getTooltipFormatter = ({
     return '';
   }
 
-  const timeFormatted = time
-    .toLocaleString(locale, DATE_FORMAT_OPTIONS)
-    .replace(/\//g, '.');
+  const timeFormatted = formatFullDate(time, locale);
   const candleSection = showCandles
-    ? formatCandleData(candleData, labelCallback)
+    ? formatCandleData(candleData, labelCallback, isDesktop)
     : '';
 
   const bookSection = matchedBucket
@@ -234,7 +235,12 @@ export const getTooltipFormatter = ({
 
   const sentimentSection =
     showSentiment && sentimentLong && sentimentShort
-      ? formatSentimentData(sentimentLong, sentimentShort, labelCallback)
+      ? formatSentimentData(
+          sentimentLong,
+          sentimentShort,
+          labelCallback,
+          isDesktop
+        )
       : '';
 
   if (isDesktop) {
@@ -243,7 +249,7 @@ export const getTooltipFormatter = ({
       candleSection,
       sentimentSection,
       bookSection,
-      hasMatchedBucket: !!matchedBucket,
+      isDark,
     });
   }
 
@@ -264,20 +270,29 @@ interface TooltipSections {
 }
 
 const buildDesktopTooltip = ({
-  timeFormatted,
   candleSection,
   sentimentSection,
   bookSection,
-  hasMatchedBucket,
-}: TooltipSections & { hasMatchedBucket: boolean }): string => {
-  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
-  const sentimentPadding = hasMatchedBucket ? padding : '0px';
+  isDark,
+}: TooltipSections & {
+  isDark: boolean;
+}): string => {
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const fullWidth = TOOLTIP_STYLES.FULL_WIDTH;
 
-  return `<div style="padding-bottom: ${padding};">${timeFormatted}</div>
-<div style="padding-bottom: ${padding};">${candleSection}</div>
-<div style="padding-bottom: ${sentimentPadding};">${sentimentSection}</div>
-<div>${bookSection}</div>
-`;
+  return `<div style="width: ${fullWidth}; background-color: ${backgroundColor};">
+  <div style="width: ${fullWidth}; display: flex; justify-content: space-between;">
+ <div style="width: 40%;">
+${candleSection}
+</div>
+<div style="width: 22%;">
+${sentimentSection}
+</div>
+<div style="width: 38%;">
+${bookSection}
+</div>
+</div>
+</div>`;
 };
 
 const buildMobileTooltip = ({

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

@@ -1,3 +1,4 @@
+export * from './formatFullDate';
 export * from './formatXAxisAdditionalLabel';
 export * from './formatXAxisLabel';
 export * from './getChartStyles';

package/src/CrowdViewWidget/components/Chart/dataUtils/getBucketWidthMultiplayer.ts

@@ -0,0 +1,25 @@
+import {
+  DISPLAYED_BUCKETS_COUNT,
+  INSTRUMENTS_CONFIG,
+} from '../../../constants';
+import type { InstrumentId } from '../../../types';
+
+interface GetBucketWidthMultiplayerParams {
+  minPrice: number;
+  maxPrice: number;
+  instrument: InstrumentId;
+}
+
+export const getBucketWidthMultiplayer = ({
+  minPrice,
+  maxPrice,
+  instrument,
+}: GetBucketWidthMultiplayerParams): number => {
+  const { defaultBucketWidth } = INSTRUMENTS_CONFIG[instrument];
+  const priceRange = maxPrice - minPrice;
+
+  const calculatedMultiplier =
+    priceRange / (defaultBucketWidth * DISPLAYED_BUCKETS_COUNT);
+
+  return Math.max(1, Math.ceil(calculatedMultiplier));
+};

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

@@ -1,5 +1,5 @@
+export * from './getBucketWidthMultiplayer';
 export * from './getInstrumentConfigForDivision';
-export * from './getMultiplayerForTimeSpan';
 export * from './getTimeSpanForGranularity';
 export * from './processOrderPositionBooks';
 export * from './processPriceCandles';

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

@@ -89,7 +89,6 @@ export const getOption: GetOptionType = ({
       bookType,
       bucketWidth,
       buckets,
-      displayPrecision,
       labelCallback,
       selectedPriceRef,
       tooltipLinesColor: styles.tooltipLinesColor,
@@ -104,11 +103,12 @@ export const getOption: GetOptionType = ({
       dates,
       isGreaterThanTwoWeeks,
       locale,
+      isDesktop,
     }),
     yAxis: getYAxisConfig({
-      isDesktop,
       bucketWidth,
       displayPrecision,
+      selectedPriceRef,
     }),
     dataZoom: getDataZoomConfig({ isDesktop }),
     visualMap: getVisualMapConfig({

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

@@ -12,10 +12,10 @@ import type {
   GetSentimentsQuery,
   GetSentimentsQueryVariables,
 } from '../../../gql/types/graphql';
-import { BookType, DataSource, Division } from '../../../gql/types/graphql';
+import { DataSource } from '../../../gql/types/graphql';
 import { BUCKET_CONFIG, INSTRUMENTS_CONFIG } from '../../constants';
 import {
-  getMultiplayerForTimeSpan,
+  getBucketWidthMultiplayer,
   getTimeSpanForGranularity,
   processOrderPositionBooks,
   processPriceCandles,
@@ -30,11 +30,6 @@ export const useCrowdViewData = ({
   division,
   granularity,
 }: UseCrowdViewDataProps): UseCrowdViewDataReturn => {
-  const dataSource =
-    division === Division.Ogm || division === Division.Oj
-      ? DataSource.Mt5
-      : DataSource.V20;
-
   // Get price candles data
   const {
     loading: priceCandlesLoading,
@@ -44,12 +39,9 @@ export const useCrowdViewData = ({
     getPriceCandles,
     {
       variables: {
-        dataSource,
+        dataSource: DataSource.V20,
         division,
-        instrument:
-          dataSource === DataSource.Mt5
-            ? INSTRUMENTS_CONFIG[instrument].mt5name
-            : INSTRUMENTS_CONFIG[instrument].v20name,
+        instrument: INSTRUMENTS_CONFIG[instrument].v20name,
         granularity,
         timeSpan: getTimeSpanForGranularity(granularity),
       },
@@ -69,6 +61,15 @@ export const useCrowdViewData = ({
     pipsLocation,
   } = useMemo(() => processPriceCandles(priceCandlesData), [priceCandlesData]);
 
+  const bucketWidthMultiplayer = useMemo(
+    () =>
+      getBucketWidthMultiplayer({
+        minPrice,
+        maxPrice,
+        instrument,
+      }),
+    [minPrice, maxPrice, instrument]
+  );
   // Get order position books data
   const {
     loading: orderPositionLoading,
@@ -79,12 +80,12 @@ export const useCrowdViewData = ({
     {
       variables: {
         instrument: INSTRUMENTS_CONFIG[instrument].v20name,
-        bookType: bookType || BookType.Order,
+        bookType,
         timeSpan: getTimeSpanForGranularity(granularity),
         granularity,
         maxBookPrice: maxPrice,
         minBookPrice: minPrice,
-        bucketMultiplier: getMultiplayerForTimeSpan(granularity),
+        bucketMultiplier: bucketWidthMultiplayer,
         bucketMargin: BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
       },
       fetchPolicy: 'no-cache',
@@ -182,7 +183,7 @@ export const useCrowdViewData = ({
         bucketWidth:
           bucketWidth ||
           INSTRUMENTS_CONFIG[instrument].defaultBucketWidth *
-            getMultiplayerForTimeSpan(granularity),
+            bucketWidthMultiplayer,
         buckets,
         displayPrecision: pipsLocation,
         bookType,
@@ -203,8 +204,8 @@ export const useCrowdViewData = ({
     sentimentShorts,
     sentimentLongs,
     bucketWidth,
-    granularity,
     instrument,
+    bucketWidthMultiplayer,
     buckets,
     pipsLocation,
     bookType,

package/src/CrowdViewWidget/constants.ts

@@ -15,6 +15,8 @@ export const TIME_THRESHOLDS = {
   TWO_WEEKS_MS: 14 * 24 * 60 * 60 * 1000,
 } as const;
 
+export const DISPLAYED_BUCKETS_COUNT = 40;
+
 const CHART_CONFIG_STATIC = {
   MAIN_HEIGHT_DESKTOP: 410,
   MAIN_HEIGHT_MOBILE: 330,
@@ -32,22 +34,24 @@ const CHART_CONFIG_STATIC = {
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
   SENTIMENT_MAX: 100,
-  TOP_MARGIN_DESKTOP: 0,
-  TOP_MARGIN_MOBILE: 24,
-  MOBILE_TOOLTIP_HEIGHT: 85,
+  TOP_LABEL_SPACE_DESKTOP: 0,
+  TOP_LABEL_SPACE_MOBILE: 24,
+  TOOLTIP_HEIGHT_MOBILE: 85,
+  TOOLTIP_HEIGHT_DESKTOP: 46,
   TOOLTIP_OFFSET: 8,
 };
 
 const CHART_CONFIG_CALCULATED = {
   HEIGHT_DESKTOP:
     CHART_CONFIG_STATIC.MAIN_HEIGHT_DESKTOP +
-    CHART_CONFIG_STATIC.TOP_MARGIN_DESKTOP +
-    CHART_CONFIG_STATIC.X_LABEL_SIZE,
+    CHART_CONFIG_STATIC.TOP_LABEL_SPACE_DESKTOP +
+    CHART_CONFIG_STATIC.X_LABEL_SIZE +
+    CHART_CONFIG_STATIC.TOOLTIP_HEIGHT_DESKTOP,
   HEIGHT_MOBILE:
     CHART_CONFIG_STATIC.MAIN_HEIGHT_MOBILE +
     CHART_CONFIG_STATIC.X_LABEL_SIZE +
-    CHART_CONFIG_STATIC.TOP_MARGIN_MOBILE +
-    CHART_CONFIG_STATIC.MOBILE_TOOLTIP_HEIGHT,
+    CHART_CONFIG_STATIC.TOP_LABEL_SPACE_MOBILE +
+    CHART_CONFIG_STATIC.TOOLTIP_HEIGHT_MOBILE,
 };
 export const CHART_CONFIG = {
   ...CHART_CONFIG_STATIC,

package/src/translations/sources/en.json

@@ -29,6 +29,7 @@
   "sentiment": "Sentiment",
   "short": "Short",
   "short_overbalance": "Short overbalance",
-  "tap_chart_to_see_more_details": "Tap chart to see more details",
+  "tap_chart_to_see_more_details": "Tap the chart to see more details",
+  "hover_chart_to_see_more_details": "Hover over the chart to see more details",
   "trades": "Trades"
 }

package/test/components/Chart/dataUtils/getBucketWidthMultiplayer.test.ts

@@ -0,0 +1,33 @@
+import { getBucketWidthMultiplayer } from '../../../../src/CrowdViewWidget/components/Chart/dataUtils/getBucketWidthMultiplayer';
+import { InstrumentId } from '../../../../src/CrowdViewWidget/types';
+
+describe('getBucketWidthMultiplayer', () => {
+  describe('happy path', () => {
+    it('should calculate multiplier correctly for EUR_USD with standard price range', () => {
+      const result = getBucketWidthMultiplayer({
+        minPrice: 1.05,
+        maxPrice: 1.1,
+        instrument: InstrumentId.EUR_USD,
+      });
+      expect(result).toBe(3);
+    });
+
+    it('should calculate multiplier correctly for EUR_JPY with standard price range', () => {
+      const result = getBucketWidthMultiplayer({
+        minPrice: 140.0,
+        maxPrice: 150.0,
+        instrument: InstrumentId.EUR_JPY,
+      });
+      expect(result).toBe(5);
+    });
+  });
+
+  it('should return 1 when calculated multiplier is less than 1', () => {
+    const result = getBucketWidthMultiplayer({
+      minPrice: 1.0,
+      maxPrice: 1.01,
+      instrument: InstrumentId.EUR_USD,
+    });
+    expect(result).toBe(1);
+  });
+});