@oanda/labs-order-book-widget 1.0.62 → 1.0.63

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

@@ -0,0 +1,174 @@
+import { GetOptionType, GetResponsiveOptionsProps } from './types';
+export declare const getDesktopOption: ({ isDark, isOrderBook }: GetResponsiveOptionsProps) => {
+    grid: {
+        name: string;
+        top: string;
+        left: string;
+        right: string;
+        bottom: string;
+    }[];
+    graphic: ({
+        top: number | undefined;
+        bottom: number | undefined;
+        left: number | undefined;
+        right: number | undefined;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        top: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        right: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        bottom: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        left: number;
+        shape: {
+            x1: number;
+            y1: number;
+            x2: number;
+            y2: number;
+        };
+        type: string;
+        silent: boolean;
+        z: number;
+        style: {
+            stroke: string;
+            lineWidth: number;
+        };
+    } | {
+        type: string;
+        left: string;
+        top: string;
+        silent: boolean;
+        children: ({
+            type: string;
+            z: number;
+            left: string;
+            top: string;
+            shape: {
+                width: number;
+                height: number;
+            };
+            style: {
+                fill: string;
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowOffsetY: number;
+                shadowColor: string;
+                width?: undefined;
+                height?: undefined;
+                text?: undefined;
+            };
+        } | {
+            type: string;
+            z: number;
+            left: string;
+            top: string;
+            style: {
+                fill: string;
+                width: number;
+                height: number;
+                text: string;
+                shadowBlur?: undefined;
+                shadowOffsetX?: undefined;
+                shadowOffsetY?: undefined;
+                shadowColor?: undefined;
+            };
+            shape?: undefined;
+        })[];
+        right?: undefined;
+    } | {
+        type: string;
+        right: string;
+        top: string;
+        silent: boolean;
+        children: ({
+            type: string;
+            z: number;
+            right: string;
+            top: string;
+            shape: {
+                width: number;
+                height: number;
+            };
+            style: {
+                fill: string;
+                shadowBlur: number;
+                shadowOffsetX: number;
+                shadowOffsetY: number;
+                shadowColor: string;
+                width?: undefined;
+                height?: undefined;
+                text?: undefined;
+            };
+        } | {
+            type: string;
+            z: number;
+            right: string;
+            top: string;
+            style: {
+                fill: string;
+                width: number;
+                height: number;
+                text: string;
+                shadowBlur?: undefined;
+                shadowOffsetX?: undefined;
+                shadowOffsetY?: undefined;
+                shadowColor?: undefined;
+            };
+            shape?: undefined;
+        })[];
+        left?: undefined;
+    })[];
+};
+export declare const getOption: GetOptionType;

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

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

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

@@ -0,0 +1,6 @@
+import { BookType } from '../gql/types/graphql';
+declare const navigationConfig: {
+    id: BookType;
+    label: string;
+}[];
+export { navigationConfig };

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

@@ -1,6 +1 @@
-import { OrderBookWrapperConfig } from './types';
-declare global {
-    interface Window {
-        orderBookWidgetConfig: OrderBookWrapperConfig;
-    }
-}
+export {};

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

@@ -1,8 +1,10 @@
+import { Theme } from '@oanda/labs-widget-common';
 import { Locale } from '@oanda/mono-i18n';
 export interface OrderBookWidgetConfig {
     graphqlUrl: string;
     instrument: string;
     locale: Locale;
+    theme?: Theme;
 }
 export interface OrderBookWrapperConfig extends OrderBookWidgetConfig {
     renderElementId: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.62",
+  "version": "1.0.63",
   "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.62",
+    "@oanda/labs-widget-common": "^1.0.63",
     "@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": "0954a60e9c2d28ec2c2d4240fc15fbf132f827d2"
+  "gitHead": "f09946395428aaec61ae575a8c762be67e3f05d5"
 }

package/src/OrderBookWidget/OrderBookWidget.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { LocaleProvider } from '@oanda/mono-i18n';
-import { getLocale } from '@oanda/labs-widget-common';
+import { ThemeProvider, getLocale } from '@oanda/labs-widget-common';
 import { Widget } from './Widget';
 import { OrderBookWidgetConfig } from './types';
 import { translations } from '../translations';
@@ -10,6 +10,7 @@ const OrderBookWidget = ({
   graphqlUrl,
   instrument,
   locale,
+  theme,
 }: OrderBookWidgetConfig) => {
   const client = new ApolloClient({
     uri: graphqlUrl,
@@ -17,11 +18,13 @@ const OrderBookWidget = ({
   });
 
   return (
-    <LocaleProvider locale={getLocale(locale)} translations={translations}>
-      <ApolloProvider client={client}>
-        <Widget instrument={instrument} />
-      </ApolloProvider>
-    </LocaleProvider>
+    <ThemeProvider theme={theme}>
+      <LocaleProvider locale={getLocale(locale)} translations={translations}>
+        <ApolloProvider client={client}>
+          <Widget instrument={instrument} />
+        </ApolloProvider>
+      </LocaleProvider>
+    </ThemeProvider>
   );
 };
 

package/src/OrderBookWidget/Widget.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { useQuery } from '@apollo/client';
 import {
-  Button, ButtonVariant, ChartError, Spinner, SpinnerSize,
+  ChartError, Spinner, SpinnerSize, Tabs,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { WidgetProps } from './types';
 import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
 import { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';
 import { Chart } from './components/Chart/Chart';
+import { navigationConfig } from './config';
 
 const Widget = ({
   instrument,
@@ -28,39 +29,29 @@ const Widget = ({
 
   const isError = (!loading && !data) || !!error;
 
-  const isTypeOrder = bookType === BookType.Order;
-
   return (
     <div data-testid="order-book-widget" className="lw-p-4 lw-text-sm lw-tracking-normal lw-text-black">
-      <div className="lw-flex lw-gap-2">
-        <Button
-          variant={isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary}
-          onClick={() => setBookType(BookType.Order)}
-        >
-          {lang('order_book')}
-        </Button>
-        <Button
-          variant={isTypeOrder ? ButtonVariant.secondary : ButtonVariant.primary}
-          onClick={() => setBookType(BookType.Position)}
-        >
-          {lang('position_book')}
-        </Button>
-      </div>
+      <Tabs
+        activeTab={bookType}
+        handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
+        labelCallback={lang}
+        items={navigationConfig}
+      />
       {/* @todo: chart height */}
-      <div className="lw-relative lw-h-[700px] lw-w-full">
+      <div className="lw-relative lw-h-[450px] lw-w-full">
         {isError && (
-          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-bg-lightGrey/[0.4]">
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <ChartError />
           </div>
         )}
         {loading && (
-          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-bg-lightGrey/[0.4]">
+          <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full lw-items-center lw-justify-center lw-border lw-border-solid lw-border-border-primary">
             <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} />
+            <Chart data={data} isOrderBook={bookType === BookType.Order} />
           </div>
         )}
       </div>

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

@@ -1,33 +1,71 @@
-import React from 'react';
+import React, { useRef, useEffect, useContext } from 'react';
 import ReactEcharts from 'echarts-for-react';
-import { getOptions } from './getOptions';
-import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
+import { registerTheme, EChartsType, Color } from 'echarts';
+import {
+  Theme, ThemeContext, colorPalette, getChartTheme,
+} from '@oanda/labs-widget-common';
+import { useMediaQuery } from 'usehooks-ts';
+import { getDesktopOption, getOption } from './getOption';
+import { ChartProps } from './types';
 
-interface ChartProps {
-  data: GetOrderPositionBooksQuery;
-}
+registerTheme('dark_theme', getChartTheme(Theme.Dark));
+registerTheme('light_theme', getChartTheme(Theme.Light));
 
-export const Chart = ({ data }: ChartProps) => {
-  const buckets = data.orderPositionBooks[0]?.buckets || [];
-  const bucketWidth = data.orderPositionBooks[0]?.bucketWidth;
-  const price = data.orderPositionBooks[0]?.price;
+export const Chart = ({ data, isOrderBook }: ChartProps) => {
+  const isDark = useContext(ThemeContext) === Theme.Dark;
+  const echartRef = useRef(null);
+  const isDesktop = useMediaQuery('(min-width: 768px)');
 
-  const chartData = buckets.map((item) => ([
-    item!.price,
-    Number(item!.longCountPercent),
-    Number(item!.shortCountPercent) * -1,
-  ]));
+  useEffect(() => {
+    if (echartRef.current) {
+      // @ts-ignore
+      const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;
+
+      echartInstance.on('highlight', () => {
+        if ((echartInstance.getOption().color as Color[])[0] === colorPalette.bottleGreenLight) {
+          echartInstance.setOption({
+            color: [
+              colorPalette.bottleGreenLight70,
+              isDark ? colorPalette.orange70 : colorPalette.raspberryDark70,
+            ],
+          });
+        }
+      });
+
+      echartInstance.on('globalout', () => {
+        echartInstance.setOption({
+          color: [
+            colorPalette.bottleGreenLight,
+            isDark ? colorPalette.orange : colorPalette.raspberryDark,
+          ],
+        });
+      });
+    }
+  }, [echartRef, isDark]);
+
+  useEffect(() => {
+    if (echartRef.current) {
+      // @ts-ignore
+      const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;
+
+      echartInstance.setOption(getDesktopOption({ isDark, isOrderBook }));
+    }
+  }, [echartRef, isDesktop, isDark, isOrderBook]);
 
   return (
     <div className="lw-relative lw-w-full">
       <div>
-        {price && bucketWidth && (
+        {data && (
           <ReactEcharts
+            ref={echartRef}
+            theme={isDark ? 'dark_theme' : 'light_theme'}
             style={{
-              height: '600px',
+              height: '450px',
               width: '100%',
             }}
-            option={getOptions({ data: chartData, price, bucketWidth })}
+            option={getOption({
+              data, precision: 4, isDark, isOrderBook,
+            })}
           />
         )}
       </div>

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

@@ -1,2 +1,7 @@
-export const INITIAL_BARS = 150;
-export const ZOOM_BARS = 10;
+export const INITIAL_BARS = 80;
+
+export const X_LABEL_SIZE = 40;
+export const Y_LABEL_SIZE_MOBILE = 35;
+export const Y_LABEL_SIZE_DESKTOP = 120;
+export const CHART_WIDTH = 9999;
+export const CHART_HEIGHT = 450;

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

@@ -0,0 +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}%` : '';
+
+  return priceText + buyText + sellText;
+};
+
+export { tooltipFormatter };