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

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

@@ -0,0 +1,183 @@
+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',
+};
+
+const SENTIMENT_DISPLAY_PRECISION = 2;
+
+const calculateBucketDisplayPrecision = (bucketWidth: number): number => {
+  return bucketWidth.toString().split('.')[1]?.length || 0;
+};
+
+const findSeriesParam = <T extends TooltipParam['seriesId']>(
+  params: TooltipParam[],
+  seriesId: T
+): Extract<TooltipParam, { seriesId: T }> | undefined => {
+  return params.find(
+    (series): series is Extract<TooltipParam, { seriesId: T }> =>
+      series.seriesId === seriesId
+  );
+};
+
+const getSentimentOverbalanceLabel = (
+  sentiment: number,
+  bookType: BookType
+): string => {
+  if (sentiment < 0) {
+    return bookType === BookType.Order
+      ? 'sell_overbalance'
+      : 'short_overbalance';
+  }
+  return bookType === BookType.Order ? 'buy_overbalance' : 'long_overbalance';
+};
+
+const formatCandleData = (
+  candleData: [number, number, number, number, number],
+  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 formatBookData = ({
+  matchedBucket,
+  bucketWidth,
+  bucketDisplayPrecision,
+  bookType,
+  labelCallback,
+}: {
+  matchedBucket: Bucket;
+  bucketWidth: number;
+  bucketDisplayPrecision: number;
+  bookType: BookType;
+  labelCallback: (key: string) => string;
+}): string => {
+  const bookLabelKey = bookType === BookType.Order ? 'orders' : 'positions';
+  const priceRangeStart = matchedBucket.price.toFixed(bucketDisplayPrecision);
+  const priceRangeEnd = (matchedBucket.price + bucketWidth).toFixed(
+    bucketDisplayPrecision
+  );
+  const sentimentLabel = getSentimentOverbalanceLabel(
+    matchedBucket.sentiment,
+    bookType
+  );
+  const sentimentValue = Math.abs(matchedBucket.sentiment).toFixed(
+    bucketDisplayPrecision
+  );
+
+  return `<br /><p><b>${labelCallback(bookLabelKey)}:</b></p>
+<p>${labelCallback('price_range')}: ${priceRangeStart} - ${priceRangeEnd} </p>
+<p>${labelCallback(sentimentLabel)}: ${sentimentValue}% </p>`;
+};
+
+const formatSentimentData = (
+  sentimentParam: Extract<TooltipParam, { seriesId: 'sentiment' }>,
+  labelCallback: (key: string) => string
+): string => {
+  const [, shortPercent, longPercent] = sentimentParam.value;
+  return `<br /><p><b>${labelCallback('sentiment')}:</b></p>
+<p>${labelCallback('long')}: ${longPercent.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>
+<p>${labelCallback('short')}: ${shortPercent.toFixed(SENTIMENT_DISPLAY_PRECISION)}% </p>`;
+};
+
+const hasValidCandleData = (
+  candleData: [number, number, number, number, number]
+): boolean =>
+  !!candleData[1] && !!candleData[2] && !!candleData[3] && !!candleData[3];
+const hasValidSentimentData = (
+  sentimentParam: Extract<TooltipParam, { seriesId: 'sentiment' }> | undefined
+): boolean => !!sentimentParam?.value[1] && !!sentimentParam?.value[2];
+const findMatchingBucket = (
+  buckets: Bucket[][],
+  bucketsIndex: number | undefined,
+  selectedPrice: number,
+  bucketWidth: number
+): Bucket | undefined => {
+  if (bucketsIndex === undefined) {
+    return undefined;
+  }
+  const selectedBuckets = buckets[bucketsIndex];
+  return selectedBuckets?.find(
+    ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth
+  );
+};
+
+export const getTooltipFormatter = ({
+  params,
+  buckets,
+  bucketWidth,
+  selectedPrice,
+  bookType,
+  labelCallback,
+}: {
+  params: TooltipParam[];
+  buckets: Bucket[][];
+  bucketWidth: number;
+  selectedPrice: number;
+  bookType: BookType;
+  labelCallback: (key: string) => string;
+}) => {
+  if (!params || !Array.isArray(params) || params.length === 0) {
+    return '';
+  }
+
+  const candleParam = findSeriesParam(params, 'candlestick');
+  const booksParam = findSeriesParam(params, 'heatmap');
+  const sentimentParam = findSeriesParam(params, 'sentiment');
+
+  if (!candleParam) {
+    return '';
+  }
+
+  const bucketDisplayPrecision = calculateBucketDisplayPrecision(bucketWidth);
+  const time = new Date(candleParam.axisValue as string);
+  const candleData = candleParam.value;
+  const bucketsIndex = booksParam?.value[2];
+  const matchedBucket = findMatchingBucket(
+    buckets,
+    bucketsIndex,
+    selectedPrice,
+    bucketWidth
+  );
+  const showCandles = hasValidCandleData(candleData);
+  const showSentiment = hasValidSentimentData(sentimentParam);
+
+  if (!showCandles && !matchedBucket) {
+    return '';
+  }
+
+  const timeFormatted = time.toLocaleString(undefined, DATE_FORMAT_OPTIONS);
+  const candleSection = showCandles
+    ? formatCandleData(candleData, labelCallback)
+    : '';
+  const bookSection = matchedBucket
+    ? formatBookData({
+        matchedBucket,
+        bucketWidth,
+        bucketDisplayPrecision,
+        bookType,
+        labelCallback,
+      })
+    : '';
+  const sentimentSection =
+    showSentiment && sentimentParam
+      ? formatSentimentData(sentimentParam, labelCallback)
+      : '';
+
+  return `<p>${timeFormatted}</p><br />
+${candleSection}
+${bookSection}
+${sentimentSection}`;
+};

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

@@ -0,0 +1,7 @@
+export * from './formatXAxisLabel';
+export * from './getChartStyles';
+export * from './getGradientColor';
+export * from './getLabelData';
+export * from './getRectColor';
+export * from './getTooltipFormatter';
+export * from './isDifferenceGreaterThanTwoWeeks';

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

@@ -0,0 +1,13 @@
+import { TIME_THRESHOLDS } from '../../../constants';
+
+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;
+};

package/src/CrowdViewWidget/{utils/instrumentUtils.ts → components/Chart/dataUtils/getInstrumentConfigForDivision.ts}

@@ -1,8 +1,8 @@
-import { Division } from '../../gql/types/graphql';
+import { Division } from '../../../../gql/types/graphql';
 import {
   instrumentSelectConfig,
   instrumentSelectConfigOC,
-} from '../selectConfig';
+} from '../../../selectConfig';
 
 export const getInstrumentConfigForDivision = (division: Division) => {
   return division === Division.Oc

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

@@ -0,0 +1,14 @@
+import { Granularity, TimeSpan } from '../../../../gql/types/graphql';
+
+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;
+};

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

@@ -0,0 +1,6 @@
+export * from './getInstrumentConfigForDivision';
+export * from './getTimeSpanForGranularity';
+export * from './processOrderPositionBooks';
+export * from './processPriceCandles';
+export * from './processSentiments';
+export * from './validateData';

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

@@ -0,0 +1,92 @@
+import type { GetOrderPositionBooksQuery } from '../../../../gql/types/graphql';
+import type { Bucket } from '../types';
+
+export const processOrderPositionBooks = (
+  orderPositionData: GetOrderPositionBooksQuery | undefined,
+  dates: string[]
+) => {
+  // Input validation
+  if (!Array.isArray(dates) || dates.length === 0) {
+    return {
+      bookPrices: [],
+      bookIndexes: [],
+      buckets: [],
+      bucketWidth: 0,
+      sentimentThresholdMin: 0,
+      sentimentThresholdMax: 0,
+      hasValidBooks: false,
+    };
+  }
+
+  if (
+    !orderPositionData?.orderPositionBooks?.books?.length ||
+    !orderPositionData?.orderPositionBooks?.sentimentThresholdMin ||
+    !orderPositionData?.orderPositionBooks?.sentimentThresholdMax ||
+    !orderPositionData?.orderPositionBooks?.bucketWidth
+  ) {
+    return {
+      bookPrices: [],
+      bookIndexes: [],
+      buckets: [],
+      bucketWidth: 0,
+      sentimentThresholdMin: 0,
+      sentimentThresholdMax: 0,
+      hasValidBooks: false,
+    };
+  }
+
+  const { bucketWidth, sentimentThresholdMin, sentimentThresholdMax } =
+    orderPositionData.orderPositionBooks;
+
+  const booksDataMap = new Map(
+    orderPositionData.orderPositionBooks.books.map((item) => [
+      item.time,
+      {
+        price: item.price,
+        buckets: item.buckets,
+      },
+    ])
+  );
+
+  // Use forEach + push for O(n) performance instead of reduce with spreads (O(n²))
+  const bookPrices: (number | null)[] = [];
+  const bookIndexes: number[] = [];
+  const buckets: Bucket[][] = [];
+
+  dates.forEach((date, index) => {
+    const book = booksDataMap.get(date);
+
+    const currentBuckets =
+      book?.buckets
+        .filter(
+          (
+            bucket
+          ): bucket is {
+            price: number;
+            sentiment: number;
+          } =>
+            bucket !== null &&
+            typeof bucket.price === 'number' &&
+            typeof bucket.sentiment === 'number' &&
+            Math.abs(bucket.sentiment) >= sentimentThresholdMin
+        )
+        .map((bucket) => ({
+          price: bucket.price,
+          sentiment: bucket.sentiment,
+        })) || [];
+
+    bookPrices.push(book?.price ?? null);
+    bookIndexes.push(index);
+    buckets.push(currentBuckets);
+  });
+
+  return {
+    bookPrices,
+    bookIndexes,
+    buckets,
+    bucketWidth,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
+    hasValidBooks: true,
+  };
+};

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

@@ -0,0 +1,67 @@
+import type { GetPriceCandlesQuery } from '../../../../gql/types/graphql';
+
+export const processPriceCandles = (
+  priceCandlesData: GetPriceCandlesQuery | undefined
+) => {
+  const errorResult = {
+    minPrice: 0,
+    maxPrice: 0,
+    pipsLocation: 0,
+    hasValidCandles: false,
+    candlesOpen: [],
+    candlesClose: [],
+    candlesLow: [],
+    candlesHigh: [],
+    dates: [],
+  };
+
+  if (
+    !priceCandlesData?.priceCandles?.candle?.length ||
+    !priceCandlesData?.priceCandles?.pipsLocation
+  ) {
+    return errorResult;
+  }
+
+  const { dates, candlesOpen, candlesClose, candlesLow, candlesHigh } =
+    priceCandlesData.priceCandles.candle.reduce(
+      (acc, candle) => {
+        if (!candle) {
+          return acc;
+        }
+
+        return {
+          dates: [...acc.dates, candle.point],
+          candlesOpen: [...acc.candlesOpen, candle.open],
+          candlesClose: [...acc.candlesClose, candle.close],
+          candlesLow: [...acc.candlesLow, candle.low],
+          candlesHigh: [...acc.candlesHigh, candle.high],
+        };
+      },
+      {
+        dates: [] as string[],
+        candlesOpen: [] as number[],
+        candlesClose: [] as number[],
+        candlesLow: [] as number[],
+        candlesHigh: [] as number[],
+      }
+    );
+
+  if (dates.length === 0) {
+    return errorResult;
+  }
+
+  const minPrice = Math.min(...candlesLow);
+  const maxPrice = Math.max(...candlesHigh);
+
+  return {
+    minPrice,
+    maxPrice,
+    candlesOpen,
+    candlesClose,
+    candlesLow,
+    candlesHigh,
+    dates,
+    hasValidCandles: true,
+    pipsLocation: priceCandlesData.priceCandles.pipsLocation,
+  };
+};

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

@@ -0,0 +1,55 @@
+import type { GetSentimentsQuery } from '../../../../gql/types/graphql';
+
+export const processSentiments = (
+  sentimentsData: GetSentimentsQuery | undefined,
+  dates: string[]
+) => {
+  if (
+    !Array.isArray(dates) ||
+    dates.length === 0 ||
+    !sentimentsData?.sentiments?.sentiments?.length
+  ) {
+    return {
+      sentimentLongs: [],
+      sentimentShorts: [],
+      hasValidSentiments: false,
+    };
+  }
+
+  const sentimentMap = new Map(
+    sentimentsData.sentiments.sentiments.map((item) => [
+      item?.time,
+      {
+        sentimentShorts: item?.sentiment?.shortPercent ?? null,
+        sentimentLongs: item?.sentiment?.longPercent ?? null,
+      },
+    ])
+  );
+
+  const { sentimentLongs, sentimentShorts } = dates.reduce(
+    (acc, date) => {
+      const sentiment = sentimentMap.get(date);
+
+      return {
+        sentimentLongs: [
+          ...acc.sentimentLongs,
+          sentiment?.sentimentLongs || null,
+        ],
+        sentimentShorts: [
+          ...acc.sentimentShorts,
+          sentiment?.sentimentShorts || null,
+        ],
+      };
+    },
+    {
+      sentimentLongs: [] as (number | null)[],
+      sentimentShorts: [] as (number | null)[],
+    }
+  );
+
+  return {
+    sentimentLongs,
+    sentimentShorts,
+    hasValidSentiments: true,
+  };
+};

package/src/CrowdViewWidget/components/Chart/{utils → dataUtils}/validateData.ts

@@ -6,12 +6,14 @@ import type {
 export const validateData = (
   priceCandlesData: GetPriceCandlesQuery | undefined,
   orderPositionData: GetOrderPositionBooksQuery | undefined,
-  hasValidCandles: boolean
+  hasValidCandles: boolean,
+  hasValidBooks: boolean,
+  hasValidSentiments: boolean
 ): Error | null => {
   const hasValidPriceData =
     (priceCandlesData?.priceCandles?.candle?.length ?? 0) >= 1;
   const hasValidOrderData =
-    (orderPositionData?.orderPositionBooks?.length ?? 0) >= 1;
+    (orderPositionData?.orderPositionBooks?.books?.length ?? 0) >= 1;
 
   if (!hasValidPriceData) {
     return new Error('Insufficient price candle data');
@@ -22,6 +24,12 @@ export const validateData = (
   if (!hasValidCandles) {
     return new Error('Invalid candle data');
   }
+  if (!hasValidBooks) {
+    return new Error('Invalid book data');
+  }
+  if (!hasValidSentiments) {
+    return new Error('Invalid sentiment data');
+  }
 
   return null;
 };

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

@@ -0,0 +1,114 @@
+import { CHART_CONFIG } from '../../constants';
+import {
+  getDataZoomConfig,
+  getGridConfig,
+  getGridLines,
+  getSeriesCandlestickConfig,
+  getSeriesHeatmapConfig,
+  getSeriesSentimentConfig,
+  getTooltipConfig,
+  getVisualMapConfig,
+  getXAxisConfig,
+  getYAxisConfig,
+} from './chartOptions';
+import { isDifferenceGreaterThanTwoWeeks } from './chartUtils';
+import { getChartStyles } from './chartUtils/getChartStyles';
+import type { GetOptionType } from './types';
+
+export const getOption: GetOptionType = ({
+  mainData: {
+    dates,
+    candlesOpen,
+    candlesClose,
+    candlesLow,
+    candlesHigh,
+    bookPrices,
+    bookIndexes,
+    sentimentShorts,
+    sentimentLongs,
+  },
+  additionalData: {
+    bucketWidth,
+    buckets,
+    displayPrecision,
+    bookType,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
+  },
+  isDark,
+  isDesktop,
+  labelCallback,
+}) => {
+  const styles = getChartStyles(isDark);
+  const selectedPriceRef = { current: 0 };
+
+  const visibleXAxisData = dates.slice(
+    (dates.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
+    (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
+  );
+
+  const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+    visibleXAxisData[0],
+    visibleXAxisData[visibleXAxisData.length - 1]
+  );
+
+  return {
+    animation: false,
+    tooltip: getTooltipConfig({
+      bookType,
+      bucketWidth,
+      buckets,
+      displayPrecision,
+      labelCallback,
+      selectedPriceRef,
+      tooltipLinesColor: styles.tooltipLinesColor,
+    }),
+    grid: getGridConfig({ isDesktop }),
+    xAxis: getXAxisConfig({
+      dates,
+      isGreaterThanTwoWeeks,
+    }),
+    yAxis: getYAxisConfig({
+      bucketWidth,
+      displayPrecision,
+      isDesktop,
+      labelCallback,
+    }),
+    dataZoom: getDataZoomConfig(),
+    visualMap: getVisualMapConfig({
+      sentimentLongColor: styles.sentimentLongColor,
+      sentimentShortColor: styles.sentimentShortColor,
+    }),
+    graphic: getGridLines({ isDark }),
+    dataset: {
+      source: {
+        dates,
+        candlesOpen,
+        candlesClose,
+        candlesLow,
+        candlesHigh,
+        bookPrices: bookPrices ?? [],
+        bookIndexes: bookIndexes ?? [],
+        sentimentShorts,
+        sentimentLongs,
+      },
+    },
+    series: [
+      getSeriesCandlestickConfig({
+        dates,
+        isGreaterThanTwoWeeks,
+        styles,
+      }),
+      getSeriesHeatmapConfig({
+        bucketWidth,
+        buckets,
+        isDark,
+        sentimentThresholdMax,
+        sentimentThresholdMin,
+      }),
+      getSeriesSentimentConfig({
+        styles,
+      }),
+    ],
+  };
+};

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

@@ -1,6 +1,6 @@
 export * from './Chart';
 export * from './chartOptions';
 export * from './ChartWithData';
+export * from './dataUtils';
 export * from './types';
 export * from './useCrowdViewData';
-export * from './utils';

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

@@ -19,36 +19,47 @@ export interface UseCrowdViewDataProps {
   granularity: Granularity;
 }
 
-export type ProcessedSentiment = [string, number, number];
-
-interface CrowdViewData {
-  xAxisData: string[];
-  // [open, close, low, high]
-  candlesSeriesData: [number, number, number, number][];
-  // [time, price, index]
-  orderPositionBooks: [string, number | null, number][];
+interface CrowdViewMainData {
+  dates: string[];
+  candlesOpen: number[];
+  candlesClose: number[];
+  candlesLow: number[];
+  candlesHigh: number[];
+  bookPrices?: (number | null)[];
+  bookIndexes?: (number | null)[];
+  sentimentShorts: (number | null)[];
+  sentimentLongs: (number | null)[];
+}
+
+interface CrowdViewAdditionalData {
   bucketWidth: number;
   buckets: Bucket[][];
-  precision: number;
+  displayPrecision: number;
   bookType: BookType;
-  sentiments: ProcessedSentiment[];
+  sentimentThresholdMin: number;
+  sentimentThresholdMax: number;
 }
 
 export interface UseCrowdViewDataReturn {
-  data: CrowdViewData | null;
+  mainData?: CrowdViewMainData | null;
+  additionalData?: CrowdViewAdditionalData | null;
   loading: boolean;
   error: boolean;
 }
 
-export type GetOptionType = (
-  props: CrowdViewData,
-  isDark: boolean,
-  isDesktop: boolean,
-  labelCallback: (key: string, params?: Record<string, unknown>) => string
-) => EChartsOption;
+interface GetOptionProps {
+  mainData: CrowdViewMainData;
+  additionalData: CrowdViewAdditionalData;
+  isDark: boolean;
+  isDesktop: boolean;
+  labelCallback: (key: string, params?: Record<string, unknown>) => string;
+}
+
+export type GetOptionType = (props: GetOptionProps) => EChartsOption;
 
 export interface ChartProps {
-  data: CrowdViewData;
+  mainData: CrowdViewMainData;
+  additionalData: CrowdViewAdditionalData;
   isDesktop: boolean;
 }
 
@@ -60,7 +71,7 @@ export interface ChartWithDataProps {
 }
 
 export interface GetLabelsDataProps {
-  xAxisData: string[];
+  dates: string[];
   isGreaterThanTwoWeeks: boolean;
 }