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

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

@@ -0,0 +1,288 @@
+import { useQuery } from '@apollo/client';
+import { useMemo } from 'react';
+
+import { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';
+import { getPriceCandles } from '../../../gql/getPriceCandles';
+import type {
+  GetOrderPositionBooksQuery,
+  GetOrderPositionBooksQueryVariables,
+  GetPriceCandlesQuery,
+  GetPriceCandlesQueryVariables,
+} from '../../../gql/types/graphql';
+import { BookType, DataSource, Division } from '../../../gql/types/graphql';
+import { BOOKS_THRESHOLDS, BUCKET_CONFIG } from '../../constants';
+import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
+import { getTimeSpanForGranularity } from './utils/chartUtils';
+
+const processPriceCandles = (
+  priceCandlesData: GetPriceCandlesQuery | undefined
+) => {
+  if (!priceCandlesData?.priceCandles?.candle?.length) {
+    return {
+      minPrice: 0,
+      maxPrice: 0,
+      hasValidCandles: false,
+      candleMap: new Map(),
+      candles: [],
+    };
+  }
+
+  const candles = priceCandlesData.priceCandles.candle;
+  let calculatedMinPrice = Number.MAX_VALUE;
+  let calculatedMaxPrice = Number.MIN_VALUE;
+
+  const candleMap = new Map<
+    string,
+    {
+      point?: string;
+      high?: number;
+      low?: number;
+      open?: number;
+      close?: number;
+    }
+  >();
+
+  candles.forEach((candle) => {
+    if (!candle) return;
+
+    if (candle.high > calculatedMaxPrice) {
+      calculatedMaxPrice = candle.high;
+    }
+    if (candle.low < calculatedMinPrice) {
+      calculatedMinPrice = candle.low;
+    }
+
+    if (candle.point) {
+      candleMap.set(candle.point, candle);
+    }
+  });
+
+  return {
+    minPrice: calculatedMinPrice,
+    maxPrice: calculatedMaxPrice,
+    hasValidCandles: true,
+    candleMap,
+    candles,
+  };
+};
+
+const processOrderPositionBooks = (
+  orderPositionData: GetOrderPositionBooksQuery | undefined,
+  candleMap: Map<
+    string,
+    {
+      point?: string;
+      high?: number;
+      low?: number;
+      open?: number;
+      close?: number;
+    }
+  >
+) => {
+  if (!orderPositionData?.orderPositionBooks?.length) {
+    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;
+    })
+    .map((book) => {
+      const filteredBuckets = book.buckets
+        .filter((bucket) => {
+          if (
+            !bucket ||
+            bucket.sentiment === undefined ||
+            bucket.sentiment === null ||
+            bucket.price === undefined
+          ) {
+            return false;
+          }
+          return Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN;
+        })
+        .map((bucket) => ({
+          price: bucket!.price!,
+          sentiment: bucket!.sentiment!,
+        }));
+
+      return filteredBuckets;
+    });
+};
+
+const validateData = (
+  priceCandlesData: GetPriceCandlesQuery | undefined,
+  orderPositionData: GetOrderPositionBooksQuery | undefined,
+  hasValidCandles: boolean
+): Error | null => {
+  const hasValidPriceData =
+    (priceCandlesData?.priceCandles?.candle?.length ?? 0) >= 1;
+  const hasValidOrderData =
+    (orderPositionData?.orderPositionBooks?.length ?? 0) >= 1;
+
+  if (!hasValidPriceData) {
+    return new Error('Insufficient price candle data');
+  }
+  if (!hasValidOrderData) {
+    return new Error('Insufficient order position data');
+  }
+  if (!hasValidCandles) {
+    return new Error('Invalid candle data');
+  }
+
+  return null;
+};
+
+export const useCrowdViewData = ({
+  instrument,
+  bookType,
+  division,
+  granularity,
+}: UseCrowdViewDataProps): UseCrowdViewDataReturn => {
+  const {
+    loading: priceCandlesLoading,
+    data: priceCandlesData,
+    error: priceCandlesError,
+  } = useQuery<GetPriceCandlesQuery, GetPriceCandlesQueryVariables>(
+    getPriceCandles,
+    {
+      variables: {
+        dataSource: division === Division.Oc ? DataSource.V20 : DataSource.Mt5,
+        division,
+        instrument,
+        granularity,
+        timeSpan: getTimeSpanForGranularity(granularity),
+      },
+      fetchPolicy: 'no-cache',
+    }
+  );
+
+  const priceCandlesProcessed = useMemo(
+    () => processPriceCandles(priceCandlesData),
+    [priceCandlesData]
+  );
+
+  const { minPrice, maxPrice, hasValidCandles, candleMap, candles } =
+    priceCandlesProcessed;
+
+  const maxBookPrice = useMemo(
+    () =>
+      maxPrice +
+      BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
+    [maxPrice]
+  );
+
+  const minBookPrice = useMemo(
+    () =>
+      minPrice -
+      BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
+    [minPrice]
+  );
+
+  const {
+    loading: orderPositionLoading,
+    data: orderPositionData,
+    error: orderPositionError,
+  } = useQuery<GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables>(
+    getOrderPositionBooks,
+    {
+      variables: {
+        instrument,
+        bookType: bookType || BookType.Order,
+        timeSpan: getTimeSpanForGranularity(granularity),
+        granularity,
+        maxBookPrice,
+        minBookPrice,
+      },
+      fetchPolicy: 'no-cache',
+      skip: priceCandlesLoading || !!priceCandlesError,
+    }
+  );
+
+  const loading = priceCandlesLoading || orderPositionLoading;
+
+  const orderPositionBooks = useMemo(
+    () => processOrderPositionBooks(orderPositionData, candleMap),
+    [orderPositionData, candleMap]
+  );
+
+  const buckets = useMemo(
+    () => processBuckets(orderPositionData),
+    [orderPositionData]
+  );
+
+  const error = useMemo((): Error | null => {
+    if (priceCandlesError) {
+      return new Error(`Price candles error: ${priceCandlesError.message}`);
+    }
+    if (orderPositionError) {
+      return new Error(`Order position error: ${orderPositionError.message}`);
+    }
+    if (loading) {
+      return null;
+    }
+    return validateData(priceCandlesData, orderPositionData, hasValidCandles);
+  }, [
+    priceCandlesError,
+    orderPositionError,
+    loading,
+    priceCandlesData,
+    orderPositionData,
+    hasValidCandles,
+  ]);
+
+  const data = useMemo(() => {
+    if (!priceCandlesData || !orderPositionData || error) {
+      return null;
+    }
+
+    const xAxisData = candles.map((candle) => candle?.point || '');
+    const candlesSeriesData: [number, number, number, number][] = candles.map(
+      (candle) => [
+        candle?.open || 0,
+        candle?.close || 0,
+        candle?.low || 0,
+        candle?.high || 0,
+      ]
+    );
+
+    return {
+      buckets,
+      xAxisData,
+      candlesSeriesData,
+      orderPositionBooks,
+      bucketWidth: orderPositionData.orderPositionBooks?.[0]?.bucketWidth || 0,
+    };
+  }, [
+    priceCandlesData,
+    orderPositionData,
+    error,
+    candles,
+    orderPositionBooks,
+    buckets,
+  ]);
+
+  return {
+    data,
+    loading,
+    error: !!error,
+  };
+};

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

@@ -0,0 +1,161 @@
+import chroma from 'chroma-js';
+
+import { Granularity, TimeSpan } from '../../../../gql/types/graphql';
+import {
+  BOOKS_THRESHOLDS,
+  CHART_CONFIG,
+  COLOR_MAP,
+  TIME_THRESHOLDS,
+} from '../../../constants';
+import type { GetLabelsDataProps } from '../types';
+
+export const getLabelData = ({
+  xAxisData,
+  isGreaterThanTwoWeeks,
+}: GetLabelsDataProps) =>
+  xAxisData
+    .filter((record, index, arr) => {
+      if (index === 0) {
+        return false;
+      }
+      const previousTimestamp = arr[index - 1];
+      const currentDate = new Date(record);
+      const previousDate = new Date(previousTimestamp);
+
+      return isGreaterThanTwoWeeks
+        ? currentDate.getDate() !== previousDate.getDate()
+        : currentDate.getMonth() !== previousDate.getMonth();
+    })
+    .map((item) => ({
+      name: new Date(item).toLocaleDateString(undefined, {
+        month: isGreaterThanTwoWeeks ? 'short' : 'long',
+        day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
+      }),
+      xAxis: item,
+      y: CHART_CONFIG.HEIGHT - 22,
+      silent: true,
+      emphasis: {
+        disabled: true,
+      },
+      label: {
+        fontFamily: 'Sofia W03',
+        fontSize: 10,
+        position: 'bottom',
+        align: 'center',
+        formatter: '{b}',
+      },
+    }));
+
+export const isDifferenceGreaterThanTwoWeeks = (
+  startDate: string,
+  endDate: string
+) => {
+  const date1 = new Date(startDate);
+  const date2 = new Date(endDate);
+
+  const differenceInMs = Math.abs(date2.getTime() - date1.getTime());
+
+  return differenceInMs < TIME_THRESHOLDS.TWO_WEEKS_MS;
+};
+
+export const getTimeSpanForGranularity = (
+  granularity: Granularity
+): TimeSpan => {
+  const granularityTimeSpanMap: Record<Granularity, TimeSpan> = {
+    [Granularity.M5]: TimeSpan.TwoDays,
+    [Granularity.M15]: TimeSpan.FiveDays,
+    [Granularity.H1]: TimeSpan.TwentyDays,
+    [Granularity.H4]: TimeSpan.NinetyDays,
+  };
+
+  return granularityTimeSpanMap[granularity] || TimeSpan.TwoDays;
+};
+
+const getGradientColor = (
+  value: number,
+  startColor: string,
+  targetColor: string
+): string => {
+  const startThreshold = BOOKS_THRESHOLDS.MIN;
+  const endThreshold = BOOKS_THRESHOLDS.MAX;
+
+  const colorScale = chroma
+    .scale([startColor, targetColor])
+    .domain([startThreshold, endThreshold])
+    .mode('rgb');
+
+  return colorScale(value).hex();
+};
+
+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/components/Legend/Legend.tsx

@@ -1,14 +1,18 @@
 import { useLocale } from '@oanda/mono-i18n';
 import React from 'react';
 
+import { BOOKS_THRESHOLDS } from '../../constants';
 import { LegendBar } from './LegendBar';
 
 interface LegendProps {
-  longValues: number[];
-  shortValues: number[];
+  longValues?: [number, number];
+  shortValues?: [number, number];
 }
 
-export const Legend = ({ longValues, shortValues }: LegendProps) => {
+export const Legend = ({
+  longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
+  shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
+}: LegendProps) => {
   const { lang } = useLocale();
 
   return (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { colorMap } from '../../config';
+import { COLOR_MAP } from '../../constants';
 
 export type LegendType = 'long' | 'short';
 
@@ -11,31 +11,27 @@ interface LegendBarProps {
 }
 
 export const LegendBar = ({ values, type, label }: LegendBarProps) => {
-  const colors = colorMap[type];
+  const colors = COLOR_MAP[type];
 
   return (
     <div className="lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary">
       <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary">
-        {values.map((_, index) => (
-          <div
-            key={`${label}_${colors[index]}__color`}
-            className="lw-h-full lw-flex-1"
-            data-testid="legend-bar-segment"
-            style={{
-              backgroundColor: colors[index],
-            }}
-          />
-        ))}
+        <div
+          className="lw-h-full lw-flex-1"
+          data-testid="legend-bar-segment"
+          style={{
+            background: `linear-gradient(90deg,${colors[0]} 0%, ${colors[1]} 100%)`,
+          }}
+        />
       </div>
 
-      <div className="lw-flex lw-w-full">
-        {values.map((value) => (
-          <div key={`${value}_${type}`} className="lw-flex lw-w-1/4">
-            <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-              {value.toFixed(2)}% {label}
-            </span>
-          </div>
-        ))}
+      <div className="lw-flex lw-w-full lw-justify-between">
+        <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
+          {values[0].toFixed(2)}% {label}
+        </span>
+        <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
+          {values[1].toFixed(2)}% {label}
+        </span>
       </div>
     </div>
   );

package/src/CrowdViewWidget/constants.ts

@@ -0,0 +1,28 @@
+export const BOOKS_THRESHOLDS = {
+  MIN: 0.15,
+  MAX: 0.55,
+} as const;
+
+export const BUCKET_CONFIG = {
+  DEFAULT_WIDTH: 0.0005,
+  PRICE_PADDING_MULTIPLIER: 2,
+} as const;
+
+export const TIME_THRESHOLDS = {
+  TWO_WEEKS_MS: 14 * 24 * 60 * 60 * 1000,
+} as const;
+
+export const CHART_CONFIG = {
+  HEIGHT: 425,
+  WIDTH: 9999,
+  X_LABEL_SIZE: 40,
+  Y_LABEL_SIZE_DESKTOP: 60,
+  INITIAL_START_ZOOM: 0,
+  INITIAL_END_ZOOM: 100,
+  X_AXIS_DATE_PADDING: '        ',
+} as const;
+
+export const COLOR_MAP = {
+  long: ['#fcedca', '#FAB313'],
+  short: ['#c8ebfa', '#309DCC'],
+} as const;

package/src/CrowdViewWidget/render.tsx

@@ -42,6 +42,7 @@ dataCrowdViewParamsElements.forEach((element) => {
 
   root.render(
     <CrowdViewWidget
+      division={division}
       graphqlUrl={graphqlUrl}
       isParamError={isParamError}
       locale={locale}