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

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

@@ -14,16 +14,14 @@ import type {
 } 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';
+} from './dataUtils';
+import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
 
 export const useCrowdViewData = ({
   instrument,
@@ -35,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,
@@ -56,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,
@@ -88,14 +81,30 @@ export const useCrowdViewData = ({
         bookType: bookType || BookType.Order,
         timeSpan: getTimeSpanForGranularity(granularity),
         granularity,
-        maxBookPrice,
-        minBookPrice,
+        maxBookPrice: maxPrice,
+        minBookPrice: minPrice,
+        bucketMultiplier: 2,
+        bucketMargin: BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
       },
       fetchPolicy: 'no-cache',
       skip: priceCandlesLoading || !!priceCandlesError,
     }
   );
 
+  const {
+    bookPrices,
+    bookIndexes,
+    buckets,
+    bucketWidth,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
+    hasValidBooks,
+  } = useMemo(
+    () => processOrderPositionBooks(orderPositionData, dates),
+    [orderPositionData, dates]
+  );
+
+  // Get sentiments data
   const {
     loading: sentimentsLoading,
     data: sentimentsData,
@@ -110,24 +119,14 @@ export const useCrowdViewData = ({
     skip: priceCandlesLoading || !!priceCandlesError,
   });
 
-  const loading =
-    priceCandlesLoading || orderPositionLoading || sentimentsLoading;
-  const xAxisData = candles.map((candle) => candle?.point || '');
-
-  const orderPositionBooks = useMemo(
-    () => processOrderPositionBooks(orderPositionData, candleMap),
-    [orderPositionData, candleMap]
-  );
-
-  const buckets = useMemo(
-    () => processBuckets(orderPositionData, targetBucketWidth),
-    [orderPositionData, targetBucketWidth]
+  const { sentimentLongs, sentimentShorts, hasValidSentiments } = useMemo(
+    () => processSentiments(sentimentsData, dates),
+    [sentimentsData, dates]
   );
 
-  const sentiments = useMemo(
-    () => processSentiments(sentimentsData, xAxisData),
-    [sentimentsData, xAxisData]
-  );
+  // Gather all results
+  const loading =
+    priceCandlesLoading || orderPositionLoading || sentimentsLoading;
 
   const error = useMemo((): Error | null => {
     if (priceCandlesError) {
@@ -142,7 +141,13 @@ export const useCrowdViewData = ({
     if (loading) {
       return null;
     }
-    return validateData(priceCandlesData, orderPositionData, hasValidCandles);
+    return validateData(
+      priceCandlesData,
+      orderPositionData,
+      hasValidCandles,
+      hasValidBooks,
+      hasValidSentiments
+    );
   }, [
     priceCandlesError,
     orderPositionError,
@@ -151,6 +156,8 @@ export const useCrowdViewData = ({
     priceCandlesData,
     orderPositionData,
     hasValidCandles,
+    hasValidBooks,
+    hasValidSentiments,
   ]);
 
   const data = useMemo(() => {
@@ -158,42 +165,52 @@ export const useCrowdViewData = ({
       return null;
     }
 
-    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,
-      sentiments,
+      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,
-    xAxisData,
-    orderPositionBooks,
-    targetBucketWidth,
-    instrument,
+    pipsLocation,
     bookType,
-    sentiments,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
   ]);
 
   return {
-    data,
+    mainData: data?.mainData,
+    additionalData: data?.additionalData,
     loading,
     error: !!error,
   };

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

@@ -1,39 +1,40 @@
+import { useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import React from 'react';
 
 import { BookType } from '../../../gql/types/graphql';
-import { BOOKS_THRESHOLDS } from '../../constants';
 import { LegendBar } from './LegendBar';
 
 interface LegendProps {
-  longValues?: [number, number];
-  shortValues?: [number, number];
   bookType: BookType;
-  isDark: boolean;
 }
 
-export const Legend = ({
-  longValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
-  shortValues = [BOOKS_THRESHOLDS.MIN, BOOKS_THRESHOLDS.MAX],
-  bookType,
-  isDark,
-}: LegendProps) => {
+export const Legend = ({ bookType }: LegendProps) => {
+  const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
 
   return (
-    <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')}
-        type="long"
-        values={longValues}
-      />
-      <LegendBar
-        isDark={isDark}
-        label={lang(bookType === BookType.Order ? 'sell' : 'short')}
-        type="short"
-        values={shortValues}
-      />
+    <div className="lw-my-4 lw-w-full">
+      <div className="lw-mb-1 lw-flex lw-w-full lw-flex-row lw-justify-between">
+        <LegendBar isDark={isDark} type="long" />
+        <div className="lw-w-[250px]" />
+        <LegendBar isDark={isDark} type="short" />
+      </div>
+      <div className="lw-flex lw-w-full lw-flex-row lw-justify-between lw-pb-2 lw-font-sans lw-text-xs lw-text-text-primary">
+        <span>
+          {lang(
+            bookType === BookType.Order ? 'buy_overbalance' : 'long_overbalance'
+          )}
+        </span>
+        <span>{lang('even_market_demand')}</span>
+        <span>
+          {lang(
+            bookType === BookType.Order
+              ? 'sell_overbalance'
+              : 'short_overbalance'
+          )}
+        </span>
+      </div>
     </div>
   );
 };

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

@@ -5,39 +5,26 @@ import { COLOR_MAP } from '../../constants';
 export type LegendType = 'long' | 'short';
 
 interface LegendBarProps {
-  values: number[];
   type: LegendType;
-  label: string;
   isDark: boolean;
 }
 
-export const LegendBar = ({ values, type, label, isDark }: LegendBarProps) => {
+export const LegendBar = ({ type, isDark }: LegendBarProps) => {
   const colorPalette = isDark ? COLOR_MAP.dark : COLOR_MAP.light;
-  const colors = type === 'long' ? colorPalette.long : colorPalette.short;
+  const startColor =
+    type === 'long' ? colorPalette.long[1] : colorPalette.short[0];
+  const endColor =
+    type === 'long' ? colorPalette.long[0] : colorPalette.short[1];
 
   return (
-    <div className="lw-flex lw-w-full lw-flex-col lw-space-y-1 lw-border-border-primary">
-      <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-        {label}
-      </span>
-      <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden lw-border lw-border-border-primary">
-        <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 lw-justify-between">
-        <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-          {values[0].toFixed(2)}%
-        </span>
-        <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
-          {`≤ ${values[1].toFixed(2)}`}%
-        </span>
-      </div>
+    <div className="lw-flex lw-h-2 lw-w-full lw-overflow-hidden">
+      <div
+        className="lw-h-full lw-flex-1"
+        data-testid="legend-bar-segment"
+        style={{
+          background: `linear-gradient(90deg,${startColor} 0%, ${endColor} 100%)`,
+        }}
+      />
     </div>
   );
 };

package/src/CrowdViewWidget/constants.ts

@@ -1,15 +1,11 @@
 import { colorPalette } from '@oanda/labs-widget-common';
+import chroma from 'chroma-js';
 
 import { InstrumentId } from './types';
 
-export const BOOKS_THRESHOLDS = {
-  MIN: 0.15,
-  MAX: 0.55,
-} as const;
-
 export const BUCKET_CONFIG = {
   MULTIPLIER: 4,
-  PRICE_PADDING_MULTIPLIER: 2,
+  PRICE_MARGIN_MULTIPLIER: 2,
 } as const;
 
 export const TIME_THRESHOLDS = {
@@ -17,6 +13,7 @@ export const TIME_THRESHOLDS = {
 } as const;
 
 export const CHART_CONFIG = {
+  HEIGHT: 440,
   MAIN_HEIGHT: 400,
   MARGIN_BETWEEN: 50,
   SENTIMENT_HEIGHT: 120,
@@ -24,33 +21,34 @@ export const CHART_CONFIG = {
   X_LABEL_SIZE: 40,
   Y_LABEL_SIZE_DESKTOP: 60,
   Y_LABEL_SIZE_MOBILE: 40,
-  INITIAL_START_ZOOM: 80,
+  Y_SENTIMENT_LABEL_SIZE: 40,
+  INITIAL_START_ZOOM: 90,
   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],
-    short: [colorPalette.darkYellow10, colorPalette.darkYellow90],
+    long: [
+      chroma(colorPalette.darkBlue10).shade(0.5).hex(),
+      chroma(colorPalette.darkBlue90).shade(0.5).hex(),
+    ],
+    short: [
+      chroma(colorPalette.darkYellow10).shade(0.5).hex(),
+      chroma(colorPalette.darkYellow90).shade(0.5).hex(),
+    ],
   },
   light: {
-    long: [colorPalette.lightBlue10, colorPalette.lightBlue90],
-    short: [colorPalette.lightYellow10, colorPalette.lightYellow90],
+    long: [
+      chroma(colorPalette.lightBlue10).tint(0.5).hex(),
+      chroma(colorPalette.lightBlue90).tint(0.5).hex(),
+    ],
+    short: [
+      chroma(colorPalette.lightYellow10).tint(0.5).hex(),
+      chroma(colorPalette.lightYellow90).tint(0.5).hex(),
+    ],
   },
 } as const;
 

package/src/gql/getOrderPositionBooks.ts

@@ -8,6 +8,8 @@ const getOrderPositionBooks = gql`
     $granularity: Granularity!
     $maxBookPrice: Float
     $minBookPrice: Float
+    $bucketMultiplier: Int!
+    $bucketMargin: Int!
   ) {
     orderPositionBooks(
       instrument: $instrument
@@ -16,14 +18,20 @@ const getOrderPositionBooks = gql`
       granularity: $granularity
       maxBookPrice: $maxBookPrice
       minBookPrice: $minBookPrice
+      bucketMultiplier: $bucketMultiplier
+      bucketMargin: $bucketMargin
     ) {
-      bucketWidth
-      price
-      time
-      buckets {
+      books {
+        time
         price
-        sentiment
+        buckets {
+          price
+          sentiment
+        }
       }
+      bucketWidth
+      sentimentThresholdMax
+      sentimentThresholdMin
     }
   }
 `;

package/src/gql/getPriceCandles.ts

@@ -22,6 +22,7 @@ const getPriceCandles = gql`
         open
         close
       }
+      pipsLocation
     }
   }
 `;

package/src/gql/types/gql.ts

@@ -13,9 +13,9 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  '\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        sentiment\n      }\n    }\n  }\n':
+  '\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n    $bucketMultiplier: Int!\n    $bucketMargin: Int!\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n      bucketMultiplier: $bucketMultiplier\n      bucketMargin: $bucketMargin\n    ) {\n      books {\n        time\n        price\n        buckets {\n          price\n          sentiment\n        }\n      }\n      bucketWidth\n      sentimentThresholdMax\n      sentimentThresholdMin\n    }\n  }\n':
     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':
+  '\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      pipsLocation\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,
@@ -39,14 +39,14 @@ export function graphql(source: string): unknown;
  * 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 GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        sentiment\n      }\n    }\n  }\n'
-): (typeof documents)['\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        sentiment\n      }\n    }\n  }\n'];
+  source: '\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n    $bucketMultiplier: Int!\n    $bucketMargin: Int!\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n      bucketMultiplier: $bucketMultiplier\n      bucketMargin: $bucketMargin\n    ) {\n      books {\n        time\n        price\n        buckets {\n          price\n          sentiment\n        }\n      }\n      bucketWidth\n      sentimentThresholdMax\n      sentimentThresholdMin\n    }\n  }\n'
+): (typeof documents)['\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $timeSpan: TimeSpan!\n    $granularity: Granularity!\n    $maxBookPrice: Float\n    $minBookPrice: Float\n    $bucketMultiplier: Int!\n    $bucketMargin: Int!\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      timeSpan: $timeSpan\n      granularity: $granularity\n      maxBookPrice: $maxBookPrice\n      minBookPrice: $minBookPrice\n      bucketMultiplier: $bucketMultiplier\n      bucketMargin: $bucketMargin\n    ) {\n      books {\n        time\n        price\n        buckets {\n          price\n          sentiment\n        }\n      }\n      bucketWidth\n      sentimentThresholdMax\n      sentimentThresholdMin\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 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'];
+  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      pipsLocation\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      pipsLocation\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */