@oanda/labs-crowd-view-widget 1.0.20 → 1.0.22

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

@@ -0,0 +1,59 @@
+import type { BaseChartRef } from '@oanda/labs-widget-common';
+import {
+  BaseChart,
+  getChartTheme,
+  Theme,
+  useLayoutProvider,
+} from '@oanda/labs-widget-common';
+import { BarChart, CustomChart } from 'echarts/charts';
+import {
+  DataZoomInsideComponent,
+  GraphicComponent,
+  GridSimpleComponent,
+  TooltipComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import React, { useEffect, useRef } from 'react';
+
+import { CHART_HEIGHT } from './constants';
+import { getDesktopOption, getOption } from './getOption';
+import type { ChartProps } from './types';
+
+echarts.use([
+  GridSimpleComponent,
+  GraphicComponent,
+  BarChart,
+  CanvasRenderer,
+  DataZoomInsideComponent,
+  CustomChart,
+  TooltipComponent,
+]);
+
+echarts.registerTheme('dark_theme', getChartTheme(Theme.Dark));
+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 }));
+    }
+  }, [echartRef, isDark]);
+
+  return (
+    <BaseChart
+      ref={echartRef}
+      chartHeight={CHART_HEIGHT}
+      echarts={echarts}
+      isDark={isDark}
+      option={getOption(data)}
+    />
+  );
+};
+
+export { Chart };

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

@@ -0,0 +1,88 @@
+import { useQuery } from '@apollo/client';
+import type {
+  GetOrderPositionBooksQuery,
+  GetOrderPositionBooksQueryVariables,
+} from '@oanda/labs-order-book-widget/src/gql/types/graphql';
+import {
+  ChartError,
+  Size,
+  Spinner,
+  SpinnerSize,
+  useLayoutProvider,
+} from '@oanda/labs-widget-common';
+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';
+
+const ChartWithData = ({ instrument, bookType }: ChartWithDataProps) => {
+  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 transformedData = useMemo(() => {
+    if (!data) return undefined;
+    return transformDataForChart(data);
+  }, [data]);
+
+  return (
+    <>
+      <div
+        className={classnames('lw-relative lw-w-full', {
+          'lw-h-[450px]': isDesktop,
+          'lw-h-[390px]': !isDesktop,
+        })}
+      >
+        {isError && (
+          <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',
+              {
+                'lw-h-full': isDesktop,
+                'lw-h-[calc(100%-40px)]': !isDesktop,
+              }
+            )}
+          >
+            <ChartError />
+          </div>
+        )}
+        {loading && (
+          <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',
+              {
+                'lw-h-full': isDesktop,
+                'lw-h-[calc(100%-40px)]': !isDesktop,
+              }
+            )}
+          >
+            <Spinner size={SpinnerSize.lg} />
+          </div>
+        )}
+        {!isError && transformedData && (
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
+            <Chart data={transformedData} />
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export { ChartWithData };

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

@@ -0,0 +1,4 @@
+export const X_LABEL_SIZE = 40;
+export const Y_LABEL_SIZE_DESKTOP = 60;
+export const CHART_WIDTH = 9999;
+export const CHART_HEIGHT = 425;

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

@@ -0,0 +1,159 @@
+import { getGridLines, getLineCommons } from '@oanda/labs-widget-common';
+import * as echarts from 'echarts/core';
+
+import {
+  CHART_HEIGHT,
+  CHART_WIDTH,
+  X_LABEL_SIZE,
+  Y_LABEL_SIZE_DESKTOP,
+} from './constants';
+import type { GetOptionType, GetResponsiveOptionsProps } from './types';
+import { getRectColor } 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,
+        },
+      },
+    ],
+  };
+};
+
+export const getOption: GetOptionType = ({
+  xAxisData,
+  ordersPositionsChartData,
+  ordersPositionsBucketWidth,
+}) => {
+  return {
+    animation: false,
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: 0,
+        start: 80,
+        end: 100,
+      },
+      {
+        type: 'inside',
+        yAxisIndex: 0,
+        startValue: 1.5,
+        endValue: 1.7,
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      formatter: '{c}',
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        padding: [8, 16, 8, 16],
+        margin: 0,
+        formatter: (value) =>
+          `${new Date(value).toLocaleTimeString(undefined, {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}`,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      position: 'right',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        showMaxLabel: false,
+        showMinLabel: false,
+      },
+    },
+    series: [
+      {
+        type: 'custom',
+        name: 'heatmap',
+        silent: true,
+        renderItem: (params, api) => {
+          const { coordSys } = params;
+
+          const xVal = api.value(0);
+          const yVal = api.value(1);
+          const sentiment = api.value(2) as number;
+          const start = api.coord([xVal, yVal]);
+
+          const [rectWidth, rectHeight] = api.size!([
+            0,
+            ordersPositionsBucketWidth,
+          ]) 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,
+            }
+          );
+        },
+        data: ordersPositionsChartData,
+      },
+    ],
+  };
+};

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

@@ -0,0 +1,2 @@
+export * from './Chart';
+export * from './ChartWithData';

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

@@ -0,0 +1,36 @@
+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';
+
+interface ChartOptionsProps {
+  xAxisData: string[];
+  ordersPositionsChartData: [
+    // timestamp
+    string,
+    // price
+    number,
+    // orders-positions sentiment
+    number,
+  ][];
+  ordersPositionsBucketWidth: number;
+}
+
+export type GetOptionType = (props: ChartOptionsProps) => EChartsOption;
+
+export interface GetResponsiveOptionsProps {
+  isDark: boolean;
+}
+
+export interface ChartProps {
+  data: ChartOptionsProps;
+}
+
+export interface ChartWithDataProps {
+  bookType: BookType;
+  instrument: string;
+}
+
+export type TransformDataForChartType = (
+  props: GetOrderPositionBooksQuery
+) => ChartOptionsProps;

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

@@ -0,0 +1,77 @@
+import type { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
+import { colorMap } from '../../config';
+import type { TransformDataForChartType } from './types';
+
+export const getRectColor = (sentiment: number) => {
+  const colors = sentiment < 0 ? colorMap.short : colorMap.long;
+  const absSentiment = Math.abs(sentiment);
+
+  if (absSentiment < 0.15) {
+    return colors[3];
+  }
+
+  if (absSentiment < 0.25) {
+    return colors[2];
+  }
+
+  if (absSentiment < 0.4) {
+    return colors[1];
+  }
+
+  if (absSentiment >= 0.4) {
+    return colors[0];
+  }
+
+  return 'transparent';
+};
+
+const mockOrderPositionDataForHistoricalData = (
+  data: GetOrderPositionBooksQuery
+) => {
+  const oneMinuteInMilliseconds = 60000;
+  const granularity = oneMinuteInMilliseconds * 5; // 5min
+  const timeSpan = oneMinuteInMilliseconds * 60 * 24; // 24h
+  // const timeSpan =  oneMinuteInMilliseconds * 60 * 6 // 6h
+  // const timeSpan =  oneMinuteInMilliseconds * 15 //15min
+
+  const currentTime = data.orderPositionBooks[0]!.time;
+
+  const startDate = new Date(currentTime as string);
+  const totalSteps = timeSpan / granularity;
+
+  const orderPositionDataForHistorical = new Array(totalSteps)
+    .fill(null)
+    .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 orderPositionDataForHistorical;
+};
+
+export const transformDataForChart: TransformDataForChartType = (data) => {
+  const mockedData = mockOrderPositionDataForHistoricalData(data);
+
+  const xAxisData = mockedData.map(({ time }) => time);
+  const ordersPositionsChartData = mockedData
+    .flatMap(
+      ({ buckets, time }) =>
+        buckets.map((bucket) => [
+          time,
+          bucket!.price,
+          bucket!.longCountPercent - bucket!.shortCountPercent,
+        ]) as [string, number, number][]
+    )
+    .filter((item) => Math.abs(item[2]) > 0.15);
+
+  return {
+    xAxisData,
+    ordersPositionsChartData,
+    ordersPositionsBucketWidth: mockedData[0]!.bucketWidth,
+  };
+};

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

@@ -1,6 +1,8 @@
 import React from 'react';
 
-type LegendType = 'long' | 'short';
+import { colorMap } from '../../config';
+
+export type LegendType = 'long' | 'short';
 
 interface LegendBarProps {
   values: number[];
@@ -8,11 +10,6 @@ interface LegendBarProps {
   label: string;
 }
 
-const colorMap: Record<LegendType, string[]> = {
-  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],
-  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325'],
-};
-
 export const LegendBar = ({ values, type, label }: LegendBarProps) => {
   const colors = colorMap[type];
 
@@ -33,10 +30,7 @@ export const LegendBar = ({ values, type, label }: LegendBarProps) => {
 
       <div className="lw-flex lw-w-full">
         {values.map((value) => (
-          <div
-            key={`${value}_${type}`}
-            className="lw-flex lw-w-1/4 lw-justify-center"
-          >
+          <div key={`${value}_${type}`} className="lw-flex lw-w-1/4">
             <span className="lw-whitespace-nowrap lw-font-sans lw-text-xs lw-text-text-primary">
               {value.toFixed(2)}% {label}
             </span>

package/src/CrowdViewWidget/components/index.ts

@@ -1 +1,2 @@
+export * from './Chart';
 export * from './Legend';

package/src/CrowdViewWidget/config.ts

@@ -1,4 +1,5 @@
 import { BookType } from '../gql/types/graphql';
+import type { LegendType } from './components/Legend/LegendBar';
 import { GranularityId, InstrumentId } from './types';
 
 const navigationConfig = [
@@ -128,3 +129,7 @@ export {
   instrumentSelectConfigOC,
   navigationConfig,
 };
+export const colorMap: Record<LegendType, string[]> = {
+  long: ['#00857333', '#00715F99', '#00857399', '#008573CC'],
+  short: ['#DA632566', '#DA632599', '#DA6325CC', '#DA6325'],
+};

package/src/CrowdViewWidget/types.ts

@@ -34,3 +34,14 @@ export enum GranularityId {
   H1 = '1H',
   D1 = '1D',
 }
+
+export interface OrdersPositionsData {
+  price: number;
+  buckets: {
+    price: number;
+    longCountPercent: number;
+    shortCountPercent: number;
+  }[];
+  bucketWidth: number;
+  timestamp: number;
+}

package/src/gql/getOrderPositionBooks.ts

@@ -0,0 +1,26 @@
+import { gql } from '@apollo/client';
+
+const getOrderPositionBooks = gql`
+  query GetOrderPositionBooks(
+    $instrument: String!
+    $bookType: BookType!
+    $recentHours: Int
+  ) {
+    orderPositionBooks(
+      instrument: $instrument
+      bookType: $bookType
+      recentHours: $recentHours
+    ) {
+      bucketWidth
+      price
+      time
+      buckets {
+        price
+        longCountPercent
+        shortCountPercent
+      }
+    }
+  }
+`;
+
+export { getOrderPositionBooks };

package/src/gql/types/gql.ts

@@ -13,6 +13,8 @@ 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    $recentHours: Int\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n':
+    types.GetOrderPositionBooksDocument,
   '\n  query validateInstruments($instruments: [String]!, $division: Division) {\n    mapInstrumentNames(instruments: $instruments, division: $division) {\n      name\n      displayName\n    }\n  }\n':
     types.ValidateInstrumentsDocument,
 };
@@ -31,6 +33,12 @@ const documents = {
  */
 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    $recentHours: Int\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n'
+): (typeof documents)['\n  query GetOrderPositionBooks(\n    $instrument: String!\n    $bookType: BookType!\n    $recentHours: Int\n  ) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */