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

package/src/OrderBookWidget/config.ts

@@ -1,4 +1,5 @@
 import { BookType } from '../gql/types/graphql';
+import { InstrumentId } from './types';
 
 const navigationConfig = [{
   id: BookType.Order,
@@ -8,4 +9,72 @@ const navigationConfig = [{
   label: 'position_book',
 }];
 
-export { navigationConfig };
+const instrumentSelectConfig = [{
+  id: InstrumentId.EUR_AUD,
+  label: 'EUR/AUD',
+}, {
+  id: InstrumentId.EUR_GBP,
+  label: 'EUR/GBP',
+}, {
+  id: InstrumentId.EUR_JPY,
+  label: 'EUR/JPY',
+}, {
+  id: InstrumentId.EUR_USD,
+  label: 'EUR/USD',
+}, {
+  id: InstrumentId.EUR_CHF,
+  label: 'EUR/CHF',
+}, {
+  id: InstrumentId.USD_CHF,
+  label: 'USD/CHF',
+}, {
+  id: InstrumentId.USD_JPY,
+  label: 'USD/JPY',
+}, {
+  id: InstrumentId.USD_CAD,
+  label: 'USD/CAD',
+}, {
+  id: InstrumentId.GBP_USD,
+  label: 'GBP/USD',
+}, {
+  id: InstrumentId.GBP_JPY,
+  label: 'GBP/JPY',
+}, {
+  id: InstrumentId.GBP_CHF,
+  label: 'GBP/CHF',
+}, {
+  id: InstrumentId.AUD_JPY,
+  label: 'AUD/JPY',
+}, {
+  id: InstrumentId.AUD_USD,
+  label: 'AUD/USD',
+}, {
+  id: InstrumentId.NZD_USD,
+  label: 'NZD/USD',
+}, {
+  id: InstrumentId.XAU_USD,
+  label: 'XAU/USD',
+}, {
+  id: InstrumentId.XAG_USD,
+  label: 'XAG/USD',
+}];
+
+const instrumentPrecisionConfig: Record<InstrumentId, number> = {
+  [InstrumentId.EUR_AUD]: 5,
+  [InstrumentId.EUR_GBP]: 5,
+  [InstrumentId.EUR_JPY]: 3,
+  [InstrumentId.EUR_USD]: 5,
+  [InstrumentId.EUR_CHF]: 5,
+  [InstrumentId.USD_CHF]: 5,
+  [InstrumentId.USD_JPY]: 3,
+  [InstrumentId.USD_CAD]: 5,
+  [InstrumentId.GBP_USD]: 5,
+  [InstrumentId.GBP_JPY]: 3,
+  [InstrumentId.GBP_CHF]: 5,
+  [InstrumentId.AUD_JPY]: 3,
+  [InstrumentId.AUD_USD]: 5,
+  [InstrumentId.NZD_USD]: 5,
+  [InstrumentId.XAU_USD]: 3,
+  [InstrumentId.XAG_USD]: 5,
+};
+export { navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig };

package/src/OrderBookWidget/types.ts

@@ -1,9 +1,10 @@
 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;
 }
@@ -12,6 +13,30 @@ 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 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/src/translations/sources/en.json

@@ -1,4 +1,5 @@
 {
+  "buy": "Buy",
   "data_unavailable": "Data unavailable",
   "long": "Long",
   "long_positions": "Long Positions",
@@ -9,6 +10,8 @@
   "position_book": "Position Book",
   "price": "Price",
   "reset_zoom": "Reset Zoom",
+  "select_instrument": "Select instrument",
+  "sell": "Sell",
   "sell_orders": "Sell Orders",
   "short": "Short",
   "short_positions": "Short Positions",

package/src/translations/sources/zh_TW.json

@@ -1,4 +1,5 @@
 {
+  "buy": "買進",
   "data_unavailable": "沒有數據",
   "long": "長",
   "long_positions": "長倉",
@@ -9,6 +10,8 @@
   "position_book": "倉位手冊",
   "price": "價格",
   "reset_zoom": "重置比例",
+  "select_instrument": "選擇證券",
+  "sell": "賣出",
   "sell_orders": "賣單",
   "short": "短",
   "short_positions": "短倉",

package/test/Main.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { Main } from '../src/OrderBookWidget/Main';
+import { getOrderPositionBooks } from '../src/gql/getOrderPositionBooks';
+import { BookType } from '../src/gql/types/graphql';
+import { InstrumentId } from '../src';
+
+jest.mock('usehooks-ts', () => ({
+  useMediaQuery: jest.fn(),
+  useOnClickOutside: jest.fn(),
+  useElementSize: jest.fn().mockImplementation(() => [null, {
+    width: 100,
+  }]),
+}));
+
+const mocks = [
+  {
+    request: {
+      query: getOrderPositionBooks,
+      variables: {
+        instrument: InstrumentId.EUR_AUD,
+        bookType: BookType.Order,
+        recentHours: 1,
+      },
+    },
+    result: {
+      data: {
+        orderPositionBooks: [
+          {
+            bucketWidth: 0.0005,
+            price: 0.8,
+            buckets: [
+              {
+                price: 0.02,
+                longCountPercent: 0.0582,
+                shortCountPercent: 0.0,
+              },
+              {
+                price: 0.7,
+                longCountPercent: 0.0582,
+                shortCountPercent: 0.0,
+              },
+              {
+                price: 0.9925,
+                longCountPercent: 0.0582,
+                shortCountPercent: 0.0,
+              },
+              {
+                price: 1.0,
+                longCountPercent: 0.1163,
+                shortCountPercent: 0.0,
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: getOrderPositionBooks,
+      variables: {
+        instrument: InstrumentId.EUR_AUD,
+        bookType: BookType.Order,
+        recentHours: 1,
+      },
+    },
+    result: {
+      data: {
+        orderPositionBooks: [
+          {
+            bucketWidth: 0.0005,
+            price: 0.8,
+            buckets: [
+              {
+                price: 0.02,
+                longCountPercent: 0.0582,
+                shortCountPercent: 0.0,
+              },
+              {
+                price: 0.7,
+                longCountPercent: 0.0582,
+                shortCountPercent: 0.0,
+              },
+              {
+                price: 0.9925,
+                longCountPercent: 0.0582,
+                shortCountPercent: 0.0,
+              },
+              {
+                price: 1.0,
+                longCountPercent: 0.1163,
+                shortCountPercent: 0.0,
+              },
+            ],
+          },
+        ],
+      },
+    },
+  },
+];
+
+describe('Main component', () => {
+  it('should render tool component', async () => {
+    const { findByTestId, getByTestId } = render(
+      <MockedProvider mocks={mocks}>
+        <Main />
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('order-book-widget')).toBeInTheDocument();
+    expect(getByTestId('spinner')).toBeInTheDocument();
+    expect((await findByTestId('select'))).toBeInTheDocument();
+  });
+  it('should render widget component', async () => {
+    const { findByTestId, queryAllByTestId } = render(
+      <MockedProvider mocks={mocks}>
+        <Main instrument={InstrumentId.EUR_AUD} />
+      </MockedProvider>,
+    );
+
+    expect(await findByTestId('order-book-widget')).toBeInTheDocument();
+    expect((await queryAllByTestId('select')).length).toBe(0);
+  });
+});

package/test/chartOptions.test.ts

@@ -0,0 +1,20 @@
+import { tooltipFormatter } from '../src/OrderBookWidget/components/Chart/formatters';
+
+describe('tooltipFormatter', () => {
+  it('should display correct label on order book data', () => {
+    expect(tooltipFormatter({
+      data: [1.235, 0.023, -0.012],
+      precision: 5,
+      lang: (label) => label,
+      isOrderBook: true,
+    })).toEqual('price: 1.23500<br />buy: 0.023%<br />sell: 0.012%');
+  });
+  it('should display correct label on position book data', () => {
+    expect(tooltipFormatter({
+      data: [1.235, 0.023, -0.012],
+      precision: 5,
+      lang: (label) => label,
+      isOrderBook: false,
+    })).toEqual('price: 1.23500<br />long_positions: 0.023%<br />short_positions: 0.012%');
+  });
+});

package/dist/main/OrderBookWidget/Widget.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Widget = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _client = require("@apollo/client");
-var _labsWidgetCommon = require("@oanda/labs-widget-common");
-var _monoI18n = require("@oanda/mono-i18n");
-var _getOrderPositionBooks = require("../gql/getOrderPositionBooks");
-var _graphql = require("../gql/types/graphql");
-var _Chart = require("./components/Chart/Chart");
-var _config = require("./config");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const Widget = _ref => {
-  let {
-    instrument
-  } = _ref;
-  const [bookType, setBookType] = (0, _react.useState)(_graphql.BookType.Order);
-  const {
-    lang
-  } = (0, _monoI18n.useLocale)();
-  const {
-    loading,
-    data,
-    error
-  } = (0, _client.useQuery)(_getOrderPositionBooks.getOrderPositionBooks, {
-    variables: {
-      instrument,
-      bookType,
-      recentHours: 1
-    }
-  });
-  const isError = !loading && !data || !!error;
-  return _react.default.createElement("div", {
-    "data-testid": "order-book-widget",
-    className: "lw-p-4 lw-text-sm lw-tracking-normal lw-text-black"
-  }, _react.default.createElement(_labsWidgetCommon.Tabs, {
-    activeTab: bookType,
-    handleClick: e => setBookType(e.currentTarget.value),
-    labelCallback: lang,
-    items: _config.navigationConfig
-  }), _react.default.createElement("div", {
-    className: "lw-relative lw-h-[450px] lw-w-full"
-  }, isError && _react.default.createElement("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"
-  }, _react.default.createElement(_labsWidgetCommon.ChartError, null)), loading && _react.default.createElement("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"
-  }, _react.default.createElement(_labsWidgetCommon.Spinner, {
-    size: _labsWidgetCommon.SpinnerSize.lg
-  })), data && _react.default.createElement("div", {
-    className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
-  }, _react.default.createElement(_Chart.Chart, {
-    data: data,
-    isOrderBook: bookType === _graphql.BookType.Order
-  }))));
-};
-exports.Widget = Widget;
-//# sourceMappingURL=Widget.js.map

package/dist/main/OrderBookWidget/Widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Widget.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_monoI18n","_getOrderPositionBooks","_graphql","_Chart","_config","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Widget","_ref","instrument","bookType","setBookType","useState","BookType","Order","lang","useLocale","loading","data","error","useQuery","getOrderPositionBooks","variables","recentHours","isError","createElement","className","Tabs","activeTab","handleClick","currentTarget","value","labelCallback","items","navigationConfig","ChartError","Spinner","size","SpinnerSize","lg","Chart","isOrderBook","exports"],"sources":["../../../src/OrderBookWidget/Widget.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  ChartError, Spinner, SpinnerSize, Tabs,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { WidgetProps } from './types';\nimport { getOrderPositionBooks } from '../gql/getOrderPositionBooks';\nimport { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';\nimport { Chart } from './components/Chart/Chart';\nimport { navigationConfig } from './config';\n\nconst Widget = ({\n  instrument,\n}: WidgetProps) => {\n  const [bookType, setBookType] = useState(BookType.Order);\n  const { lang } = useLocale();\n\n  const { loading, data, error } = useQuery<\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables\n  >(getOrderPositionBooks, {\n    variables: {\n      instrument,\n      bookType,\n      recentHours: 1,\n    },\n  });\n\n  const isError = (!loading && !data) || !!error;\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-text-sm lw-tracking-normal lw-text-black\">\n      <Tabs\n        activeTab={bookType}\n        handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n        labelCallback={lang}\n        items={navigationConfig}\n      />\n      {/* @todo: chart height */}\n      <div className=\"lw-relative lw-h-[450px] lw-w-full\">\n        {isError && (\n          <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\">\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <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\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {data && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={data} isOrderBook={bookType === BookType.Order} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":"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"}

package/dist/module/OrderBookWidget/Widget.js

@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import { useQuery } from '@apollo/client';
-import { ChartError, Spinner, SpinnerSize, Tabs } from '@oanda/labs-widget-common';
-import { useLocale } from '@oanda/mono-i18n';
-import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
-import { BookType } from '../gql/types/graphql';
-import { Chart } from './components/Chart/Chart';
-import { navigationConfig } from './config';
-const Widget = _ref => {
-  let {
-    instrument
-  } = _ref;
-  const [bookType, setBookType] = useState(BookType.Order);
-  const {
-    lang
-  } = useLocale();
-  const {
-    loading,
-    data,
-    error
-  } = useQuery(getOrderPositionBooks, {
-    variables: {
-      instrument,
-      bookType,
-      recentHours: 1
-    }
-  });
-  const isError = !loading && !data || !!error;
-  return React.createElement("div", {
-    "data-testid": "order-book-widget",
-    className: "lw-p-4 lw-text-sm lw-tracking-normal lw-text-black"
-  }, React.createElement(Tabs, {
-    activeTab: bookType,
-    handleClick: e => setBookType(e.currentTarget.value),
-    labelCallback: lang,
-    items: navigationConfig
-  }), React.createElement("div", {
-    className: "lw-relative lw-h-[450px] lw-w-full"
-  }, isError && React.createElement("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"
-  }, React.createElement(ChartError, null)), loading && React.createElement("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"
-  }, React.createElement(Spinner, {
-    size: SpinnerSize.lg
-  })), data && React.createElement("div", {
-    className: "lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full"
-  }, React.createElement(Chart, {
-    data: data,
-    isOrderBook: bookType === BookType.Order
-  }))));
-};
-export { Widget };
-//# sourceMappingURL=Widget.js.map

package/dist/module/OrderBookWidget/Widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Widget.js","names":["React","useState","useQuery","ChartError","Spinner","SpinnerSize","Tabs","useLocale","getOrderPositionBooks","BookType","Chart","navigationConfig","Widget","_ref","instrument","bookType","setBookType","Order","lang","loading","data","error","variables","recentHours","isError","createElement","className","activeTab","handleClick","e","currentTarget","value","labelCallback","items","size","lg","isOrderBook"],"sources":["../../../src/OrderBookWidget/Widget.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  ChartError, Spinner, SpinnerSize, Tabs,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { WidgetProps } from './types';\nimport { getOrderPositionBooks } from '../gql/getOrderPositionBooks';\nimport { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';\nimport { Chart } from './components/Chart/Chart';\nimport { navigationConfig } from './config';\n\nconst Widget = ({\n  instrument,\n}: WidgetProps) => {\n  const [bookType, setBookType] = useState(BookType.Order);\n  const { lang } = useLocale();\n\n  const { loading, data, error } = useQuery<\n  GetOrderPositionBooksQuery,\n  GetOrderPositionBooksQueryVariables\n  >(getOrderPositionBooks, {\n    variables: {\n      instrument,\n      bookType,\n      recentHours: 1,\n    },\n  });\n\n  const isError = (!loading && !data) || !!error;\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-text-sm lw-tracking-normal lw-text-black\">\n      <Tabs\n        activeTab={bookType}\n        handleClick={(e) => setBookType(e.currentTarget.value as BookType)}\n        labelCallback={lang}\n        items={navigationConfig}\n      />\n      {/* @todo: chart height */}\n      <div className=\"lw-relative lw-h-[450px] lw-w-full\">\n        {isError && (\n          <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\">\n            <ChartError />\n          </div>\n        )}\n        {loading && (\n          <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\">\n            <Spinner size={SpinnerSize.lg} />\n          </div>\n        )}\n        {data && (\n          <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n            <Chart data={data} isOrderBook={bookType === BookType.Order} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SACEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,EAAEC,IAAI,QACjC,2BAA2B;AAClC,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,qBAAqB,QAAQ,8BAA8B;AACpE,SAA0EC,QAAQ,QAAQ,sBAAsB;AAChH,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,gBAAgB,QAAQ,UAAU;AAE3C,MAAMC,MAAM,GAAGC,IAAA,IAEI;EAAA,IAFH;IACdC;EACW,CAAC,GAAAD,IAAA;EACZ,MAAM,CAACE,QAAQ,EAAEC,WAAW,CAAC,GAAGf,QAAQ,CAACQ,QAAQ,CAACQ,KAAK,CAAC;EACxD,MAAM;IAAEC;EAAK,CAAC,GAAGX,SAAS,CAAC,CAAC;EAE5B,MAAM;IAAEY,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGnB,QAAQ,CAGvCM,qBAAqB,EAAE;IACvBc,SAAS,EAAE;MACTR,UAAU;MACVC,QAAQ;MACRQ,WAAW,EAAE;IACf;EACF,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAI,CAACL,OAAO,IAAI,CAACC,IAAI,IAAK,CAAC,CAACC,KAAK;EAE9C,OACErB,KAAA,CAAAyB,aAAA;IAAK,eAAY,mBAAmB;IAACC,SAAS,EAAC;EAAoD,GACjG1B,KAAA,CAAAyB,aAAA,CAACnB,IAAI;IACHqB,SAAS,EAAEZ,QAAS;IACpBa,WAAW,EAAGC,CAAC,IAAKb,WAAW,CAACa,CAAC,CAACC,aAAa,CAACC,KAAiB,CAAE;IACnEC,aAAa,EAAEd,IAAK;IACpBe,KAAK,EAAEtB;EAAiB,CACzB,CAAC,EAEFX,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAChDF,OAAO,IACNxB,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAAiJ,GAC9J1B,KAAA,CAAAyB,aAAA,CAACtB,UAAU,MAAE,CACV,CACN,EACAgB,OAAO,IACNnB,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAAiJ,GAC9J1B,KAAA,CAAAyB,aAAA,CAACrB,OAAO;IAAC8B,IAAI,EAAE7B,WAAW,CAAC8B;EAAG,CAAE,CAC7B,CACN,EACAf,IAAI,IACHpB,KAAA,CAAAyB,aAAA;IAAKC,SAAS,EAAC;EAA4D,GACzE1B,KAAA,CAAAyB,aAAA,CAACf,KAAK;IAACU,IAAI,EAAEA,IAAK;IAACgB,WAAW,EAAErB,QAAQ,KAAKN,QAAQ,CAACQ;EAAM,CAAE,CAC3D,CAEJ,CACF,CAAC;AAEV,CAAC;AAED,SAASL,MAAM"}

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

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { WidgetProps } from './types';
-declare const Widget: ({ instrument, }: WidgetProps) => JSX.Element;
-export { Widget };

package/src/OrderBookWidget/Widget.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from 'react';
-import { useQuery } from '@apollo/client';
-import {
-  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,
-}: WidgetProps) => {
-  const [bookType, setBookType] = useState(BookType.Order);
-  const { lang } = useLocale();
-
-  const { loading, data, error } = useQuery<
-  GetOrderPositionBooksQuery,
-  GetOrderPositionBooksQueryVariables
-  >(getOrderPositionBooks, {
-    variables: {
-      instrument,
-      bookType,
-      recentHours: 1,
-    },
-  });
-
-  const isError = (!loading && !data) || !!error;
-
-  return (
-    <div data-testid="order-book-widget" className="lw-p-4 lw-text-sm lw-tracking-normal lw-text-black">
-      <Tabs
-        activeTab={bookType}
-        handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
-        labelCallback={lang}
-        items={navigationConfig}
-      />
-      {/* @todo: chart height */}
-      <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-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-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} isOrderBook={bookType === BookType.Order} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export { Widget };

package/test/Widget.test.tsx

@@ -1,71 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-import React from 'react';
-import { render } from '@testing-library/react';
-import { MockedProvider } from '@apollo/client/testing';
-import { Widget } from '../src/OrderBookWidget/Widget';
-import { getOrderPositionBooks } from '../src/gql/getOrderPositionBooks';
-import { BookType } from '../src/gql/types/graphql';
-
-const mocks = [
-  {
-    request: {
-      query: getOrderPositionBooks,
-      variables: {
-        instrument: 'EUR_USD',
-        bookType: BookType.Order,
-        recentHours: 1,
-      },
-    },
-    result: {
-      data: {
-        orderPositionBooks: [
-          {
-            bucketWidth: '0.0005',
-            price: '0.8',
-            buckets: [
-              {
-                price: '0.02',
-                longCountPercent: '0.0582',
-                shortCountPercent: '0.0',
-              },
-              {
-                price: '0.7',
-                longCountPercent: '0.0582',
-                shortCountPercent: '0.0',
-              },
-              {
-                price: '0.9925',
-                longCountPercent: '0.0582',
-                shortCountPercent: '0.0',
-              },
-              {
-                price: '1.0',
-                longCountPercent: '0.1163',
-                shortCountPercent: '0.0',
-              },
-            ],
-          },
-
-        ],
-      },
-    },
-  },
-];
-
-jest.mock('../src/OrderBookWidget/components/Chart/Chart', () => ({
-  Chart: () => <p data-testid="chart-test-component">Chart</p>,
-}));
-
-describe('Widget component', () => {
-  it('should render widget component', async () => {
-    const { findByTestId } = render(
-      <MockedProvider mocks={mocks}>
-        <Widget instrument="EUR_USD" />
-      </MockedProvider>,
-    );
-
-    expect(await findByTestId('order-book-widget')).toBeInTheDocument();
-  });
-});