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

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

@@ -1,4 +1,4 @@
-import { GetOptionType, GetResponsiveOptionsProps } from './types';
+import type { GetOptionType, GetResponsiveOptionsProps } from './types';
 export declare const getResponsiveOption: ({ isDark, isOrderBook, isDesktop, lang, }: GetResponsiveOptionsProps) => {
     grid: {
         name: string;

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

@@ -1,5 +1,5 @@
-import { EChartsOption } from 'echarts';
-import { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
+import type { EChartsOption } from 'echarts';
+import type { GetOrderPositionBooksQuery } from '../../../gql/types/graphql';
 export interface ChartProps {
     data: GetOrderPositionBooksQuery;
     isOrderBook: boolean;

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

@@ -13,4 +13,4 @@ declare const instrumentSelectConfig: {
     label: string;
 }[];
 declare const instrumentPrecisionConfig: Record<InstrumentId, number>;
-export { navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig, instrumentSelectConfigOC, };
+export { instrumentPrecisionConfig, instrumentSelectConfig, instrumentSelectConfigOC, navigationConfig, };

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

@@ -1,5 +1,5 @@
-import { WidgetConfig } from '@oanda/labs-widget-common';
-import { BookType, Division } from '../gql/types/graphql';
+import type { WidgetConfig } from '@oanda/labs-widget-common';
+import type { BookType, Division } from '../gql/types/graphql';
 export interface OrderBookWidgetConfig extends WidgetConfig {
     instrument: InstrumentId;
     division: Division;

package/dist/types/gql/types/gql.d.ts

@@ -11,7 +11,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 declare const documents: {
-    "\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\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": DocumentNode<types.GetOrderPositionBooksQuery, types.Exact<{
+    '\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\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': DocumentNode<types.GetOrderPositionBooksQuery, types.Exact<{
         instrument: types.Scalars["String"]["input"];
         bookType: types.BookType;
         recentHours?: types.InputMaybe<types.Scalars["Int"]["input"]>;
@@ -33,6 +33,6 @@ export declare 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 declare function graphql(source: "\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\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($instrument: String!, $bookType: BookType!, $recentHours: Int) {\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"];
+export declare function graphql(source: '\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\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($instrument: String!, $bookType: BookType!, $recentHours: Int) {\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'];
 export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
 export {};

package/dist/types/gql/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./fragment-masking";
-export * from "./gql";
+export * from './fragment-masking';
+export * from './gql';

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export * from './OrderBookWidget/types';
 export * from './OrderBookWidget/OrderBookWidget';
+export * from './OrderBookWidget/types';

package/dist/types/translations/index.d.ts

@@ -1,4 +1,4 @@
-import { Translations } from '@oanda/mono-i18n';
-import { defaultTranslations } from './translations';
+import type { Translations } from '@oanda/mono-i18n';
+import type { defaultTranslations } from './translations';
 export type TranslationKey = keyof typeof defaultTranslations;
 export declare const translations: Translations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.172",
+  "version": "1.0.174",
   "description": "Labs Order Book Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.172",
+    "@oanda/labs-widget-common": "^1.0.174",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -23,5 +23,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "f3c94dbb01bc271f175ba95700c51001c4099a52"
+  "gitHead": "4c5d84b00c7fbf3acd7ef27634fbd2a9ef0afd6b"
 }

package/src/OrderBookWidget/ChartWithData.tsx

@@ -1,32 +1,34 @@
-import React, { useContext } from 'react';
 import { useQuery } from '@apollo/client';
-import classnames from 'classnames';
 import {
   ChartError,
   LastUpdated,
   Size,
   Spinner,
   SpinnerSize,
-  ThemeContext,
+  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 } = useContext(ThemeContext);
+  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,17 +1,28 @@
-import React, { useState, useContext } from 'react';
-import classnames from 'classnames';
 import {
-  Select, Size, Tabs, ThemeContext,
+  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 { size } = useContext(ThemeContext);
+  const selectConfig =
+    division === Division.Oc
+      ? instrumentSelectConfigOC
+      : instrumentSelectConfig;
+  const { size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
   const [bookType, setBookType] = useState(BookType.Order);
   const [toolInstrument, setToolInstrument] = useState(selectConfig[0]);
@@ -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,12 +1,10 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+import { WidgetProvider, WidgetWrapper } from '@oanda/labs-widget-common';
 import React from 'react';
-import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
-import { LocaleProvider } from '@oanda/mono-i18n';
-import {
-  ChartError, ThemeProvider, getLocale, renderComponent,
-} from '@oanda/labs-widget-common';
-import { Main } from './Main';
-import { OrderBookWidgetConfig } from './types';
+
 import { translations } from '../translations';
+import { Main } from './Main';
+import type { OrderBookWidgetConfig } from './types';
 
 const OrderBookWidget = ({
   graphqlUrl,
@@ -23,21 +21,20 @@ const OrderBookWidget = ({
   });
 
   return (
-    <ThemeProvider theme={theme}>
-      <LocaleProvider locale={getLocale(locale)} translations={translations}>
-        <ApolloProvider client={client}>
-          {isParamError ? (
-            <div className="lw-flex lw-h-[425px] lw-w-full lw-items-center lw-border lw-border-solid lw-border-border-primary">
-              <ChartError />
-            </div>
-          ) : renderComponent({
-            Component: <Main instrument={instrument} division={division} />,
-            logoLink,
-            linkArea: 'logo',
-          })}
-        </ApolloProvider>
-      </LocaleProvider>
-    </ThemeProvider>
+    <WidgetProvider
+      client={client}
+      locale={locale}
+      theme={theme}
+      translations={translations}
+    >
+      <WidgetWrapper
+        isParamError={isParamError}
+        linkArea="logo"
+        logoLink={logoLink}
+      >
+        <Main division={division} instrument={instrument} />
+      </WidgetWrapper>
+    </WidgetProvider>
   );
 };
 

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

@@ -1,24 +1,29 @@
-import React, { useRef, useEffect, useContext } 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, ThemeContext, 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,
@@ -38,19 +43,19 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
   const { lang } = useLocale();
-  const { isDark, size } = useContext(ThemeContext);
+  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;
 };