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

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

@@ -1,3 +1,4 @@
+export * from './formatFullDate';
 export * from './formatXAxisAdditionalLabel';
 export * from './formatXAxisLabel';
 export * from './getChartStyles';
@@ -8,3 +9,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 };
@@ -88,21 +89,26 @@ export const getOption: GetOptionType = ({
       bookType,
       bucketWidth,
       buckets,
-      displayPrecision,
       labelCallback,
       selectedPriceRef,
       tooltipLinesColor: styles.tooltipLinesColor,
       sentimentLongs,
       sentimentShorts,
+      isDesktop,
+      isDark,
+      locale,
     }),
     grid: getGridConfig({ isDesktop }),
     xAxis: getXAxisConfig({
       dates,
       isGreaterThanTwoWeeks,
+      locale,
+      isDesktop,
     }),
     yAxis: getYAxisConfig({
       bucketWidth,
       displayPrecision,
+      selectedPriceRef,
     }),
     dataZoom: getDataZoomConfig({ isDesktop }),
     visualMap: getVisualMapConfig({

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,
@@ -32,9 +32,28 @@ export const CHART_CONFIG = {
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
   SENTIMENT_MAX: 100,
-  TOP_MARGIN_DESKTOP: 0,
-  TOP_MARGIN_MOBILE: 30,
-  TOOLTIP_OFFSET: 5,
+  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_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_LABEL_SPACE_MOBILE +
+    CHART_CONFIG_STATIC.TOOLTIP_HEIGHT_MOBILE,
+};
+export const CHART_CONFIG = {
+  ...CHART_CONFIG_STATIC,
+  ...CHART_CONFIG_CALCULATED,
 } as const;
 
 export const COLOR_MAP = {
@@ -47,6 +66,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 +77,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,33 @@
   "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 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/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('');
     });

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

@@ -95,7 +95,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -113,7 +114,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -131,7 +133,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -149,7 +152,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -167,7 +171,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -187,7 +192,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -205,7 +211,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -227,7 +234,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -264,7 +272,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -285,7 +294,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -310,7 +320,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       expect(clearTimeoutSpy).toHaveBeenCalledWith(existingTimeout);
@@ -329,7 +340,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       // Should not be called before timeout
@@ -358,7 +370,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -376,7 +389,8 @@ describe('handleLabelUpdate', () => {
 
       expect(mockFormatXAxisLabel).toHaveBeenCalledWith(
         '2025-01-01T00:00:00Z',
-        true
+        true,
+        'en-US'
       );
     });
 
@@ -392,7 +406,8 @@ describe('handleLabelUpdate', () => {
         mockInstance,
         mainData,
         labelTimerRef,
-        isGreaterThanTwoWeeksRef
+        isGreaterThanTwoWeeksRef,
+        'en-US'
       );
 
       jest.advanceTimersByTime(50);
@@ -412,7 +427,8 @@ describe('handleLabelUpdate', () => {
 
       expect(mockFormatXAxisAdditionalLabel).toHaveBeenCalledWith(
         '2025-01-02T00:00:00Z',
-        true
+        true,
+        'en-US'
       );
     });
   });

package/test/utils/processPriceCandles.test.ts

@@ -90,7 +90,7 @@ describe('processPriceCandles', () => {
     expect(result.minPrice).toBe(0.9);
     expect(result.maxPrice).toBe(1.8);
     expect(result.pipsLocation).toBe(4);
-    expect(result.dates).toHaveLength(3);
+    expect(result.dates).toHaveLength(4);
     expect(result.candlesOpen).toHaveLength(3);
     expect(result.candlesClose).toHaveLength(3);
     expect(result.candlesLow).toHaveLength(3);
@@ -131,7 +131,7 @@ describe('processPriceCandles', () => {
     expect(result.minPrice).toBe(1.0);
     expect(result.maxPrice).toBe(1.8);
     expect(result.pipsLocation).toBe(4);
-    expect(result.dates).toHaveLength(2);
+    expect(result.dates).toHaveLength(3);
     expect(result.candlesOpen).toHaveLength(2);
   });
 
@@ -188,7 +188,7 @@ describe('processPriceCandles', () => {
     expect(result.minPrice).toBe(1.0);
     expect(result.maxPrice).toBe(1.5);
     expect(result.pipsLocation).toBe(4);
-    expect(result.dates).toHaveLength(1);
+    expect(result.dates).toHaveLength(2);
     expect(result.candlesOpen).toHaveLength(1);
   });
 
@@ -263,7 +263,7 @@ describe('processPriceCandles', () => {
     const result = processPriceCandles(mockData);
     expect(result.hasValidCandles).toBe(true);
     expect(result.pipsLocation).toBe(4);
-    expect(result.dates).toHaveLength(10000);
+    expect(result.dates).toHaveLength(10001);
     // Should calculate min/max without stack overflow
     expect(result.minPrice).toBeGreaterThan(0);
     expect(result.maxPrice).toBeGreaterThan(result.minPrice);