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

package/src/CrowdViewWidget/Main.tsx

@@ -10,14 +10,14 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import type { Granularity } from '../gql/types/graphql';
 import { BookType } from '../gql/types/graphql';
-import { ChartWithData, Legend } from './components';
+import { ChartWithData } from './components';
 import { granularitySelectConfig, navigationConfig } from './selectConfig';
 import type { InstrumentId, MainProps } from './types';
 import { getInstrumentConfigForDivision } from './utils/instrumentUtils';
 
 const Main = ({ division }: MainProps) => {
   const { lang } = useLocale();
-  const { size, isDark } = useLayoutProvider();
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const [bookType, setBookType] = useState(BookType.Order);
@@ -107,8 +107,6 @@ const Main = ({ division }: MainProps) => {
             granularity={granularity.id}
             instrument={instrument.id}
           />
-
-          <Legend bookType={bookType} isDark={isDark} />
         </div>
       )}
     </>

package/src/CrowdViewWidget/components/Chart/Chart.tsx

@@ -8,6 +8,7 @@ import { useLocale } from '@oanda/mono-i18n';
 import type { EChartsType } from 'echarts';
 import { CandlestickChart, CustomChart, LineChart } from 'echarts/charts';
 import {
+  DatasetComponent,
   DataZoomInsideComponent,
   GraphicComponent,
   GridSimpleComponent,
@@ -46,12 +47,13 @@ echarts.use([
   MarkAreaComponent,
   LineChart,
   VisualMapComponent,
+  DatasetComponent,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
 echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
-const Chart = ({ data, isDesktop }: ChartProps) => {
+const Chart = ({ mainData, additionalData, isDesktop }: ChartProps) => {
   const { isDark } = useLayoutProvider();
   const { lang } = useLocale();
 
@@ -61,7 +63,13 @@ const Chart = ({ data, isDesktop }: ChartProps) => {
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
-      option={getOption(data, isDark, isDesktop, lang)}
+      option={getOption({
+        mainData,
+        additionalData,
+        isDark,
+        isDesktop,
+        labelCallback: lang,
+      })}
       opts={{ renderer: 'canvas' }}
       onEvents={{
         datazoom: (params: DataZoomEvent, instance: EChartsType) => {
@@ -69,6 +77,7 @@ const Chart = ({ data, isDesktop }: ChartProps) => {
             return;
           }
 
+          const { dates } = mainData;
           const batchItem = params.batch[0];
           const { start, end } = batchItem;
 
@@ -105,13 +114,13 @@ const Chart = ({ data, isDesktop }: ChartProps) => {
             });
           }
 
-          if (!data.xAxisData[startValue] || !data.xAxisData[endValue]) {
+          if (!dates[startValue] || !dates[endValue]) {
             return;
           }
 
           const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-            data.xAxisData[startValue],
-            data.xAxisData[endValue]
+            dates[startValue],
+            dates[endValue]
           );
 
           const wasGreaterThanTwoWeeks =
@@ -121,7 +130,7 @@ const Chart = ({ data, isDesktop }: ChartProps) => {
 
           if (isGreaterThanTwoWeeks !== wasGreaterThanTwoWeeks) {
             const labelsData = getLabelData({
-              xAxisData: data.xAxisData,
+              dates,
               isGreaterThanTwoWeeks,
             });
 

package/src/CrowdViewWidget/components/Chart/ChartWithData.tsx

@@ -7,6 +7,7 @@ import {
 } from '@oanda/labs-widget-common';
 import React from 'react';
 
+import { Legend } from '../Legend';
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
 import { useCrowdViewData } from './useCrowdViewData';
@@ -17,10 +18,10 @@ const ChartWithData = ({
   division,
   granularity,
 }: ChartWithDataProps) => {
-  const { size } = useLayoutProvider();
+  const { size, isDark } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const { data, loading, error } = useCrowdViewData({
+  const { mainData, additionalData, loading, error } = useCrowdViewData({
     instrument,
     bookType,
     division,
@@ -40,12 +41,28 @@ const ChartWithData = ({
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}
-        {!loading && !error && !!data && (
+        {!loading && !error && !!mainData && !!additionalData && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-            <Chart data={data} isDesktop={isDesktop} />
+            <Chart
+              additionalData={additionalData}
+              isDesktop={isDesktop}
+              mainData={mainData}
+            />
           </div>
         )}
       </div>
+      <Legend
+        bookType={bookType}
+        isDark={isDark}
+        longValues={[
+          additionalData?.sentimentThresholdMin,
+          additionalData?.sentimentThresholdMax,
+        ]}
+        shortValues={[
+          additionalData?.sentimentThresholdMin,
+          additionalData?.sentimentThresholdMax,
+        ]}
+      />
     </>
   );
 };

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

@@ -1,6 +1,10 @@
 import chroma from 'chroma-js';
 
-import { CHART_CONFIG, CHART_CONFIG_CALCULATED } from '../../constants';
+import {
+  BUCKET_CONFIG,
+  CHART_CONFIG,
+  CHART_CONFIG_CALCULATED,
+} from '../../constants';
 import type { Bucket, GetOptionType, TooltipParam } from './types';
 import {
   formatXAxisLabel,
@@ -13,21 +17,30 @@ import { getChartStyles } from './utils/getChartStyles';
 import { getGridLines } from './utils/getGridLines';
 
 // @ts-expect-error
-export const getOption: GetOptionType = (
-  {
-    xAxisData,
-    candlesSeriesData,
-    orderPositionBooks,
+export const getOption: GetOptionType = ({
+  mainData: {
+    dates,
+    candlesOpen,
+    candlesClose,
+    candlesLow,
+    candlesHigh,
+    bookPrices,
+    bookIndexes,
+    sentimentShorts,
+    sentimentLongs,
+  },
+  additionalData: {
     bucketWidth,
     buckets,
-    precision,
+    displayPrecision,
     bookType,
-    sentiments,
+    sentimentThresholdMin,
+    sentimentThresholdMax,
   },
   isDark,
   isDesktop,
-  labelCallback
-) => {
+  labelCallback,
+}) => {
   let selectedPrice: number;
   const {
     sentimentLongColor,
@@ -39,9 +52,9 @@ export const getOption: GetOptionType = (
     sentimentLabelColor,
   } = getChartStyles(isDark);
 
-  const visibleXAxisData = xAxisData.slice(
-    (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
-    (xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
+  const visibleXAxisData = dates.slice(
+    (dates.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
+    (dates.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
   );
 
   const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
@@ -50,7 +63,7 @@ export const getOption: GetOptionType = (
   );
 
   const labelsData = getLabelData({
-    xAxisData,
+    dates,
     isGreaterThanTwoWeeks,
   });
 
@@ -96,7 +109,7 @@ export const getOption: GetOptionType = (
           formatter: (params) => {
             if (params.axisDimension === 'y' && params.axisIndex === 0) {
               selectedPrice = Number(params.value);
-              return ` ${Number(params.value).toFixed(precision)} `;
+              return ` ${Number(params.value).toFixed(displayPrecision)} `;
             }
 
             return null;
@@ -111,7 +124,6 @@ export const getOption: GetOptionType = (
           bucketWidth,
           selectedPrice,
           labelCallback,
-          precision,
           bookType,
         }),
     },
@@ -123,7 +135,6 @@ export const getOption: GetOptionType = (
           fontSize: 0,
         },
         id: 'main-xAxis',
-        data: xAxisData,
         splitNumber: 1,
         axisTick: {
           show: false,
@@ -138,7 +149,7 @@ export const getOption: GetOptionType = (
         type: 'category',
         gridIndex: 1,
         show: false,
-        data: xAxisData,
+        data: dates,
         splitNumber: 1,
         axisTick: {
           show: false,
@@ -153,15 +164,16 @@ export const getOption: GetOptionType = (
         type: 'value',
         gridIndex: 0,
         position: 'right',
-        min: (val) => val.min - bucketWidth * 2,
-        max: (val) => val.max + bucketWidth * 2,
+        min: (val) =>
+          val.min - bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
+        max: (val) =>
+          val.max + bucketWidth * BUCKET_CONFIG.PRICE_MARGIN_MULTIPLIER,
         axisLine: { show: false },
         axisTick: { show: false },
         axisLabel: {
           showMaxLabel: false,
           showMinLabel: false,
-          margin: isDesktop ? 4 : 2,
-          formatter: (value: number) => value.toFixed(precision - 1),
+          formatter: (value: number) => value.toFixed(displayPrecision - 1),
         },
       },
       {
@@ -239,6 +251,19 @@ export const getOption: GetOptionType = (
         },
       ],
     },
+    dataset: {
+      source: {
+        dates,
+        candlesOpen,
+        candlesClose,
+        candlesLow,
+        candlesHigh,
+        bookPrices,
+        bookIndexes,
+        sentimentShorts,
+        sentimentLongs,
+      },
+    },
     series: [
       {
         type: 'candlestick',
@@ -246,7 +271,10 @@ export const getOption: GetOptionType = (
         gridIndex: 0,
         xAxisIndex: 0,
         yAxisIndex: 0,
-        data: candlesSeriesData,
+        encode: {
+          x: 'dates',
+          y: ['open', 'close', 'low', 'high'],
+        },
         itemStyle: {
           color: chroma(candleShortColor).desaturate().css(),
           color0: chroma(candleLongColor).desaturate().css(),
@@ -274,9 +302,19 @@ export const getOption: GetOptionType = (
         yAxisIndex: 0,
         silent: true,
         clip: true,
+        encode: {
+          x: 'dates',
+          y: 'bookPrices',
+        },
+        dimensions: ['dates', 'bookPrices', 'bookIndexes'],
         renderItem: (_params, api) => {
           const xVal = api.value(0);
           const bucketIndex = api.value(2) as number;
+
+          if (!bucketIndex) {
+            return null;
+          }
+
           const metaValues = buckets[bucketIndex];
 
           const [rectWidth, rectHeight] = api.size!([
@@ -296,7 +334,12 @@ export const getOption: GetOptionType = (
                 height: rectHeight,
               },
               style: {
-                fill: getRectColor(sentiment, isDark),
+                fill: getRectColor(
+                  sentiment,
+                  isDark,
+                  sentimentThresholdMin,
+                  sentimentThresholdMax
+                ),
               },
               silent: true,
               emphasisDisabled: true,
@@ -310,7 +353,6 @@ export const getOption: GetOptionType = (
             emphasisDisabled: true,
           };
         },
-        data: orderPositionBooks,
       },
       {
         type: 'line',
@@ -318,7 +360,6 @@ export const getOption: GetOptionType = (
         id: 'sentiment',
         xAxisIndex: 1,
         yAxisIndex: 1,
-        data: sentiments,
         showSymbol: false,
         symbol: 'none',
         lineStyle: {
@@ -330,11 +371,14 @@ export const getOption: GetOptionType = (
           opacity: sentimentAreaOpacity,
         },
         emphasis: {
-          areaStyle: {
-            opacity: 0,
-          },
+          disabled: true,
         },
         stack: 'sentiment',
+        dimensions: ['dates', 'sentimentShorts', 'sentimentLongs'],
+        encode: {
+          x: 'dates',
+          y: 'sentimentShorts',
+        },
       },
       {
         type: 'line',
@@ -342,7 +386,6 @@ export const getOption: GetOptionType = (
         id: 'sentiment-long',
         xAxisIndex: 1,
         yAxisIndex: 1,
-        data: sentiments.map((sentiment) => [sentiment[0], sentiment[2]]),
         symbol: 'none',
         lineStyle: {
           color: 'transparent',
@@ -359,6 +402,11 @@ export const getOption: GetOptionType = (
         tooltip: {
           show: false,
         },
+        dimensions: ['dates', 'sentimentLongs'],
+        encode: {
+          x: 'dates',
+          y: 'sentimentLongs',
+        },
       },
     ],
     grid: [

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;
 }
 

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

@@ -16,9 +16,7 @@ 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,
@@ -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: 3,
+        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 { sentimentLongs, sentimentShorts, hasValidSentiments } = useMemo(
+    () => processSentiments(sentimentsData, dates),
+    [sentimentsData, dates]
   );
 
-  const buckets = useMemo(
-    () => processBuckets(orderPositionData, targetBucketWidth),
-    [orderPositionData, targetBucketWidth]
-  );
-
-  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,
   };