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

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;

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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"}