@oanda/labs-crowd-view-widget 1.0.43 → 1.0.44

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

@@ -5,7 +5,12 @@ import {
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import type { EChartsType } from 'echarts';
-import { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';
+import {
+  BarChart,
+  CandlestickChart,
+  CustomChart,
+  ScatterChart,
+} from 'echarts/charts';
 import {
   DataZoomInsideComponent,
   GraphicComponent,
@@ -17,10 +22,13 @@ import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import React from 'react';
 
-import { CHART_HEIGHT } from './constants';
-import { getOption } from './getOption';
+import { CHART_CONFIG } from '../../constants';
+import { getOption } from './chartOptions';
 import type { ChartProps } from './types';
-import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';
+import {
+  getLabelData,
+  isDifferenceGreaterThanTwoWeeks,
+} from './utils/chartUtils';
 
 echarts.use([
   GridSimpleComponent,
@@ -32,6 +40,7 @@ echarts.use([
   TooltipComponent,
   CandlestickChart,
   MarkPointComponent,
+  ScatterChart,
 ]);
 
 echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
@@ -42,11 +51,12 @@ const Chart = ({ data }: ChartProps) => {
 
   return (
     <BaseChart
-      chartHeight={CHART_HEIGHT}
+      chartHeight={CHART_CONFIG.HEIGHT}
       echarts={echarts}
       isDark={isDark}
       lazyUpdate={true}
       option={getOption(data, isDark)}
+      opts={{ renderer: 'canvas' }}
       onEvents={{
         datazoom: (_params: unknown, instance: EChartsType) => {
           const { dataZoom } = instance.getOption();

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

@@ -6,27 +6,27 @@ import {
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import classnames from 'classnames';
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
-import { transformDataForChart } from './utils';
+import { useCrowdViewData } from './useCrowdViewData';
 
 const ChartWithData = ({
   instrument,
   bookType,
+  division,
   granularity,
 }: ChartWithDataProps) => {
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const isError = false;
-  const loading = false;
-
-  const transformedData = useMemo(() => {
-    return transformDataForChart({ granularity });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [instrument, granularity, bookType]);
+  const { data, loading, error } = useCrowdViewData({
+    instrument,
+    bookType,
+    division,
+    granularity,
+  });
 
   return (
     <>
@@ -36,7 +36,7 @@ const ChartWithData = ({
           'lw-h-[390px]': !isDesktop,
         })}
       >
-        {isError && (
+        {error && (
           <div
             className={classnames(
               'lw-absolute lw-left-0 lw-top-0 lw-flex lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary',
@@ -62,9 +62,9 @@ const ChartWithData = ({
             <Spinner size={SpinnerSize.lg} />
           </div>
         )}
-        {!isError && transformedData && (
+        {!loading && !error && !!data && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
-            <Chart data={transformedData} />
+            <Chart data={data} />
           </div>
         )}
       </div>

package/src/CrowdViewWidget/components/Chart/{getOption.ts → chartOptions.ts}

@@ -3,36 +3,23 @@ import {
   getGridLines,
   getLineCommons,
 } from '@oanda/labs-widget-common';
-import * as echarts from 'echarts/core';
 
-import {
-  CHART_HEIGHT,
-  CHART_WIDTH,
-  INITIAL_END_ZOOM,
-  INITIAL_START_ZOOM,
-  X_LABEL_SIZE,
-  Y_LABEL_SIZE_DESKTOP,
-} from './constants';
+import { CHART_CONFIG } from '../../constants';
 import type { GetOptionType } from './types';
 import {
   getLabelData,
   getRectColor,
   isDifferenceGreaterThanTwoWeeks,
-} from './utils';
+} from './utils/chartUtils';
 
 // @ts-expect-error
 export const getOption: GetOptionType = (
-  {
-    xAxisData,
-    ordersPositionsChartData,
-    ordersPositionsBucketWidth,
-    candlesSeriesData,
-  },
+  { xAxisData, candlesSeriesData, orderPositionBooks, bucketWidth },
   isDark
 ) => {
   const visibleXAxisData = xAxisData.slice(
-    (xAxisData.length * INITIAL_START_ZOOM) / 100,
-    (xAxisData.length * INITIAL_END_ZOOM) / 100
+    (xAxisData.length * CHART_CONFIG.INITIAL_START_ZOOM) / 100,
+    (xAxisData.length * CHART_CONFIG.INITIAL_END_ZOOM) / 100
   );
 
   const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
@@ -47,10 +34,10 @@ export const getOption: GetOptionType = (
 
   const gridLines = getGridLines({
     isDark,
-    chartWidth: CHART_WIDTH,
-    chartHeight: CHART_HEIGHT,
-    xLabelsSize: X_LABEL_SIZE,
-    yLabelSize: Y_LABEL_SIZE_DESKTOP,
+    chartWidth: CHART_CONFIG.WIDTH,
+    chartHeight: CHART_CONFIG.HEIGHT,
+    xLabelsSize: CHART_CONFIG.X_LABEL_SIZE,
+    yLabelSize: CHART_CONFIG.Y_LABEL_SIZE_DESKTOP,
     bottomLeftBox: false,
   });
 
@@ -60,25 +47,14 @@ export const getOption: GetOptionType = (
       {
         type: 'inside',
         xAxisIndex: 0,
-        start: INITIAL_START_ZOOM,
-        end: INITIAL_END_ZOOM,
+        start: CHART_CONFIG.INITIAL_START_ZOOM,
+        end: CHART_CONFIG.INITIAL_END_ZOOM,
       },
     ],
     tooltip: {
       trigger: 'axis',
-      formatter: (val) => {
-        // @ts-expect-error
-        const timestamp = val[0].axisValue as string;
-
-        return `${new Date(timestamp).toLocaleTimeString(undefined, {
-          hour: '2-digit',
-          minute: '2-digit',
-        })}
-      ${new Date(timestamp).toLocaleDateString(undefined, {
-        day: 'numeric',
-        month: 'short',
-      })}
-`;
+      axisPointer: {
+        type: 'cross',
       },
     },
     xAxis: {
@@ -90,6 +66,7 @@ export const getOption: GetOptionType = (
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
+        showMinLabel: false,
         formatter: (value) => {
           const date = new Date(value as string);
           return isGreaterThanTwoWeeks
@@ -106,7 +83,8 @@ export const getOption: GetOptionType = (
     yAxis: {
       type: 'value',
       position: 'right',
-      scale: true,
+      min: (val) => val.min - bucketWidth * 2,
+      max: (val) => val.max + bucketWidth * 2,
       axisLine: { show: false },
       axisTick: { show: false },
       axisLabel: {
@@ -134,43 +112,46 @@ export const getOption: GetOptionType = (
         name: 'heatmap',
         id: 'heatmap',
         silent: true,
-        renderItem: (params, api) => {
-          const { coordSys } = params;
+        clip: true,
+        renderItem: (_params, api) => {
           const xVal = api.value(0);
-          const yVal = api.value(1);
-          const sentiment = api.value(2) as number;
-          const start = api.coord([xVal, yVal]);
+          const metaValues = JSON.parse(api.value(2) as string);
+
           const [rectWidth, rectHeight] = api.size!([
             0,
-            ordersPositionsBucketWidth,
+            bucketWidth,
           ]) as number[];
-          const boundaries = coordSys as unknown as {
-            x: number;
-            y: number;
-            width: number;
-            height: number;
-          };
-          const shape = echarts.graphic.clipRectByRect(
-            {
-              x: start[0] - rectWidth / 2,
-              y: start[1],
-              width: rectWidth,
-              height: rectHeight,
-            },
-            boundaries
-          );
-          return (
-            shape && {
-              type: 'rect',
-              shape,
-              style: {
-                fill: getRectColor(sentiment),
-              },
-              emphasisDisabled: true,
+
+          const items = metaValues.map(
+            ({ price, sentiment }: { price: number; sentiment: number }) => {
+              const start = api.coord([xVal, price]);
+
+              return {
+                type: 'rect',
+                shape: {
+                  x: start[0] - rectWidth / 2,
+                  y: start[1],
+                  width: rectWidth,
+                  height: rectHeight,
+                },
+                style: {
+                  fill: getRectColor(sentiment),
+                  opacity: 0.7,
+                },
+                silent: true,
+                emphasisDisabled: true,
+              };
             }
           );
+
+          return {
+            type: 'group',
+            children: items,
+            silent: true,
+            emphasisDisabled: true,
+          };
         },
-        data: ordersPositionsChartData,
+        data: orderPositionBooks,
       },
     ],
     grid: [
@@ -178,8 +159,8 @@ export const getOption: GetOptionType = (
         name: 'main-grid',
         top: '0px',
         left: '0px',
-        right: `${Y_LABEL_SIZE_DESKTOP}px`,
-        bottom: `${X_LABEL_SIZE}px`,
+        right: `${CHART_CONFIG.Y_LABEL_SIZE_DESKTOP}px`,
+        bottom: `${CHART_CONFIG.X_LABEL_SIZE}px`,
       },
     ],
     graphic: [

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

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

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

@@ -1,45 +1,47 @@
 import type { EChartsOption } from 'echarts';
 
-import type { BookType } from '../../../gql/types/graphql';
-import type { GranularityId } from '../../types';
+import type {
+  BookType,
+  Division,
+  Granularity,
+} from '../../../gql/types/graphql';
 
-interface ChartOptionsProps {
+export interface UseCrowdViewDataProps {
+  instrument: string;
+  bookType: BookType;
+  division: Division;
+  granularity: Granularity;
+}
+
+interface CrowdViewData {
   xAxisData: string[];
-  ordersPositionsChartData: [
-    // timestamp
-    string,
-    // price
-    number,
-    // orders-positions sentiment
-    number,
-  ][];
-  ordersPositionsBucketWidth: number;
   candlesSeriesData: [number, number, number, number][];
+  orderPositionBooks: ([string, number, string] | null)[];
+  bucketWidth: number;
+}
+
+export interface UseCrowdViewDataReturn {
+  data: CrowdViewData | null;
+  loading: boolean;
+  error: boolean;
 }
 
 export type GetOptionType = (
-  props: ChartOptionsProps,
+  props: CrowdViewData,
   isDark: boolean
 ) => EChartsOption;
 
 export interface ChartProps {
-  data: ChartOptionsProps;
+  data: CrowdViewData;
 }
 
 export interface ChartWithDataProps {
   bookType: BookType;
+  division: Division;
   instrument: string;
-  granularity: GranularityId;
-}
-
-interface TransformDataForChartTypeProps {
-  granularity: GranularityId;
+  granularity: Granularity;
 }
 
-export type TransformDataForChartType = (
-  props: TransformDataForChartTypeProps
-) => ChartOptionsProps;
-
 export interface GetLabelsDataProps {
   xAxisData: string[];
   isGreaterThanTwoWeeks: boolean;

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

@@ -0,0 +1,263 @@
+import { useQuery } from '@apollo/client';
+import { useMemo } from 'react';
+
+import { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';
+import { getPriceCandles } from '../../../gql/getPriceCandles';
+import type {
+  GetOrderPositionBooksQuery,
+  GetOrderPositionBooksQueryVariables,
+  GetPriceCandlesQuery,
+  GetPriceCandlesQueryVariables,
+} from '../../../gql/types/graphql';
+import { BookType, DataSource, Division } from '../../../gql/types/graphql';
+import { BOOKS_THRESHOLDS, BUCKET_CONFIG } from '../../constants';
+import type { UseCrowdViewDataProps, UseCrowdViewDataReturn } from './types';
+import { getTimeSpanForGranularity } from './utils/chartUtils';
+
+const processPriceCandles = (
+  priceCandlesData: GetPriceCandlesQuery | undefined
+) => {
+  if (!priceCandlesData?.priceCandles?.candle?.length) {
+    return {
+      minPrice: 0,
+      maxPrice: 0,
+      hasValidCandles: false,
+      candleMap: new Map(),
+      candles: [],
+    };
+  }
+
+  const candles = priceCandlesData.priceCandles.candle;
+  let calculatedMinPrice = Number.MAX_VALUE;
+  let calculatedMaxPrice = Number.MIN_VALUE;
+
+  const candleMap = new Map<
+    string,
+    {
+      point?: string;
+      high?: number;
+      low?: number;
+      open?: number;
+      close?: number;
+    }
+  >();
+
+  candles.forEach((candle) => {
+    if (!candle) return;
+
+    if (candle.high > calculatedMaxPrice) {
+      calculatedMaxPrice = candle.high;
+    }
+    if (candle.low < calculatedMinPrice) {
+      calculatedMinPrice = candle.low;
+    }
+
+    if (candle.point) {
+      candleMap.set(candle.point, candle);
+    }
+  });
+
+  return {
+    minPrice: calculatedMinPrice,
+    maxPrice: calculatedMaxPrice,
+    hasValidCandles: true,
+    candleMap,
+    candles,
+  };
+};
+
+const processOrderPositionBooks = (
+  orderPositionData: GetOrderPositionBooksQuery | undefined,
+  candleMap: Map<
+    string,
+    {
+      point?: string;
+      high?: number;
+      low?: number;
+      open?: number;
+      close?: number;
+    }
+  >
+) => {
+  if (!orderPositionData?.orderPositionBooks?.length) {
+    return [];
+  }
+
+  return orderPositionData.orderPositionBooks
+    .filter((book): book is NonNullable<typeof book> => {
+      return book !== null && book.buckets?.length > 0;
+    })
+    .map((book) => {
+      const filteredBuckets = book.buckets
+        .filter((bucket) => {
+          if (
+            !bucket ||
+            bucket.sentiment === undefined ||
+            bucket.sentiment === null ||
+            bucket.price === undefined
+          ) {
+            return false;
+          }
+          return Math.abs(bucket.sentiment) >= BOOKS_THRESHOLDS.MIN;
+        })
+        .map((bucket) => ({
+          price: bucket!.price!,
+          sentiment: bucket!.sentiment!,
+        }));
+
+      const candle = candleMap.get(book.time);
+      const price = candle?.high ?? null;
+
+      return [book.time, price, JSON.stringify(filteredBuckets)] as [
+        string,
+        number,
+        string,
+      ];
+    });
+};
+
+const validateData = (
+  priceCandlesData: GetPriceCandlesQuery | undefined,
+  orderPositionData: GetOrderPositionBooksQuery | undefined,
+  hasValidCandles: boolean
+): Error | null => {
+  const hasValidPriceData =
+    (priceCandlesData?.priceCandles?.candle?.length ?? 0) >= 1;
+  const hasValidOrderData =
+    (orderPositionData?.orderPositionBooks?.length ?? 0) >= 1;
+
+  if (!hasValidPriceData) {
+    return new Error('Insufficient price candle data');
+  }
+  if (!hasValidOrderData) {
+    return new Error('Insufficient order position data');
+  }
+  if (!hasValidCandles) {
+    return new Error('Invalid candle data');
+  }
+
+  return null;
+};
+
+export const useCrowdViewData = ({
+  instrument,
+  bookType,
+  division,
+  granularity,
+}: UseCrowdViewDataProps): UseCrowdViewDataReturn => {
+  const {
+    loading: priceCandlesLoading,
+    data: priceCandlesData,
+    error: priceCandlesError,
+  } = useQuery<GetPriceCandlesQuery, GetPriceCandlesQueryVariables>(
+    getPriceCandles,
+    {
+      variables: {
+        dataSource: division === Division.Oc ? DataSource.V20 : DataSource.Mt5,
+        division,
+        instrument,
+        granularity,
+        timeSpan: getTimeSpanForGranularity(granularity),
+      },
+      fetchPolicy: 'no-cache',
+    }
+  );
+
+  const priceCandlesProcessed = useMemo(
+    () => processPriceCandles(priceCandlesData),
+    [priceCandlesData]
+  );
+
+  const { minPrice, maxPrice, hasValidCandles, candleMap, candles } =
+    priceCandlesProcessed;
+
+  const maxBookPrice = useMemo(
+    () =>
+      maxPrice +
+      BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
+    [maxPrice]
+  );
+
+  const minBookPrice = useMemo(
+    () =>
+      minPrice -
+      BUCKET_CONFIG.DEFAULT_WIDTH * BUCKET_CONFIG.PRICE_PADDING_MULTIPLIER,
+    [minPrice]
+  );
+
+  const {
+    loading: orderPositionLoading,
+    data: orderPositionData,
+    error: orderPositionError,
+  } = useQuery<GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables>(
+    getOrderPositionBooks,
+    {
+      variables: {
+        instrument,
+        bookType: bookType || BookType.Order,
+        timeSpan: getTimeSpanForGranularity(granularity),
+        granularity,
+        maxBookPrice,
+        minBookPrice,
+      },
+      fetchPolicy: 'no-cache',
+      skip: priceCandlesLoading || !!priceCandlesError,
+    }
+  );
+
+  const loading = priceCandlesLoading || orderPositionLoading;
+
+  const orderPositionBooks = useMemo(
+    () => processOrderPositionBooks(orderPositionData, candleMap),
+    [orderPositionData, candleMap]
+  );
+
+  const error = useMemo((): Error | null => {
+    if (priceCandlesError) {
+      return new Error(`Price candles error: ${priceCandlesError.message}`);
+    }
+    if (orderPositionError) {
+      return new Error(`Order position error: ${orderPositionError.message}`);
+    }
+    if (loading) {
+      return null;
+    }
+    return validateData(priceCandlesData, orderPositionData, hasValidCandles);
+  }, [
+    priceCandlesError,
+    orderPositionError,
+    loading,
+    priceCandlesData,
+    orderPositionData,
+    hasValidCandles,
+  ]);
+
+  const data = useMemo(() => {
+    if (!priceCandlesData || !orderPositionData || 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 {
+      xAxisData,
+      candlesSeriesData,
+      orderPositionBooks,
+      bucketWidth: orderPositionData.orderPositionBooks?.[0]?.bucketWidth || 0,
+    };
+  }, [priceCandlesData, orderPositionData, error, candles, orderPositionBooks]);
+
+  return {
+    data,
+    loading,
+    error: !!error,
+  };
+};