@oanda/labs-order-book-widget 1.0.71 → 1.0.72

package/dist/types/OrderBookWidget/components/Chart/constants.d.ts

@@ -1,6 +1,8 @@
 export declare const INITIAL_BARS = 80;
 export declare const X_LABEL_SIZE = 40;
-export declare const Y_LABEL_SIZE_MOBILE = 35;
+export declare const Y_LABEL_SIZE_MOBILE = 50;
 export declare const Y_LABEL_SIZE_DESKTOP = 120;
 export declare const CHART_WIDTH = 9999;
-export declare const CHART_HEIGHT = 450;
+export declare const CHART_HEIGHT_DESKTOP = 450;
+export declare const CHART_HEIGHT_MOBILE = 390;
+export declare const ZOOM_CONTROL_HEIGHT = 40;

package/dist/types/OrderBookWidget/components/Chart/getOption.d.ts

@@ -1,5 +1,5 @@
 import { GetOptionType, GetResponsiveOptionsProps } from './types';
-export declare const getDesktopOption: ({ isDark, isOrderBook }: GetResponsiveOptionsProps) => {
+export declare const getResponsiveOption: ({ isDark, isOrderBook, isDesktop, lang, }: GetResponsiveOptionsProps) => {
     grid: {
         name: string;
         top: string;
@@ -7,6 +7,21 @@ export declare const getDesktopOption: ({ isDark, isOrderBook }: GetResponsiveOp
         right: string;
         bottom: string;
     }[];
+    yAxis: {
+        axisLabel: {
+            margin: number;
+        };
+    };
+    series: {
+        type: string;
+        name: string;
+        id: string;
+        markLine: {
+            label: {
+                padding: number[];
+            };
+        };
+    }[];
     graphic: ({
         top: number | undefined;
         bottom: number | undefined;

package/dist/types/OrderBookWidget/components/Chart/types.d.ts

@@ -3,16 +3,26 @@ import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
 export interface ChartProps {
     data: GetOrderPositionBooksQuery;
     isOrderBook: boolean;
+    precision: number;
 }
 export interface GetResponsiveOptionsProps {
+    isDesktop: boolean;
     isDark: boolean;
     isOrderBook: boolean;
+    lang: (label: string) => string;
 }
 export interface GetOptionProps {
     data: GetOrderPositionBooksQuery;
     precision: number;
     isDark: boolean;
     isOrderBook: boolean;
+    isDesktop: boolean;
+    lang: (label: string) => string;
 }
 export type GetOptionType = (props: GetOptionProps) => EChartsOption;
-export type TooltipFormatterType = (data: number[], precision: number, isOrderBook: boolean) => string;
+export type TooltipFormatterType = (props: {
+    data: number[];
+    precision: number;
+    isOrderBook: boolean;
+    lang: (label: string) => string;
+}) => string;

package/dist/types/OrderBookWidget/config.d.ts

@@ -1,6 +1,12 @@
 import { BookType } from '../gql/types/graphql';
+import { InstrumentId } from './types';
 declare const navigationConfig: {
     id: BookType;
     label: string;
 }[];
-export { navigationConfig };
+declare const instrumentSelectConfig: {
+    id: InstrumentId;
+    label: string;
+}[];
+declare const instrumentPrecisionConfig: Record<InstrumentId, number>;
+export { navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig };

package/dist/types/OrderBookWidget/types.d.ts

@@ -1,14 +1,37 @@
 import { Theme } from '@oanda/labs-widget-common';
 import { Locale } from '@oanda/mono-i18n';
+import { BookType } from '../gql/types/graphql';
 export interface OrderBookWidgetConfig {
     graphqlUrl: string;
-    instrument: string;
+    instrument: InstrumentId;
     locale: Locale;
     theme?: Theme;
 }
 export interface OrderBookWrapperConfig extends OrderBookWidgetConfig {
     renderElementId: string;
 }
-export interface WidgetProps {
-    instrument: string;
+export interface MainProps {
+    instrument?: InstrumentId;
+}
+export interface ChartWithDataProps {
+    instrument: InstrumentId;
+    bookType: BookType;
+}
+export declare enum InstrumentId {
+    EUR_AUD = "EUR_AUD",
+    EUR_GBP = "EUR_GBP",
+    EUR_JPY = "EUR_JPY",
+    EUR_USD = "EUR_USD",
+    EUR_CHF = "EUR_CHF",
+    USD_CHF = "USD_CHF",
+    USD_JPY = "USD_JPY",
+    USD_CAD = "USD_CAD",
+    GBP_USD = "GBP_USD",
+    GBP_JPY = "GBP_JPY",
+    GBP_CHF = "GBP_CHF",
+    AUD_JPY = "AUD_JPY",
+    AUD_USD = "AUD_USD",
+    NZD_USD = "NZD_USD",
+    XAU_USD = "XAU_USD",
+    XAG_USD = "XAG_USD"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.71",
+  "version": "1.0.72",
   "description": "Labs Order Book Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,7 +13,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.71",
+    "@oanda/labs-widget-common": "^1.0.72",
     "@oanda/mono-i18n": "9.0.0",
     "classnames": "2.3.2",
     "echarts": "5.4.3",
@@ -25,5 +25,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "cec7ba5744ff5ccdd32d0240300b6895c094cb8b"
+  "gitHead": "4a224fac68b6b607825b7ac6802ea0b5c499996e"
 }

package/src/OrderBookWidget/ChartWithData.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import { useMediaQuery } from 'usehooks-ts';
+import classnames from 'classnames';
+import { ChartError, Spinner, SpinnerSize } from '@oanda/labs-widget-common';
+import { ChartWithDataProps } from './types';
+import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
+import { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';
+import { Chart } from './components/Chart/Chart';
+import { instrumentPrecisionConfig } from './config';
+
+const ChartWithData = ({
+  instrument,
+  bookType,
+}: ChartWithDataProps) => {
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+
+  const { loading, data, error } = useQuery<
+  GetOrderPositionBooksQuery,
+  GetOrderPositionBooksQueryVariables
+  >(getOrderPositionBooks, {
+    variables: {
+      instrument,
+      bookType,
+      recentHours: 1,
+    },
+  });
+
+  const isError = (!loading && !data?.orderPositionBooks[0]?.price) || !!error;
+
+  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>
+      )}
+      {data && (
+      <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
+        <Chart
+          data={data}
+          isOrderBook={bookType === BookType.Order}
+          precision={instrumentPrecisionConfig[instrument]}
+        />
+      </div>
+      )}
+    </div>
+  );
+};
+
+export { ChartWithData };

package/src/OrderBookWidget/Main.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Select, Tabs } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
+import { InstrumentId, MainProps } from './types';
+import { BookType } from '../gql/types/graphql';
+import { instrumentSelectConfig, navigationConfig } from './config';
+import { ChartWithData } from './ChartWithData';
+
+const Main = ({ instrument }: MainProps) => {
+  const [bookType, setBookType] = useState(BookType.Order);
+  const [toolInstrument, setToolInstrument] = useState(instrumentSelectConfig[0]);
+  const { lang } = useLocale();
+
+  return (
+    <div data-testid="order-book-widget" className="lw-p-4 lw-pt-0 lw-text-sm lw-tracking-normal lw-text-black">
+      <Tabs
+        activeTab={bookType}
+        handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
+        labelCallback={lang}
+        items={navigationConfig}
+        mobileFullWidth
+      />
+      {!instrument && (
+        <div className="lw-mb-6 lw-mt-12">
+          <Select
+            selectLabel={lang('select_instrument')}
+            options={instrumentSelectConfig}
+            selectedOption={toolInstrument}
+            setSelectedOption={
+              (val) => setToolInstrument(val as { id: InstrumentId; label: string })
+            }
+          />
+        </div>
+      )}
+      <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />
+    </div>
+  );
+};
+
+export { Main };

package/src/OrderBookWidget/OrderBookWidget.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { LocaleProvider } from '@oanda/mono-i18n';
 import { ThemeProvider, getLocale } from '@oanda/labs-widget-common';
-import { Widget } from './Widget';
+import { Main } from './Main';
 import { OrderBookWidgetConfig } from './types';
 import { translations } from '../translations';
 
@@ -21,7 +21,7 @@ const OrderBookWidget = ({
     <ThemeProvider theme={theme}>
       <LocaleProvider locale={getLocale(locale)} translations={translations}>
         <ApolloProvider client={client}>
-          <Widget instrument={instrument} />
+          <Main instrument={instrument} />
         </ApolloProvider>
       </LocaleProvider>
     </ThemeProvider>

package/src/OrderBookWidget/components/Chart/Chart.tsx

@@ -5,13 +5,15 @@ import {
   Theme, ThemeContext, colorPalette, getChartTheme,
 } from '@oanda/labs-widget-common';
 import { useMediaQuery } from 'usehooks-ts';
-import { getDesktopOption, getOption } from './getOption';
+import { useLocale } from '@oanda/mono-i18n';
+import { getResponsiveOption, getOption } from './getOption';
 import { ChartProps } from './types';
 
 registerTheme('dark_theme', getChartTheme(Theme.Dark));
 registerTheme('light_theme', getChartTheme(Theme.Light));
 
-export const Chart = ({ data, isOrderBook }: ChartProps) => {
+export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
+  const { lang } = useLocale();
   const isDark = useContext(ThemeContext) === Theme.Dark;
   const echartRef = useRef(null);
   const isDesktop = useMediaQuery('(min-width: 768px)');
@@ -48,9 +50,13 @@ export const Chart = ({ data, isOrderBook }: ChartProps) => {
       // @ts-ignore
       const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;
 
-      echartInstance.setOption(getDesktopOption({ isDark, isOrderBook }));
+      echartInstance.setOption(
+        getResponsiveOption({
+          isDark, isOrderBook, isDesktop, lang,
+        }),
+      );
     }
-  }, [echartRef, isDesktop, isDark, isOrderBook]);
+  }, [echartRef, isDesktop, isDark, isOrderBook, lang]);
 
   return (
     <div className="lw-relative lw-w-full">
@@ -60,11 +66,11 @@ export const Chart = ({ data, isOrderBook }: ChartProps) => {
             ref={echartRef}
             theme={isDark ? 'dark_theme' : 'light_theme'}
             style={{
-              height: '450px',
+              height: isDesktop ? '450px' : '390px',
               width: '100%',
             }}
             option={getOption({
-              data, precision: 4, isDark, isOrderBook,
+              data, precision, isDark, isOrderBook, isDesktop, lang,
             })}
           />
         )}

package/src/OrderBookWidget/components/Chart/constants.ts

@@ -1,7 +1,9 @@
 export const INITIAL_BARS = 80;
 
 export const X_LABEL_SIZE = 40;
-export const Y_LABEL_SIZE_MOBILE = 35;
+export const Y_LABEL_SIZE_MOBILE = 50;
 export const Y_LABEL_SIZE_DESKTOP = 120;
 export const CHART_WIDTH = 9999;
-export const CHART_HEIGHT = 450;
+export const CHART_HEIGHT_DESKTOP = 450;
+export const CHART_HEIGHT_MOBILE = 390;
+export const ZOOM_CONTROL_HEIGHT = 40;

package/src/OrderBookWidget/components/Chart/formatters.ts

@@ -1,9 +1,11 @@
 import { TooltipFormatterType } from './types';
 
-const tooltipFormatter: TooltipFormatterType = (data, precision, isOrderBook) => {
-  const priceText = `Price: ${data[0].toFixed(precision)}`;
-  const buyText = data[1] ? `<br />${isOrderBook ? 'Buy' : 'Long positions'}: ${data[1]}%` : '';
-  const sellText = data[2] ? `<br />${isOrderBook ? 'Sell' : 'Short positions'}: ${data[2] * -1}%` : '';
+const tooltipFormatter: TooltipFormatterType = ({
+  data, precision, isOrderBook, lang,
+}) => {
+  const priceText = `${lang('price')}: ${data[0].toFixed(precision)}`;
+  const buyText = data[1] ? `<br />${lang(isOrderBook ? 'buy' : 'long_positions')}: ${data[1]}%` : '';
+  const sellText = data[2] ? `<br />${lang(isOrderBook ? 'sell' : 'short_positions')}: ${data[2] * -1}%` : '';
 
   return priceText + buyText + sellText;
 };

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

@@ -1,17 +1,31 @@
 import { colorPalette, getGridLines, getZoomControls } from '@oanda/labs-widget-common';
 import {
-  INITIAL_BARS, CHART_WIDTH, CHART_HEIGHT, X_LABEL_SIZE, Y_LABEL_SIZE_DESKTOP,
+  INITIAL_BARS,
+  CHART_WIDTH,
+  CHART_HEIGHT_DESKTOP,
+  CHART_HEIGHT_MOBILE,
+  X_LABEL_SIZE,
+  Y_LABEL_SIZE_DESKTOP,
+  Y_LABEL_SIZE_MOBILE,
+  ZOOM_CONTROL_HEIGHT,
 } from './constants';
 import { GetOptionType, GetResponsiveOptionsProps } from './types';
 import { tooltipFormatter } from './formatters';
 
-export const getDesktopOption = ({ isDark, isOrderBook }: GetResponsiveOptionsProps) => {
+export const getResponsiveOption = (
+  {
+    isDark, isOrderBook, isDesktop, lang,
+  }
+  : GetResponsiveOptionsProps,
+) => {
   const desktopGridLines = getGridLines({
     isDark,
     chartWidth: CHART_WIDTH,
-    chartHeight: CHART_HEIGHT,
-    xLabelsSize: X_LABEL_SIZE,
-    yLabelSize: Y_LABEL_SIZE_DESKTOP,
+    chartHeight: isDesktop ? CHART_HEIGHT_DESKTOP : CHART_HEIGHT_MOBILE,
+    xLabelsSize: isDesktop ? X_LABEL_SIZE : X_LABEL_SIZE + ZOOM_CONTROL_HEIGHT,
+    yLabelSize: isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE,
+    bottomLeftBox: isDesktop,
+    marginBottom: isDesktop ? 0 : ZOOM_CONTROL_HEIGHT,
   });
 
   return {
@@ -20,8 +34,25 @@ export const getDesktopOption = ({ isDark, isOrderBook }: GetResponsiveOptionsPr
         name: 'main-grid',
         top: '48px',
         left: '0px',
-        right: `${Y_LABEL_SIZE_DESKTOP}px`,
-        bottom: `${X_LABEL_SIZE}px`,
+        right: `${isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE}px`,
+        bottom: `${isDesktop ? X_LABEL_SIZE : X_LABEL_SIZE + ZOOM_CONTROL_HEIGHT}px`,
+      },
+    ],
+    yAxis: {
+      axisLabel: {
+        margin: isDesktop ? 10 : 0,
+      },
+    },
+    series: [
+      {
+        type: 'custom',
+        name: 'current-price',
+        id: 'current-price',
+        markLine: {
+          label: {
+            padding: isDesktop ? [5, 15, 5, 15] : [5, 12, 5, 5],
+          },
+        },
       },
     ],
     graphic: [
@@ -58,14 +89,14 @@ export const getDesktopOption = ({ isDark, isOrderBook }: GetResponsiveOptionsPr
               fill: isDark ? colorPalette.white : colorPalette.black,
               width: 70,
               height: 30,
-              text: isOrderBook ? 'Sell' : 'Short',
+              text: lang(isOrderBook ? 'sell' : 'short'),
             },
           },
         ],
       },
       {
         type: 'group',
-        right: '128px',
+        right: `${(isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE) + 8}px'`,
         top: '56px',
         silent: true,
         children: [
@@ -95,7 +126,7 @@ export const getDesktopOption = ({ isDark, isOrderBook }: GetResponsiveOptionsPr
               fill: isDark ? colorPalette.white : colorPalette.black,
               width: 70,
               height: 30,
-              text: isOrderBook ? 'Buy' : 'Long',
+              text: lang(isOrderBook ? 'buy' : 'long'),
             },
           },
         ],
@@ -105,11 +136,12 @@ export const getDesktopOption = ({ isDark, isOrderBook }: GetResponsiveOptionsPr
 };
 
 export const getOption: GetOptionType = ({
-  data, precision, isDark, isOrderBook,
+  data, precision, isDark, isOrderBook, isDesktop, lang,
 }) => {
   const buckets = data.orderPositionBooks[0]?.buckets || [];
   const bucketWidth = data.orderPositionBooks[0]?.bucketWidth!;
   const price = data.orderPositionBooks[0]?.price!;
+  const bucketPrecision = bucketWidth.toString().split('.')[1].length || 0;
 
   const dataset = buckets.map((item) => ([
     item!.price,
@@ -133,7 +165,7 @@ export const getOption: GetOptionType = ({
         isDark ? colorPalette.orange : colorPalette.raspberryDark,
       ],
       title: {
-        text: isOrderBook ? 'OPEN ORDERS' : 'OPEN POSITIONS',
+        text: lang(isOrderBook ? 'open_orders' : 'open_positions').toUpperCase(),
         padding: 20,
         textStyle: {
           fontSize: 14,
@@ -161,12 +193,23 @@ export const getOption: GetOptionType = ({
         axisPointer: {
           axis: 'y',
         },
-        formatter: (val) => tooltipFormatter(
-          (val as { data: number[] }[])[0].data,
-          precision,
+        formatter: (val) => tooltipFormatter({
+          data: (val as { data: number[] }[])[0].data,
+          precision: bucketPrecision,
           isOrderBook,
-        ),
+          lang,
+        }),
+        extraCssText: 'z-index: 1',
       },
+      grid: [
+        {
+          name: 'main-grid',
+          top: '48px',
+          left: '0px',
+          right: `${isDesktop ? Y_LABEL_SIZE_DESKTOP : Y_LABEL_SIZE_MOBILE}px`,
+          bottom: `${isDesktop ? X_LABEL_SIZE : X_LABEL_SIZE + ZOOM_CONTROL_HEIGHT}px`,
+        },
+      ],
       xAxis: {
         type: 'value',
         min: range * -1.05,
@@ -186,10 +229,11 @@ export const getOption: GetOptionType = ({
         axisLine: { show: false },
         axisTick: { show: false },
         axisLabel: {
+          margin: isDesktop ? 10 : 0,
           showMaxLabel: false,
           showMinLabel: false,
           padding: [0, 0, 0, 10],
-          formatter: (value) => value.toFixed(precision),
+          formatter: (value) => value.toFixed(bucketPrecision),
         },
       },
       dataset: {
@@ -198,6 +242,8 @@ export const getOption: GetOptionType = ({
       series: [
         {
           type: 'custom',
+          name: 'sell-short',
+          id: 'sell-short',
           clip: true,
           encode: {
             x: 1,
@@ -234,34 +280,14 @@ export const getOption: GetOptionType = ({
         },
         {
           type: 'custom',
+          name: 'buy-long',
+          id: 'buy-long',
           clip: true,
           encode: {
             x: 1,
             y: 0,
             tooltip: 2,
           },
-          markLine: {
-            animation: false,
-            silent: true,
-            precision: 4,
-            symbol: ['none', 'triangle'],
-            symbolRotate: 90,
-            symbolSize: [20, 10],
-            lineStyle: {
-              color: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,
-              width: 1,
-            },
-            label: {
-              padding: [5, 15, 5, 15],
-              color: isDark ? colorPalette.black : colorPalette.white,
-              backgroundColor: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,
-            },
-            data: [
-              {
-                yAxis: price,
-              },
-            ],
-          },
           renderItem: (params, api) => {
             const yValue = api.value(0);
             const xStart = api.coord([api.value(2), yValue]);
@@ -290,6 +316,34 @@ export const getOption: GetOptionType = ({
             };
           },
         },
+        {
+          type: 'custom',
+          name: 'current-price',
+          id: 'current-price',
+          markLine: {
+            animation: false,
+            silent: true,
+            precision,
+            symbol: ['none', 'triangle'],
+            symbolRotate: 90,
+            symbolSize: [20, 10],
+            lineStyle: {
+              color: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,
+              width: 1,
+            },
+            label: {
+              padding: isDesktop ? [5, 15, 5, 15] : [5, 12, 5, 5],
+              color: isDark ? colorPalette.black : colorPalette.white,
+              backgroundColor: isDark ? colorPalette.orange : colorPalette.bottleGreenDark,
+            },
+            data: [
+              {
+                yAxis: price,
+              },
+            ],
+          },
+          renderItem: () => null,
+        },
       ],
     }
   );

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

@@ -4,11 +4,14 @@ import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
 export interface ChartProps {
   data: GetOrderPositionBooksQuery;
   isOrderBook: boolean;
+  precision: number;
 }
 
 export interface GetResponsiveOptionsProps {
+  isDesktop: boolean;
   isDark: boolean;
   isOrderBook: boolean;
+  lang: (label: string) => string;
 }
 
 export interface GetOptionProps {
@@ -16,6 +19,8 @@ export interface GetOptionProps {
   precision: number;
   isDark: boolean;
   isOrderBook: boolean;
+  isDesktop: boolean;
+  lang: (label: string) => string;
 }
 
 export type GetOptionType = (
@@ -23,7 +28,10 @@ export type GetOptionType = (
 ) => EChartsOption;
 
 export type TooltipFormatterType = (
-  data: number[],
-  precision: number,
-  isOrderBook: boolean,
+  props : {
+    data: number[],
+    precision: number,
+    isOrderBook: boolean,
+    lang: (label: string) => string;
+  }
 ) => string;