@oanda/labs-crowd-view-widget 1.0.51 → 1.0.53

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

@@ -3,21 +3,23 @@ import { useMemo } from 'react';
 
 import { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';
 import { getPriceCandles } from '../../../gql/getPriceCandles';
+import { getSentiments } from '../../../gql/getSentiments';
 import type {
   GetOrderPositionBooksQuery,
   GetOrderPositionBooksQueryVariables,
   GetPriceCandlesQuery,
   GetPriceCandlesQueryVariables,
+  GetSentimentsQuery,
+  GetSentimentsQueryVariables,
 } from '../../../gql/types/graphql';
 import { BookType, DataSource, Division } from '../../../gql/types/graphql';
 import { BUCKET_CONFIG, INSTRUMENTS_CONFIG } from '../../constants';
 import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
 import {
-  getTargetBucketWidth,
   getTimeSpanForGranularity,
-  processBuckets,
   processOrderPositionBooks,
   processPriceCandles,
+  processSentiments,
   validateData,
 } from './utils';
 
@@ -31,6 +33,8 @@ export const useCrowdViewData = ({
     division === Division.Ogm || division === Division.Oj
       ? DataSource.Mt5
       : DataSource.V20;
+
+  // Get price candles data
   const {
     loading: priceCandlesLoading,
     data: priceCandlesData,
@@ -52,26 +56,19 @@ export const useCrowdViewData = ({
     }
   );
 
-  const priceCandlesProcessed = useMemo(
-    () => processPriceCandles(priceCandlesData),
-    [priceCandlesData]
-  );
-
-  const { minPrice, maxPrice, hasValidCandles, candleMap, candles } =
-    priceCandlesProcessed;
-
-  const targetBucketWidth = getTargetBucketWidth(granularity, instrument);
-
-  const maxBookPrice = useMemo(
-    () => maxPrice + targetBucketWidth * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
-    [maxPrice, targetBucketWidth]
-  );
-
-  const minBookPrice = useMemo(
-    () => minPrice - targetBucketWidth * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
-    [minPrice, targetBucketWidth]
-  );
-
+  const {
+    minPrice,
+    maxPrice,
+    hasValidCandles,
+    dates,
+    candlesOpen,
+    candlesClose,
+    candlesLow,
+    candlesHigh,
+    pipsLocation,
+  } = useMemo(() => processPriceCandles(priceCandlesData), [priceCandlesData]);
+
+  // Get order position books data
   const {
     loading: orderPositionLoading,
     data: orderPositionData,
@@ -84,26 +81,53 @@ export const useCrowdViewData = ({
         bookType: bookType || BookType.Order,
         timeSpan: getTimeSpanForGranularity(granularity),
         granularity,
-        maxBookPrice,
-        minBookPrice,
+        maxBookPrice: maxPrice,
+        minBookPrice: minPrice,
+        bucketMultiplier: 3,
+        bucketMargin: BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
       },
       fetchPolicy: 'no-cache',
       skip: priceCandlesLoading || !!priceCandlesError,
     }
   );
 
-  const loading = priceCandlesLoading || orderPositionLoading;
-
-  const orderPositionBooks = useMemo(
-    () => processOrderPositionBooks(orderPositionData, candleMap),
-    [orderPositionData, candleMap]
+  const {
+    bookPrices,
+    bookIndexes,
+    buckets,
+    bucketWidth,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
+    hasValidBooks,
+  } = useMemo(
+    () => processOrderPositionBooks(orderPositionData, dates),
+    [orderPositionData, dates]
   );
 
-  const buckets = useMemo(
-    () => processBuckets(orderPositionData, targetBucketWidth),
-    [orderPositionData, targetBucketWidth]
+  // Get sentiments data
+  const {
+    loading: sentimentsLoading,
+    data: sentimentsData,
+    error: sentimentsError,
+  } = useQuery<GetSentimentsQuery, GetSentimentsQueryVariables>(getSentiments, {
+    variables: {
+      instrument: INSTRUMENTS_CONFIG[instrument].v20name,
+      granularity,
+      timeSpan: getTimeSpanForGranularity(granularity),
+    },
+    fetchPolicy: 'no-cache',
+    skip: priceCandlesLoading || !!priceCandlesError,
+  });
+
+  const { sentimentLongs, sentimentShorts, hasValidSentiments } = useMemo(
+    () => processSentiments(sentimentsData, dates),
+    [sentimentsData, dates]
   );
 
+  // Gather all results
+  const loading =
+    priceCandlesLoading || orderPositionLoading || sentimentsLoading;
+
   const error = useMemo((): Error | null => {
     if (priceCandlesError) {
       return new Error(`Price candles error: ${priceCandlesError.message}`);
@@ -111,57 +135,82 @@ export const useCrowdViewData = ({
     if (orderPositionError) {
       return new Error(`Order position error: ${orderPositionError.message}`);
     }
+    if (sentimentsError) {
+      return new Error(`Sentiments error: ${sentimentsError.message}`);
+    }
     if (loading) {
       return null;
     }
-    return validateData(priceCandlesData, orderPositionData, hasValidCandles);
+    return validateData(
+      priceCandlesData,
+      orderPositionData,
+      hasValidCandles,
+      hasValidBooks,
+      hasValidSentiments
+    );
   }, [
     priceCandlesError,
     orderPositionError,
+    sentimentsError,
     loading,
     priceCandlesData,
     orderPositionData,
     hasValidCandles,
+    hasValidBooks,
+    hasValidSentiments,
   ]);
 
   const data = useMemo(() => {
-    if (!priceCandlesData || !orderPositionData || error) {
+    if (!priceCandlesData || !orderPositionData || !sentimentsData || 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: targetBucketWidth,
-      precision: INSTRUMENTS_CONFIG[instrument].precision,
-      bookType,
+      mainData: {
+        dates,
+        candlesOpen,
+        candlesClose,
+        candlesLow,
+        candlesHigh,
+        bookPrices,
+        bookIndexes,
+        sentimentShorts,
+        sentimentLongs,
+      },
+      additionalData: {
+        bucketWidth,
+        buckets,
+        displayPrecision: pipsLocation,
+        bookType,
+        sentimentThresholdMin,
+        sentimentThresholdMax,
+      },
     };
   }, [
     priceCandlesData,
     orderPositionData,
+    sentimentsData,
     error,
-    candles,
+    dates,
+    candlesOpen,
+    candlesClose,
+    candlesLow,
+    candlesHigh,
+    bookPrices,
+    bookIndexes,
+    sentimentShorts,
+    sentimentLongs,
+    bucketWidth,
     buckets,
-    orderPositionBooks,
-    targetBucketWidth,
-    instrument,
+    pipsLocation,
     bookType,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
   ]);
 
   return {
-    data,
+    mainData: data?.mainData,
+    additionalData: data?.additionalData,
     loading,
     error: !!error,
   };

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

@@ -1,19 +1,14 @@
 import chroma from 'chroma-js';
 
 import { BookType, Granularity, TimeSpan } from '../../../../gql/types/graphql';
-import {
-  BOOKS_THRESHOLDS,
-  CHART_CONFIG,
-  COLOR_MAP,
-  TIME_THRESHOLDS,
-} from '../../../constants';
-import type { Bucket, GetLabelsDataProps } from '../types';
+import { CHART_CONFIG, COLOR_MAP, TIME_THRESHOLDS } from '../../../constants';
+import type { Bucket, GetLabelsDataProps, TooltipParam } from '../types';
 
 export const getLabelData = ({
-  xAxisData,
+  dates,
   isGreaterThanTwoWeeks,
 }: GetLabelsDataProps) =>
-  xAxisData
+  dates
     .filter((record, index, arr) => {
       if (index === 0) {
         return false;
@@ -32,7 +27,7 @@ export const getLabelData = ({
         day: isGreaterThanTwoWeeks ? 'numeric' : undefined,
       }),
       xAxis: item,
-      y: CHART_CONFIG.HEIGHT - 22,
+      y: CHART_CONFIG.MAIN_HEIGHT + CHART_CONFIG.X_LABEL_SIZE - 22,
       silent: true,
       emphasis: {
         disabled: true,
@@ -74,29 +69,41 @@ export const getTimeSpanForGranularity = (
 const getGradientColor = (
   value: number,
   startColor: string,
-  targetColor: string
+  targetColor: string,
+  minThreshold: number,
+  maxThreshold: number
 ): string => {
-  const startThreshold = BOOKS_THRESHOLDS.MIN;
-  const endThreshold = BOOKS_THRESHOLDS.MAX;
-
   const colorScale = chroma
     .scale([startColor, targetColor])
-    .domain([startThreshold, endThreshold])
+    .domain([minThreshold, maxThreshold])
     .mode('rgb');
 
   return colorScale(value).hex();
 };
 
-export const getRectColor = (sentiment: number, isDark: boolean) => {
+export const getRectColor = (
+  sentiment: number,
+  isDark: boolean,
+  minThreshold: number,
+  maxThreshold: number
+) => {
   const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
 
   return sentiment < 0
     ? getGradientColor(
         sentiment * -1,
         colorPalette.short[0],
-        colorPalette.short[1]
+        colorPalette.short[1],
+        minThreshold,
+        maxThreshold
       )
-    : getGradientColor(sentiment, colorPalette.long[0], colorPalette.long[1]);
+    : getGradientColor(
+        sentiment,
+        colorPalette.long[0],
+        colorPalette.long[1],
+        minThreshold,
+        maxThreshold
+      );
 };
 
 export const getTooltipFormatter = ({
@@ -104,33 +111,44 @@ export const getTooltipFormatter = ({
   buckets,
   bucketWidth,
   selectedPrice,
-  precision,
   bookType,
   labelCallback,
 }: {
-  params: unknown;
+  params: TooltipParam[];
   buckets: Bucket[][];
   bucketWidth: number;
   selectedPrice: number;
-  precision: number;
   bookType: BookType;
   labelCallback: (key: string) => string;
 }) => {
-  const arr = params as unknown as Array<Record<string, unknown>>;
-  if (!arr || !Array.isArray(arr) || arr.length === 0) {
+  const bucketDisplayPrecision =
+    bucketWidth.toString().split('.')[1]?.length || 0;
+
+  if (!params || !Array.isArray(params) || params.length === 0) {
+    return undefined;
+  }
+  const candleParam = params.find(
+    (series): series is Extract<TooltipParam, { seriesId: 'candlestick' }> =>
+      series.seriesId === 'candlestick'
+  );
+  const booksParam = params.find(
+    (series): series is Extract<TooltipParam, { seriesId: 'heatmap' }> =>
+      series.seriesId === 'heatmap'
+  );
+  const sentimentParam = params.find(
+    (series): series is Extract<TooltipParam, { seriesId: 'sentiment' }> =>
+      series.seriesId === 'sentiment'
+  );
+
+  if (!candleParam) {
     return undefined;
   }
-  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 bucketsIndex = booksParam?.value[2];
+  const selectedBuckets =
+    bucketsIndex !== undefined ? buckets[bucketsIndex] : undefined;
 
   const matchedBucket = selectedBuckets?.find(
     ({ price }) => selectedPrice >= price && selectedPrice < price + bucketWidth
@@ -142,6 +160,9 @@ export const getTooltipFormatter = ({
     return undefined;
   }
 
+  const showSentiment =
+    !!sentimentParam?.value[1] && !!sentimentParam?.value[2];
+
   return `<p>${time.toLocaleString(undefined, {
     hour: '2-digit',
     minute: '2-digit',
@@ -163,7 +184,11 @@ ${
 ${
   matchedBucket
     ? `<br /><p><b>${labelCallback(bookType === BookType.Order ? 'orders' : 'positions')}:</b></p>
-<p>${labelCallback('price_range')}: ${matchedBucket.price.toFixed(precision - 1)} - ${Number(matchedBucket.price + bucketWidth).toFixed(precision - 1)} </p>
+<p>${labelCallback('price_range')}: ${matchedBucket.price.toFixed(
+        bucketDisplayPrecision
+      )} - ${Number(matchedBucket.price + bucketWidth).toFixed(
+        bucketDisplayPrecision
+      )} </p>
 <p>${
         matchedBucket.sentiment < 0
           ? labelCallback(
@@ -176,9 +201,15 @@ ${
                 ? 'buy_overbalance'
                 : 'long_overbalance'
             )
-      }: ${Math.abs(matchedBucket.sentiment)}% </p>`
+      }: ${Math.abs(Number(matchedBucket.sentiment.toFixed(bucketDisplayPrecision)))}% </p>`
     : ''
-}`;
+}${
+    showSentiment && sentimentParam
+      ? `<br /><p><b>${labelCallback('sentiment')}:</b></p>
+<p>${labelCallback('long')}: ${sentimentParam.value[2].toFixed(2)}% </p>
+<p>${labelCallback('short')}: ${sentimentParam.value[1].toFixed(2)}% </p>`
+      : ''
+  }`;
 };
 
 export const formatXAxisLabel = (

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

@@ -0,0 +1,42 @@
+import { colorPalette } from '@oanda/labs-widget-common';
+
+export interface ChartStyles {
+  sentimentLongColor: string;
+  sentimentShortColor: string;
+  candleLongColor: string;
+  candleShortColor: string;
+  sentimentAreaOpacity: number;
+  tooltipLinesColor: string;
+  sentimentLabelColor: string;
+}
+
+export const getChartStyles = (isDark: boolean): ChartStyles => {
+  const sentimentLongColor = isDark
+    ? colorPalette.darkBlue90
+    : colorPalette.lightBlue90;
+  const sentimentShortColor = isDark
+    ? colorPalette.darkYellow90
+    : colorPalette.lightYellow90;
+
+  const candleLongColor = isDark
+    ? colorPalette.bottleGreenDark
+    : colorPalette.bottleGreenLight;
+  const candleShortColor = isDark
+    ? colorPalette.orange
+    : colorPalette.raspberryLight;
+  const sentimentAreaOpacity = isDark ? 0.5 : 0.2;
+  const tooltipLinesColor = isDark
+    ? colorPalette.orange
+    : colorPalette.bottleGreenLight;
+  const sentimentLabelColor = isDark ? colorPalette.white : colorPalette.black;
+
+  return {
+    sentimentLongColor,
+    sentimentShortColor,
+    candleLongColor,
+    candleShortColor,
+    sentimentAreaOpacity,
+    tooltipLinesColor,
+    sentimentLabelColor,
+  };
+};

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

@@ -0,0 +1,148 @@
+import { getLineCommons } from '@oanda/labs-widget-common';
+
+import { CHART_CONFIG } from '../../../constants';
+
+export const getGridLines = ({
+  isDark,
+  isDesktop,
+}: {
+  isDark: boolean;
+  isDesktop: boolean;
+}) => {
+  const {
+    WIDTH,
+    MAIN_HEIGHT,
+    MARGIN_BETWEEN,
+    SENTIMENT_HEIGHT,
+    X_LABEL_SIZE,
+    Y_LABEL_SIZE_DESKTOP,
+    Y_LABEL_SIZE_MOBILE,
+  } = CHART_CONFIG;
+  return [
+    // Main Top
+    {
+      ...getLineCommons(isDark),
+      top: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+    },
+    // Main Right
+    {
+      ...getLineCommons(isDark),
+      right: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+      },
+    },
+    // Main Bottom
+    {
+      ...getLineCommons(isDark),
+      top: MAIN_HEIGHT - 2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+    },
+    // Main Left
+    {
+      ...getLineCommons(isDark),
+      left: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT + X_LABEL_SIZE + 2,
+      },
+    },
+    // Main Y Label
+    {
+      ...getLineCommons(isDark),
+      right: (isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) - 2,
+      top: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: MAIN_HEIGHT,
+      },
+    },
+    // Main X Label
+    {
+      ...getLineCommons(isDark),
+      top: MAIN_HEIGHT + X_LABEL_SIZE,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+    },
+    // Sentiment Top
+    {
+      ...getLineCommons(isDark),
+      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN - 2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+    },
+    // Sentiment Right
+    {
+      ...getLineCommons(isDark),
+      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN - 2,
+      right: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: SENTIMENT_HEIGHT,
+      },
+    },
+    // Sentiment Bottom
+    {
+      ...getLineCommons(isDark),
+      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN + SENTIMENT_HEIGHT - 3,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: WIDTH,
+        y2: 0,
+      },
+    },
+    // Sentiment Left
+    {
+      ...getLineCommons(isDark),
+      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN - 2,
+      left: -2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: SENTIMENT_HEIGHT,
+      },
+    },
+    // Sentiment Y Label
+    {
+      ...getLineCommons(isDark),
+      right: (isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) - 3,
+      top: MAIN_HEIGHT + X_LABEL_SIZE + MARGIN_BETWEEN - 2,
+      shape: {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: SENTIMENT_HEIGHT,
+      },
+    },
+  ];
+};

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

@@ -1,7 +1,6 @@
-export * from './aggregateBuckets';
 export * from './chartUtils';
-export * from './getTargetBucketWidth';
-export * from './processBuckets';
+export * from './getChartStyles';
 export * from './processOrderPositionBooks';
 export * from './processPriceCandles';
+export * from './processSentiments';
 export * from './validateData';