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

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

@@ -83,6 +83,25 @@ const processOrderPositionBooks = (
     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;
@@ -105,14 +124,7 @@ const processOrderPositionBooks = (
           sentiment: bucket!.sentiment!,
         }));
 
-      const candle = candleMap.get(book.time);
-      const price = candle?.high ?? null;
-
-      return [book.time, price, JSON.stringify(filteredBuckets)] as [
-        string,
-        number,
-        string,
-      ];
+      return filteredBuckets;
     });
 };
 
@@ -212,6 +224,11 @@ export const useCrowdViewData = ({
     [orderPositionData, candleMap]
   );
 
+  const buckets = useMemo(
+    () => processBuckets(orderPositionData),
+    [orderPositionData]
+  );
+
   const error = useMemo((): Error | null => {
     if (priceCandlesError) {
       return new Error(`Price candles error: ${priceCandlesError.message}`);
@@ -248,12 +265,20 @@ export const useCrowdViewData = ({
     );
 
     return {
+      buckets,
       xAxisData,
       candlesSeriesData,
       orderPositionBooks,
       bucketWidth: orderPositionData.orderPositionBooks?.[0]?.bucketWidth || 0,
     };
-  }, [priceCandlesData, orderPositionData, error, candles, orderPositionBooks]);
+  }, [
+    priceCandlesData,
+    orderPositionData,
+    error,
+    candles,
+    orderPositionBooks,
+    buckets,
+  ]);
 
   return {
     data,

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

@@ -28,7 +28,7 @@ export const getLabelData = ({
     })
     .map((item) => ({
       name: new Date(item).toLocaleDateString(undefined, {
-        month: 'short',
+        month: isGreaterThanTwoWeeks ? 'short' : 'long',
         day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
       }),
       xAxis: item,
@@ -91,3 +91,71 @@ export const getRectColor = (sentiment: number) =>
   sentiment < 0
     ? getGradientColor(sentiment * -1, COLOR_MAP.short[0], COLOR_MAP.short[1])
     : getGradientColor(sentiment, COLOR_MAP.long[0], COLOR_MAP.long[1]);
+
+export const getTooltipFormatter = (
+  params: unknown,
+  buckets: Array<Array<{ price: number; sentiment: number }>>,
+  bucketWidth: number,
+  selectedPrice: number,
+  labelCallback: (key: string) => string
+) => {
+  const arr = params as unknown as Array<Record<string, unknown>>;
+  const candleParam = arr[0] as {
+    axisValue: string;
+    value: [number, number, number, number, number];
+  };
+  const booksParam = arr[1] as { value: [string, number, number] };
+  const time = new Date(candleParam.axisValue as string);
+
+  const candleData = candleParam.value;
+  const booksData = booksParam?.value ?? [];
+  const bucketsIndex = booksData[2];
+  const selectedBuckets = buckets[bucketsIndex];
+
+  const matchedBucket = selectedBuckets?.find(
+    ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth
+  );
+  const showCandles =
+    !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[4];
+
+  return `<p>${time.toLocaleString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    year: 'numeric',
+    day: 'numeric',
+    month: 'numeric',
+    timeZoneName: 'short',
+  })}</p><br />
+${
+  showCandles
+    ? `<p><b>${labelCallback('candle')}:</b></p>
+<p>${labelCallback('open_price')}: ${candleData[1]} </p>
+<p>${labelCallback('close_price')}: ${candleData[2]} </p>
+<p>${labelCallback('low')}: ${candleData[3]} </p>
+<p>${labelCallback('high')}: ${candleData[4]} </p>
+`
+    : ''
+}
+${
+  matchedBucket
+    ? `<br /><p><b>${labelCallback('orders')}:</b></p>
+<p>${labelCallback('price_range')}: ${matchedBucket.price} - ${Number(matchedBucket.price + bucketWidth).toFixed(4)} </p>
+<p>${matchedBucket.sentiment < 0 ? labelCallback('sell_advantage') : labelCallback('buy_advantage')}: ${Math.abs(matchedBucket.sentiment)}% </p>`
+    : ''
+}`;
+};
+
+export const formatXAxisLabel = (
+  value: unknown,
+  isGreaterThanTwoWeeks: boolean
+) => {
+  const date = new Date(value as string);
+  return isGreaterThanTwoWeeks
+    ? `${date.toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+      })}`
+    : `${CHART_CONFIG.X_AXIS_DATE_PADDING}${date.toLocaleDateString(undefined, {
+        day: 'numeric',
+      })}${CHART_CONFIG.X_AXIS_DATE_PADDING}`;
+};

package/src/CrowdViewWidget/constants.ts

@@ -17,11 +17,12 @@ export const CHART_CONFIG = {
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
-  INITIAL_START_ZOOM: 80,
+  INITIAL_START_ZOOM: 0,
   INITIAL_END_ZOOM: 100,
+  X_AXIS_DATE_PADDING: '        ',
 } as const;
 
 export const COLOR_MAP = {
-  long: ['#ffffff', '#fdb833'],
-  short: ['#ffffff', '#0096c7'],
+  long: ['#fcedca', '#FAB313'],
+  short: ['#c8ebfa', '#309DCC'],
 } as const;

package/src/translations/sources/en.json

@@ -1,2 +1,26 @@
 {
+  "data_unavailable": "Data unavailable",
+  "no_matching_results": "No matching results",
+  "pagination_entries_range": "{{firstItemOnPage}}-{{lastItemOnPage}} of {{itemCount}} entries",
+  "order_book": "Order book",
+  "position_book": "Position book",
+  "long": "Long",
+  "short": "Short",
+  "instrument": "Instrument",
+  "granularity": "Granularity",
+  "search": "Search",
+  "5_minutes": "5 minutes",
+  "15_minutes": "15 minutes",
+  "1_hour": "1 hour",
+  "4_hours": "4 hours",
+  "candle": "Candle",
+  "open_price": "Open price",
+  "close_price": "Close price",
+  "low": "Low",
+  "high": "High",
+  "orders": "Orders",
+  "price_range": "Price range",
+  "sentiment": "Sentiment",
+  "buy_advantage": "Buy advantage",
+  "sell_advantage": "Sell advantage"
 }

package/test/Main.test.tsx

@@ -9,46 +9,92 @@ import React from 'react';
 import { Main } from '../src/CrowdViewWidget/Main';
 import { InstrumentId } from '../src/CrowdViewWidget/types/instruments';
 import { getOrderPositionBooks } from '../src/gql/getOrderPositionBooks';
-import { BookType, Division } from '../src/gql/types/graphql';
+import { getPriceCandles } from '../src/gql/getPriceCandles';
+import {
+  BookType,
+  DataSource,
+  Division,
+  Granularity,
+  TimeSpan,
+} from '../src/gql/types/graphql';
+
+const instrument = InstrumentId.EUR_AUD;
+const division = Division.Oap;
+const granularity = Granularity.H4;
+const timeSpan = TimeSpan.NinetyDays;
+
+const candles = [
+  {
+    point: '2024-02-21T10:00:00Z',
+    high: 1.334,
+    low: 1.33,
+    open: 1.331,
+    close: 1.333,
+  },
+  {
+    point: '2024-02-21T10:30:00Z',
+    high: 1.335,
+    low: 1.3295,
+    open: 1.33,
+    close: 1.334,
+  },
+  {
+    point: '2024-02-21T11:00:00Z',
+    high: 1.333,
+    low: 1.329,
+    open: 1.331,
+    close: 1.332,
+  },
+];
+
+const maxPrice = 1.335;
+const minPrice = 1.329;
+const bucketWidth = 0.0005;
+const maxBookPrice = maxPrice + bucketWidth * 2;
+const minBookPrice = minPrice - bucketWidth * 2;
 
 const mocks = [
+  {
+    request: {
+      query: getPriceCandles,
+      variables: {
+        dataSource: DataSource.Mt5,
+        division,
+        instrument,
+        granularity,
+        timeSpan,
+      },
+    },
+    result: {
+      data: {
+        priceCandles: {
+          candle: candles,
+        },
+      },
+    },
+  },
   {
     request: {
       query: getOrderPositionBooks,
       variables: {
-        instrument: InstrumentId.EUR_AUD,
+        instrument,
         bookType: BookType.Order,
-        recentHours: 1,
+        timeSpan,
+        granularity,
+        maxBookPrice,
+        minBookPrice,
       },
     },
     result: {
       data: {
         orderPositionBooks: [
           {
-            bucketWidth: 0.0005,
-            price: 0.8,
+            bucketWidth,
+            price: maxPrice,
             time: '2024-02-21T10:30:00Z',
             buckets: [
-              {
-                price: 0.02,
-                longCountPercent: 0.0582,
-                shortCountPercent: 0.0,
-              },
-              {
-                price: 0.7,
-                longCountPercent: 0.0582,
-                shortCountPercent: 0.0,
-              },
-              {
-                price: 0.9925,
-                longCountPercent: 0.0582,
-                shortCountPercent: 0.0,
-              },
-              {
-                price: 1.0,
-                longCountPercent: 0.1163,
-                shortCountPercent: 0.0,
-              },
+              { price: 1.3345, sentiment: 0.2 },
+              { price: 1.3305, sentiment: -0.3 },
             ],
           },
         ],
@@ -62,7 +108,7 @@ describe('Main component', () => {
     const { findByTestId } = render(
       <MockedProvider mocks={mocks}>
         <MockLayoutProvider>
-          <Main division={Division.Oap} />
+          <Main division={division} />
         </MockLayoutProvider>
       </MockedProvider>
     );

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

@@ -0,0 +1,172 @@
+import {
+  formatXAxisLabel,
+  getLabelData,
+  getRectColor,
+  getTimeSpanForGranularity,
+  getTooltipFormatter,
+  isDifferenceGreaterThanTwoWeeks,
+} from '../../../../src/CrowdViewWidget/components/Chart/utils/chartUtils';
+import {
+  BOOKS_THRESHOLDS,
+  COLOR_MAP,
+} from '../../../../src/CrowdViewWidget/constants';
+import { Granularity, TimeSpan } from '../../../../src/gql/types/graphql';
+
+describe('chartUtils', () => {
+  describe('getTimeSpanForGranularity', () => {
+    it('maps granularity to expected TimeSpan', () => {
+      expect(getTimeSpanForGranularity(Granularity.M5)).toBe(TimeSpan.TwoDays);
+      expect(getTimeSpanForGranularity(Granularity.M15)).toBe(
+        TimeSpan.FiveDays
+      );
+      expect(getTimeSpanForGranularity(Granularity.H1)).toBe(
+        TimeSpan.TwentyDays
+      );
+      expect(getTimeSpanForGranularity(Granularity.H4)).toBe(
+        TimeSpan.NinetyDays
+      );
+    });
+  });
+
+  describe('isDifferenceGreaterThanTwoWeeks', () => {
+    // Note: Function returns true when difference is LESS than threshold (14 days)
+    it('returns true when time difference is less than 14 days', () => {
+      const start = new Date('2025-01-01T00:00:00Z').toISOString();
+      const end = new Date('2025-01-05T00:00:00Z').toISOString();
+      expect(isDifferenceGreaterThanTwoWeeks(start, end)).toBe(true);
+    });
+
+    it('returns false when time difference is 14 days or more', () => {
+      const start = new Date('2025-01-01T00:00:00Z').toISOString();
+      const end = new Date('2025-02-10T00:00:00Z').toISOString();
+      expect(isDifferenceGreaterThanTwoWeeks(start, end)).toBe(false);
+    });
+  });
+
+  describe('getRectColor', () => {
+    it('uses long color scale for positive sentiment', () => {
+      const color = getRectColor(BOOKS_THRESHOLDS.MAX);
+      expect(typeof color).toBe('string');
+      // At max threshold, should be at or near target color
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.long[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+
+    it('uses short color scale for negative sentiment', () => {
+      const color = getRectColor(-BOOKS_THRESHOLDS.MAX);
+      expect(typeof color).toBe('string');
+      expect(color.toLowerCase()).toContain(
+        COLOR_MAP.short[1].slice(1).toLowerCase().substring(0, 3)
+      );
+    });
+  });
+
+  describe('formatXAxisLabel', () => {
+    const sampleIso = '2025-03-15T10:30:00Z';
+
+    it('formats time when flag is true', () => {
+      const result = formatXAxisLabel(sampleIso, true);
+      expect(typeof result).toBe('string');
+      expect(result).toContain(':');
+    });
+
+    it('formats day when flag is false', () => {
+      const result = formatXAxisLabel(sampleIso, false);
+      expect(typeof result).toBe('string');
+      // Contains day of month (15) with surrounding spaces per implementation
+      expect(result).toMatch(/\s15\s/);
+    });
+  });
+
+  describe('getLabelData', () => {
+    const dates = [
+      '2025-03-01T00:00:00Z',
+      '2025-03-01T12:00:00Z',
+      '2025-03-02T00:00:00Z',
+      '2025-03-03T00:00:00Z',
+    ];
+
+    it('emits label when day changes for < two weeks case', () => {
+      const labels = getLabelData({
+        xAxisData: dates,
+        isGreaterThanTwoWeeks: true,
+      });
+      // First change happens between 1st and 2nd
+      expect(labels.length).toBeGreaterThanOrEqual(2);
+      expect(labels[0]).toHaveProperty('xAxis', '2025-03-02T00:00:00Z');
+    });
+
+    it('emits label when month changes for >= two weeks case', () => {
+      const monthSpanDates = [
+        '2025-01-31T00:00:00Z',
+        '2025-02-01T00:00:00Z',
+        '2025-02-15T00:00:00Z',
+      ];
+      const labels = getLabelData({
+        xAxisData: monthSpanDates,
+        isGreaterThanTwoWeeks: false,
+      });
+      expect(labels.length).toBe(1);
+      expect(labels[0]).toHaveProperty('xAxis', '2025-02-01T00:00:00Z');
+    });
+  });
+
+  describe('getTooltipFormatter', () => {
+    const labelCallback = (k: string) => k;
+
+    it('renders candle and book details when available', () => {
+      const params = [
+        {
+          axisValue: '2025-03-15T10:30:00Z',
+          value: [0, 1.11111, 1.22222, 1.00001, 1.33333],
+        },
+        { value: ['2025-03-15T10:30:00Z', 1.33333, 0] },
+      ];
+
+      const buckets = [
+        [
+          { price: 1.33, sentiment: 0.2 },
+          { price: 1.3305, sentiment: -0.3 },
+        ],
+      ];
+
+      const html = getTooltipFormatter(
+        params,
+        buckets,
+        0.0005,
+        1.3306,
+        labelCallback
+      );
+      expect(html).toContain('candle');
+      expect(html).toContain('open_price');
+      expect(html).toContain('close_price');
+      expect(html).toContain('low');
+      expect(html).toContain('high');
+      expect(html).toContain('orders');
+      expect(html).toContain('price_range');
+      // Selected price 1.3306 falls into second bucket 1.3305 - 1.3310 which has negative sentiment
+      expect(html).toContain('sell_advantage');
+    });
+
+    it('omits sections when data is missing', () => {
+      const params = [
+        {
+          axisValue: '2025-03-15T10:30:00Z',
+          value: [0, 0, 0, 0, 0], // no candle values
+        },
+        { value: ['2025-03-15T10:30:00Z', 0, 0] },
+      ];
+      const buckets: Array<Array<{ price: number; sentiment: number }>> = [[]];
+      const html = getTooltipFormatter(
+        params,
+        buckets,
+        0.0005,
+        0,
+        labelCallback
+      );
+      expect(html).not.toContain('open_price');
+      expect(html).not.toContain('orders');
+    });
+  });
+});