@oanda/labs-order-book-widget 1.0.62 → 1.0.64

package/CHANGELOG.md

@@ -3,6 +3,490 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.64 (2024-01-11)
+
+
+
+## 1.0.63 (2024-01-11)
+
+
+
+## 1.0.62 (2024-01-10)
+
+
+
+## 1.0.61 (2024-01-09)
+
+
+
+## 1.0.60 (2024-01-05)
+
+
+
+## 1.0.59 (2023-12-27)
+
+
+
+## 1.0.58 (2023-12-22)
+
+
+
+## 1.0.57 (2023-12-22)
+
+
+
+## 1.0.56 (2023-12-21)
+
+
+
+## 1.0.55 (2023-12-19)
+
+
+
+## 1.0.54 (2023-12-15)
+
+
+
+## 1.0.53 (2023-12-13)
+
+
+
+## 1.0.52 (2023-12-13)
+
+
+
+## 1.0.51 (2023-12-07)
+
+
+
+## 1.0.50 (2023-12-04)
+
+
+
+## 1.0.49 (2023-12-01)
+
+
+
+## 1.0.48 (2023-12-01)
+
+
+
+## 1.0.47 (2023-11-29)
+
+
+
+## 1.0.46 (2023-11-28)
+
+
+
+## 1.0.45 (2023-11-23)
+
+
+
+## 1.0.44 (2023-11-22)
+
+
+
+## 1.0.43 (2023-11-15)
+
+
+
+## 1.0.42 (2023-11-10)
+
+
+
+## 1.0.41 (2023-11-03)
+
+
+
+## 1.0.40 (2023-11-02)
+
+
+
+## 1.0.39 (2023-11-02)
+
+
+
+## 1.0.38 (2023-10-26)
+
+
+
+## 1.0.37 (2023-10-26)
+
+
+
+## 1.0.36 (2023-10-25)
+
+
+
+## 1.0.35 (2023-10-24)
+
+
+
+## 1.0.34 (2023-10-23)
+
+
+
+## 1.0.33 (2023-10-23)
+
+
+
+## 1.0.32 (2023-10-23)
+
+
+
+## 1.0.31 (2023-10-20)
+
+
+
+## 1.0.30 (2023-10-19)
+
+
+
+## 1.0.29 (2023-10-19)
+
+
+
+## 1.0.28 (2023-10-19)
+
+
+
+## 1.0.27 (2023-10-18)
+
+
+
+## 1.0.26 (2023-10-18)
+
+
+
+## 1.0.25 (2023-10-17)
+
+
+
+## 1.0.24 (2023-10-13)
+
+
+
+## 1.0.23 (2023-10-13)
+
+
+
+## 1.0.22 (2023-10-11)
+
+
+
+## 1.0.21 (2023-10-10)
+
+
+
+## 1.0.20 (2023-10-06)
+
+
+
+## 1.0.19 (2023-10-06)
+
+
+
+## 1.0.18 (2023-10-05)
+
+
+
+## 1.0.17 (2023-10-04)
+
+
+
+## 1.0.16 (2023-10-04)
+
+
+
+## 1.0.15 (2023-10-04)
+
+
+
+## 1.0.14 (2023-10-03)
+
+
+
+## 1.0.13 (2023-10-03)
+
+
+
+## 1.0.12 (2023-10-03)
+
+
+
+## 1.0.11 (2023-10-02)
+
+
+
+## 1.0.10 (2023-09-29)
+
+
+
+## 1.0.9 (2023-09-28)
+
+
+
+## 1.0.8 (2023-09-27)
+
+
+
+## 1.0.7 (2023-09-26)
+
+
+
+## 1.0.6 (2023-09-21)
+
+
+
+## 1.0.5 (2023-09-13)
+
+**Note:** Version bump only for package @oanda/labs-order-book-widget
+
+
+
+
+
+## 1.0.63 (2024-01-11)
+
+
+
+## 1.0.62 (2024-01-10)
+
+
+
+## 1.0.61 (2024-01-09)
+
+
+
+## 1.0.60 (2024-01-05)
+
+
+
+## 1.0.59 (2023-12-27)
+
+
+
+## 1.0.58 (2023-12-22)
+
+
+
+## 1.0.57 (2023-12-22)
+
+
+
+## 1.0.56 (2023-12-21)
+
+
+
+## 1.0.55 (2023-12-19)
+
+
+
+## 1.0.54 (2023-12-15)
+
+
+
+## 1.0.53 (2023-12-13)
+
+
+
+## 1.0.52 (2023-12-13)
+
+
+
+## 1.0.51 (2023-12-07)
+
+
+
+## 1.0.50 (2023-12-04)
+
+
+
+## 1.0.49 (2023-12-01)
+
+
+
+## 1.0.48 (2023-12-01)
+
+
+
+## 1.0.47 (2023-11-29)
+
+
+
+## 1.0.46 (2023-11-28)
+
+
+
+## 1.0.45 (2023-11-23)
+
+
+
+## 1.0.44 (2023-11-22)
+
+
+
+## 1.0.43 (2023-11-15)
+
+
+
+## 1.0.42 (2023-11-10)
+
+
+
+## 1.0.41 (2023-11-03)
+
+
+
+## 1.0.40 (2023-11-02)
+
+
+
+## 1.0.39 (2023-11-02)
+
+
+
+## 1.0.38 (2023-10-26)
+
+
+
+## 1.0.37 (2023-10-26)
+
+
+
+## 1.0.36 (2023-10-25)
+
+
+
+## 1.0.35 (2023-10-24)
+
+
+
+## 1.0.34 (2023-10-23)
+
+
+
+## 1.0.33 (2023-10-23)
+
+
+
+## 1.0.32 (2023-10-23)
+
+
+
+## 1.0.31 (2023-10-20)
+
+
+
+## 1.0.30 (2023-10-19)
+
+
+
+## 1.0.29 (2023-10-19)
+
+
+
+## 1.0.28 (2023-10-19)
+
+
+
+## 1.0.27 (2023-10-18)
+
+
+
+## 1.0.26 (2023-10-18)
+
+
+
+## 1.0.25 (2023-10-17)
+
+
+
+## 1.0.24 (2023-10-13)
+
+
+
+## 1.0.23 (2023-10-13)
+
+
+
+## 1.0.22 (2023-10-11)
+
+
+
+## 1.0.21 (2023-10-10)
+
+
+
+## 1.0.20 (2023-10-06)
+
+
+
+## 1.0.19 (2023-10-06)
+
+
+
+## 1.0.18 (2023-10-05)
+
+
+
+## 1.0.17 (2023-10-04)
+
+
+
+## 1.0.16 (2023-10-04)
+
+
+
+## 1.0.15 (2023-10-04)
+
+
+
+## 1.0.14 (2023-10-03)
+
+
+
+## 1.0.13 (2023-10-03)
+
+
+
+## 1.0.12 (2023-10-03)
+
+
+
+## 1.0.11 (2023-10-02)
+
+
+
+## 1.0.10 (2023-09-29)
+
+
+
+## 1.0.9 (2023-09-28)
+
+
+
+## 1.0.8 (2023-09-27)
+
+
+
+## 1.0.7 (2023-09-26)
+
+
+
+## 1.0.6 (2023-09-21)
+
+
+
+## 1.0.5 (2023-09-13)
+
+**Note:** Version bump only for package @oanda/labs-order-book-widget
+
+
+
+
+
 ## 1.0.62 (2024-01-10)
 
 

package/dist/main/OrderBookWidget/OrderBookWidget.js

@@ -15,20 +15,23 @@ const OrderBookWidget = _ref => {
   let {
     graphqlUrl,
     instrument,
-    locale
+    locale,
+    theme
   } = _ref;
   const client = new _client.ApolloClient({
     uri: graphqlUrl,
     cache: new _client.InMemoryCache()
   });
-  return _react.default.createElement(_monoI18n.LocaleProvider, {
+  return _react.default.createElement(_labsWidgetCommon.ThemeProvider, {
+    theme: theme
+  }, _react.default.createElement(_monoI18n.LocaleProvider, {
     locale: (0, _labsWidgetCommon.getLocale)(locale),
     translations: _translations.translations
   }, _react.default.createElement(_client.ApolloProvider, {
     client: client
   }, _react.default.createElement(_Widget.Widget, {
     instrument: instrument
-  })));
+  }))));
 };
 exports.OrderBookWidget = OrderBookWidget;
 //# sourceMappingURL=OrderBookWidget.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OrderBookWidget.js","names":["_react","_interopRequireDefault","require","_client","_monoI18n","_labsWidgetCommon","_Widget","_translations","obj","__esModule","default","OrderBookWidget","_ref","graphqlUrl","instrument","locale","client","ApolloClient","uri","cache","InMemoryCache","createElement","LocaleProvider","getLocale","translations","ApolloProvider","Widget","exports"],"sources":["../../../src/OrderBookWidget/OrderBookWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { getLocale } from '@oanda/labs-widget-common';\nimport { Widget } from './Widget';\nimport { OrderBookWidgetConfig } from './types';\nimport { translations } from '../translations';\n\nconst OrderBookWidget = ({\n  graphqlUrl,\n  instrument,\n  locale,\n}: OrderBookWidgetConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <LocaleProvider locale={getLocale(locale)} translations={translations}>\n      <ApolloProvider client={client}>\n        <Widget instrument={instrument} />\n      </ApolloProvider>\n    </LocaleProvider>\n  );\n};\n\nexport { OrderBookWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAEA,IAAAK,aAAA,GAAAL,OAAA;AAA+C,SAAAD,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE/C,MAAMG,eAAe,GAAGC,IAAA,IAIK;EAAA,IAJJ;IACvBC,UAAU;IACVC,UAAU;IACVC;EACqB,CAAC,GAAAH,IAAA;EACtB,MAAMI,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEL,UAAU;IACfM,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACEpB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACjB,SAAA,CAAAkB,cAAc;IAACP,MAAM,EAAE,IAAAQ,2BAAS,EAACR,MAAM,CAAE;IAACS,YAAY,EAAEA;EAAa,GACpExB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAAClB,OAAA,CAAAsB,cAAc;IAACT,MAAM,EAAEA;EAAO,GAC7BhB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACf,OAAA,CAAAoB,MAAM;IAACZ,UAAU,EAAEA;EAAW,CAAE,CACnB,CACF,CAAC;AAErB,CAAC;AAACa,OAAA,CAAAhB,eAAA,GAAAA,eAAA"}
+{"version":3,"file":"OrderBookWidget.js","names":["_react","_interopRequireDefault","require","_client","_monoI18n","_labsWidgetCommon","_Widget","_translations","obj","__esModule","default","OrderBookWidget","_ref","graphqlUrl","instrument","locale","theme","client","ApolloClient","uri","cache","InMemoryCache","createElement","ThemeProvider","LocaleProvider","getLocale","translations","ApolloProvider","Widget","exports"],"sources":["../../../src/OrderBookWidget/OrderBookWidget.tsx"],"sourcesContent":["import React from 'react';\nimport { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';\nimport { LocaleProvider } from '@oanda/mono-i18n';\nimport { ThemeProvider, getLocale } from '@oanda/labs-widget-common';\nimport { Widget } from './Widget';\nimport { OrderBookWidgetConfig } from './types';\nimport { translations } from '../translations';\n\nconst OrderBookWidget = ({\n  graphqlUrl,\n  instrument,\n  locale,\n  theme,\n}: OrderBookWidgetConfig) => {\n  const client = new ApolloClient({\n    uri: graphqlUrl,\n    cache: new InMemoryCache(),\n  });\n\n  return (\n    <ThemeProvider theme={theme}>\n      <LocaleProvider locale={getLocale(locale)} translations={translations}>\n        <ApolloProvider client={client}>\n          <Widget instrument={instrument} />\n        </ApolloProvider>\n      </LocaleProvider>\n    </ThemeProvider>\n  );\n};\n\nexport { OrderBookWidget };\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAEA,IAAAK,aAAA,GAAAL,OAAA;AAA+C,SAAAD,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE/C,MAAMG,eAAe,GAAGC,IAAA,IAKK;EAAA,IALJ;IACvBC,UAAU;IACVC,UAAU;IACVC,MAAM;IACNC;EACqB,CAAC,GAAAJ,IAAA;EACtB,MAAMK,MAAM,GAAG,IAAIC,oBAAY,CAAC;IAC9BC,GAAG,EAAEN,UAAU;IACfO,KAAK,EAAE,IAAIC,qBAAa,CAAC;EAC3B,CAAC,CAAC;EAEF,OACErB,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAACjB,iBAAA,CAAAkB,aAAa;IAACP,KAAK,EAAEA;EAAM,GAC1BhB,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAAClB,SAAA,CAAAoB,cAAc;IAACT,MAAM,EAAE,IAAAU,2BAAS,EAACV,MAAM,CAAE;IAACW,YAAY,EAAEA;EAAa,GACpE1B,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAACnB,OAAA,CAAAwB,cAAc;IAACV,MAAM,EAAEA;EAAO,GAC7BjB,MAAA,CAAAU,OAAA,CAAAY,aAAA,CAAChB,OAAA,CAAAsB,MAAM;IAACd,UAAU,EAAEA;EAAW,CAAE,CACnB,CACF,CACH,CAAC;AAEpB,CAAC;AAACe,OAAA,CAAAlB,eAAA,GAAAA,eAAA"}

package/dist/main/OrderBookWidget/Widget.js

@@ -11,6 +11,7 @@ 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 => {
@@ -33,30 +34,27 @@ const Widget = _ref => {
     }
   });
   const isError = !loading && !data || !!error;
-  const isTypeOrder = bookType === _graphql.BookType.Order;
   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("div", {
-    className: "lw-flex lw-gap-2"
-  }, _react.default.createElement(_labsWidgetCommon.Button, {
-    variant: isTypeOrder ? _labsWidgetCommon.ButtonVariant.primary : _labsWidgetCommon.ButtonVariant.secondary,
-    onClick: () => setBookType(_graphql.BookType.Order)
-  }, lang('order_book')), _react.default.createElement(_labsWidgetCommon.Button, {
-    variant: isTypeOrder ? _labsWidgetCommon.ButtonVariant.secondary : _labsWidgetCommon.ButtonVariant.primary,
-    onClick: () => setBookType(_graphql.BookType.Position)
-  }, lang('position_book'))), _react.default.createElement("div", {
-    className: "lw-relative lw-h-[700px] lw-w-full"
+  }, _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-bg-lightGrey/[0.4]"
+    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-bg-lightGrey/[0.4]"
+    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
+    data: data,
+    isOrderBook: bookType === _graphql.BookType.Order
   }))));
 };
 exports.Widget = Widget;

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

@@ -1 +1 @@
-{"version":3,"file":"Widget.js","names":["_react","_interopRequireWildcard","require","_client","_labsWidgetCommon","_monoI18n","_getOrderPositionBooks","_graphql","_Chart","_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","isTypeOrder","createElement","className","Button","variant","ButtonVariant","primary","secondary","onClick","Position","ChartError","Spinner","size","SpinnerSize","lg","Chart","exports"],"sources":["../../../src/OrderBookWidget/Widget.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useQuery } from '@apollo/client';\nimport {\n  Button, ButtonVariant, ChartError, Spinner, SpinnerSize,\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';\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  const isTypeOrder = bookType === BookType.Order;\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-text-sm lw-tracking-normal lw-text-black\">\n      <div className=\"lw-flex lw-gap-2\">\n        <Button\n          variant={isTypeOrder ? ButtonVariant.primary : ButtonVariant.secondary}\n          onClick={() => setBookType(BookType.Order)}\n        >\n          {lang('order_book')}\n        </Button>\n        <Button\n          variant={isTypeOrder ? ButtonVariant.secondary : ButtonVariant.primary}\n          onClick={() => setBookType(BookType.Position)}\n        >\n          {lang('position_book')}\n        </Button>\n      </div>\n      {/* @todo: chart height */}\n      <div className=\"lw-relative lw-h-[700px] 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-bg-lightGrey/[0.4]\">\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-bg-lightGrey/[0.4]\">\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} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport { Widget };\n"],"mappings":"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"}
+{"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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAGA,IAAAG,SAAA,GAAAH,OAAA;AAEA,IAAAI,sBAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAA4C,SAAAQ,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAE5C,MAAMY,MAAM,GAAGC,IAAA,IAEI;EAAA,IAFH;IACdC;EACW,CAAC,GAAAD,IAAA;EACZ,MAAM,CAACE,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAACC,iBAAQ,CAACC,KAAK,CAAC;EACxD,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAE5B,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAG,IAAAC,gBAAQ,EAGvCC,4CAAqB,EAAE;IACvBC,SAAS,EAAE;MACTb,UAAU;MACVC,QAAQ;MACRa,WAAW,EAAE;IACf;EACF,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAI,CAACP,OAAO,IAAI,CAACC,IAAI,IAAK,CAAC,CAACC,KAAK;EAE9C,OACE3C,MAAA,CAAAgB,OAAA,CAAAiC,aAAA;IAAK,eAAY,mBAAmB;IAACC,SAAS,EAAC;EAAoD,GACjGlD,MAAA,CAAAgB,OAAA,CAAAiC,aAAA,CAAC7C,iBAAA,CAAA+C,IAAI;IACHC,SAAS,EAAElB,QAAS;IACpBmB,WAAW,EAAG1C,CAAC,IAAKwB,WAAW,CAACxB,CAAC,CAAC2C,aAAa,CAACC,KAAiB,CAAE;IACnEC,aAAa,EAAEjB,IAAK;IACpBkB,KAAK,EAAEC;EAAiB,CACzB,CAAC,EAEF1D,MAAA,CAAAgB,OAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAChDF,OAAO,IACNhD,MAAA,CAAAgB,OAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAC;EAAiJ,GAC9JlD,MAAA,CAAAgB,OAAA,CAAAiC,aAAA,CAAC7C,iBAAA,CAAAuD,UAAU,MAAE,CACV,CACN,EACAlB,OAAO,IACNzC,MAAA,CAAAgB,OAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAC;EAAiJ,GAC9JlD,MAAA,CAAAgB,OAAA,CAAAiC,aAAA,CAAC7C,iBAAA,CAAAwD,OAAO;IAACC,IAAI,EAAEC,6BAAW,CAACC;EAAG,CAAE,CAC7B,CACN,EACArB,IAAI,IACH1C,MAAA,CAAAgB,OAAA,CAAAiC,aAAA;IAAKC,SAAS,EAAC;EAA4D,GACzElD,MAAA,CAAAgB,OAAA,CAAAiC,aAAA,CAACzC,MAAA,CAAAwD,KAAK;IAACtB,IAAI,EAAEA,IAAK;IAACuB,WAAW,EAAE/B,QAAQ,KAAKG,iBAAQ,CAACC;EAAM,CAAE,CAC3D,CAEJ,CACF,CAAC;AAEV,CAAC;AAAC4B,OAAA,CAAAnC,MAAA,GAAAA,MAAA"}

package/dist/main/OrderBookWidget/components/Chart/Chart.js

@@ -4,30 +4,65 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Chart = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
-var _getOptions = require("./getOptions");
+var _echarts = require("echarts");
+var _labsWidgetCommon = require("@oanda/labs-widget-common");
+var _usehooksTs = require("usehooks-ts");
+var _getOption = require("./getOption");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+(0, _echarts.registerTheme)('dark_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Dark));
+(0, _echarts.registerTheme)('light_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Light));
 const Chart = _ref => {
-  var _data$orderPositionBo, _data$orderPositionBo2, _data$orderPositionBo3;
   let {
-    data
+    data,
+    isOrderBook
   } = _ref;
-  const buckets = ((_data$orderPositionBo = data.orderPositionBooks[0]) === null || _data$orderPositionBo === void 0 ? void 0 : _data$orderPositionBo.buckets) || [];
-  const bucketWidth = (_data$orderPositionBo2 = data.orderPositionBooks[0]) === null || _data$orderPositionBo2 === void 0 ? void 0 : _data$orderPositionBo2.bucketWidth;
-  const price = (_data$orderPositionBo3 = data.orderPositionBooks[0]) === null || _data$orderPositionBo3 === void 0 ? void 0 : _data$orderPositionBo3.price;
-  const chartData = buckets.map(item => [item.price, Number(item.longCountPercent), Number(item.shortCountPercent) * -1]);
+  const isDark = (0, _react.useContext)(_labsWidgetCommon.ThemeContext) === _labsWidgetCommon.Theme.Dark;
+  const echartRef = (0, _react.useRef)(null);
+  const isDesktop = (0, _usehooksTs.useMediaQuery)('(min-width: 768px)');
+  (0, _react.useEffect)(() => {
+    if (echartRef.current) {
+      const echartInstance = echartRef.current.getEchartsInstance();
+      echartInstance.on('highlight', () => {
+        if (echartInstance.getOption().color[0] === _labsWidgetCommon.colorPalette.bottleGreenLight) {
+          echartInstance.setOption({
+            color: [_labsWidgetCommon.colorPalette.bottleGreenLight70, isDark ? _labsWidgetCommon.colorPalette.orange70 : _labsWidgetCommon.colorPalette.raspberryDark70]
+          });
+        }
+      });
+      echartInstance.on('globalout', () => {
+        echartInstance.setOption({
+          color: [_labsWidgetCommon.colorPalette.bottleGreenLight, isDark ? _labsWidgetCommon.colorPalette.orange : _labsWidgetCommon.colorPalette.raspberryDark]
+        });
+      });
+    }
+  }, [echartRef, isDark]);
+  (0, _react.useEffect)(() => {
+    if (echartRef.current) {
+      const echartInstance = echartRef.current.getEchartsInstance();
+      echartInstance.setOption((0, _getOption.getDesktopOption)({
+        isDark,
+        isOrderBook
+      }));
+    }
+  }, [echartRef, isDesktop, isDark, isOrderBook]);
   return _react.default.createElement("div", {
     className: "lw-relative lw-w-full"
-  }, _react.default.createElement("div", null, price && bucketWidth && _react.default.createElement(_echartsForReact.default, {
+  }, _react.default.createElement("div", null, data && _react.default.createElement(_echartsForReact.default, {
+    ref: echartRef,
+    theme: isDark ? 'dark_theme' : 'light_theme',
     style: {
-      height: '600px',
+      height: '450px',
       width: '100%'
     },
-    option: (0, _getOptions.getOptions)({
-      data: chartData,
-      price,
-      bucketWidth
+    option: (0, _getOption.getOption)({
+      data,
+      precision: 4,
+      isDark,
+      isOrderBook
     })
   })));
 };