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

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/Legend.tsx

@@ -17,7 +17,7 @@ export const Legend = ({ bookType }: LegendProps) => {
     <div className="lw-my-4 lw-w-full">
       <div className="lw-mb-1 lw-flex lw-w-full lw-flex-row lw-justify-between">
         <LegendBar isDark={isDark} type="long" />
-        <div className="lw-w-[250px]" />
+        <div className="lw-w-[200px]" />
         <LegendBar isDark={isDark} type="short" />
       </div>
       <div className="lw-flex lw-w-full lw-flex-row lw-justify-between lw-pb-2 lw-font-sans lw-text-xs lw-text-text-primary">

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

@@ -1,3 +1,4 @@
+import { cn } from '@oanda/labs-widget-common';
 import React from 'react';
 
 import { COLOR_MAP } from '../../constants';
@@ -11,13 +12,22 @@ 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%, ${colorPalette.backgroundColor} 100%)`
+      : `linear-gradient(270deg,${startColor} 0%, ${colorPalette.backgroundColor} 100%)`;
 
   return (
-    <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden">
+    <div
+      className={cn('lw-flex lw-h-2 lw-w-full lw-overflow-hidden', {
+        'lw-flex-row-reverse': type === 'short',
+      })}
+    >
       <div
         className="lw-h-full lw-flex-1"
         data-testid="legend-bar-segment"
@@ -25,6 +35,13 @@ export const LegendBar = ({ type, isDark }: LegendBarProps) => {
           background: `linear-gradient(90deg,${startColor} 0%, ${endColor} 100%)`,
         }}
       />
+      <div
+        className="lw-h-full lw-w-[10px]"
+        data-testid="legend-bar-segment"
+        style={{
+          background: endGradient,
+        }}
+      />
     </div>
   );
 };

package/src/CrowdViewWidget/constants.ts

@@ -4,7 +4,10 @@ import chroma from 'chroma-js';
 import { InstrumentId } from './types';
 
 export const BUCKET_CONFIG = {
-  MULTIPLIER: 4,
+  MULTIPLIER_5M: 1,
+  MULTIPLIER_15M: 1,
+  MULTIPLIER_1H: 2,
+  MULTIPLIER_4H: 4,
   PRICE_MARGIN_MULTIPLIER: 2,
 } as const;
 
@@ -12,21 +15,43 @@ 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,
   X_LABEL_SIZE: 40,
-  Y_LABEL_SIZE_DESKTOP: 60,
+  Y_LABEL_SIZE_DESKTOP: 50,
   Y_LABEL_SIZE_MOBILE: 40,
-  Y_SENTIMENT_LABEL_SIZE: 40,
-  INITIAL_START_ZOOM: 90,
+  Y_SENTIMENT_LABEL_DESKTOP_SIZE: 40,
+  Y_SENTIMENT_LABEL_MOBILE_SIZE: 30,
+  INITIAL_START_ZOOM_DESKTOP: 70,
+  INITIAL_START_ZOOM_MOBILE: 85,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
   SENTIMENT_MIN: 0,
   SENTIMENT_MAX: 100,
+  TOP_MARGIN_DESKTOP: 0,
+  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 = {
@@ -39,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: [
@@ -49,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',
@@ -92,14 +92,6 @@ const granularitySelectConfig = [
     id: Granularity.H4,
     label: '4_hours',
   },
-  {
-    id: Granularity.M5,
-    label: '5_minutes',
-  },
-  {
-    id: Granularity.M15,
-    label: '15_minutes',
-  },
 ];
 
 export {

package/src/translations/sources/en.json

@@ -3,30 +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"
+  "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/);
@@ -138,7 +138,7 @@ describe('chartUtils', () => {
       });
       // First change happens between 1st and 2nd
       expect(labels.length).toBeGreaterThanOrEqual(2);
-      expect(labels[0]).toHaveProperty('xAxis', '2025-03-02T00:00:00Z');
+      expect(labels[0]).toBe('2025-03-02T00:00:00Z');
     });
 
     it('emits label when month changes for >= two weeks case', () => {
@@ -152,7 +152,7 @@ describe('chartUtils', () => {
         isGreaterThanTwoWeeks: false,
       });
       expect(labels.length).toBe(1);
-      expect(labels[0]).toHaveProperty('xAxis', '2025-02-01T00:00:00Z');
+      expect(labels[0]).toBe('2025-02-01T00:00:00Z');
     });
   });
 
@@ -165,6 +165,7 @@ describe('chartUtils', () => {
           seriesId: 'candlestick' as const,
           axisValue: '2025-03-15T10:30:00Z',
           value: [0, 1.11111, 1.22222, 1.00001, 1.33333],
+          dataIndex: 0,
         },
         {
           seriesId: 'heatmap' as const,
@@ -186,11 +187,16 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         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');
@@ -205,6 +211,7 @@ describe('chartUtils', () => {
           seriesId: 'candlestick' as const,
           axisValue: '2025-03-15T10:30:00Z',
           value: [0, 1.11111, 1.22222, 1.00001, 1.33333],
+          dataIndex: 0,
         },
         {
           seriesId: 'sentiment' as const,
@@ -221,6 +228,11 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [30.5],
+        sentimentShorts: [69.5],
+        isDesktop: true,
+        locale: 'en-US',
+        isDark: false,
       });
       expect(html).toBeDefined();
       expect(html).toContain('candle');
@@ -236,6 +248,7 @@ describe('chartUtils', () => {
         {
           seriesId: 'heatmap' as const,
           value: ['2025-03-15T10:30:00Z', 1.33333, 0],
+          dataIndex: 0,
         },
       ];
 
@@ -248,6 +261,11 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [],
+        sentimentShorts: [],
+        isDesktop: true,
+        locale: 'en-US',
+        isDark: false,
       });
       expect(html).toBe('');
     });
@@ -260,6 +278,11 @@ describe('chartUtils', () => {
         selectedPrice: 1.3306,
         bookType: BookType.Order,
         labelCallback,
+        sentimentLongs: [],
+        sentimentShorts: [],
+        isDesktop: true,
+        locale: 'en-US',
+        isDark: false,
       });
       expect(html).toBe('');
     });