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

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

@@ -1,17 +1,28 @@
+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 = {
-  hour: '2-digit',
-  minute: '2-digit',
-  year: 'numeric',
   day: 'numeric',
   month: 'numeric',
-  timeZoneName: 'short',
+  year: 'numeric',
+
+  hour: 'numeric',
+  minute: '2-digit',
+  hour12: false,
+
+  timeZoneName: 'shortOffset',
 };
 
 const SENTIMENT_DISPLAY_PRECISION = 2;
 
+const TOOLTIP_STYLES = {
+  MOBILE_COLUMN_WIDTH: '33.3%',
+  PADDING_BOTTOM: '4px',
+  FULL_WIDTH: '100%',
+} as const;
+
 const calculateBucketDisplayPrecision = (bucketWidth: number): number => {
   return bucketWidth.toString().split('.')[1]?.length || 0;
 };
@@ -59,11 +70,17 @@ const formatCandleData = (
   labelCallback: (key: string) => string
 ): string => {
   const [, open, close, low, high] = candleData;
-  return `<p><b>${labelCallback('candle')}:</b></p>
-<p>${labelCallback('open_price')}: ${open} </p>
-<p>${labelCallback('close_price')}: ${close} </p>
-<p>${labelCallback('low')}: ${low} </p>
-<p>${labelCallback('high')}: ${high} </p>
+  const candleLabel = labelCallback('candle');
+  const openLabel = labelCallback('open');
+  const closeLabel = labelCallback('close');
+  const lowLabel = labelCallback('low');
+  const highLabel = labelCallback('high');
+
+  return `<div><b>${candleLabel}:</b></div>
+<div>${openLabel}: ${open} </div>
+<div>${closeLabel}: ${close} </div>
+<div>${lowLabel}: ${low} </div>
+<div>${highLabel}: ${high} </div>
 `;
 };
 
@@ -73,14 +90,16 @@ const formatBookData = ({
   bucketDisplayPrecision,
   bookType,
   labelCallback,
+  isDesktop,
 }: {
   matchedBucket: Bucket;
   bucketWidth: number;
   bucketDisplayPrecision: number;
   bookType: BookType;
   labelCallback: (key: string) => string;
+  isDesktop: boolean;
 }): string => {
-  const bookLabelKey = bookType === BookType.Order ? 'orders' : 'positions';
+  const bookLabelKey = bookType === BookType.Order ? 'orders' : 'trades';
   const priceRangeStart = matchedBucket.price.toFixed(bucketDisplayPrecision);
   const priceRangeEnd = (matchedBucket.price + bucketWidth).toFixed(
     bucketDisplayPrecision
@@ -89,13 +108,17 @@ const formatBookData = ({
     matchedBucket.sentiment,
     bookType
   );
-  const sentimentValue = Math.abs(matchedBucket.sentiment).toFixed(
-    bucketDisplayPrecision
-  );
+  const sentimentValue = Math.abs(matchedBucket.sentiment);
 
-  return `<br /><p><b>${labelCallback(bookLabelKey)}:</b></p>
-<p>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </p>
-<p>${labelCallback(sentimentLabel)}: ${sentimentValue}% </p>`;
+  return isDesktop
+    ? `<div><b>${labelCallback(bookLabelKey)}:</b></div>
+<div>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </div>
+<div>${labelCallback(sentimentLabel)}: ${sentimentValue}% </div>`
+    : `<div><b>${labelCallback(bookLabelKey)}:</b></div>
+<div>${labelCallback('price_range')}:</div>
+<div>${priceRangeStart} - ${priceRangeEnd} </div>
+<div>${labelCallback(sentimentLabel)}:</div>
+<div>${sentimentValue}% </div>`;
 };
 
 const formatSentimentData = (
@@ -103,9 +126,9 @@ const formatSentimentData = (
   sentimentShort: number,
   labelCallback: (key: string) => string
 ): string => {
-  return `<br /><p><b>${labelCallback('sentiment')}:</b></p>
-<p>${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>
-<p>${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>`;
+  return `<div><b>${labelCallback('sentiment')}:</b></div>
+<div>${labelCallback('long')}: ${sentimentLong.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>
+<div>${labelCallback('short')}: ${sentimentShort.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </div>`;
 };
 
 const hasValidCandleData = (
@@ -142,6 +165,9 @@ export const getTooltipFormatter = ({
   labelCallback,
   sentimentLongs,
   sentimentShorts,
+  isDesktop,
+  locale,
+  isDark,
 }: {
   params: TooltipParam[];
   buckets: Bucket[][];
@@ -151,6 +177,9 @@ export const getTooltipFormatter = ({
   labelCallback: (key: string) => string;
   sentimentLongs: (number | null)[];
   sentimentShorts: (number | null)[];
+  isDesktop: boolean;
+  locale: string;
+  isDark: boolean;
 }) => {
   if (!params || !Array.isArray(params) || params.length === 0) {
     return '';
@@ -185,7 +214,9 @@ export const getTooltipFormatter = ({
     return '';
   }
 
-  const timeFormatted = time.toLocaleString(undefined, DATE_FORMAT_OPTIONS);
+  const timeFormatted = time
+    .toLocaleString(locale, DATE_FORMAT_OPTIONS)
+    .replace(/\//g, '.');
   const candleSection = showCandles
     ? formatCandleData(candleData, labelCallback)
     : '';
@@ -197,6 +228,7 @@ export const getTooltipFormatter = ({
         bucketDisplayPrecision,
         bookType,
         labelCallback,
+        isDesktop,
       })
     : '';
 
@@ -205,8 +237,73 @@ export const getTooltipFormatter = ({
       ? formatSentimentData(sentimentLong, sentimentShort, labelCallback)
       : '';
 
-  return `<p>${timeFormatted}</p><br />
+  if (isDesktop) {
+    return buildDesktopTooltip({
+      timeFormatted,
+      candleSection,
+      sentimentSection,
+      bookSection,
+      hasMatchedBucket: !!matchedBucket,
+    });
+  }
+
+  return buildMobileTooltip({
+    timeFormatted,
+    candleSection,
+    sentimentSection,
+    bookSection,
+    isDark,
+  });
+};
+
+interface TooltipSections {
+  timeFormatted: string;
+  candleSection: string;
+  sentimentSection: string;
+  bookSection: string;
+}
+
+const buildDesktopTooltip = ({
+  timeFormatted,
+  candleSection,
+  sentimentSection,
+  bookSection,
+  hasMatchedBucket,
+}: TooltipSections & { hasMatchedBucket: boolean }): string => {
+  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
+  const sentimentPadding = hasMatchedBucket ? padding : '0px';
+
+  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>
+`;
+};
+
+const buildMobileTooltip = ({
+  timeFormatted,
+  candleSection,
+  sentimentSection,
+  bookSection,
+  isDark,
+}: TooltipSections & { isDark: boolean }): string => {
+  const backgroundColor = isDark ? colorPalette.black : colorPalette.white;
+  const columnWidth = TOOLTIP_STYLES.MOBILE_COLUMN_WIDTH;
+  const fullWidth = TOOLTIP_STYLES.FULL_WIDTH;
+  const padding = TOOLTIP_STYLES.PADDING_BOTTOM;
+
+  return `<div style="width: ${fullWidth}; background-color: ${backgroundColor};">
+  <div style="padding-bottom: ${padding};">${timeFormatted}</div>
+  <div style="width: ${fullWidth}; display: flex; justify-content: space-between;">
+  <div style="width: ${columnWidth};">
 ${candleSection}
+</div>
+<div style="width: ${columnWidth};">
+${sentimentSection}
+</div>
+<div style="width: ${columnWidth};">
 ${bookSection}
-${sentimentSection}`;
+</div>
+</div>
+</div>`;
 };

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

@@ -11,7 +11,8 @@ export const handleLabelUpdate = (
   instance: EChartsType,
   mainData: ChartProps['mainData'],
   labelTimerRef: MutableRefObject<NodeJS.Timeout | null>,
-  isGreaterThanTwoWeeksRef: MutableRefObject<boolean | null>
+  isGreaterThanTwoWeeksRef: MutableRefObject<boolean | null>,
+  locale: string
 ): void => {
   if (labelTimerRef.current) {
     clearTimeout(labelTimerRef.current);
@@ -55,7 +56,7 @@ export const handleLabelUpdate = (
             id: 'main-xAxis',
             axisLabel: {
               formatter: (value: string) =>
-                formatXAxisLabel(value, isGreaterThanTwoWeeks),
+                formatXAxisLabel(value, isGreaterThanTwoWeeks, locale),
             },
           },
           {
@@ -63,7 +64,11 @@ export const handleLabelUpdate = (
             axisLabel: {
               customValues: labelsData,
               formatter: (value: unknown) =>
-                formatXAxisAdditionalLabel(value, isGreaterThanTwoWeeks),
+                formatXAxisAdditionalLabel(
+                  value,
+                  isGreaterThanTwoWeeks,
+                  locale
+                ),
             },
           },
         ],

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

@@ -8,3 +8,4 @@ export * from './getTooltipFormatter';
 export * from './handleLabelUpdate';
 export * from './handleTooltipUpdate';
 export * from './isDifferenceGreaterThanTwoWeeks';
+export * from './normalizeLocale';

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

@@ -0,0 +1,3 @@
+export const normalizeLocale = (locale: string): string => {
+  return locale === 'en' ? 'en-GB' : locale;
+};

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

@@ -60,7 +60,7 @@ export const processPriceCandles = (
     candlesClose,
     candlesLow,
     candlesHigh,
-    dates,
+    dates: [...dates, new Date().toISOString()],
     hasValidCandles: true,
     pipsLocation: priceCandlesData.priceCandles.pipsLocation,
   };

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

@@ -40,6 +40,7 @@ export const getOption: GetOptionType = ({
   isDark,
   isDesktop,
   labelCallback,
+  locale,
 }) => {
   const styles = getChartStyles(isDark);
   const selectedPriceRef = { current: 0 };
@@ -94,13 +95,18 @@ export const getOption: GetOptionType = ({
       tooltipLinesColor: styles.tooltipLinesColor,
       sentimentLongs,
       sentimentShorts,
+      isDesktop,
+      isDark,
+      locale,
     }),
     grid: getGridConfig({ isDesktop }),
     xAxis: getXAxisConfig({
       dates,
       isGreaterThanTwoWeeks,
+      locale,
     }),
     yAxis: getYAxisConfig({
+      isDesktop,
       bucketWidth,
       displayPrecision,
     }),

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

@@ -57,6 +57,7 @@ interface GetOptionProps {
   isDesktop: boolean;
   isLoading: boolean;
   labelCallback: (key: string, params?: Record<string, unknown>) => string;
+  locale: string;
 }
 
 export type GetOptionType = (props: GetOptionProps) => EChartsOption;

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

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseResizeObserverOptions {
+  debounceDelay?: number;
+}
+
+export const useResizeObserver = (
+  options: UseResizeObserverOptions = {}
+): [React.RefObject<HTMLDivElement>, boolean] => {
+  const { debounceDelay = 150 } = options;
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return undefined;
+    }
+
+    if (typeof ResizeObserver === 'undefined') {
+      console.warn('ResizeObserver is not supported in this browser');
+      return undefined;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      setIsResizing(true);
+
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+      }
+
+      resizeTimeoutRef.current = setTimeout(() => {
+        setIsResizing(false);
+        resizeTimeoutRef.current = null;
+      }, debounceDelay);
+    });
+
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+      if (resizeTimeoutRef.current) {
+        clearTimeout(resizeTimeoutRef.current);
+        resizeTimeoutRef.current = null;
+      }
+    };
+  }, [debounceDelay]);
+
+  return [containerRef, isResizing];
+};

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

@@ -12,14 +12,15 @@ interface LegendBarProps {
 
 export const LegendBar = ({ type, isDark }: LegendBarProps) => {
   const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
+
   const startColor =
     type === 'long' ? colorPalette.long[1] : colorPalette.short[0];
   const endColor =
     type === 'long' ? colorPalette.long[0] : colorPalette.short[1];
   const endGradient =
     type === 'long'
-      ? `linear-gradient(90deg,${endColor} 0%, transparent 100%)`
-      : `linear-gradient(270deg,${startColor} 0%, transparent 100%)`;
+      ? `linear-gradient(90deg,${endColor} 0%, ${colorPalette.backgroundColor} 100%)`
+      : `linear-gradient(270deg,${startColor} 0%, ${colorPalette.backgroundColor} 100%)`;
 
   return (
     <div

package/src/CrowdViewWidget/constants.ts

@@ -15,9 +15,9 @@ export const TIME_THRESHOLDS = {
   TWO_WEEKS_MS: 14 * 24 * 60 * 60 * 1000,
 } as const;
 
-export const CHART_CONFIG = {
-  HEIGHT: 440,
-  MAIN_HEIGHT: 400,
+const CHART_CONFIG_STATIC = {
+  MAIN_HEIGHT_DESKTOP: 410,
+  MAIN_HEIGHT_MOBILE: 330,
   MARGIN_BETWEEN: 50,
   SENTIMENT_HEIGHT: 120,
   WIDTH: 9999,
@@ -33,8 +33,25 @@ export const CHART_CONFIG = {
   SENTIMENT_MIN: 0,
   SENTIMENT_MAX: 100,
   TOP_MARGIN_DESKTOP: 0,
-  TOP_MARGIN_MOBILE: 30,
-  TOOLTIP_OFFSET: 5,
+  TOP_MARGIN_MOBILE: 24,
+  MOBILE_TOOLTIP_HEIGHT: 85,
+  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,
+  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,
+};
+export const CHART_CONFIG = {
+  ...CHART_CONFIG_STATIC,
+  ...CHART_CONFIG_CALCULATED,
 } as const;
 
 export const COLOR_MAP = {
@@ -47,6 +64,7 @@ export const COLOR_MAP = {
       chroma(colorPalette.darkYellow10).shade(0.5).hex(),
       chroma(colorPalette.darkYellow90).shade(0.5).hex(),
     ],
+    backgroundColor: colorPalette.black,
   },
   light: {
     long: [
@@ -57,6 +75,7 @@ export const COLOR_MAP = {
       chroma(colorPalette.lightYellow10).tint(0.5).hex(),
       chroma(colorPalette.lightYellow90).tint(0.5).hex(),
     ],
+    backgroundColor: colorPalette.white,
   },
 } as const;
 

package/src/CrowdViewWidget/selectConfig.ts

@@ -13,6 +13,10 @@ const navigationConfig = [
 ];
 
 const instrumentSelectConfigOC = [
+  {
+    id: InstrumentId.EUR_USD,
+    label: 'EUR/USD',
+  },
   {
     id: InstrumentId.EUR_AUD,
     label: 'EUR/AUD',
@@ -25,10 +29,6 @@ const instrumentSelectConfigOC = [
     id: InstrumentId.EUR_JPY,
     label: 'EUR/JPY',
   },
-  {
-    id: InstrumentId.EUR_USD,
-    label: 'EUR/USD',
-  },
   {
     id: InstrumentId.EUR_CHF,
     label: 'EUR/CHF',

package/src/translations/sources/en.json

@@ -3,31 +3,32 @@
   "15_minutes": "15 minutes",
   "4_hours": "4 hours",
   "5_minutes": "5 minutes",
-  "buy_overbalance": "Buy overbalance",
   "buy": "Buy",
+  "buy_overbalance": "Buy overbalance",
   "candle": "Candle",
-  "close_price": "Close price",
+  "close": "Close",
   "data_unavailable": "Data unavailable",
+  "even_market_demand": "Even market demand",
   "granularity": "Granularity",
   "high": "High",
   "instrument": "Instrument",
-  "long_overbalance": "Long overbalance",
   "long": "Long",
+  "long_overbalance": "Long overbalance",
   "low": "Low",
   "no_matching_results": "No matching results",
-  "open_price": "Open price",
+  "open": "Open",
   "order_book": "Order book",
   "orders": "Orders",
   "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
   "position_book": "Position book",
-  "positions": "Positions",
+  "price": "Price",
   "price_range": "Price range",
   "search": "Search",
-  "sell_overbalance": "Sell overbalance",
   "sell": "Sell",
+  "sell_overbalance": "Sell overbalance",
   "sentiment": "Sentiment",
-  "short_overbalance": "Short overbalance",
   "short": "Short",
-  "even_market_demand": "Even market demand",
-  "price": "Price"
+  "short_overbalance": "Short overbalance",
+  "tap_chart_to_see_more_details": "Tap chart to see more details",
+  "trades": "Trades"
 }

package/test/components/Chart/utils/chartUtils.test.ts

@@ -110,13 +110,13 @@ describe('chartUtils', () => {
     const sampleIso = '2025-03-15T10:30:00Z';
 
     it('formats time when flag is true', () => {
-      const result = formatXAxisLabel(sampleIso, true);
+      const result = formatXAxisLabel(sampleIso, true, 'en-US');
       expect(typeof result).toBe('string');
       expect(result).toContain(':');
     });
 
     it('formats day when flag is false', () => {
-      const result = formatXAxisLabel(sampleIso, false);
+      const result = formatXAxisLabel(sampleIso, false, 'en-US');
       expect(typeof result).toBe('string');
       // Contains day of month (15) with surrounding spaces per implementation
       expect(result).toMatch(/\s15\s/);
@@ -189,11 +189,14 @@ describe('chartUtils', () => {
         labelCallback,
         sentimentLongs: [],
         sentimentShorts: [],
+        isDesktop: true,
+        locale: 'en-US',
+        isDark: false,
       });
       expect(html).toBeDefined();
       expect(html).toContain('candle');
-      expect(html).toContain('open_price');
-      expect(html).toContain('close_price');
+      expect(html).toContain('open');
+      expect(html).toContain('close');
       expect(html).toContain('low');
       expect(html).toContain('high');
       expect(html).toContain('orders');
@@ -227,6 +230,9 @@ describe('chartUtils', () => {
         labelCallback,
         sentimentLongs: [30.5],
         sentimentShorts: [69.5],
+        isDesktop: true,
+        locale: 'en-US',
+        isDark: false,
       });
       expect(html).toBeDefined();
       expect(html).toContain('candle');
@@ -257,6 +263,9 @@ describe('chartUtils', () => {
         labelCallback,
         sentimentLongs: [],
         sentimentShorts: [],
+        isDesktop: true,
+        locale: 'en-US',
+        isDark: false,
       });
       expect(html).toBe('');
     });
@@ -271,6 +280,9 @@ describe('chartUtils', () => {
         labelCallback,
         sentimentLongs: [],
         sentimentShorts: [],
+        isDesktop: true,
+        locale: 'en-US',
+        isDark: false,
       });
       expect(html).toBe('');
     });