@oanda/labs-order-book-widget 1.0.103 → 1.0.105

package/CHANGELOG.md

@@ -3,6 +3,818 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.105 (2024-03-28)
+
+
+
+## 1.0.104 (2024-03-21)
+
+
+
+## 1.0.103 (2024-03-20)
+
+
+
+## 1.0.102 (2024-03-20)
+
+
+
+## 1.0.101 (2024-03-13)
+
+
+
+## 1.0.100 (2024-03-12)
+
+
+
+## 1.0.99 (2024-03-11)
+
+
+
+## 1.0.98 (2024-03-07)
+
+
+
+## 1.0.97 (2024-03-06)
+
+
+
+## 1.0.96 (2024-03-06)
+
+
+
+## 1.0.95 (2024-03-04)
+
+
+
+## 1.0.94 (2024-02-29)
+
+
+
+## 1.0.93 (2024-02-28)
+
+
+
+## 1.0.92 (2024-02-28)
+
+
+
+## 1.0.91 (2024-02-23)
+
+
+
+## 1.0.90 (2024-02-23)
+
+
+
+## 1.0.89 (2024-02-21)
+
+
+
+## 1.0.88 (2024-02-21)
+
+
+
+## 1.0.87 (2024-02-20)
+
+
+
+## 1.0.86 (2024-02-20)
+
+
+
+## 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.104 (2024-03-21)
+
+
+
+## 1.0.103 (2024-03-20)
+
+
+
+## 1.0.102 (2024-03-20)
+
+
+
+## 1.0.101 (2024-03-13)
+
+
+
+## 1.0.100 (2024-03-12)
+
+
+
+## 1.0.99 (2024-03-11)
+
+
+
+## 1.0.98 (2024-03-07)
+
+
+
+## 1.0.97 (2024-03-06)
+
+
+
+## 1.0.96 (2024-03-06)
+
+
+
+## 1.0.95 (2024-03-04)
+
+
+
+## 1.0.94 (2024-02-29)
+
+
+
+## 1.0.93 (2024-02-28)
+
+
+
+## 1.0.92 (2024-02-28)
+
+
+
+## 1.0.91 (2024-02-23)
+
+
+
+## 1.0.90 (2024-02-23)
+
+
+
+## 1.0.89 (2024-02-21)
+
+
+
+## 1.0.88 (2024-02-21)
+
+
+
+## 1.0.87 (2024-02-20)
+
+
+
+## 1.0.86 (2024-02-20)
+
+
+
+## 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.103 (2024-03-20)
 
 

package/dist/main/OrderBookWidget/ChartWithData.js

@@ -16,7 +16,7 @@ var _config = require("./config");
 var _constants = require("./constants");
 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; }
+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 && {}.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 ChartWithData = _ref => {
   var _data$orderPositionBo, _data$orderPositionBo2;
   let {

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

@@ -1 +1 @@
-{"version":3,"file":"ChartWithData.js","names":["_react","_interopRequireWildcard","require","_client","_classnames","_interopRequireDefault","_labsWidgetCommon","_monoI18n","_getOrderPositionBooks","_graphql","_Chart","_config","_constants","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","_data$orderPositionBo2","instrument","bookType","lang","useLocale","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","loading","data","error","useQuery","getOrderPositionBooks","variables","recentHours","fetchPolicy","isError","orderPositionBooks","price","updatedAt","time","createElement","Fragment","className","classnames","ChartError","Spinner","SpinnerSize","lg","Chart","isOrderBook","BookType","Order","precision","instrumentPrecisionConfig","InfoBox","text","concat","formatUpdatedTimestamp","EMPTY_VALUE","exports"],"sources":["../../../src/OrderBookWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport classnames from 'classnames';\nimport {\n  ChartError, InfoBox, Size, Spinner, SpinnerSize, ThemeContext, formatUpdatedTimestamp,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\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';\nimport { EMPTY_VALUE } from './constants';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n}: ChartWithDataProps) => {\n  const { lang } = useLocale();\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    fetchPolicy: 'network-only',\n  });\n\n  const isError = (!loading && !data?.orderPositionBooks[0]?.price) || !!error;\n  const updatedAt = data?.orderPositionBooks[0]?.time;\n\n  return (\n    <>\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      {!isError && (\n      <div className=\"lw-mt-2 lw-h-8\">\n        <InfoBox text={`${lang('last_updated')}: ${updatedAt ? formatUpdatedTimestamp(updatedAt, lang('today')) : EMPTY_VALUE}`} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ChartWithData.js","names":["_react","_interopRequireWildcard","require","_client","_classnames","_interopRequireDefault","_labsWidgetCommon","_monoI18n","_getOrderPositionBooks","_graphql","_Chart","_config","_constants","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ChartWithData","_ref","_data$orderPositionBo","_data$orderPositionBo2","instrument","bookType","lang","useLocale","size","useContext","ThemeContext","isDesktop","Size","DESKTOP","loading","data","error","useQuery","getOrderPositionBooks","variables","recentHours","fetchPolicy","isError","orderPositionBooks","price","updatedAt","time","createElement","Fragment","className","classnames","ChartError","Spinner","SpinnerSize","lg","Chart","isOrderBook","BookType","Order","precision","instrumentPrecisionConfig","InfoBox","text","concat","formatUpdatedTimestamp","EMPTY_VALUE","exports"],"sources":["../../../src/OrderBookWidget/ChartWithData.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { useQuery } from '@apollo/client';\nimport classnames from 'classnames';\nimport {\n  ChartError, InfoBox, Size, Spinner, SpinnerSize, ThemeContext, formatUpdatedTimestamp,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\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';\nimport { EMPTY_VALUE } from './constants';\n\nconst ChartWithData = ({\n  instrument,\n  bookType,\n}: ChartWithDataProps) => {\n  const { lang } = useLocale();\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    fetchPolicy: 'network-only',\n  });\n\n  const isError = (!loading && !data?.orderPositionBooks[0]?.price) || !!error;\n  const updatedAt = data?.orderPositionBooks[0]?.time;\n\n  return (\n    <>\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      {!isError && (\n      <div className=\"lw-mt-2 lw-h-8\">\n        <InfoBox text={`${lang('last_updated')}: ${updatedAt ? formatUpdatedTimestamp(updatedAt, lang('today')) : EMPTY_VALUE}`} />\n      </div>\n      )}\n    </>\n  );\n};\n\nexport { ChartWithData };\n"],"mappings":"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","ignoreList":[]}

package/dist/main/OrderBookWidget/Main.js

@@ -11,7 +11,7 @@ var _graphql = require("../gql/types/graphql");
 var _config = require("./config");
 var _ChartWithData = require("./ChartWithData");
 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; }
+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 && {}.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 Main = _ref => {
   let {
     instrument

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","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-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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAEA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAL,OAAA;AAAgD,SAAAM,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,SAAAR,wBAAAQ,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;AAEhD,MAAMY,IAAI,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC;EAAsB,CAAC,GAAAD,IAAA;EACrC,MAAM;IAAEE;EAAK,CAAC,GAAG,IAAAC,iBAAU,EAACC,8BAAY,CAAC;EACzC,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAACC,iBAAQ,CAACC,KAAK,CAAC;EACxD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAJ,eAAQ,EAACK,8BAAsB,CAAC,CAAC,CAAC,CAAC;EAC/E,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,mBAAS,EAAC,CAAC;EAE5B,OACE5C,MAAA,CAAAc,OAAA,CAAA+B,aAAA,CAAA7C,MAAA,CAAAc,OAAA,CAAAgC,QAAA,QACGd,IAAI,IACLhC,MAAA,CAAAc,OAAA,CAAA+B,aAAA;IAAK,eAAY,mBAAmB;IAACE,SAAS,EAAC;EAA6C,GAC1F/C,MAAA,CAAAc,OAAA,CAAA+B,aAAA,CAAC1C,iBAAA,CAAA6C,IAAI;IACHC,SAAS,EAAEd,QAAS;IACpBe,WAAW,EAAGzC,CAAC,IAAK2B,WAAW,CAAC3B,CAAC,CAAC0C,aAAa,CAACC,KAAiB,CAAE;IACnEC,aAAa,EAAEV,IAAK;IACpBW,KAAK,EAAEC,wBAAiB;IACxBC,eAAe;EAAA,CAChB,CAAC,EACD,CAACzB,UAAU,IACZ/B,MAAA,CAAAc,OAAA,CAAA+B,aAAA;IAAKE,SAAS,EAAC;EAAkB,GAC/B/C,MAAA,CAAAc,OAAA,CAAA+B,aAAA,CAAC1C,iBAAA,CAAAsD,MAAM;IACLC,WAAW,EAAEf,IAAI,CAAC,YAAY,CAAE;IAChCgB,OAAO,EAAEjB,8BAAuB;IAChCkB,cAAc,EAAEpB,cAAe;IAC/BqB,iBAAiB,EACdC,GAAG,IAAKrB,iBAAiB,CAACqB,GAA0C;EACtE,CACF,CACE,CACJ,EACD9D,MAAA,CAAAc,OAAA,CAAA+B,aAAA,CAACtC,cAAA,CAAAwD,aAAa;IAAChC,UAAU,EAAEA,UAAU,IAAIS,cAAc,CAACwB,EAAG;IAAC7B,QAAQ,EAAEA;EAAS,CAAE,CAC9E,CAEL,CAAC;AAEP,CAAC;AAAC8B,OAAA,CAAApC,IAAA,GAAAA,IAAA","ignoreList":[]}
+{"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","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-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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","ignoreList":[]}

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

@@ -15,7 +15,7 @@ var _monoI18n = require("@oanda/mono-i18n");
 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; }
+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 && {}.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; }
 echarts.use([_components.GridSimpleComponent, _components.GraphicComponent, _components.TooltipComponent, _components.TitleComponent, _renderers.CanvasRenderer, _charts.CustomChart, _components.MarkLineComponent, _components.ToolboxComponent, _components.DataZoomInsideComponent, _components.DatasetComponent]);
 echarts.registerTheme('dark_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Dark));
 echarts.registerTheme('light_theme', (0, _labsWidgetCommon.getChartTheme)(_labsWidgetCommon.Theme.Light));

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","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\" data-testid=\"order-book-chart\">\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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","ignoreList":[]}
+{"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","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\" data-testid=\"order-book-chart\">\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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","ignoreList":[]}

package/dist/main/OrderBookWidget/render.js

@@ -1,7 +1,7 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
+var _client = require("react-dom/client");
 var _labsWidgetCommon = require("@oanda/labs-widget-common");
 var _OrderBookWidget = require("./OrderBookWidget");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -17,6 +17,7 @@ const {
 const orderBookElements = document.querySelectorAll('div[data-order-book-params]');
 if (orderBookElements.length > 0) {
   orderBookElements.forEach(element => {
+    const root = (0, _client.createRoot)(element);
     const params = element.getAttribute('data-order-book-params');
     const mode = element.getAttribute('data-mode');
     const {
@@ -32,19 +33,21 @@ if (orderBookElements.length > 0) {
     }, {
       name: 'graphqlUrl'
     }]);
-    (0, _reactDom.render)(_react.default.createElement(_OrderBookWidget.OrderBookWidget, {
+    root.render(_react.default.createElement(_OrderBookWidget.OrderBookWidget, {
       locale: locale,
       graphqlUrl: graphqlUrl,
       instrument: instrument,
       theme: mode,
       isParamError: isParamError
-    }), element);
+    }));
   });
 } else {
-  (0, _reactDom.render)(_react.default.createElement(_OrderBookWidget.OrderBookWidget, {
+  const container = document.getElementById(configRenderElementId);
+  const root = (0, _client.createRoot)(container);
+  root.render(_react.default.createElement(_OrderBookWidget.OrderBookWidget, {
     locale: configLocale,
     graphqlUrl: configGraphQl,
     instrument: configInstrument
-  }), document.getElementById(configRenderElementId));
+  }));
 }
 //# sourceMappingURL=render.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_reactDom","_labsWidgetCommon","_OrderBookWidget","obj","__esModule","default","graphqlUrl","configGraphQl","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","volatilityChartWidgetConfig","widgetsConfig","orderBookElements","document","querySelectorAll","length","forEach","element","params","getAttribute","mode","JSON","parse","isParamError","validateToolParams","name","valueCheck","value","split","render","createElement","OrderBookWidget","theme","getElementById"],"sources":["../../../src/OrderBookWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { Theme, validateToolParams } from '@oanda/labs-widget-common';\nimport { OrderBookWidget } from './OrderBookWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.volatilityChartWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst orderBookElements = document.querySelectorAll('div[data-order-book-params]');\n\nif (orderBookElements.length > 0) {\n  orderBookElements.forEach((element) => {\n    const params = element.getAttribute('data-order-book-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, locale } = JSON.parse(params as string);\n\n    const isParamError = validateToolParams({ locale, graphqlUrl }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',\n      }, {\n        name: 'graphqlUrl',\n      }]);\n    render(\n      <OrderBookWidget\n        locale={locale}\n        graphqlUrl={graphqlUrl}\n        instrument={instrument}\n        theme={mode as Theme}\n        isParamError={isParamError}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <OrderBookWidget\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n      instrument={configInstrument}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAAoD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpD,MAAM;EACJG,UAAU,EAAEC,aAAa;EACzBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,2BAA2B,IAAI,CAAC,CAAC;AAE5C,MAAM;EACJT;AACF,CAAC,GAAGQ,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,6BAA6B,CAAC;AAElF,IAAIF,iBAAiB,CAACG,MAAM,GAAG,CAAC,EAAE;EAChCH,iBAAiB,CAACI,OAAO,CAAEC,OAAO,IAAK;IACrC,MAAMC,MAAM,GAAGD,OAAO,CAACE,YAAY,CAAC,wBAAwB,CAAC;IAC7D,MAAMC,IAAI,GAAGH,OAAO,CAACE,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEhB,UAAU;MAAEI;IAAO,CAAC,GAAGc,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE3D,MAAMK,YAAY,GAAG,IAAAC,oCAAkB,EAAC;MAAEjB,MAAM;MAAEN;IAAW,CAAC,EAAE,CAC9D;MACEwB,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAGC,KAAK,IAAKA,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAID,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK;IACjF,CAAC,EAAE;MACDH,IAAI,EAAE;IACR,CAAC,CAAC,CAAC;IACL,IAAAI,gBAAM,EACJrC,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAACjC,gBAAA,CAAAkC,eAAe;MACdxB,MAAM,EAAEA,MAAO;MACfN,UAAU,EAAEA,UAAW;MACvBE,UAAU,EAAEA,UAAW;MACvB6B,KAAK,EAAEZ,IAAc;MACrBG,YAAY,EAAEA;IAAa,CAC5B,CAAC,EACFN,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,IAAAY,gBAAM,EACJrC,MAAA,CAAAQ,OAAA,CAAA8B,aAAA,CAACjC,gBAAA,CAAAkC,eAAe;IACdxB,MAAM,EAAEC,YAAa;IACrBP,UAAU,EAAEC,aAAc;IAC1BC,UAAU,EAAEC;EAAiB,CAC9B,CAAC,EACFS,QAAQ,CAACoB,cAAc,CAAC3B,qBAAqB,CAC/C,CAAC;AACH","ignoreList":[]}
+{"version":3,"file":"render.js","names":["_react","_interopRequireDefault","require","_client","_labsWidgetCommon","_OrderBookWidget","obj","__esModule","default","graphqlUrl","configGraphQl","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","volatilityChartWidgetConfig","widgetsConfig","orderBookElements","document","querySelectorAll","length","forEach","element","root","createRoot","params","getAttribute","mode","JSON","parse","isParamError","validateToolParams","name","valueCheck","value","split","render","createElement","OrderBookWidget","theme","container","getElementById"],"sources":["../../../src/OrderBookWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Theme, validateToolParams } from '@oanda/labs-widget-common';\nimport { OrderBookWidget } from './OrderBookWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.volatilityChartWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst orderBookElements = document.querySelectorAll('div[data-order-book-params]');\n\nif (orderBookElements.length > 0) {\n  orderBookElements.forEach((element) => {\n    const root = createRoot(element);\n    const params = element.getAttribute('data-order-book-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, locale } = JSON.parse(params as string);\n\n    const isParamError = validateToolParams({ locale, graphqlUrl }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',\n      }, {\n        name: 'graphqlUrl',\n      }]);\n    root.render(\n      <OrderBookWidget\n        locale={locale}\n        graphqlUrl={graphqlUrl}\n        instrument={instrument}\n        theme={mode as Theme}\n        isParamError={isParamError}\n      />,\n    );\n  });\n} else {\n  const container = document.getElementById(configRenderElementId);\n  const root = createRoot(container!);\n\n  root.render(\n    <OrderBookWidget\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n      instrument={configInstrument}\n    />,\n  );\n}\n"],"mappings":";;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAAoD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEpD,MAAM;EACJG,UAAU,EAAEC,aAAa;EACzBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,2BAA2B,IAAI,CAAC,CAAC;AAE5C,MAAM;EACJT;AACF,CAAC,GAAGQ,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,6BAA6B,CAAC;AAElF,IAAIF,iBAAiB,CAACG,MAAM,GAAG,CAAC,EAAE;EAChCH,iBAAiB,CAACI,OAAO,CAAEC,OAAO,IAAK;IACrC,MAAMC,IAAI,GAAG,IAAAC,kBAAU,EAACF,OAAO,CAAC;IAChC,MAAMG,MAAM,GAAGH,OAAO,CAACI,YAAY,CAAC,wBAAwB,CAAC;IAC7D,MAAMC,IAAI,GAAGL,OAAO,CAACI,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAElB,UAAU;MAAEI;IAAO,CAAC,GAAGgB,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE3D,MAAMK,YAAY,GAAG,IAAAC,oCAAkB,EAAC;MAAEnB,MAAM;MAAEN;IAAW,CAAC,EAAE,CAC9D;MACE0B,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAGC,KAAK,IAAKA,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAID,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK;IACjF,CAAC,EAAE;MACDH,IAAI,EAAE;IACR,CAAC,CAAC,CAAC;IACLT,IAAI,CAACa,MAAM,CACTvC,MAAA,CAAAQ,OAAA,CAAAgC,aAAA,CAACnC,gBAAA,CAAAoC,eAAe;MACd1B,MAAM,EAAEA,MAAO;MACfN,UAAU,EAAEA,UAAW;MACvBE,UAAU,EAAEA,UAAW;MACvB+B,KAAK,EAAEZ,IAAc;MACrBG,YAAY,EAAEA;IAAa,CAC5B,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,MAAMU,SAAS,GAAGtB,QAAQ,CAACuB,cAAc,CAAC9B,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAG,IAAAC,kBAAU,EAACgB,SAAU,CAAC;EAEnCjB,IAAI,CAACa,MAAM,CACTvC,MAAA,CAAAQ,OAAA,CAAAgC,aAAA,CAACnC,gBAAA,CAAAoC,eAAe;IACd1B,MAAM,EAAEC,YAAa;IACrBP,UAAU,EAAEC,aAAc;IAC1BC,UAAU,EAAEC;EAAiB,CAC9B,CACH,CAAC;AACH","ignoreList":[]}

package/dist/main/gql/types/gql.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.graphql = graphql;
 var types = _interopRequireWildcard(require("./graphql"));
 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; }
+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 && {}.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 documents = {
   "\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\n    orderPositionBooks(\n      instrument: $instrument\n      bookType: $bookType\n      recentHours: $recentHours\n    ) {\n      bucketWidth\n      price\n      time\n      buckets {\n        price\n        longCountPercent\n        shortCountPercent\n      }\n    }\n  }\n": types.GetOrderPositionBooksDocument
 };

package/dist/main/gql/types/gql.js.map

@@ -1 +1 @@
-{"version":3,"file":"gql.js","names":["types","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","documents","GetOrderPositionBooksDocument","graphql","source","_source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n    \"\\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\\n    orderPositionBooks(\\n      instrument: $instrument\\n      bookType: $bookType\\n      recentHours: $recentHours\\n    ) {\\n      bucketWidth\\n      price\\n      time\\n      buckets {\\n        price\\n        longCountPercent\\n        shortCountPercent\\n      }\\n    }\\n  }\\n\": types.GetOrderPositionBooksDocument,\n};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(source: \"\\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\\n    orderPositionBooks(\\n      instrument: $instrument\\n      bookType: $bookType\\n      recentHours: $recentHours\\n    ) {\\n      bucketWidth\\n      price\\n      time\\n      buckets {\\n        price\\n        longCountPercent\\n        shortCountPercent\\n      }\\n    }\\n  }\\n\"): (typeof documents)[\"\\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\\n    orderPositionBooks(\\n      instrument: $instrument\\n      bookType: $bookType\\n      recentHours: $recentHours\\n    ) {\\n      bucketWidth\\n      price\\n      time\\n      buckets {\\n        price\\n        longCountPercent\\n        shortCountPercent\\n      }\\n    }\\n  }\\n\"];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAmC,SAAAC,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,SAAAH,wBAAAG,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;AAanC,MAAMY,SAAS,GAAG;EACd,uXAAuX,EAAExB,KAAK,CAACyB;AACnY,CAAC;AAqBM,SAASC,OAAOA,CAACC,MAAc,EAAE;EAAA,IAAAC,OAAA;EACtC,QAAAA,OAAA,GAAQJ,SAAS,CAASG,MAAM,CAAC,cAAAC,OAAA,cAAAA,OAAA,GAAI,CAAC,CAAC;AACzC","ignoreList":[]}
+{"version":3,"file":"gql.js","names":["types","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","documents","GetOrderPositionBooksDocument","graphql","source","_source"],"sources":["../../../../src/gql/types/gql.ts"],"sourcesContent":["/* eslint-disable */\nimport * as types from './graphql';\nimport { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n\n/**\n * Map of all GraphQL operations in the project.\n *\n * This map has several performance disadvantages:\n * 1. It is not tree-shakeable, so it will include all operations in the project.\n * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.\n * 3. It does not support dead code elimination, so it will add unused operations.\n *\n * Therefore it is highly recommended to use the babel or swc plugin for production.\n */\nconst documents = {\n    \"\\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\\n    orderPositionBooks(\\n      instrument: $instrument\\n      bookType: $bookType\\n      recentHours: $recentHours\\n    ) {\\n      bucketWidth\\n      price\\n      time\\n      buckets {\\n        price\\n        longCountPercent\\n        shortCountPercent\\n      }\\n    }\\n  }\\n\": types.GetOrderPositionBooksDocument,\n};\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n *\n *\n * @example\n * ```ts\n * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);\n * ```\n *\n * The query argument is unknown!\n * Please regenerate the types.\n */\nexport function graphql(source: string): unknown;\n\n/**\n * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.\n */\nexport function graphql(source: \"\\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\\n    orderPositionBooks(\\n      instrument: $instrument\\n      bookType: $bookType\\n      recentHours: $recentHours\\n    ) {\\n      bucketWidth\\n      price\\n      time\\n      buckets {\\n        price\\n        longCountPercent\\n        shortCountPercent\\n      }\\n    }\\n  }\\n\"): (typeof documents)[\"\\n  query GetOrderPositionBooks($instrument: String!, $bookType: BookType!, $recentHours: Int) {\\n    orderPositionBooks(\\n      instrument: $instrument\\n      bookType: $bookType\\n      recentHours: $recentHours\\n    ) {\\n      bucketWidth\\n      price\\n      time\\n      buckets {\\n        price\\n        longCountPercent\\n        shortCountPercent\\n      }\\n    }\\n  }\\n\"];\n\nexport function graphql(source: string) {\n  return (documents as any)[source] ?? {};\n}\n\nexport type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;"],"mappings":";;;;;;AACA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAmC,SAAAC,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,SAAAH,wBAAAG,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,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAanC,MAAMW,SAAS,GAAG;EACd,uXAAuX,EAAEvB,KAAK,CAACwB;AACnY,CAAC;AAqBM,SAASC,OAAOA,CAACC,MAAc,EAAE;EAAA,IAAAC,OAAA;EACtC,QAAAA,OAAA,GAAQJ,SAAS,CAASG,MAAM,CAAC,cAAAC,OAAA,cAAAA,OAAA,GAAI,CAAC,CAAC;AACzC","ignoreList":[]}

package/dist/module/OrderBookWidget/render.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { validateToolParams } from '@oanda/labs-widget-common';
 import { OrderBookWidget } from './OrderBookWidget';
 const {
@@ -14,6 +14,7 @@ const {
 const orderBookElements = document.querySelectorAll('div[data-order-book-params]');
 if (orderBookElements.length > 0) {
   orderBookElements.forEach(element => {
+    const root = createRoot(element);
     const params = element.getAttribute('data-order-book-params');
     const mode = element.getAttribute('data-mode');
     const {
@@ -29,19 +30,21 @@ if (orderBookElements.length > 0) {
     }, {
       name: 'graphqlUrl'
     }]);
-    render(React.createElement(OrderBookWidget, {
+    root.render(React.createElement(OrderBookWidget, {
       locale: locale,
       graphqlUrl: graphqlUrl,
       instrument: instrument,
       theme: mode,
       isParamError: isParamError
-    }), element);
+    }));
   });
 } else {
-  render(React.createElement(OrderBookWidget, {
+  const container = document.getElementById(configRenderElementId);
+  const root = createRoot(container);
+  root.render(React.createElement(OrderBookWidget, {
     locale: configLocale,
     graphqlUrl: configGraphQl,
     instrument: configInstrument
-  }), document.getElementById(configRenderElementId));
+  }));
 }
 //# sourceMappingURL=render.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"render.js","names":["React","render","validateToolParams","OrderBookWidget","graphqlUrl","configGraphQl","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","volatilityChartWidgetConfig","widgetsConfig","orderBookElements","document","querySelectorAll","length","forEach","element","params","getAttribute","mode","JSON","parse","isParamError","name","valueCheck","value","split","createElement","theme","getElementById"],"sources":["../../../src/OrderBookWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { render } from 'react-dom';\nimport { Theme, validateToolParams } from '@oanda/labs-widget-common';\nimport { OrderBookWidget } from './OrderBookWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.volatilityChartWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst orderBookElements = document.querySelectorAll('div[data-order-book-params]');\n\nif (orderBookElements.length > 0) {\n  orderBookElements.forEach((element) => {\n    const params = element.getAttribute('data-order-book-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, locale } = JSON.parse(params as string);\n\n    const isParamError = validateToolParams({ locale, graphqlUrl }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',\n      }, {\n        name: 'graphqlUrl',\n      }]);\n    render(\n      <OrderBookWidget\n        locale={locale}\n        graphqlUrl={graphqlUrl}\n        instrument={instrument}\n        theme={mode as Theme}\n        isParamError={isParamError}\n      />,\n      element,\n    );\n  });\n} else {\n  render(\n    <OrderBookWidget\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n      instrument={configInstrument}\n    />,\n    document.getElementById(configRenderElementId),\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,WAAW;AAClC,SAAgBC,kBAAkB,QAAQ,2BAA2B;AACrE,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,2BAA2B,IAAI,CAAC,CAAC;AAE5C,MAAM;EACJT;AACF,CAAC,GAAGQ,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,6BAA6B,CAAC;AAElF,IAAIF,iBAAiB,CAACG,MAAM,GAAG,CAAC,EAAE;EAChCH,iBAAiB,CAACI,OAAO,CAAEC,OAAO,IAAK;IACrC,MAAMC,MAAM,GAAGD,OAAO,CAACE,YAAY,CAAC,wBAAwB,CAAC;IAC7D,MAAMC,IAAI,GAAGH,OAAO,CAACE,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEhB,UAAU;MAAEI;IAAO,CAAC,GAAGc,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE3D,MAAMK,YAAY,GAAGxB,kBAAkB,CAAC;MAAEQ,MAAM;MAAEN;IAAW,CAAC,EAAE,CAC9D;MACEuB,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAGC,KAAK,IAAKA,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAID,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK;IACjF,CAAC,EAAE;MACDH,IAAI,EAAE;IACR,CAAC,CAAC,CAAC;IACL1B,MAAM,CACJD,KAAA,CAAA+B,aAAA,CAAC5B,eAAe;MACdO,MAAM,EAAEA,MAAO;MACfN,UAAU,EAAEA,UAAW;MACvBE,UAAU,EAAEA,UAAW;MACvB0B,KAAK,EAAET,IAAc;MACrBG,YAAY,EAAEA;IAAa,CAC5B,CAAC,EACFN,OACF,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACLnB,MAAM,CACJD,KAAA,CAAA+B,aAAA,CAAC5B,eAAe;IACdO,MAAM,EAAEC,YAAa;IACrBP,UAAU,EAAEC,aAAc;IAC1BC,UAAU,EAAEC;EAAiB,CAC9B,CAAC,EACFS,QAAQ,CAACiB,cAAc,CAACxB,qBAAqB,CAC/C,CAAC;AACH","ignoreList":[]}
+{"version":3,"file":"render.js","names":["React","createRoot","validateToolParams","OrderBookWidget","graphqlUrl","configGraphQl","instrument","configInstrument","renderElementId","configRenderElementId","locale","configLocale","window","volatilityChartWidgetConfig","widgetsConfig","orderBookElements","document","querySelectorAll","length","forEach","element","root","params","getAttribute","mode","JSON","parse","isParamError","name","valueCheck","value","split","render","createElement","theme","container","getElementById"],"sources":["../../../src/OrderBookWidget/render.tsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Theme, validateToolParams } from '@oanda/labs-widget-common';\nimport { OrderBookWidget } from './OrderBookWidget';\n\nconst {\n  graphqlUrl: configGraphQl,\n  instrument: configInstrument,\n  renderElementId: configRenderElementId,\n  locale: configLocale,\n} = window.volatilityChartWidgetConfig || {};\n\nconst {\n  graphqlUrl,\n} = window.widgetsConfig || {};\n\nconst orderBookElements = document.querySelectorAll('div[data-order-book-params]');\n\nif (orderBookElements.length > 0) {\n  orderBookElements.forEach((element) => {\n    const root = createRoot(element);\n    const params = element.getAttribute('data-order-book-params');\n    const mode = element.getAttribute('data-mode');\n    const { instrument, locale } = JSON.parse(params as string);\n\n    const isParamError = validateToolParams({ locale, graphqlUrl }, [\n      {\n        name: 'locale',\n        valueCheck: (value) => value.split('-')[0] === 'en' || value.split('-')[0] === 'zh',\n      }, {\n        name: 'graphqlUrl',\n      }]);\n    root.render(\n      <OrderBookWidget\n        locale={locale}\n        graphqlUrl={graphqlUrl}\n        instrument={instrument}\n        theme={mode as Theme}\n        isParamError={isParamError}\n      />,\n    );\n  });\n} else {\n  const container = document.getElementById(configRenderElementId);\n  const root = createRoot(container!);\n\n  root.render(\n    <OrderBookWidget\n      locale={configLocale}\n      graphqlUrl={configGraphQl}\n      instrument={configInstrument}\n    />,\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAAgBC,kBAAkB,QAAQ,2BAA2B;AACrE,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,MAAM;EACJC,UAAU,EAAEC,aAAa;EACzBC,UAAU,EAAEC,gBAAgB;EAC5BC,eAAe,EAAEC,qBAAqB;EACtCC,MAAM,EAAEC;AACV,CAAC,GAAGC,MAAM,CAACC,2BAA2B,IAAI,CAAC,CAAC;AAE5C,MAAM;EACJT;AACF,CAAC,GAAGQ,MAAM,CAACE,aAAa,IAAI,CAAC,CAAC;AAE9B,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,6BAA6B,CAAC;AAElF,IAAIF,iBAAiB,CAACG,MAAM,GAAG,CAAC,EAAE;EAChCH,iBAAiB,CAACI,OAAO,CAAEC,OAAO,IAAK;IACrC,MAAMC,IAAI,GAAGpB,UAAU,CAACmB,OAAO,CAAC;IAChC,MAAME,MAAM,GAAGF,OAAO,CAACG,YAAY,CAAC,wBAAwB,CAAC;IAC7D,MAAMC,IAAI,GAAGJ,OAAO,CAACG,YAAY,CAAC,WAAW,CAAC;IAC9C,MAAM;MAAEjB,UAAU;MAAEI;IAAO,CAAC,GAAGe,IAAI,CAACC,KAAK,CAACJ,MAAgB,CAAC;IAE3D,MAAMK,YAAY,GAAGzB,kBAAkB,CAAC;MAAEQ,MAAM;MAAEN;IAAW,CAAC,EAAE,CAC9D;MACEwB,IAAI,EAAE,QAAQ;MACdC,UAAU,EAAGC,KAAK,IAAKA,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,IAAID,KAAK,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK;IACjF,CAAC,EAAE;MACDH,IAAI,EAAE;IACR,CAAC,CAAC,CAAC;IACLP,IAAI,CAACW,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC9B,eAAe;MACdO,MAAM,EAAEA,MAAO;MACfN,UAAU,EAAEA,UAAW;MACvBE,UAAU,EAAEA,UAAW;MACvB4B,KAAK,EAAEV,IAAc;MACrBG,YAAY,EAAEA;IAAa,CAC5B,CACH,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,MAAM;EACL,MAAMQ,SAAS,GAAGnB,QAAQ,CAACoB,cAAc,CAAC3B,qBAAqB,CAAC;EAChE,MAAMY,IAAI,GAAGpB,UAAU,CAACkC,SAAU,CAAC;EAEnCd,IAAI,CAACW,MAAM,CACThC,KAAA,CAAAiC,aAAA,CAAC9B,eAAe;IACdO,MAAM,EAAEC,YAAa;IACrBP,UAAU,EAAEC,aAAc;IAC1BC,UAAU,EAAEC;EAAiB,CAC9B,CACH,CAAC;AACH","ignoreList":[]}

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

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

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

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { OrderBookWidgetConfig } from './types';
-declare const OrderBookWidget: ({ graphqlUrl, instrument, locale, theme, isParamError, }: OrderBookWidgetConfig) => JSX.Element;
+declare const OrderBookWidget: ({ graphqlUrl, instrument, locale, theme, isParamError, }: OrderBookWidgetConfig) => React.JSX.Element;
 export { OrderBookWidget };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.103",
+  "version": "1.0.105",
   "description": "Labs Order Book Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,17 +12,17 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@apollo/client": "3.7.17",
-    "@oanda/labs-widget-common": "^1.0.103",
+    "@apollo/client": "3.9.9",
+    "@oanda/labs-widget-common": "^1.0.105",
     "@oanda/mono-i18n": "9.0.0",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
-    "graphql": "16.7.1"
+    "graphql": "16.8.1"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.0",
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "d2f4eebc1828c2a652ed512213cdc9693d02edcf"
+  "gitHead": "144e5964b2ff57449137018b9dea7e37dc1a20d0"
 }

package/src/OrderBookWidget/render.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Theme, validateToolParams } from '@oanda/labs-widget-common';
 import { OrderBookWidget } from './OrderBookWidget';
 
@@ -18,6 +18,7 @@ const orderBookElements = document.querySelectorAll('div[data-order-book-params]
 
 if (orderBookElements.length > 0) {
   orderBookElements.forEach((element) => {
+    const root = createRoot(element);
     const params = element.getAttribute('data-order-book-params');
     const mode = element.getAttribute('data-mode');
     const { instrument, locale } = JSON.parse(params as string);
@@ -29,7 +30,7 @@ if (orderBookElements.length > 0) {
       }, {
         name: 'graphqlUrl',
       }]);
-    render(
+    root.render(
       <OrderBookWidget
         locale={locale}
         graphqlUrl={graphqlUrl}
@@ -37,16 +38,17 @@ if (orderBookElements.length > 0) {
         theme={mode as Theme}
         isParamError={isParamError}
       />,
-      element,
     );
   });
 } else {
-  render(
+  const container = document.getElementById(configRenderElementId);
+  const root = createRoot(container!);
+
+  root.render(
     <OrderBookWidget
       locale={configLocale}
       graphqlUrl={configGraphQl}
       instrument={configInstrument}
     />,
-    document.getElementById(configRenderElementId),
   );
 }