@oanda/labs-crowd-view-widget 1.0.35 → 1.0.37

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

@@ -1,10 +1,10 @@
-import type { BaseChartRef } from '@oanda/labs-widget-common';
 import {
   BaseChart,
   getChartTheme,
   Theme,
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
+import type { EChartsType } from 'echarts';
 import { BarChart, CandlestickChart, CustomChart } from 'echarts/charts';
 import {
   DataZoomInsideComponent,
@@ -15,10 +15,10 @@ import {
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
-import { CHART_HEIGHT, MAX_LABELS_COUNT } from './constants';
-import { getDesktopOption, getOption } from './getOption';
+import { CHART_HEIGHT } from './constants';
+import { getOption } from './getOption';
 import type { ChartProps } from './types';
 import { getLabelData, isDifferenceGreaterThanTwoWeeks } from './utils';
 
@@ -39,77 +39,33 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 const Chart = ({ data }: ChartProps) => {
   const { isDark } = useLayoutProvider();
-  const echartRef = useRef<BaseChartRef | null>(null);
 
-  useEffect(() => {
-    if (echartRef.current) {
-      const echartInstance = echartRef.current.getEchartsInstance();
-
-      echartInstance.setOption(getDesktopOption({ isDark }));
-
-      echartInstance.off('datazoom');
-      echartInstance.on('datazoom', () => {
-        const {
-          dataZoom,
-          // @ts-ignore
-          title: { text },
-        } = echartInstance.getOption();
-
-        const { start, end } = (
-          dataZoom as { start: number; end: number }[]
-        )[0];
-        const prevInterval = Number((text as string).split(',')[0]);
-        const prevIsGreaterThanTwoWeeks = Boolean(
-          Number((text as string).split(',')[1])
-        );
-
-        const visibleItemsCount = Math.round(
-          (data.xAxisData.length * (end - start)) / 100
-        );
-
-        const interval =
-          visibleItemsCount > MAX_LABELS_COUNT
-            ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)
-            : 0;
-
-        if (interval !== prevInterval) {
-          echartInstance.setOption({
-            xAxis: {
-              axisLabel: {
-                interval,
-              },
-            },
-          });
-        }
+  return (
+    <BaseChart
+      chartHeight={CHART_HEIGHT}
+      echarts={echarts}
+      isDark={isDark}
+      lazyUpdate={true}
+      option={getOption(data, isDark)}
+      onEvents={{
+        datazoom: (_params: unknown, instance: EChartsType) => {
+          const { dataZoom } = instance.getOption();
 
-        const visibleXAxisData = data.xAxisData.slice(
-          (data.xAxisData.length * start) / 100,
-          (data.xAxisData.length * end) / 100
-        );
+          const { startValue, endValue } = (
+            dataZoom as { startValue: number; endValue: number }[]
+          )[0];
 
-        const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
-          visibleXAxisData[0],
-          visibleXAxisData[visibleXAxisData.length - 1]
-        );
+          const isGreaterThanTwoWeeks = isDifferenceGreaterThanTwoWeeks(
+            data.xAxisData[startValue],
+            data.xAxisData[endValue]
+          );
 
-        if (isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks) {
           const labelsData = getLabelData({
             xAxisData: data.xAxisData,
             isGreaterThanTwoWeeks,
           });
 
-          echartInstance.setOption({
-            series: [
-              {
-                id: 'candlestick',
-                markPoint: {
-                  data: labelsData,
-                },
-              },
-            ],
-          });
-
-          echartInstance.setOption({
+          instance.setOption({
             xAxis: {
               axisLabel: {
                 formatter: (value: string) => {
@@ -125,31 +81,17 @@ const Chart = ({ data }: ChartProps) => {
                 },
               },
             },
+            series: [
+              {
+                id: 'candlestick',
+                markPoint: {
+                  data: labelsData,
+                },
+              },
+            ],
           });
-        }
-
-        if (
-          interval !== prevInterval ||
-          isGreaterThanTwoWeeks !== prevIsGreaterThanTwoWeeks
-        ) {
-          echartInstance.setOption({
-            title: {
-              text: `${interval},${isGreaterThanTwoWeeks ? 1 : 0}`,
-            },
-          });
-        }
-      });
-    }
-  }, [echartRef, isDark, data]);
-
-  return (
-    <BaseChart
-      ref={echartRef}
-      chartHeight={CHART_HEIGHT}
-      echarts={echarts}
-      isDark={isDark}
-      lazyUpdate={true}
-      option={getOption(data)}
+        },
+      }}
     />
   );
 };

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

@@ -1,8 +1,3 @@
-import { useQuery } from '@apollo/client';
-import type {
-  GetOrderPositionBooksQuery,
-  GetOrderPositionBooksQueryVariables,
-} from '@oanda/labs-order-book-widget/src/gql/types/graphql';
 import {
   ChartError,
   Size,
@@ -13,7 +8,6 @@ import {
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
 
-import { getOrderPositionBooks } from '../../../gql/getOrderPositionBooks';
 import { Chart } from './Chart';
 import type { ChartWithDataProps } from './types';
 import { transformDataForChart } from './utils';
@@ -26,24 +20,13 @@ const ChartWithData = ({
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const { loading, data, error } = useQuery<
-    GetOrderPositionBooksQuery,
-    GetOrderPositionBooksQueryVariables
-  >(getOrderPositionBooks, {
-    variables: {
-      instrument,
-      bookType,
-      recentHours: 1,
-    },
-    fetchPolicy: 'network-only',
-  });
-
-  const isError = !!error;
+  const isError = false;
+  const loading = false;
 
   const transformedData = useMemo(() => {
-    if (!data) return undefined;
-    return transformDataForChart({ data, granularity });
-  }, [data, granularity]);
+    return transformDataForChart({ granularity });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instrument, granularity, bookType]);
 
   return (
     <>

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

@@ -10,70 +10,26 @@ import {
   CHART_WIDTH,
   INITIAL_END_ZOOM,
   INITIAL_START_ZOOM,
-  MAX_LABELS_COUNT,
   X_LABEL_SIZE,
   Y_LABEL_SIZE_DESKTOP,
 } from './constants';
-import type { GetOptionType, GetResponsiveOptionsProps } from './types';
+import type { GetOptionType } from './types';
 import {
   getLabelData,
   getRectColor,
   isDifferenceGreaterThanTwoWeeks,
 } from './utils';
 
-export const getDesktopOption = ({ isDark }: GetResponsiveOptionsProps) => {
-  const desktopGridLines = getGridLines({
-    isDark,
-    chartWidth: CHART_WIDTH,
-    chartHeight: CHART_HEIGHT,
-    xLabelsSize: X_LABEL_SIZE,
-    yLabelSize: Y_LABEL_SIZE_DESKTOP,
-    bottomLeftBox: false,
-  });
-
-  return {
-    yAxis: {
-      nameTextStyle: {
-        align: 'left',
-        padding: [0, 0, 0, 8],
-      },
-      axisLabel: {
-        margin: 8,
-      },
-    },
-    grid: [
-      {
-        name: 'main-grid',
-        top: '0px',
-        left: '0px',
-        right: `${Y_LABEL_SIZE_DESKTOP}px`,
-        bottom: `${X_LABEL_SIZE}px`,
-      },
-    ],
-    graphic: [
-      ...desktopGridLines,
-      {
-        ...getLineCommons(isDark),
-        top: 0,
-        right: 0,
-        shape: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 0,
-        },
-      },
-    ],
-  };
-};
-
-// @ts-ignore
-export const getOption: GetOptionType = ({
-  xAxisData,
-  ordersPositionsChartData,
-  ordersPositionsBucketWidth,
-  candlesSeriesData,
-}) => {
+// @ts-expect-error
+export const getOption: GetOptionType = (
+  {
+    xAxisData,
+    ordersPositionsChartData,
+    ordersPositionsBucketWidth,
+    candlesSeriesData,
+  },
+  isDark
+) => {
   const visibleXAxisData = xAxisData.slice(
     (xAxisData.length * INITIAL_START_ZOOM) / 100,
     (xAxisData.length * INITIAL_END_ZOOM) / 100
@@ -83,25 +39,22 @@ export const getOption: GetOptionType = ({
     visibleXAxisData[0],
     visibleXAxisData[visibleXAxisData.length - 1]
   );
+
   const labelsData = getLabelData({
     xAxisData,
     isGreaterThanTwoWeeks,
   });
 
-  const visibleItemsCount = Math.round(
-    (xAxisData.length * (INITIAL_END_ZOOM - INITIAL_START_ZOOM)) / 100
-  );
-
-  const initialInterval =
-    visibleItemsCount > MAX_LABELS_COUNT
-      ? Math.floor(visibleItemsCount / MAX_LABELS_COUNT)
-      : 0;
+  const gridLines = getGridLines({
+    isDark,
+    chartWidth: CHART_WIDTH,
+    chartHeight: CHART_HEIGHT,
+    xLabelsSize: X_LABEL_SIZE,
+    yLabelSize: Y_LABEL_SIZE_DESKTOP,
+    bottomLeftBox: false,
+  });
 
   return {
-    title: {
-      show: false,
-      text: `${initialInterval},${isGreaterThanTwoWeeks}`,
-    },
     animation: false,
     dataZoom: [
       {
@@ -114,7 +67,7 @@ export const getOption: GetOptionType = ({
     tooltip: {
       trigger: 'axis',
       formatter: (val) => {
-        // @ts-ignore
+        // @ts-expect-error
         const timestamp = val[0].axisValue as string;
 
         return `${new Date(timestamp).toLocaleTimeString(undefined, {
@@ -137,9 +90,8 @@ export const getOption: GetOptionType = ({
       axisLabel: {
         padding: [8, 16, 8, 16],
         margin: 0,
-        interval: initialInterval,
         formatter: (value) => {
-          const date = new Date(value);
+          const date = new Date(value as string);
           return isGreaterThanTwoWeeks
             ? `${date.toLocaleTimeString(undefined, {
                 hour: '2-digit',
@@ -221,5 +173,28 @@ export const getOption: GetOptionType = ({
         data: ordersPositionsChartData,
       },
     ],
+    grid: [
+      {
+        name: 'main-grid',
+        top: '0px',
+        left: '0px',
+        right: `${Y_LABEL_SIZE_DESKTOP}px`,
+        bottom: `${X_LABEL_SIZE}px`,
+      },
+    ],
+    graphic: [
+      ...gridLines,
+      {
+        ...getLineCommons(isDark as boolean),
+        top: 0,
+        right: 0,
+        shape: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 0,
+        },
+      },
+    ],
   };
 };

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

@@ -0,0 +1,66 @@
+export interface OrderPositionData {
+  shortCountPercent: number;
+  longCountPercent: number;
+  price: number;
+}
+
+interface GetOrderPositionDataMockParams {
+  min?: number;
+  max?: number;
+  bucketWidth?: number;
+  baseValue: number;
+  crossoverValue?: number;
+}
+
+export const getOrderPositionDataMock = ({
+  min = 1.3,
+  max = 2.1,
+  bucketWidth = 0.005,
+  baseValue,
+  crossoverValue = baseValue,
+}: GetOrderPositionDataMockParams): OrderPositionData[] => {
+  const results: OrderPositionData[] = [];
+
+  const maxDistance = Math.max(baseValue - min, max - baseValue);
+
+  for (
+    let currentPrice = min;
+    currentPrice < max;
+    currentPrice += bucketWidth
+  ) {
+    const distance = Math.abs(currentPrice - baseValue);
+
+    const proximityFactor = 1 - distance / maxDistance;
+    const strongProximityFactor = Math.pow(proximityFactor, 2);
+
+    let shortCountPercent: number;
+    let longCountPercent: number;
+
+    if (currentPrice === baseValue) {
+      shortCountPercent = Math.random() * 0.5;
+      longCountPercent = Math.random() * 0.5;
+    } else {
+      const maxDifference = 0.5;
+      const targetDifference =
+        Math.random() * maxDifference * strongProximityFactor;
+
+      const baseRandom = Math.random() * (0.5 - targetDifference);
+
+      if (currentPrice < crossoverValue) {
+        shortCountPercent = baseRandom;
+        longCountPercent = baseRandom + targetDifference;
+      } else {
+        longCountPercent = baseRandom;
+        shortCountPercent = baseRandom + targetDifference;
+      }
+    }
+
+    results.push({
+      shortCountPercent: Math.round(shortCountPercent * 10000) / 10000,
+      longCountPercent: Math.round(longCountPercent * 10000) / 10000,
+      price: currentPrice,
+    });
+  }
+
+  return results;
+};

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

@@ -1,4 +1,3 @@
-import type { GetOrderPositionBooksQuery } from '@oanda/labs-order-book-widget/src/gql/types/graphql';
 import type { EChartsOption } from 'echarts';
 
 import type { BookType } from '../../../gql/types/graphql';
@@ -18,10 +17,10 @@ interface ChartOptionsProps {
   candlesSeriesData: [number, number, number, number][];
 }
 
-export type GetOptionType = (props: ChartOptionsProps) => EChartsOption;
-export interface GetResponsiveOptionsProps {
-  isDark: boolean;
-}
+export type GetOptionType = (
+  props: ChartOptionsProps,
+  isDark: boolean
+) => EChartsOption;
 
 export interface ChartProps {
   data: ChartOptionsProps;
@@ -34,7 +33,6 @@ export interface ChartWithDataProps {
 }
 
 interface TransformDataForChartTypeProps {
-  data: GetOrderPositionBooksQuery;
   granularity: GranularityId;
 }
 

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

@@ -1,7 +1,7 @@
-import type { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
 import { colorMap } from '../../config';
 import { TimeSpanId } from '../../types';
 import { CHART_HEIGHT } from './constants';
+import { getOrderPositionDataMock } from './getOrderPositionDataMock';
 import { getPriceCandlesMock } from './getPriceCandlesMock';
 import type { GetLabelsDataProps, TransformDataForChartType } from './types';
 
@@ -70,17 +70,14 @@ const temporaryGranularityTimeSpanMap: Record<GranularityId, TimeSpanId> = {
   [GranularityId.DAY_1]: TimeSpanId.MONTH_6,
 };
 
-const mockOrderPositionDataForHistoricalData = (
-  data: GetOrderPositionBooksQuery,
-  granularityId: GranularityId
-) => {
+const mockXAxisData = (granularityId: GranularityId) => {
   const granularity = granularityInMilliseconds[granularityId];
   const timeSpan =
     timeSpansInMilliseconds[temporaryGranularityTimeSpanMap[granularityId]];
 
-  const currentTime = data.orderPositionBooks[0]!.time;
+  const currentTime = new Date();
 
-  const startDate = new Date(currentTime as string);
+  const startDate = currentTime;
   const totalSteps = timeSpan / granularity;
 
   const orderPositionDataForHistorical = new Array(totalSteps)
@@ -88,11 +85,7 @@ const mockOrderPositionDataForHistoricalData = (
     .map((_, index) => {
       const newDate = new Date(startDate.getTime() - index * granularity);
 
-      return {
-        time: `${newDate.toISOString().slice(0, 19)}Z`,
-        buckets: data.orderPositionBooks[0]!.buckets,
-        bucketWidth: data.orderPositionBooks[0]!.bucketWidth,
-      };
+      return `${newDate.toISOString().slice(0, 19)}Z`;
     })
     .reverse();
 
@@ -151,13 +144,25 @@ export const isDifferenceGreaterThanTwoWeeks = (
 };
 
 export const transformDataForChart: TransformDataForChartType = ({
-  data,
   granularity,
 }) => {
-  const mockedData = mockOrderPositionDataForHistoricalData(data, granularity);
+  const bucketWidth = 0.005;
+  const mockedXAxisData = mockXAxisData(granularity);
+  const mockedCandles = getPriceCandlesMock(mockedXAxisData.length);
+
+  const orderPositionData = mockedCandles.map((item, index) => {
+    return {
+      time: mockedXAxisData[index],
+      buckets: getOrderPositionDataMock({
+        baseValue: item.high,
+        bucketWidth,
+        crossoverValue: item.high + (Math.random() - 0.5) * 0.3,
+      }),
+      bucketWidth: 0.005,
+    };
+  });
 
-  const xAxisData = mockedData.map(({ time }) => time);
-  const ordersPositionsChartData = mockedData
+  const ordersPositionsChartData = orderPositionData
     .flatMap(
       ({ buckets, time }) =>
         buckets.map((bucket) => [
@@ -168,8 +173,6 @@ export const transformDataForChart: TransformDataForChartType = ({
     )
     .filter((item) => Math.abs(item[2]) > 0.15);
 
-  const mockedCandles = getPriceCandlesMock(xAxisData.length);
-
   const candlesSeriesData: [number, number, number, number][] =
     mockedCandles.map(({ close, open, low, high }) => [
       +close.toFixed(5),
@@ -179,9 +182,9 @@ export const transformDataForChart: TransformDataForChartType = ({
     ]);
 
   return {
-    xAxisData,
+    xAxisData: mockedXAxisData,
     ordersPositionsChartData,
-    ordersPositionsBucketWidth: mockedData[0]!.bucketWidth,
+    ordersPositionsBucketWidth: bucketWidth,
     candlesSeriesData,
     granularity,
   };