@oanda/labs-order-book-widget 1.0.83 → 1.0.85

package/CHANGELOG.md

@@ -3,6 +3,658 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.85 (2024-02-13)
+
+
+
+## 1.0.84 (2024-02-13)
+
+
+
+## 1.0.83 (2024-02-09)
+
+
+
+## 1.0.82 (2024-02-05)
+
+
+
+## 1.0.81 (2024-02-05)
+
+
+
+## 1.0.80 (2024-02-05)
+
+
+
+## 1.0.79 (2024-02-05)
+
+
+
+## 1.0.78 (2024-01-30)
+
+
+
+## 1.0.77 (2024-01-25)
+
+
+
+## 1.0.76 (2024-01-25)
+
+
+
+## 1.0.75 (2024-01-22)
+
+
+
+## 1.0.74 (2024-01-22)
+
+
+
+## 1.0.73 (2024-01-22)
+
+
+
+## 1.0.72 (2024-01-19)
+
+
+
+## 1.0.71 (2024-01-18)
+
+
+
+## 1.0.70 (2024-01-17)
+
+
+
+## 1.0.69 (2024-01-17)
+
+
+
+## 1.0.68 (2024-01-15)
+
+
+
+## 1.0.67 (2024-01-15)
+
+
+
+## 1.0.66 (2024-01-12)
+
+
+
+## 1.0.65 (2024-01-11)
+
+
+
+## 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.84 (2024-02-13)
+
+
+
+## 1.0.83 (2024-02-09)
+
+
+
+## 1.0.82 (2024-02-05)
+
+
+
+## 1.0.81 (2024-02-05)
+
+
+
+## 1.0.80 (2024-02-05)
+
+
+
+## 1.0.79 (2024-02-05)
+
+
+
+## 1.0.78 (2024-01-30)
+
+
+
+## 1.0.77 (2024-01-25)
+
+
+
+## 1.0.76 (2024-01-25)
+
+
+
+## 1.0.75 (2024-01-22)
+
+
+
+## 1.0.74 (2024-01-22)
+
+
+
+## 1.0.73 (2024-01-22)
+
+
+
+## 1.0.72 (2024-01-19)
+
+
+
+## 1.0.71 (2024-01-18)
+
+
+
+## 1.0.70 (2024-01-17)
+
+
+
+## 1.0.69 (2024-01-17)
+
+
+
+## 1.0.68 (2024-01-15)
+
+
+
+## 1.0.67 (2024-01-15)
+
+
+
+## 1.0.66 (2024-01-12)
+
+
+
+## 1.0.65 (2024-01-11)
+
+
+
+## 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.83 (2024-02-09)
 
 

package/dist/main/OrderBookWidget/ChartWithData.js

@@ -22,8 +22,9 @@ const ChartWithData = _ref => {
     bookType
   } = _ref;
   const {
-    isDesktop
+    size
   } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  const isDesktop = size === _labsWidgetCommon.Size.DESKTOP;
   const {
     loading,
     data,

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

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["_react","_interopRequireWildcard","require","_client","_classnames","_interopRequireDefault","_labsWidgetCommon","_getOrderPositionBooks","_graphql","_Chart","_config","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ChartWithData","_ref","_data$orderPositionBo","instrument","bookType","isDesktop","useContext","ThemeContext","loading","data","error","useQuery","getOrderPositionBooks","variables","recentHours","isError","orderPositionBooks","price","createElement","className","classnames","ChartError","Spinner","size","SpinnerSize","lg","Chart","isOrderBook","BookType","Order","precision","instrumentPrecisionConfig","exports"],"sources":["../../../src/OrderBookWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport classnames from 'classnames';\nimport {\n  ChartError, Spinner, SpinnerSize, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { ChartWithDataProps } from './types';\nimport { getOrderPositionBooks } from '../gql/getOrderPositionBooks';\nimport { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';\nimport { Chart } from './components/Chart/Chart';\nimport { instrumentPrecisionConfig } from './config';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n}: ChartWithDataProps) => {\n  const { isDesktop } = useContext(ThemeContext);\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?.orderPositionBooks[0]?.price) || !!error;\n\n  return (\n    <div className={classnames('lw-relative lw-w-full', {\n      'lw-h-[450px]': isDesktop,\n      'lw-h-[390px]': !isDesktop,\n    })}\n    >\n      {isError && (\n      <div className={\n            classnames(\n              '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',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              },\n            )\n          }\n      >\n        <ChartError />\n      </div>\n      )}\n      {loading && (\n      <div className={\n            classnames(\n              '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',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              },\n            )\n          }\n      >\n        <Spinner size={SpinnerSize.lg} />\n      </div>\n      )}\n      {!isError && data && (\n        <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n          <Chart\n            data={data}\n            isOrderBook={bookType === BookType.Order}\n            precision={instrumentPrecisionConfig[instrument]}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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"}
+{"version":3,"file":"ChartWithData.js","names":["_react","_interopRequireWildcard","require","_client","_classnames","_interopRequireDefault","_labsWidgetCommon","_getOrderPositionBooks","_graphql","_Chart","_config","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ChartWithData","_ref","_data$orderPositionBo","instrument","bookType","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","loading","data","error","useQuery","getOrderPositionBooks","variables","recentHours","isError","orderPositionBooks","price","createElement","className","classnames","ChartError","Spinner","SpinnerSize","lg","Chart","isOrderBook","BookType","Order","precision","instrumentPrecisionConfig","exports"],"sources":["../../../src/OrderBookWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport classnames from 'classnames';\nimport {\n  ChartError, Size, Spinner, SpinnerSize, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { ChartWithDataProps } from './types';\nimport { getOrderPositionBooks } from '../gql/getOrderPositionBooks';\nimport { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';\nimport { Chart } from './components/Chart/Chart';\nimport { instrumentPrecisionConfig } from './config';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n}: ChartWithDataProps) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\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?.orderPositionBooks[0]?.price) || !!error;\n\n  return (\n    <div className={classnames('lw-relative lw-w-full', {\n      'lw-h-[450px]': isDesktop,\n      'lw-h-[390px]': !isDesktop,\n    })}\n    >\n      {isError && (\n      <div className={\n            classnames(\n              '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',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              },\n            )\n          }\n      >\n        <ChartError />\n      </div>\n      )}\n      {loading && (\n      <div className={\n            classnames(\n              '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',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              },\n            )\n          }\n      >\n        <Spinner size={SpinnerSize.lg} />\n      </div>\n      )}\n      {!isError && data && (\n        <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n          <Chart\n            data={data}\n            isOrderBook={bookType === BookType.Order}\n            precision={instrumentPrecisionConfig[instrument]}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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"}

package/dist/main/OrderBookWidget/Main.js

@@ -16,12 +16,15 @@ const Main = _ref => {
   let {
     instrument
   } = _ref;
+  const {
+    size
+  } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
   const [bookType, setBookType] = (0, _react.useState)(_graphql.BookType.Order);
   const [toolInstrument, setToolInstrument] = (0, _react.useState)(_config.instrumentSelectConfig[0]);
   const {
     lang
   } = (0, _monoI18n.useLocale)();
-  return _react.default.createElement("div", {
+  return _react.default.createElement(_react.default.Fragment, null, size && _react.default.createElement("div", {
     "data-testid": "order-book-widget",
     className: "lw-p-4 lw-pt-0 lw-text-sm lw-tracking-normal lw-text-black"
   }, _react.default.createElement(_labsWidgetCommon.Tabs, {
@@ -40,7 +43,7 @@ const Main = _ref => {
   })), _react.default.createElement(_ChartWithData.ChartWithData, {
     instrument: instrument || toolInstrument.id,
     bookType: bookType
-  }));
+  })));
 };
 exports.Main = Main;
 //# sourceMappingURL=Main.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_labsWidgetCommon","_monoI18n","_graphql","_config","_ChartWithData","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Main","_ref","instrument","bookType","setBookType","useState","BookType","Order","toolInstrument","setToolInstrument","instrumentSelectConfig","lang","useLocale","createElement","className","Tabs","activeTab","handleClick","currentTarget","value","labelCallback","items","navigationConfig","mobileFullWidth","Select","selectLabel","options","selectedOption","setSelectedOption","val","ChartWithData","id","exports"],"sources":["../../../src/OrderBookWidget/Main.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Select, Tabs } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { InstrumentId, MainProps } from './types';\nimport { BookType } from '../gql/types/graphql';\nimport { instrumentSelectConfig, navigationConfig } from './config';\nimport { ChartWithData } from './ChartWithData';\n\nconst Main = ({ instrument }: MainProps) => {\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [toolInstrument, setToolInstrument] = useState(instrumentSelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-pt-0 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        mobileFullWidth\n      />\n      {!instrument && (\n        <div className=\"lw-mb-6 lw-mt-12\">\n          <Select\n            selectLabel={lang('instrument')}\n            options={instrumentSelectConfig}\n            selectedOption={toolInstrument}\n            setSelectedOption={\n              (val) => setToolInstrument(val as { id: InstrumentId; label: string })\n            }\n          />\n        </div>\n      )}\n      <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"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"}
+{"version":3,"file":"Main.js","names":["_react","_interopRequireWildcard","require","_labsWidgetCommon","_monoI18n","_graphql","_config","_ChartWithData","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Main","_ref","instrument","size","useContext","ThemeContext","bookType","setBookType","useState","BookType","Order","toolInstrument","setToolInstrument","instrumentSelectConfig","lang","useLocale","createElement","Fragment","className","Tabs","activeTab","handleClick","currentTarget","value","labelCallback","items","navigationConfig","mobileFullWidth","Select","selectLabel","options","selectedOption","setSelectedOption","val","ChartWithData","id","exports"],"sources":["../../../src/OrderBookWidget/Main.tsx"],"sourcesContent":["import React, { useState, useContext } from 'react';\nimport { Select, Tabs, ThemeContext } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { InstrumentId, MainProps } from './types';\nimport { BookType } from '../gql/types/graphql';\nimport { instrumentSelectConfig, navigationConfig } from './config';\nimport { ChartWithData } from './ChartWithData';\n\nconst Main = ({ instrument }: MainProps) => {\n  const { size } = useContext(ThemeContext);\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [toolInstrument, setToolInstrument] = useState(instrumentSelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-pt-0 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          mobileFullWidth\n        />\n        {!instrument && (\n        <div className=\"lw-mb-6 lw-mt-12\">\n          <Select\n            selectLabel={lang('instrument')}\n            options={instrumentSelectConfig}\n            selectedOption={toolInstrument}\n            setSelectedOption={\n              (val) => setToolInstrument(val as { id: InstrumentId; label: string })\n            }\n          />\n        </div>\n        )}\n        <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"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"}

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

@@ -30,8 +30,9 @@ const Chart = _ref => {
   } = (0, _monoI18n.useLocale)();
   const {
     isDark,
-    isDesktop
+    size
   } = (0, _react.useContext)(_labsWidgetCommon.ThemeContext);
+  const isDesktop = size === _labsWidgetCommon.Size.DESKTOP;
   const echartRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (echartRef.current) {

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["_react","_interopRequireWildcard","require","_core","_interopRequireDefault","echarts","_charts","_renderers","_components","_labsWidgetCommon","_monoI18n","_getOption","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","CanvasRenderer","CustomChart","MarkLineComponent","ToolboxComponent","DataZoomInsideComponent","DatasetComponent","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","data","isOrderBook","precision","lang","useLocale","isDark","isDesktop","useContext","ThemeContext","echartRef","useRef","useEffect","current","echartInstance","getEchartsInstance","on","getOption","color","colorPalette","bottleGreenLight","setOption","bottleGreenLight70","orange70","raspberryDark70","orange","raspberryDark","getResponsiveOption","createElement","className","ref","theme","style","height","width","option","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  MarkLineComponent,\n  ToolboxComponent,\n  DataZoomInsideComponent,\n  DatasetComponent,\n} from 'echarts/components';\nimport {\n  Theme, ThemeContext, colorPalette, getChartTheme,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getResponsiveOption, getOption } from './getOption';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  CanvasRenderer,\n  CustomChart,\n  MarkLineComponent,\n  ToolboxComponent,\n  DataZoomInsideComponent,\n  DatasetComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nexport const Chart = ({ data, isOrderBook, precision }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark, isDesktop } = useContext(ThemeContext);\n\n  const echartRef = useRef(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.on('highlight', () => {\n        if ((\n          echartInstance.getOption().color as echarts.Color[])[0] === colorPalette.bottleGreenLight\n        ) {\n          echartInstance.setOption({\n            color: [\n              colorPalette.bottleGreenLight70,\n              isDark ? colorPalette.orange70 : colorPalette.raspberryDark70,\n            ],\n          });\n        }\n      });\n\n      echartInstance.on('globalout', () => {\n        echartInstance.setOption({\n          color: [\n            colorPalette.bottleGreenLight,\n            isDark ? colorPalette.orange : colorPalette.raspberryDark,\n          ],\n        });\n      });\n    }\n  }, [echartRef, isDark]);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.setOption(\n        getResponsiveOption({\n          isDark, isOrderBook, isDesktop, lang,\n        }),\n      );\n    }\n  }, [echartRef, isDesktop, isDark, isOrderBook, lang]);\n\n  return (\n    <div className=\"lw-relative lw-w-full\">\n      <div>\n        {data && (\n          <ReactEChartsCore\n            echarts={echarts}\n            ref={echartRef}\n            theme={isDark ? 'dark_theme' : 'light_theme'}\n            style={{\n              height: isDesktop ? '450px' : '390px',\n              width: '100%',\n            }}\n            option={getOption({\n              data, precision, isDark, isOrderBook, isDesktop, lang,\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAJ,uBAAA,CAAAC,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AAUA,IAAAO,iBAAA,GAAAP,OAAA;AAGA,IAAAQ,SAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AAA6D,SAAAE,uBAAAQ,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,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,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,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,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAG7DjB,OAAO,CAAC6B,GAAG,CAAC,CACVC,+BAAmB,EACnBC,4BAAgB,EAChBC,4BAAgB,EAChBC,0BAAc,EACdC,yBAAc,EACdC,mBAAW,EACXC,6BAAiB,EACjBC,4BAAgB,EAChBC,mCAAuB,EACvBC,4BAAgB,CACjB,CAAC;AAEFvC,OAAO,CAACwC,aAAa,CAAC,YAAY,EAAE,IAAAC,+BAAa,EAACC,uBAAK,CAACC,IAAI,CAAC,CAAC;AAC9D3C,OAAO,CAACwC,aAAa,CAAC,aAAa,EAAE,IAAAC,+BAAa,EAACC,uBAAK,CAACE,KAAK,CAAC,CAAC;AAEzD,MAAMC,KAAK,GAAGC,IAAA,IAAkD;EAAA,IAAjD;IAAEC,IAAI;IAAEC,WAAW;IAAEC;EAAsB,CAAC,GAAAH,IAAA;EAChE,MAAM;IAAEI;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAC5B,MAAM;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAC;EAEtD,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAE9B,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIF,SAAS,CAACG,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGJ,SAAS,CAACG,OAAO,CAACE,kBAAkB,CAAC,CAAwB;MAEpFD,cAAc,CAACE,EAAE,CAAC,WAAW,EAAE,MAAM;QACnC,IACEF,cAAc,CAACG,SAAS,CAAC,CAAC,CAACC,KAAK,CAAqB,CAAC,CAAC,KAAKC,8BAAY,CAACC,gBAAgB,EACzF;UACAN,cAAc,CAACO,SAAS,CAAC;YACvBH,KAAK,EAAE,CACLC,8BAAY,CAACG,kBAAkB,EAC/BhB,MAAM,GAAGa,8BAAY,CAACI,QAAQ,GAAGJ,8BAAY,CAACK,eAAe;UAEjE,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;MAEFV,cAAc,CAACE,EAAE,CAAC,WAAW,EAAE,MAAM;QACnCF,cAAc,CAACO,SAAS,CAAC;UACvBH,KAAK,EAAE,CACLC,8BAAY,CAACC,gBAAgB,EAC7Bd,MAAM,GAAGa,8BAAY,CAACM,MAAM,GAAGN,8BAAY,CAACO,aAAa;QAE7D,CAAC,CAAC;MACJ,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAAChB,SAAS,EAAEJ,MAAM,CAAC,CAAC;EAEvB,IAAAM,gBAAS,EAAC,MAAM;IACd,IAAIF,SAAS,CAACG,OAAO,EAAE;MAErB,MAAMC,cAAc,GAAGJ,SAAS,CAACG,OAAO,CAACE,kBAAkB,CAAC,CAAwB;MAEpFD,cAAc,CAACO,SAAS,CACtB,IAAAM,8BAAmB,EAAC;QAClBrB,MAAM;QAAEJ,WAAW;QAAEK,SAAS;QAAEH;MAClC,CAAC,CACH,CAAC;IACH;EACF,CAAC,EAAE,CAACM,SAAS,EAAEH,SAAS,EAAED,MAAM,EAAEJ,WAAW,EAAEE,IAAI,CAAC,CAAC;EAErD,OACEvD,MAAA,CAAAc,OAAA,CAAAiE,aAAA;IAAKC,SAAS,EAAC;EAAuB,GACpChF,MAAA,CAAAc,OAAA,CAAAiE,aAAA,cACG3B,IAAI,IACHpD,MAAA,CAAAc,OAAA,CAAAiE,aAAA,CAAC5E,KAAA,CAAAW,OAAgB;IACfT,OAAO,EAAEA,OAAQ;IACjB4E,GAAG,EAAEpB,SAAU;IACfqB,KAAK,EAAEzB,MAAM,GAAG,YAAY,GAAG,aAAc;IAC7C0B,KAAK,EAAE;MACLC,MAAM,EAAE1B,SAAS,GAAG,OAAO,GAAG,OAAO;MACrC2B,KAAK,EAAE;IACT,CAAE;IACFC,MAAM,EAAE,IAAAlB,oBAAS,EAAC;MAChBhB,IAAI;MAAEE,SAAS;MAAEG,MAAM;MAAEJ,WAAW;MAAEK,SAAS;MAAEH;IACnD,CAAC;EAAE,CACJ,CAEA,CACF,CAAC;AAEV,CAAC;AAACgC,OAAA,CAAArC,KAAA,GAAAA,KAAA"}
+{"version":3,"file":"Chart.js","names":["_react","_interopRequireWildcard","require","_core","_interopRequireDefault","echarts","_charts","_renderers","_components","_labsWidgetCommon","_monoI18n","_getOption","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","use","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","CanvasRenderer","CustomChart","MarkLineComponent","ToolboxComponent","DataZoomInsideComponent","DatasetComponent","registerTheme","getChartTheme","Theme","Dark","Light","Chart","_ref","data","isOrderBook","precision","lang","useLocale","isDark","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","echartRef","useRef","useEffect","current","echartInstance","getEchartsInstance","on","getOption","color","colorPalette","bottleGreenLight","setOption","bottleGreenLight70","orange70","raspberryDark70","orange","raspberryDark","getResponsiveOption","createElement","className","ref","theme","style","height","width","option","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  MarkLineComponent,\n  ToolboxComponent,\n  DataZoomInsideComponent,\n  DatasetComponent,\n} from 'echarts/components';\nimport {\n  Theme, ThemeContext, colorPalette, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getResponsiveOption, getOption } from './getOption';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  CanvasRenderer,\n  CustomChart,\n  MarkLineComponent,\n  ToolboxComponent,\n  DataZoomInsideComponent,\n  DatasetComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nexport const Chart = ({ data, isOrderBook, precision }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark, size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n\n  const echartRef = useRef(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.on('highlight', () => {\n        if ((\n          echartInstance.getOption().color as echarts.Color[])[0] === colorPalette.bottleGreenLight\n        ) {\n          echartInstance.setOption({\n            color: [\n              colorPalette.bottleGreenLight70,\n              isDark ? colorPalette.orange70 : colorPalette.raspberryDark70,\n            ],\n          });\n        }\n      });\n\n      echartInstance.on('globalout', () => {\n        echartInstance.setOption({\n          color: [\n            colorPalette.bottleGreenLight,\n            isDark ? colorPalette.orange : colorPalette.raspberryDark,\n          ],\n        });\n      });\n    }\n  }, [echartRef, isDark]);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.setOption(\n        getResponsiveOption({\n          isDark, isOrderBook, isDesktop, lang,\n        }),\n      );\n    }\n  }, [echartRef, isDesktop, isDark, isOrderBook, lang]);\n\n  return (\n    <div className=\"lw-relative lw-w-full\">\n      <div>\n        {data && (\n          <ReactEChartsCore\n            echarts={echarts}\n            ref={echartRef}\n            theme={isDark ? 'dark_theme' : 'light_theme'}\n            style={{\n              height: isDesktop ? '450px' : '390px',\n              width: '100%',\n            }}\n            option={getOption({\n              data, precision, isDark, isOrderBook, isDesktop, lang,\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/module/OrderBookWidget/ChartWithData.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { useQuery } from '@apollo/client';
 import classnames from 'classnames';
-import { ChartError, Spinner, SpinnerSize, ThemeContext } from '@oanda/labs-widget-common';
+import { ChartError, Size, Spinner, SpinnerSize, ThemeContext } from '@oanda/labs-widget-common';
 import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
 import { BookType } from '../gql/types/graphql';
 import { Chart } from './components/Chart/Chart';
@@ -13,8 +13,9 @@ const ChartWithData = _ref => {
     bookType
   } = _ref;
   const {
-    isDesktop
+    size
   } = useContext(ThemeContext);
+  const isDesktop = size === Size.DESKTOP;
   const {
     loading,
     data,

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

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["React","useContext","useQuery","classnames","ChartError","Spinner","SpinnerSize","ThemeContext","getOrderPositionBooks","BookType","Chart","instrumentPrecisionConfig","ChartWithData","_ref","_data$orderPositionBo","instrument","bookType","isDesktop","loading","data","error","variables","recentHours","isError","orderPositionBooks","price","createElement","className","size","lg","isOrderBook","Order","precision"],"sources":["../../../src/OrderBookWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport classnames from 'classnames';\nimport {\n  ChartError, Spinner, SpinnerSize, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { ChartWithDataProps } from './types';\nimport { getOrderPositionBooks } from '../gql/getOrderPositionBooks';\nimport { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';\nimport { Chart } from './components/Chart/Chart';\nimport { instrumentPrecisionConfig } from './config';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n}: ChartWithDataProps) => {\n  const { isDesktop } = useContext(ThemeContext);\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?.orderPositionBooks[0]?.price) || !!error;\n\n  return (\n    <div className={classnames('lw-relative lw-w-full', {\n      'lw-h-[450px]': isDesktop,\n      'lw-h-[390px]': !isDesktop,\n    })}\n    >\n      {isError && (\n      <div className={\n            classnames(\n              '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',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              },\n            )\n          }\n      >\n        <ChartError />\n      </div>\n      )}\n      {loading && (\n      <div className={\n            classnames(\n              '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',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              },\n            )\n          }\n      >\n        <Spinner size={SpinnerSize.lg} />\n      </div>\n      )}\n      {!isError && data && (\n        <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n          <Chart\n            data={data}\n            isOrderBook={bookType === BookType.Order}\n            precision={instrumentPrecisionConfig[instrument]}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,UAAU,EAAEC,OAAO,EAAEC,WAAW,EAAEC,YAAY,QACzC,2BAA2B;AAElC,SAASC,qBAAqB,QAAQ,8BAA8B;AACpE,SAA0EC,QAAQ,QAAQ,sBAAsB;AAChH,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,yBAAyB,QAAQ,UAAU;AAEpD,MAAMC,aAAa,GAAGC,IAAA,IAGI;EAAA,IAAAC,qBAAA;EAAA,IAHH;IACrBC,UAAU;IACVC;EACkB,CAAC,GAAAH,IAAA;EACnB,MAAM;IAAEI;EAAU,CAAC,GAAGhB,UAAU,CAACM,YAAY,CAAC;EAE9C,MAAM;IAAEW,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGlB,QAAQ,CAGvCM,qBAAqB,EAAE;IACvBa,SAAS,EAAE;MACTN,UAAU;MACVC,QAAQ;MACRM,WAAW,EAAE;IACf;EACF,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAI,CAACL,OAAO,IAAI,EAACC,IAAI,aAAJA,IAAI,gBAAAL,qBAAA,GAAJK,IAAI,CAAEK,kBAAkB,CAAC,CAAC,CAAC,cAAAV,qBAAA,eAA3BA,qBAAA,CAA6BW,KAAK,KAAK,CAAC,CAACL,KAAK;EAE5E,OACEpB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAExB,UAAU,CAAC,uBAAuB,EAAE;MAClD,cAAc,EAAEc,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEAM,OAAO,IACRvB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EACRxB,UAAU,CACR,uIAAuI,EACvI;MACE,WAAW,EAAEc,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EACD,GAEHjB,KAAA,CAAA0B,aAAA,CAACtB,UAAU,MAAE,CACV,CACJ,EACAc,OAAO,IACRlB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EACRxB,UAAU,CACR,uIAAuI,EACvI;MACE,WAAW,EAAEc,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EACD,GAEHjB,KAAA,CAAA0B,aAAA,CAACrB,OAAO;IAACuB,IAAI,EAAEtB,WAAW,CAACuB;EAAG,CAAE,CAC7B,CACJ,EACA,CAACN,OAAO,IAAIJ,IAAI,IACfnB,KAAA,CAAA0B,aAAA;IAAKC,SAAS,EAAC;EAA4D,GACzE3B,KAAA,CAAA0B,aAAA,CAAChB,KAAK;IACJS,IAAI,EAAEA,IAAK;IACXW,WAAW,EAAEd,QAAQ,KAAKP,QAAQ,CAACsB,KAAM;IACzCC,SAAS,EAAErB,yBAAyB,CAACI,UAAU;EAAE,CAClD,CACE,CAEJ,CAAC;AAEV,CAAC;AAED,SAASH,aAAa"}
+{"version":3,"file":"ChartWithData.js","names":["React","useContext","useQuery","classnames","ChartError","Size","Spinner","SpinnerSize","ThemeContext","getOrderPositionBooks","BookType","Chart","instrumentPrecisionConfig","ChartWithData","_ref","_data$orderPositionBo","instrument","bookType","size","isDesktop","DESKTOP","loading","data","error","variables","recentHours","isError","orderPositionBooks","price","createElement","className","lg","isOrderBook","Order","precision"],"sources":["../../../src/OrderBookWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport classnames from 'classnames';\nimport {\n  ChartError, Size, Spinner, SpinnerSize, ThemeContext,\n} from '@oanda/labs-widget-common';\nimport { ChartWithDataProps } from './types';\nimport { getOrderPositionBooks } from '../gql/getOrderPositionBooks';\nimport { GetOrderPositionBooksQuery, GetOrderPositionBooksQueryVariables, BookType } from '../gql/types/graphql';\nimport { Chart } from './components/Chart/Chart';\nimport { instrumentPrecisionConfig } from './config';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n}: ChartWithDataProps) => {\n  const { size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\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?.orderPositionBooks[0]?.price) || !!error;\n\n  return (\n    <div className={classnames('lw-relative lw-w-full', {\n      'lw-h-[450px]': isDesktop,\n      'lw-h-[390px]': !isDesktop,\n    })}\n    >\n      {isError && (\n      <div className={\n            classnames(\n              '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',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              },\n            )\n          }\n      >\n        <ChartError />\n      </div>\n      )}\n      {loading && (\n      <div className={\n            classnames(\n              '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',\n              {\n                'lw-h-full': isDesktop,\n                'lw-h-[calc(100%-40px)]': !isDesktop,\n              },\n            )\n          }\n      >\n        <Spinner size={SpinnerSize.lg} />\n      </div>\n      )}\n      {!isError && data && (\n        <div className=\"lw-absolute lw-left-0 lw-top-0 lw-flex lw-h-full lw-w-full\">\n          <Chart\n            data={data}\n            isOrderBook={bookType === BookType.Order}\n            precision={instrumentPrecisionConfig[instrument]}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,UAAU,EAAEC,IAAI,EAAEC,OAAO,EAAEC,WAAW,EAAEC,YAAY,QAC/C,2BAA2B;AAElC,SAASC,qBAAqB,QAAQ,8BAA8B;AACpE,SAA0EC,QAAQ,QAAQ,sBAAsB;AAChH,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,yBAAyB,QAAQ,UAAU;AAEpD,MAAMC,aAAa,GAAGC,IAAA,IAGI;EAAA,IAAAC,qBAAA;EAAA,IAHH;IACrBC,UAAU;IACVC;EACkB,CAAC,GAAAH,IAAA;EACnB,MAAM;IAAEI;EAAK,CAAC,GAAGjB,UAAU,CAACO,YAAY,CAAC;EACzC,MAAMW,SAAS,GAAGD,IAAI,KAAKb,IAAI,CAACe,OAAO;EAEvC,MAAM;IAAEC,OAAO;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGrB,QAAQ,CAGvCO,qBAAqB,EAAE;IACvBe,SAAS,EAAE;MACTR,UAAU;MACVC,QAAQ;MACRQ,WAAW,EAAE;IACf;EACF,CAAC,CAAC;EAEF,MAAMC,OAAO,GAAI,CAACL,OAAO,IAAI,EAACC,IAAI,aAAJA,IAAI,gBAAAP,qBAAA,GAAJO,IAAI,CAAEK,kBAAkB,CAAC,CAAC,CAAC,cAAAZ,qBAAA,eAA3BA,qBAAA,CAA6Ba,KAAK,KAAK,CAAC,CAACL,KAAK;EAE5E,OACEvB,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE3B,UAAU,CAAC,uBAAuB,EAAE;MAClD,cAAc,EAAEgB,SAAS;MACzB,cAAc,EAAE,CAACA;IACnB,CAAC;EAAE,GAEAO,OAAO,IACR1B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EACR3B,UAAU,CACR,uIAAuI,EACvI;MACE,WAAW,EAAEgB,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EACD,GAEHnB,KAAA,CAAA6B,aAAA,CAACzB,UAAU,MAAE,CACV,CACJ,EACAiB,OAAO,IACRrB,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EACR3B,UAAU,CACR,uIAAuI,EACvI;MACE,WAAW,EAAEgB,SAAS;MACtB,wBAAwB,EAAE,CAACA;IAC7B,CACF;EACD,GAEHnB,KAAA,CAAA6B,aAAA,CAACvB,OAAO;IAACY,IAAI,EAAEX,WAAW,CAACwB;EAAG,CAAE,CAC7B,CACJ,EACA,CAACL,OAAO,IAAIJ,IAAI,IACftB,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAC;EAA4D,GACzE9B,KAAA,CAAA6B,aAAA,CAAClB,KAAK;IACJW,IAAI,EAAEA,IAAK;IACXU,WAAW,EAAEf,QAAQ,KAAKP,QAAQ,CAACuB,KAAM;IACzCC,SAAS,EAAEtB,yBAAyB,CAACI,UAAU;EAAE,CAClD,CACE,CAEJ,CAAC;AAEV,CAAC;AAED,SAASH,aAAa"}

package/dist/module/OrderBookWidget/Main.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Select, Tabs } from '@oanda/labs-widget-common';
+import React, { useState, useContext } from 'react';
+import { Select, Tabs, ThemeContext } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { BookType } from '../gql/types/graphql';
 import { instrumentSelectConfig, navigationConfig } from './config';
@@ -8,12 +8,15 @@ const Main = _ref => {
   let {
     instrument
   } = _ref;
+  const {
+    size
+  } = useContext(ThemeContext);
   const [bookType, setBookType] = useState(BookType.Order);
   const [toolInstrument, setToolInstrument] = useState(instrumentSelectConfig[0]);
   const {
     lang
   } = useLocale();
-  return React.createElement("div", {
+  return React.createElement(React.Fragment, null, size && React.createElement("div", {
     "data-testid": "order-book-widget",
     className: "lw-p-4 lw-pt-0 lw-text-sm lw-tracking-normal lw-text-black"
   }, React.createElement(Tabs, {
@@ -32,7 +35,7 @@ const Main = _ref => {
   })), React.createElement(ChartWithData, {
     instrument: instrument || toolInstrument.id,
     bookType: bookType
-  }));
+  })));
 };
 export { Main };
 //# sourceMappingURL=Main.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Main.js","names":["React","useState","Select","Tabs","useLocale","BookType","instrumentSelectConfig","navigationConfig","ChartWithData","Main","_ref","instrument","bookType","setBookType","Order","toolInstrument","setToolInstrument","lang","createElement","className","activeTab","handleClick","e","currentTarget","value","labelCallback","items","mobileFullWidth","selectLabel","options","selectedOption","setSelectedOption","val","id"],"sources":["../../../src/OrderBookWidget/Main.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Select, Tabs } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { InstrumentId, MainProps } from './types';\nimport { BookType } from '../gql/types/graphql';\nimport { instrumentSelectConfig, navigationConfig } from './config';\nimport { ChartWithData } from './ChartWithData';\n\nconst Main = ({ instrument }: MainProps) => {\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [toolInstrument, setToolInstrument] = useState(instrumentSelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-pt-0 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        mobileFullWidth\n      />\n      {!instrument && (\n        <div className=\"lw-mb-6 lw-mt-12\">\n          <Select\n            selectLabel={lang('instrument')}\n            options={instrumentSelectConfig}\n            selectedOption={toolInstrument}\n            setSelectedOption={\n              (val) => setToolInstrument(val as { id: InstrumentId; label: string })\n            }\n          />\n        </div>\n      )}\n      <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />\n    </div>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,MAAM,EAAEC,IAAI,QAAQ,2BAA2B;AACxD,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,sBAAsB,EAAEC,gBAAgB,QAAQ,UAAU;AACnE,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,MAAMC,IAAI,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EACrC,MAAM,CAACE,QAAQ,EAAEC,WAAW,CAAC,GAAGZ,QAAQ,CAACI,QAAQ,CAACS,KAAK,CAAC;EACxD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGf,QAAQ,CAACK,sBAAsB,CAAC,CAAC,CAAC,CAAC;EAC/E,MAAM;IAAEW;EAAK,CAAC,GAAGb,SAAS,CAAC,CAAC;EAE5B,OACEJ,KAAA,CAAAkB,aAAA;IAAK,eAAY,mBAAmB;IAACC,SAAS,EAAC;EAA4D,GACzGnB,KAAA,CAAAkB,aAAA,CAACf,IAAI;IACHiB,SAAS,EAAER,QAAS;IACpBS,WAAW,EAAGC,CAAC,IAAKT,WAAW,CAACS,CAAC,CAACC,aAAa,CAACC,KAAiB,CAAE;IACnEC,aAAa,EAAER,IAAK;IACpBS,KAAK,EAAEnB,gBAAiB;IACxBoB,eAAe;EAAA,CAChB,CAAC,EACD,CAAChB,UAAU,IACVX,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC;EAAkB,GAC/BnB,KAAA,CAAAkB,aAAA,CAAChB,MAAM;IACL0B,WAAW,EAAEX,IAAI,CAAC,YAAY,CAAE;IAChCY,OAAO,EAAEvB,sBAAuB;IAChCwB,cAAc,EAAEf,cAAe;IAC/BgB,iBAAiB,EACdC,GAAG,IAAKhB,iBAAiB,CAACgB,GAA0C;EACtE,CACF,CACE,CACN,EACDhC,KAAA,CAAAkB,aAAA,CAACV,aAAa;IAACG,UAAU,EAAEA,UAAU,IAAII,cAAc,CAACkB,EAAG;IAACrB,QAAQ,EAAEA;EAAS,CAAE,CAC9E,CAAC;AAEV,CAAC;AAED,SAASH,IAAI"}
+{"version":3,"file":"Main.js","names":["React","useState","useContext","Select","Tabs","ThemeContext","useLocale","BookType","instrumentSelectConfig","navigationConfig","ChartWithData","Main","_ref","instrument","size","bookType","setBookType","Order","toolInstrument","setToolInstrument","lang","createElement","Fragment","className","activeTab","handleClick","e","currentTarget","value","labelCallback","items","mobileFullWidth","selectLabel","options","selectedOption","setSelectedOption","val","id"],"sources":["../../../src/OrderBookWidget/Main.tsx"],"sourcesContent":["import React, { useState, useContext } from 'react';\nimport { Select, Tabs, ThemeContext } from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { InstrumentId, MainProps } from './types';\nimport { BookType } from '../gql/types/graphql';\nimport { instrumentSelectConfig, navigationConfig } from './config';\nimport { ChartWithData } from './ChartWithData';\n\nconst Main = ({ instrument }: MainProps) => {\n  const { size } = useContext(ThemeContext);\n  const [bookType, setBookType] = useState(BookType.Order);\n  const [toolInstrument, setToolInstrument] = useState(instrumentSelectConfig[0]);\n  const { lang } = useLocale();\n\n  return (\n    <>\n      {size && (\n      <div data-testid=\"order-book-widget\" className=\"lw-p-4 lw-pt-0 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          mobileFullWidth\n        />\n        {!instrument && (\n        <div className=\"lw-mb-6 lw-mt-12\">\n          <Select\n            selectLabel={lang('instrument')}\n            options={instrumentSelectConfig}\n            selectedOption={toolInstrument}\n            setSelectedOption={\n              (val) => setToolInstrument(val as { id: InstrumentId; label: string })\n            }\n          />\n        </div>\n        )}\n        <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { Main };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,UAAU,QAAQ,OAAO;AACnD,SAASC,MAAM,EAAEC,IAAI,EAAEC,YAAY,QAAQ,2BAA2B;AACtE,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,sBAAsB,EAAEC,gBAAgB,QAAQ,UAAU;AACnE,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,MAAMC,IAAI,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EACrC,MAAM;IAAEE;EAAK,CAAC,GAAGZ,UAAU,CAACG,YAAY,CAAC;EACzC,MAAM,CAACU,QAAQ,EAAEC,WAAW,CAAC,GAAGf,QAAQ,CAACM,QAAQ,CAACU,KAAK,CAAC;EACxD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGlB,QAAQ,CAACO,sBAAsB,CAAC,CAAC,CAAC,CAAC;EAC/E,MAAM;IAAEY;EAAK,CAAC,GAAGd,SAAS,CAAC,CAAC;EAE5B,OACEN,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QACGR,IAAI,IACLd,KAAA,CAAAqB,aAAA;IAAK,eAAY,mBAAmB;IAACE,SAAS,EAAC;EAA4D,GACzGvB,KAAA,CAAAqB,aAAA,CAACjB,IAAI;IACHoB,SAAS,EAAET,QAAS;IACpBU,WAAW,EAAGC,CAAC,IAAKV,WAAW,CAACU,CAAC,CAACC,aAAa,CAACC,KAAiB,CAAE;IACnEC,aAAa,EAAET,IAAK;IACpBU,KAAK,EAAErB,gBAAiB;IACxBsB,eAAe;EAAA,CAChB,CAAC,EACD,CAAClB,UAAU,IACZb,KAAA,CAAAqB,aAAA;IAAKE,SAAS,EAAC;EAAkB,GAC/BvB,KAAA,CAAAqB,aAAA,CAAClB,MAAM;IACL6B,WAAW,EAAEZ,IAAI,CAAC,YAAY,CAAE;IAChCa,OAAO,EAAEzB,sBAAuB;IAChC0B,cAAc,EAAEhB,cAAe;IAC/BiB,iBAAiB,EACdC,GAAG,IAAKjB,iBAAiB,CAACiB,GAA0C;EACtE,CACF,CACE,CACJ,EACDpC,KAAA,CAAAqB,aAAA,CAACX,aAAa;IAACG,UAAU,EAAEA,UAAU,IAAIK,cAAc,CAACmB,EAAG;IAACtB,QAAQ,EAAEA;EAAS,CAAE,CAC9E,CAEL,CAAC;AAEP,CAAC;AAED,SAASJ,IAAI"}

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

@@ -4,7 +4,7 @@ import * as echarts from 'echarts/core';
 import { CustomChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent, MarkLineComponent, ToolboxComponent, DataZoomInsideComponent, DatasetComponent } from 'echarts/components';
-import { Theme, ThemeContext, colorPalette, getChartTheme } from '@oanda/labs-widget-common';
+import { Theme, ThemeContext, colorPalette, getChartTheme, Size } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { getResponsiveOption, getOption } from './getOption';
 echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent, CanvasRenderer, CustomChart, MarkLineComponent, ToolboxComponent, DataZoomInsideComponent, DatasetComponent]);
@@ -21,8 +21,9 @@ export const Chart = _ref => {
   } = useLocale();
   const {
     isDark,
-    isDesktop
+    size
   } = useContext(ThemeContext);
+  const isDesktop = size === Size.DESKTOP;
   const echartRef = useRef(null);
   useEffect(() => {
     if (echartRef.current) {

package/dist/module/OrderBookWidget/components/Chart/Chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["React","useRef","useEffect","useContext","ReactEChartsCore","echarts","CustomChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","MarkLineComponent","ToolboxComponent","DataZoomInsideComponent","DatasetComponent","Theme","ThemeContext","colorPalette","getChartTheme","useLocale","getResponsiveOption","getOption","use","registerTheme","Dark","Light","Chart","_ref","data","isOrderBook","precision","lang","isDark","isDesktop","echartRef","current","echartInstance","getEchartsInstance","on","color","bottleGreenLight","setOption","bottleGreenLight70","orange70","raspberryDark70","orange","raspberryDark","createElement","className","ref","theme","style","height","width","option"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  MarkLineComponent,\n  ToolboxComponent,\n  DataZoomInsideComponent,\n  DatasetComponent,\n} from 'echarts/components';\nimport {\n  Theme, ThemeContext, colorPalette, getChartTheme,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getResponsiveOption, getOption } from './getOption';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  CanvasRenderer,\n  CustomChart,\n  MarkLineComponent,\n  ToolboxComponent,\n  DataZoomInsideComponent,\n  DatasetComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nexport const Chart = ({ data, isOrderBook, precision }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark, isDesktop } = useContext(ThemeContext);\n\n  const echartRef = useRef(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.on('highlight', () => {\n        if ((\n          echartInstance.getOption().color as echarts.Color[])[0] === colorPalette.bottleGreenLight\n        ) {\n          echartInstance.setOption({\n            color: [\n              colorPalette.bottleGreenLight70,\n              isDark ? colorPalette.orange70 : colorPalette.raspberryDark70,\n            ],\n          });\n        }\n      });\n\n      echartInstance.on('globalout', () => {\n        echartInstance.setOption({\n          color: [\n            colorPalette.bottleGreenLight,\n            isDark ? colorPalette.orange : colorPalette.raspberryDark,\n          ],\n        });\n      });\n    }\n  }, [echartRef, isDark]);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.setOption(\n        getResponsiveOption({\n          isDark, isOrderBook, isDesktop, lang,\n        }),\n      );\n    }\n  }, [echartRef, isDesktop, isDark, isOrderBook, lang]);\n\n  return (\n    <div className=\"lw-relative lw-w-full\">\n      <div>\n        {data && (\n          <ReactEChartsCore\n            echarts={echarts}\n            ref={echartRef}\n            theme={isDark ? 'dark_theme' : 'light_theme'}\n            style={{\n              height: isDesktop ? '450px' : '390px',\n              width: '100%',\n            }}\n            option={getOption({\n              data, precision, isDark, isOrderBook, isDesktop, lang,\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Chart.js","names":["React","useRef","useEffect","useContext","ReactEChartsCore","echarts","CustomChart","CanvasRenderer","GridSimpleComponent","GraphicComponent","TooltipComponent","TitleComponent","MarkLineComponent","ToolboxComponent","DataZoomInsideComponent","DatasetComponent","Theme","ThemeContext","colorPalette","getChartTheme","Size","useLocale","getResponsiveOption","getOption","use","registerTheme","Dark","Light","Chart","_ref","data","isOrderBook","precision","lang","isDark","size","isDesktop","DESKTOP","echartRef","current","echartInstance","getEchartsInstance","on","color","bottleGreenLight","setOption","bottleGreenLight70","orange70","raspberryDark70","orange","raspberryDark","createElement","className","ref","theme","style","height","width","option"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import React, { useRef, useEffect, useContext } from 'react';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport * as echarts from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  MarkLineComponent,\n  ToolboxComponent,\n  DataZoomInsideComponent,\n  DatasetComponent,\n} from 'echarts/components';\nimport {\n  Theme, ThemeContext, colorPalette, getChartTheme, Size,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { getResponsiveOption, getOption } from './getOption';\nimport { ChartProps } from './types';\n\necharts.use([\n  GridSimpleComponent,\n  GraphicComponent,\n  TooltipComponent,\n  TitleComponent,\n  CanvasRenderer,\n  CustomChart,\n  MarkLineComponent,\n  ToolboxComponent,\n  DataZoomInsideComponent,\n  DatasetComponent,\n]);\n\necharts.registerTheme('dark_theme', getChartTheme(Theme.Dark));\necharts.registerTheme('light_theme', getChartTheme(Theme.Light));\n\nexport const Chart = ({ data, isOrderBook, precision }: ChartProps) => {\n  const { lang } = useLocale();\n  const { isDark, size } = useContext(ThemeContext);\n  const isDesktop = size === Size.DESKTOP;\n\n  const echartRef = useRef(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.on('highlight', () => {\n        if ((\n          echartInstance.getOption().color as echarts.Color[])[0] === colorPalette.bottleGreenLight\n        ) {\n          echartInstance.setOption({\n            color: [\n              colorPalette.bottleGreenLight70,\n              isDark ? colorPalette.orange70 : colorPalette.raspberryDark70,\n            ],\n          });\n        }\n      });\n\n      echartInstance.on('globalout', () => {\n        echartInstance.setOption({\n          color: [\n            colorPalette.bottleGreenLight,\n            isDark ? colorPalette.orange : colorPalette.raspberryDark,\n          ],\n        });\n      });\n    }\n  }, [echartRef, isDark]);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      // @ts-ignore\n      const echartInstance = echartRef.current.getEchartsInstance() as echarts.EChartsType;\n\n      echartInstance.setOption(\n        getResponsiveOption({\n          isDark, isOrderBook, isDesktop, lang,\n        }),\n      );\n    }\n  }, [echartRef, isDesktop, isDark, isOrderBook, lang]);\n\n  return (\n    <div className=\"lw-relative lw-w-full\">\n      <div>\n        {data && (\n          <ReactEChartsCore\n            echarts={echarts}\n            ref={echartRef}\n            theme={isDark ? 'dark_theme' : 'light_theme'}\n            style={{\n              height: isDesktop ? '450px' : '390px',\n              width: '100%',\n            }}\n            option={getOption({\n              data, precision, isDark, isOrderBook, isDesktop, lang,\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "description": "Labs Order Book Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -13,9 +13,8 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.83",
+    "@oanda/labs-widget-common": "^1.0.85",
     "@oanda/mono-i18n": "9.0.0",
-    "classnames": "2.3.2",
     "echarts": "5.4.3",
     "echarts-for-react": "3.0.2",
     "graphql": "16.7.1"
@@ -25,5 +24,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "05f38586b5d7b8c372f34bc1b039acd1c998b0f2"
+  "gitHead": "4821c093592494a4f93db1db19b2d60d666ffeb2"
 }

package/src/OrderBookWidget/ChartWithData.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { useQuery } from '@apollo/client';
 import classnames from 'classnames';
 import {
-  ChartError, Spinner, SpinnerSize, ThemeContext,
+  ChartError, Size, Spinner, SpinnerSize, ThemeContext,
 } from '@oanda/labs-widget-common';
 import { ChartWithDataProps } from './types';
 import { getOrderPositionBooks } from '../gql/getOrderPositionBooks';
@@ -14,7 +14,8 @@ const ChartWithData = ({
   instrument,
   bookType,
 }: ChartWithDataProps) => {
-  const { isDesktop } = useContext(ThemeContext);
+  const { size } = useContext(ThemeContext);
+  const isDesktop = size === Size.DESKTOP;
 
   const { loading, data, error } = useQuery<
   GetOrderPositionBooksQuery,

package/src/OrderBookWidget/Main.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Select, Tabs } from '@oanda/labs-widget-common';
+import React, { useState, useContext } from 'react';
+import { Select, Tabs, ThemeContext } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { InstrumentId, MainProps } from './types';
 import { BookType } from '../gql/types/graphql';
@@ -7,20 +7,23 @@ import { instrumentSelectConfig, navigationConfig } from './config';
 import { ChartWithData } from './ChartWithData';
 
 const Main = ({ instrument }: MainProps) => {
+  const { size } = useContext(ThemeContext);
   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 && (
+    <>
+      {size && (
+      <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('instrument')}
@@ -31,9 +34,11 @@ const Main = ({ instrument }: MainProps) => {
             }
           />
         </div>
+        )}
+        <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />
+      </div>
       )}
-      <ChartWithData instrument={instrument || toolInstrument.id} bookType={bookType} />
-    </div>
+    </>
   );
 };
 

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

@@ -14,7 +14,7 @@ import {
   DatasetComponent,
 } from 'echarts/components';
 import {
-  Theme, ThemeContext, colorPalette, getChartTheme,
+  Theme, ThemeContext, colorPalette, getChartTheme, Size,
 } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { getResponsiveOption, getOption } from './getOption';
@@ -38,7 +38,8 @@ echarts.registerTheme('light_theme', getChartTheme(Theme.Light));
 
 export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
   const { lang } = useLocale();
-  const { isDark, isDesktop } = useContext(ThemeContext);
+  const { isDark, size } = useContext(ThemeContext);
+  const isDesktop = size === Size.DESKTOP;
 
   const echartRef = useRef(null);
 

package/test/Main.test.tsx

@@ -4,18 +4,12 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
+import { Size, ThemeContext } from '@oanda/labs-widget-common';
 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', () => ({
-  useOnClickOutside: jest.fn(),
-  useElementSize: jest.fn().mockImplementation(() => [null, {
-    width: 100,
-  }]),
-}));
-
 const mocks = [
   {
     request: {
@@ -107,7 +101,9 @@ describe('Main component', () => {
   it('should render tool component', async () => {
     const { findByTestId } = render(
       <MockedProvider mocks={mocks}>
-        <Main />
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main />
+        </ThemeContext.Provider>
       </MockedProvider>,
     );
 
@@ -117,7 +113,9 @@ describe('Main component', () => {
   it('should render widget component', async () => {
     const { findByTestId, queryAllByTestId } = render(
       <MockedProvider mocks={mocks}>
-        <Main instrument={InstrumentId.EUR_AUD} />
+        <ThemeContext.Provider value={{ size: Size.DESKTOP, isDark: true }}>
+          <Main instrument={InstrumentId.EUR_AUD} />
+        </ThemeContext.Provider>
       </MockedProvider>,
     );