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

package/dist/module/OrderBookWidget/config.js

@@ -1,4 +1,5 @@
 import { BookType } from '../gql/types/graphql';
+import { InstrumentId } from './types';
 const navigationConfig = [{
   id: BookType.Order,
   label: 'order_book'
@@ -6,5 +7,72 @@ const navigationConfig = [{
   id: BookType.Position,
   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 = {
+  [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 };
 //# sourceMappingURL=config.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["BookType","navigationConfig","id","Order","label","Position"],"sources":["../../../src/OrderBookWidget/config.ts"],"sourcesContent":["import { BookType } from '../gql/types/graphql';\n\nconst navigationConfig = [{\n  id: BookType.Order,\n  label: 'order_book',\n}, {\n  id: BookType.Position,\n  label: 'position_book',\n}];\n\nexport { navigationConfig };\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,sBAAsB;AAE/C,MAAMC,gBAAgB,GAAG,CAAC;EACxBC,EAAE,EAAEF,QAAQ,CAACG,KAAK;EAClBC,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,QAAQ,CAACK,QAAQ;EACrBD,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,SAASH,gBAAgB"}
+{"version":3,"file":"config.js","names":["BookType","InstrumentId","navigationConfig","id","Order","label","Position","instrumentSelectConfig","EUR_AUD","EUR_GBP","EUR_JPY","EUR_USD","EUR_CHF","USD_CHF","USD_JPY","USD_CAD","GBP_USD","GBP_JPY","GBP_CHF","AUD_JPY","AUD_USD","NZD_USD","XAU_USD","XAG_USD","instrumentPrecisionConfig"],"sources":["../../../src/OrderBookWidget/config.ts"],"sourcesContent":["import { BookType } from '../gql/types/graphql';\nimport { InstrumentId } from './types';\n\nconst navigationConfig = [{\n  id: BookType.Order,\n  label: 'order_book',\n}, {\n  id: BookType.Position,\n  label: 'position_book',\n}];\n\nconst instrumentSelectConfig = [{\n  id: InstrumentId.EUR_AUD,\n  label: 'EUR/AUD',\n}, {\n  id: InstrumentId.EUR_GBP,\n  label: 'EUR/GBP',\n}, {\n  id: InstrumentId.EUR_JPY,\n  label: 'EUR/JPY',\n}, {\n  id: InstrumentId.EUR_USD,\n  label: 'EUR/USD',\n}, {\n  id: InstrumentId.EUR_CHF,\n  label: 'EUR/CHF',\n}, {\n  id: InstrumentId.USD_CHF,\n  label: 'USD/CHF',\n}, {\n  id: InstrumentId.USD_JPY,\n  label: 'USD/JPY',\n}, {\n  id: InstrumentId.USD_CAD,\n  label: 'USD/CAD',\n}, {\n  id: InstrumentId.GBP_USD,\n  label: 'GBP/USD',\n}, {\n  id: InstrumentId.GBP_JPY,\n  label: 'GBP/JPY',\n}, {\n  id: InstrumentId.GBP_CHF,\n  label: 'GBP/CHF',\n}, {\n  id: InstrumentId.AUD_JPY,\n  label: 'AUD/JPY',\n}, {\n  id: InstrumentId.AUD_USD,\n  label: 'AUD/USD',\n}, {\n  id: InstrumentId.NZD_USD,\n  label: 'NZD/USD',\n}, {\n  id: InstrumentId.XAU_USD,\n  label: 'XAU/USD',\n}, {\n  id: InstrumentId.XAG_USD,\n  label: 'XAG/USD',\n}];\n\nconst instrumentPrecisionConfig: Record<InstrumentId, number> = {\n  [InstrumentId.EUR_AUD]: 5,\n  [InstrumentId.EUR_GBP]: 5,\n  [InstrumentId.EUR_JPY]: 3,\n  [InstrumentId.EUR_USD]: 5,\n  [InstrumentId.EUR_CHF]: 5,\n  [InstrumentId.USD_CHF]: 5,\n  [InstrumentId.USD_JPY]: 3,\n  [InstrumentId.USD_CAD]: 5,\n  [InstrumentId.GBP_USD]: 5,\n  [InstrumentId.GBP_JPY]: 3,\n  [InstrumentId.GBP_CHF]: 5,\n  [InstrumentId.AUD_JPY]: 3,\n  [InstrumentId.AUD_USD]: 5,\n  [InstrumentId.NZD_USD]: 5,\n  [InstrumentId.XAU_USD]: 3,\n  [InstrumentId.XAG_USD]: 5,\n};\nexport { navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig };\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,YAAY,QAAQ,SAAS;AAEtC,MAAMC,gBAAgB,GAAG,CAAC;EACxBC,EAAE,EAAEH,QAAQ,CAACI,KAAK;EAClBC,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEH,QAAQ,CAACM,QAAQ;EACrBD,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAME,sBAAsB,GAAG,CAAC;EAC9BJ,EAAE,EAAEF,YAAY,CAACO,OAAO;EACxBH,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACQ,OAAO;EACxBJ,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACS,OAAO;EACxBL,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACU,OAAO;EACxBN,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACW,OAAO;EACxBP,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACY,OAAO;EACxBR,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACa,OAAO;EACxBT,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACc,OAAO;EACxBV,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACe,OAAO;EACxBX,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACgB,OAAO;EACxBZ,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACiB,OAAO;EACxBb,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACkB,OAAO;EACxBd,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACmB,OAAO;EACxBf,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACoB,OAAO;EACxBhB,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACqB,OAAO;EACxBjB,KAAK,EAAE;AACT,CAAC,EAAE;EACDF,EAAE,EAAEF,YAAY,CAACsB,OAAO;EACxBlB,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMmB,yBAAuD,GAAG;EAC9D,CAACvB,YAAY,CAACO,OAAO,GAAG,CAAC;EACzB,CAACP,YAAY,CAACQ,OAAO,GAAG,CAAC;EACzB,CAACR,YAAY,CAACS,OAAO,GAAG,CAAC;EACzB,CAACT,YAAY,CAACU,OAAO,GAAG,CAAC;EACzB,CAACV,YAAY,CAACW,OAAO,GAAG,CAAC;EACzB,CAACX,YAAY,CAACY,OAAO,GAAG,CAAC;EACzB,CAACZ,YAAY,CAACa,OAAO,GAAG,CAAC;EACzB,CAACb,YAAY,CAACc,OAAO,GAAG,CAAC;EACzB,CAACd,YAAY,CAACe,OAAO,GAAG,CAAC;EACzB,CAACf,YAAY,CAACgB,OAAO,GAAG,CAAC;EACzB,CAAChB,YAAY,CAACiB,OAAO,GAAG,CAAC;EACzB,CAACjB,YAAY,CAACkB,OAAO,GAAG,CAAC;EACzB,CAAClB,YAAY,CAACmB,OAAO,GAAG,CAAC;EACzB,CAACnB,YAAY,CAACoB,OAAO,GAAG,CAAC;EACzB,CAACpB,YAAY,CAACqB,OAAO,GAAG,CAAC;EACzB,CAACrB,YAAY,CAACsB,OAAO,GAAG;AAC1B,CAAC;AACD,SAASrB,gBAAgB,EAAEK,sBAAsB,EAAEiB,yBAAyB"}

package/dist/module/OrderBookWidget/types.js

@@ -1,2 +1,20 @@
-export {};
+export let InstrumentId = function (InstrumentId) {
+  InstrumentId["EUR_AUD"] = "EUR_AUD";
+  InstrumentId["EUR_GBP"] = "EUR_GBP";
+  InstrumentId["EUR_JPY"] = "EUR_JPY";
+  InstrumentId["EUR_USD"] = "EUR_USD";
+  InstrumentId["EUR_CHF"] = "EUR_CHF";
+  InstrumentId["USD_CHF"] = "USD_CHF";
+  InstrumentId["USD_JPY"] = "USD_JPY";
+  InstrumentId["USD_CAD"] = "USD_CAD";
+  InstrumentId["GBP_USD"] = "GBP_USD";
+  InstrumentId["GBP_JPY"] = "GBP_JPY";
+  InstrumentId["GBP_CHF"] = "GBP_CHF";
+  InstrumentId["AUD_JPY"] = "AUD_JPY";
+  InstrumentId["AUD_USD"] = "AUD_USD";
+  InstrumentId["NZD_USD"] = "NZD_USD";
+  InstrumentId["XAU_USD"] = "XAU_USD";
+  InstrumentId["XAG_USD"] = "XAG_USD";
+  return InstrumentId;
+}({});
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/OrderBookWidget/types.ts"],"sourcesContent":["import { Theme } from '@oanda/labs-widget-common';\nimport { Locale } from '@oanda/mono-i18n';\n\nexport interface OrderBookWidgetConfig {\n  graphqlUrl: string;\n  instrument: string;\n  locale: Locale;\n  theme?: Theme;\n}\n\nexport interface OrderBookWrapperConfig extends OrderBookWidgetConfig {\n  renderElementId: string;\n}\n\nexport interface WidgetProps {\n  instrument: string;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":["InstrumentId"],"sources":["../../../src/OrderBookWidget/types.ts"],"sourcesContent":["import { Theme } from '@oanda/labs-widget-common';\nimport { Locale } from '@oanda/mono-i18n';\nimport { BookType } from '../gql/types/graphql';\n\nexport interface OrderBookWidgetConfig {\n  graphqlUrl: string;\n  instrument: InstrumentId;\n  locale: Locale;\n  theme?: Theme;\n}\n\nexport interface OrderBookWrapperConfig extends OrderBookWidgetConfig {\n  renderElementId: string;\n}\n\nexport interface MainProps {\n  instrument?: InstrumentId;\n}\n\nexport interface ChartWithDataProps {\n  instrument: InstrumentId;\n  bookType: BookType;\n}\n\nexport enum InstrumentId {\n  EUR_AUD = 'EUR_AUD',\n  EUR_GBP = 'EUR_GBP',\n  EUR_JPY = 'EUR_JPY',\n  EUR_USD = 'EUR_USD',\n  EUR_CHF = 'EUR_CHF',\n  USD_CHF = 'USD_CHF',\n  USD_JPY = 'USD_JPY',\n  USD_CAD = 'USD_CAD',\n  GBP_USD = 'GBP_USD',\n  GBP_JPY = 'GBP_JPY',\n  GBP_CHF = 'GBP_CHF',\n  AUD_JPY = 'AUD_JPY',\n  AUD_USD = 'AUD_USD',\n  NZD_USD = 'NZD_USD',\n  XAU_USD = 'XAU_USD',\n  XAG_USD = 'XAG_USD',\n}\n"],"mappings":"AAwBA,WAAYA,YAAY,aAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAZA,YAAY;EAAA,OAAZA,YAAY;AAAA"}

package/dist/module/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/dist/module/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/dist/types/OrderBookWidget/ChartWithData.d.ts

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

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

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

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ChartProps } from './types';
-export declare const Chart: ({ data, isOrderBook }: ChartProps) => JSX.Element;
+export declare const Chart: ({ data, isOrderBook, precision }: ChartProps) => JSX.Element;

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

@@ -1,6 +1,8 @@
 export declare const INITIAL_BARS = 80;
 export declare const X_LABEL_SIZE = 40;
-export declare const Y_LABEL_SIZE_MOBILE = 35;
+export declare const Y_LABEL_SIZE_MOBILE = 50;
 export declare const Y_LABEL_SIZE_DESKTOP = 120;
 export declare const CHART_WIDTH = 9999;
-export declare const CHART_HEIGHT = 450;
+export declare const CHART_HEIGHT_DESKTOP = 450;
+export declare const CHART_HEIGHT_MOBILE = 390;
+export declare const ZOOM_CONTROL_HEIGHT = 40;

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

@@ -1,5 +1,5 @@
 import { GetOptionType, GetResponsiveOptionsProps } from './types';
-export declare const getDesktopOption: ({ isDark, isOrderBook }: GetResponsiveOptionsProps) => {
+export declare const getResponsiveOption: ({ isDark, isOrderBook, isDesktop, lang, }: GetResponsiveOptionsProps) => {
     grid: {
         name: string;
         top: string;
@@ -7,6 +7,21 @@ export declare const getDesktopOption: ({ isDark, isOrderBook }: GetResponsiveOp
         right: string;
         bottom: string;
     }[];
+    yAxis: {
+        axisLabel: {
+            margin: number;
+        };
+    };
+    series: {
+        type: string;
+        name: string;
+        id: string;
+        markLine: {
+            label: {
+                padding: number[];
+            };
+        };
+    }[];
     graphic: ({
         top: number | undefined;
         bottom: number | undefined;

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

@@ -3,16 +3,26 @@ 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 {
     data: GetOrderPositionBooksQuery;
     precision: number;
     isDark: boolean;
     isOrderBook: boolean;
+    isDesktop: boolean;
+    lang: (label: string) => string;
 }
 export type GetOptionType = (props: GetOptionProps) => EChartsOption;
-export type TooltipFormatterType = (data: number[], precision: number, isOrderBook: boolean) => string;
+export type TooltipFormatterType = (props: {
+    data: number[];
+    precision: number;
+    isOrderBook: boolean;
+    lang: (label: string) => string;
+}) => string;

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

@@ -1,6 +1,12 @@
 import { BookType } from '../gql/types/graphql';
+import { InstrumentId } from './types';
 declare const navigationConfig: {
     id: BookType;
     label: string;
 }[];
-export { navigationConfig };
+declare const instrumentSelectConfig: {
+    id: InstrumentId;
+    label: string;
+}[];
+declare const instrumentPrecisionConfig: Record<InstrumentId, number>;
+export { navigationConfig, instrumentSelectConfig, instrumentPrecisionConfig };

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

@@ -1,14 +1,37 @@
 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;
 }
 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 declare 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.70",
+  "version": "1.0.72",
   "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.70",
+    "@oanda/labs-widget-common": "^1.0.72",
     "@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": "2dafe2b860ab4c1be9a490b33e23ff51b5ab7608"
+  "gitHead": "4a224fac68b6b607825b7ac6802ea0b5c499996e"
 }

package/src/OrderBookWidget/ChartWithData.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import { useMediaQuery } from 'usehooks-ts';
+import classnames from 'classnames';
+import { ChartError, Spinner, SpinnerSize } from '@oanda/labs-widget-common';
+import { ChartWithDataProps } from './types';
+import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
+import { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';
+import { Chart } from './components/Chart/Chart';
+import { instrumentPrecisionConfig } from './config';
+
+const ChartWithData = ({
+  instrument,
+  bookType,
+}: ChartWithDataProps) => {
+  const isDesktop = useMediaQuery('(min-width: 768px)');
+
+  const { loading, data, error } = useQuery<
+  GetOrderPositionBooksQuery,
+  GetOrderPositionBooksQueryVariables
+  >(getOrderPositionBooks, {
+    variables: {
+      instrument,
+      bookType,
+      recentHours: 1,
+    },
+  });
+
+  const isError = (!loading && !data?.orderPositionBooks[0]?.price) || !!error;
+
+  return (
+    <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>
+      )}
+      {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>
+      )}
+      {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}
+          precision={instrumentPrecisionConfig[instrument]}
+        />
+      </div>
+      )}
+    </div>
+  );
+};
+
+export { ChartWithData };

package/src/OrderBookWidget/Main.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Select, Tabs } from '@oanda/labs-widget-common';
+import { useLocale } from '@oanda/mono-i18n';
+import { InstrumentId, MainProps } from './types';
+import { BookType } from '../gql/types/graphql';
+import { instrumentSelectConfig, navigationConfig } from './config';
+import { ChartWithData } from './ChartWithData';
+
+const Main = ({ instrument }: MainProps) => {
+  const [bookType, setBookType] = useState(BookType.Order);
+  const [toolInstrument, setToolInstrument] = useState(instrumentSelectConfig[0]);
+  const { lang } = useLocale();
+
+  return (
+    <div data-testid="order-book-widget" className="lw-p-4 lw-pt-0 lw-text-sm lw-tracking-normal lw-text-black">
+      <Tabs
+        activeTab={bookType}
+        handleClick={(e) => setBookType(e.currentTarget.value as BookType)}
+        labelCallback={lang}
+        items={navigationConfig}
+        mobileFullWidth
+      />
+      {!instrument && (
+        <div className="lw-mb-6 lw-mt-12">
+          <Select
+            selectLabel={lang('select_instrument')}
+            options={instrumentSelectConfig}
+            selectedOption={toolInstrument}
+            setSelectedOption={
+              (val) => setToolInstrument(val as { id: InstrumentId; label: string })
+            }
+          />
+        </div>
+      )}
+      <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />
+    </div>
+  );
+};
+
+export { Main };

package/src/OrderBookWidget/OrderBookWidget.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
 import { LocaleProvider } from '@oanda/mono-i18n';
 import { ThemeProvider, getLocale } from '@oanda/labs-widget-common';
-import { Widget } from './Widget';
+import { Main } from './Main';
 import { OrderBookWidgetConfig } from './types';
 import { translations } from '../translations';
 
@@ -21,7 +21,7 @@ const OrderBookWidget = ({
     <ThemeProvider theme={theme}>
       <LocaleProvider locale={getLocale(locale)} translations={translations}>
         <ApolloProvider client={client}>
-          <Widget instrument={instrument} />
+          <Main instrument={instrument} />
         </ApolloProvider>
       </LocaleProvider>
     </ThemeProvider>

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

@@ -5,13 +5,15 @@ import {
   Theme, ThemeContext, colorPalette, getChartTheme,
 } from '@oanda/labs-widget-common';
 import { useMediaQuery } from 'usehooks-ts';
-import { getDesktopOption, getOption } from './getOption';
+import { useLocale } from '@oanda/mono-i18n';
+import { getResponsiveOption, getOption } from './getOption';
 import { ChartProps } from './types';
 
 registerTheme('dark_theme', getChartTheme(Theme.Dark));
 registerTheme('light_theme', getChartTheme(Theme.Light));
 
-export const Chart = ({ data, isOrderBook }: ChartProps) => {
+export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
+  const { lang } = useLocale();
   const isDark = useContext(ThemeContext) === Theme.Dark;
   const echartRef = useRef(null);
   const isDesktop = useMediaQuery('(min-width: 768px)');
@@ -48,9 +50,13 @@ export const Chart = ({ data, isOrderBook }: ChartProps) => {
       // @ts-ignore
       const echartInstance = echartRef.current.getEchartsInstance() as EChartsType;
 
-      echartInstance.setOption(getDesktopOption({ isDark, isOrderBook }));
+      echartInstance.setOption(
+        getResponsiveOption({
+          isDark, isOrderBook, isDesktop, lang,
+        }),
+      );
     }
-  }, [echartRef, isDesktop, isDark, isOrderBook]);
+  }, [echartRef, isDesktop, isDark, isOrderBook, lang]);
 
   return (
     <div className="lw-relative lw-w-full">
@@ -60,11 +66,11 @@ export const Chart = ({ data, isOrderBook }: ChartProps) => {
             ref={echartRef}
             theme={isDark ? 'dark_theme' : 'light_theme'}
             style={{
-              height: '450px',
+              height: isDesktop ? '450px' : '390px',
               width: '100%',
             }}
             option={getOption({
-              data, precision: 4, isDark, isOrderBook,
+              data, precision, isDark, isOrderBook, isDesktop, lang,
             })}
           />
         )}

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

@@ -1,7 +1,9 @@
 export const INITIAL_BARS = 80;
 
 export const X_LABEL_SIZE = 40;
-export const Y_LABEL_SIZE_MOBILE = 35;
+export const Y_LABEL_SIZE_MOBILE = 50;
 export const Y_LABEL_SIZE_DESKTOP = 120;
 export const CHART_WIDTH = 9999;
-export const CHART_HEIGHT = 450;
+export const CHART_HEIGHT_DESKTOP = 450;
+export const CHART_HEIGHT_MOBILE = 390;
+export const ZOOM_CONTROL_HEIGHT = 40;

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

@@ -1,9 +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}%` : '';
+const tooltipFormatter: TooltipFormatterType = ({
+  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}%` : '';
 
   return priceText + buyText + sellText;
 };