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

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

@@ -3,11 +3,14 @@ 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';
@@ -18,6 +21,7 @@ import {
   processBuckets,
   processOrderPositionBooks,
   processPriceCandles,
+  processSentiments,
   validateData,
 } from './utils';
 
@@ -92,7 +96,23 @@ export const useCrowdViewData = ({
     }
   );
 
-  const loading = priceCandlesLoading || orderPositionLoading;
+  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 loading =
+    priceCandlesLoading || orderPositionLoading || sentimentsLoading;
+  const xAxisData = candles.map((candle) => candle?.point || '');
 
   const orderPositionBooks = useMemo(
     () => processOrderPositionBooks(orderPositionData, candleMap),
@@ -104,6 +124,11 @@ export const useCrowdViewData = ({
     [orderPositionData, targetBucketWidth]
   );
 
+  const sentiments = useMemo(
+    () => processSentiments(sentimentsData, xAxisData),
+    [sentimentsData, xAxisData]
+  );
+
   const error = useMemo((): Error | null => {
     if (priceCandlesError) {
       return new Error(`Price candles error: ${priceCandlesError.message}`);
@@ -111,6 +136,9 @@ 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;
     }
@@ -118,6 +146,7 @@ export const useCrowdViewData = ({
   }, [
     priceCandlesError,
     orderPositionError,
+    sentimentsError,
     loading,
     priceCandlesData,
     orderPositionData,
@@ -125,11 +154,10 @@ export const useCrowdViewData = ({
   ]);
 
   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,
@@ -147,17 +175,21 @@ export const useCrowdViewData = ({
       bucketWidth: targetBucketWidth,
       precision: INSTRUMENTS_CONFIG[instrument].precision,
       bookType,
+      sentiments,
     };
   }, [
     priceCandlesData,
     orderPositionData,
+    sentimentsData,
     error,
     candles,
     buckets,
+    xAxisData,
     orderPositionBooks,
     targetBucketWidth,
     instrument,
     bookType,
+    sentiments,
   ]);
 
   return {

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

@@ -7,7 +7,7 @@ import {
   COLOR_MAP,
   TIME_THRESHOLDS,
 } from '../../../constants';
-import type { Bucket, GetLabelsDataProps } from '../types';
+import type { Bucket, GetLabelsDataProps, TooltipParam } from '../types';
 
 export const getLabelData = ({
   xAxisData,
@@ -32,7 +32,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,
@@ -108,7 +108,7 @@ export const getTooltipFormatter = ({
   bookType,
   labelCallback,
 }: {
-  params: unknown;
+  params: TooltipParam[];
   buckets: Bucket[][];
   bucketWidth: number;
   selectedPrice: number;
@@ -116,21 +116,31 @@ export const getTooltipFormatter = ({
   bookType: BookType;
   labelCallback: (key: string) => string;
 }) => {
-  const arr = params as unknown as Array<Record<string, unknown>>;
-  if (!arr || !Array.isArray(arr) || arr.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 +152,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',
@@ -178,7 +191,13 @@ ${
             )
       }: ${Math.abs(matchedBucket.sentiment)}% </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,9 @@
 export * from './aggregateBuckets';
 export * from './chartUtils';
+export * from './getChartStyles';
 export * from './getTargetBucketWidth';
 export * from './processBuckets';
 export * from './processOrderPositionBooks';
 export * from './processPriceCandles';
+export * from './processSentiments';
 export * from './validateData';

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

@@ -0,0 +1,42 @@
+import type { GetSentimentsQuery } from '../../../../gql/types/graphql';
+import type { ProcessedSentiment } from '../types';
+
+export const processSentiments = (
+  sentimentsData: GetSentimentsQuery | undefined,
+  xAxisData: string[]
+): ProcessedSentiment[] => {
+  if (!sentimentsData?.sentiments?.sentiments?.length) {
+    return [];
+  }
+
+  const sentimentMap = new Map(
+    sentimentsData.sentiments.sentiments
+      .filter(
+        (item): item is NonNullable<typeof item> =>
+          item?.time != null &&
+          item.sentiment?.shortPercent != null &&
+          item.sentiment?.longPercent != null
+      )
+      .map((item) => [
+        item.time,
+        {
+          shortPercent: item.sentiment.shortPercent,
+          longPercent: item.sentiment.longPercent,
+        },
+      ])
+  );
+
+  return xAxisData
+    .map((time) => {
+      const sentiment = sentimentMap.get(time);
+      if (!sentiment) {
+        return undefined;
+      }
+      return [
+        time,
+        sentiment.shortPercent,
+        sentiment.longPercent,
+      ] as ProcessedSentiment;
+    })
+    .filter((item): item is ProcessedSentiment => item !== undefined);
+};

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

@@ -21,7 +21,7 @@ export const Legend = ({
   const { lang } = useLocale();
 
   return (
-    <div className="lw-mx-auto lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl">
+    <div className="lw-mx-auto lw-mt-4 lw-flex lw-w-full lw-flex-col lw-items-center lw-space-y-4 lw-pb-6 lw-pt-0 sm:lw-max-w-md lg:lw-max-w-xl">
       <LegendBar
         isDark={isDark}
         label={lang(bookType === BookType.Order ? 'buy' : 'long')}

package/src/CrowdViewWidget/constants.ts

@@ -17,7 +17,9 @@ export const TIME_THRESHOLDS = {
 } as const;
 
 export const CHART_CONFIG = {
-  HEIGHT: 425,
+  MAIN_HEIGHT: 400,
+  MARGIN_BETWEEN: 50,
+  SENTIMENT_HEIGHT: 120,
   WIDTH: 9999,
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
@@ -25,8 +27,22 @@ export const CHART_CONFIG = {
   INITIAL_START_ZOOM: 80,
   INITIAL_END_ZOOM: 100,
   X_AXIS_DATE_PADDING: '        ',
+  SENTIMENT_MIN: 0,
+  SENTIMENT_MAX: 100,
+  SENTIMENT_INTERVAL: 25,
+  SENTIMENT_TEXT_OFFSET: 16,
 } as const;
 
+export const CHART_CONFIG_CALCULATED = {
+  FULL_HEIGHT:
+    CHART_CONFIG.MAIN_HEIGHT +
+    CHART_CONFIG.MARGIN_BETWEEN +
+    CHART_CONFIG.SENTIMENT_HEIGHT +
+    CHART_CONFIG.X_LABEL_SIZE,
+  SENTIMENT_TEXT_POSITION:
+    CHART_CONFIG.SENTIMENT_HEIGHT + CHART_CONFIG.SENTIMENT_TEXT_OFFSET,
+};
+
 export const COLOR_MAP = {
   dark: {
     long: [colorPalette.darkBlue10, colorPalette.darkBlue90],

package/src/gql/getSentiments.ts

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+
+const getSentiments = gql`
+  query GetSentiments(
+    $instrument: String!
+    $granularity: Granularity!
+    $timeSpan: TimeSpan!
+  ) {
+    sentiments(
+      instrument: $instrument
+      granularity: $granularity
+      timeSpan: $timeSpan
+    ) {
+      sentiments {
+        sentiment {
+          longPercent
+          shortPercent
+        }
+        time
+      }
+    }
+  }
+`;
+
+export { getSentiments };

package/src/gql/types/gql.ts

@@ -17,6 +17,8 @@ const documents = {
     types.GetOrderPositionBooksDocument,
   '\n  query GetPriceCandles(\n    $dataSource: DataSource!\n    $division: Division!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      dataSource: $dataSource\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\n    }\n  }\n':
     types.GetPriceCandlesDocument,
+  '\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          longPercent\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n':
+    types.GetSentimentsDocument,
 };
 
 /**
@@ -45,6 +47,12 @@ export function graphql(
 export function graphql(
   source: '\n  query GetPriceCandles(\n    $dataSource: DataSource!\n    $division: Division!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      dataSource: $dataSource\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\n    }\n  }\n'
 ): (typeof documents)['\n  query GetPriceCandles(\n    $dataSource: DataSource!\n    $division: Division!\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    priceCandles(\n      dataSource: $dataSource\n      division: $division\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      candle {\n        point\n        high\n        low\n        open\n        close\n      }\n    }\n  }\n'];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          longPercent\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n'
+): (typeof documents)['\n  query GetSentiments(\n    $instrument: String!\n    $granularity: Granularity!\n    $timeSpan: TimeSpan!\n  ) {\n    sentiments(\n      instrument: $instrument\n      granularity: $granularity\n      timeSpan: $timeSpan\n    ) {\n      sentiments {\n        sentiment {\n          longPercent\n          shortPercent\n        }\n        time\n      }\n    }\n  }\n'];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};