@oanda/labs-order-book-widget 1.0.173 → 1.0.174

package/src/OrderBookWidget/ChartWithData.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
 import { useQuery } from '@apollo/client';
-import classnames from 'classnames';
 import {
   ChartError,
   LastUpdated,
@@ -10,23 +8,27 @@ import {
   useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { ChartWithDataProps } from './types';
+import classnames from 'classnames';
+import React from 'react';
+
 import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
-import { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';
+import type {
+  GetOrderPositionBooksQuery,
+  GetOrderPositionBooksQueryVariables,
+} from '../gql/types/graphql';
+import { BookType } from '../gql/types/graphql';
 import { Chart } from './components/Chart/Chart';
 import { instrumentPrecisionConfig } from './config';
+import type { ChartWithDataProps } from './types';
 
-const ChartWithData = ({
-  instrument,
-  bookType,
-}: ChartWithDataProps) => {
+const ChartWithData = ({ instrument, bookType }: ChartWithDataProps) => {
   const { lang } = useLocale();
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
   const { loading, data, error } = useQuery<
-  GetOrderPositionBooksQuery,
-  GetOrderPositionBooksQueryVariables
+    GetOrderPositionBooksQuery,
+    GetOrderPositionBooksQueryVariables
   >(getOrderPositionBooks, {
     variables: {
       instrument,
@@ -41,38 +43,37 @@ const ChartWithData = ({
 
   return (
     <>
-      <div className={classnames('lw-relative lw-w-full', {
-        'lw-h-[450px]': isDesktop,
-        'lw-h-[390px]': !isDesktop,
-      })}
+      <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>
+          <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>
+          <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 && data && (
           <div className="lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full">
@@ -86,7 +87,7 @@ const ChartWithData = ({
       </div>
       <div className="lw-mt-2 lw-h-8">
         {!loading && !isError && (
-          <LastUpdated timestamp={updatedAt} labelCallback={lang} />
+          <LastUpdated labelCallback={lang} timestamp={updatedAt} />
         )}
       </div>
     </>

package/src/OrderBookWidget/Main.tsx

@@ -1,16 +1,27 @@
-import React, { useState } from 'react';
-import classnames from 'classnames';
 import {
-  Select, Size, Tabs, useLayoutProvider,
+  Select,
+  Size,
+  Tabs,
+  useLayoutProvider,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
-import { InstrumentId, MainProps } from './types';
+import classnames from 'classnames';
+import React, { useState } from 'react';
+
 import { BookType, Division } from '../gql/types/graphql';
-import { instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig } from './config';
 import { ChartWithData } from './ChartWithData';
+import {
+  instrumentSelectConfig,
+  instrumentSelectConfigOC,
+  navigationConfig,
+} from './config';
+import type { InstrumentId, MainProps } from './types';
 
 const Main = ({ instrument, division }: MainProps) => {
-  const selectConfig = division === Division.Oc ? instrumentSelectConfigOC : instrumentSelectConfig;
+  const selectConfig =
+    division === Division.Oc
+      ? instrumentSelectConfigOC
+      : instrumentSelectConfig;
   const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const [bookType, setBookType] = useState(BookType.Order);
@@ -20,33 +31,40 @@ const Main = ({ instrument, division }: MainProps) => {
   return (
     <>
       {size && (
-      <div data-testid="order-book-widget" className="lw-text-sm lw-tracking-normal">
-        <Tabs
-          activeTab={bookType}
-          handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
-          labelCallback={lang}
-          items={navigationConfig}
-          mobileFullWidth
-        />
-        {!instrument && (
-        <div className={classnames('lw-mb-6 lw-mt-12 ', {
-          'lw-w-full': !isDesktop,
-          'lw-w-[280px]': isDesktop,
-        })}
+        <div
+          className="lw-text-sm lw-tracking-normal"
+          data-testid="order-book-widget"
         >
-          <Select
-            searchPlaceholder={lang('search')}
-            selectLabel={lang('instrument')}
-            options={selectConfig}
-            selectedOption={toolInstrument}
-            setSelectedOption={
-              (val) => setToolInstrument(val as { id: InstrumentId; label: string })
-            }
+          <Tabs
+            mobileFullWidth
+            activeTab={bookType}
+            handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
+            items={navigationConfig}
+            labelCallback={lang}
+          />
+          {!instrument && (
+            <div
+              className={classnames('lw-mb-6 lw-mt-12 ', {
+                'lw-w-full': !isDesktop,
+                'lw-w-[280px]': isDesktop,
+              })}
+            >
+              <Select
+                options={selectConfig}
+                searchPlaceholder={lang('search')}
+                selectLabel={lang('instrument')}
+                selectedOption={toolInstrument}
+                setSelectedOption={(val) =>
+                  setToolInstrument(val as { id: InstrumentId; label: string })
+                }
+              />
+            </div>
+          )}
+          <ChartWithData
+            bookType={bookType}
+            instrument={instrument || toolInstrument.id}
           />
         </div>
-        )}
-        <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />
-      </div>
       )}
     </>
   );

package/src/OrderBookWidget/OrderBookWidget.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
+import React from 'react';
 
-import { Main } from './Main';
-import { OrderBookWidgetConfig } from './types';
 import { translations } from '../translations';
+import { Main } from './Main';
+import type { OrderBookWidgetConfig } from './types';
 
 const OrderBookWidget = ({
   graphqlUrl,
@@ -22,17 +22,17 @@ const OrderBookWidget = ({
 
   return (
     <WidgetProvider
-      locale={locale}
-      translations={translations}
       client={client}
+      locale={locale}
       theme={theme}
+      translations={translations}
     >
       <WidgetWrapper
-        logoLink={logoLink}
-        linkArea="logo"
         isParamError={isParamError}
+        linkArea="logo"
+        logoLink={logoLink}
       >
-        <Main instrument={instrument} division={division} />
+        <Main division={division} instrument={instrument} />
       </WidgetWrapper>
     </WidgetProvider>
   );

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

@@ -1,24 +1,29 @@
-import React, { useRef, useEffect } from 'react';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
-import * as echarts from 'echarts/core';
+import {
+  colorPalette,
+  getChartTheme,
+  Size,
+  Theme,
+  useLayoutProvider,
+} from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
 import { CustomChart } from 'echarts/charts';
-import { CanvasRenderer } from 'echarts/renderers';
 import {
-  GridSimpleComponent,
+  DatasetComponent,
+  DataZoomInsideComponent,
   GraphicComponent,
-  TooltipComponent,
-  TitleComponent,
+  GridSimpleComponent,
   MarkLineComponent,
+  TitleComponent,
   ToolboxComponent,
-  DataZoomInsideComponent,
-  DatasetComponent,
+  TooltipComponent,
 } from 'echarts/components';
-import {
-  Theme, useLayoutProvider, colorPalette, getChartTheme, Size,
-} from '@oanda/labs-widget-common';
-import { useLocale } from '@oanda/mono-i18n';
-import { getResponsiveOption, getOption } from './getOption';
-import { ChartProps } from './types';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
+import React, { useEffect, useRef } from 'react';
+
+import { getOption, getResponsiveOption } from './getOption';
+import type { ChartProps } from './types';
 
 echarts.use([
   GridSimpleComponent,
@@ -41,16 +46,16 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
   const { isDark, size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const echartRef = useRef(null);
+  const echartRef = useRef<ReactEChartsCore | null>(null);
 
   useEffect(() => {
     if (echartRef.current) {
-      // @ts-ignore
-      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;
+      const echartInstance = echartRef.current.getEchartsInstance();
 
       echartInstance.on('highlight', () => {
-        if ((
-          echartInstance.getOption().color as echarts.Color[])[0] === colorPalette.bottleGreenLight
+        if (
+          (echartInstance.getOption().color as echarts.Color[])[0] ===
+          colorPalette.bottleGreenLight
         ) {
           echartInstance.setOption({
             color: [
@@ -74,13 +79,15 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
 
   useEffect(() => {
     if (echartRef.current) {
-      // @ts-ignore
-      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;
+      const echartInstance = echartRef.current.getEchartsInstance();
 
       echartInstance.setOption(
         getResponsiveOption({
-          isDark, isOrderBook, isDesktop, lang,
-        }),
+          isDark,
+          isOrderBook,
+          isDesktop,
+          lang,
+        })
       );
     }
   }, [echartRef, isDesktop, isDark, isOrderBook, lang]);
@@ -90,16 +97,21 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
       <div>
         {data && (
           <ReactEChartsCore
-            echarts={echarts}
             ref={echartRef}
-            theme={isDark ? 'dark_theme' : 'light_theme'}
+            echarts={echarts}
+            option={getOption({
+              data,
+              precision,
+              isDark,
+              isOrderBook,
+              isDesktop,
+              lang,
+            })}
             style={{
               height: isDesktop ? '450px' : '390px',
               width: '100%',
             }}
-            option={getOption({
-              data, precision, isDark, isOrderBook, isDesktop, lang,
-            })}
+            theme={isDark ? 'dark_theme' : 'light_theme'}
           />
         )}
       </div>

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

@@ -1,11 +1,18 @@
-import { TooltipFormatterType } from './types';
+import type { TooltipFormatterType } from './types';
 
 const tooltipFormatter: TooltipFormatterType = ({
-  data, precision, isOrderBook, lang,
+  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}%` : '';
+  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;
 };