@oanda/labs-order-book-widget 1.0.197 → 1.0.198

package/CHANGELOG.md

@@ -3,6 +3,786 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.0.198 (2025-05-26)
+
+
+
+## 1.0.197 (2025-05-23)
+
+
+
+## 1.0.196 (2025-05-22)
+
+
+
+## 1.0.195 (2025-05-21)
+
+
+
+## 1.0.194 (2025-05-21)
+
+
+
+## 1.0.193 (2025-05-15)
+
+
+
+## 1.0.192 (2025-05-14)
+
+
+
+## 1.0.191 (2025-04-30)
+
+
+
+## 1.0.190 (2025-04-28)
+
+
+
+## 1.0.189 (2025-04-23)
+
+
+
+## 1.0.188 (2025-04-22)
+
+
+
+## 1.0.187 (2025-04-18)
+
+
+
+## 1.0.186 (2025-04-10)
+
+
+
+## 1.0.185 (2025-04-09)
+
+
+
+## 1.0.184 (2025-04-08)
+
+
+
+## 1.0.183 (2025-04-04)
+
+
+
+## 1.0.182 (2025-03-21)
+
+
+
+## 1.0.181 (2025-03-13)
+
+
+
+## 1.0.180 (2025-01-30)
+
+
+
+## 1.0.179 (2025-01-29)
+
+
+
+## 1.0.178 (2025-01-12)
+
+
+
+## 1.0.177 (2025-01-10)
+
+
+
+## 1.0.176 (2025-01-10)
+
+
+
+## 1.0.175 (2025-01-08)
+
+
+
+## 1.0.174 (2024-12-16)
+
+
+
+## 1.0.173 (2024-12-11)
+
+
+
+## 1.0.172 (2024-11-29)
+
+
+
+## 1.0.171 (2024-11-28)
+
+
+
+## 1.0.170 (2024-11-28)
+
+
+
+## 1.0.169 (2024-11-20)
+
+
+
+## 1.0.168 (2024-11-19)
+
+
+
+## 1.0.167 (2024-10-14)
+
+
+
+## 1.0.166 (2024-10-07)
+
+
+
+## 1.0.165 (2024-10-03)
+
+
+
+## 1.0.164 (2024-09-26)
+
+
+
+## 1.0.163 (2024-09-18)
+
+
+
+## 1.0.162 (2024-09-12)
+
+
+
+## 1.0.161 (2024-09-11)
+
+
+
+## 1.0.160 (2024-09-10)
+
+
+
+## 1.0.159 (2024-09-09)
+
+
+
+## 1.0.158 (2024-09-04)
+
+
+
+## 1.0.157 (2024-09-04)
+
+
+
+## 1.0.156 (2024-09-02)
+
+
+
+## 1.0.155 (2024-08-29)
+
+
+
+## 1.0.154 (2024-08-29)
+
+
+
+## 1.0.153 (2024-08-23)
+
+
+
+## 1.0.152 (2024-08-23)
+
+
+
+## 1.0.151 (2024-08-20)
+
+
+
+## 1.0.150 (2024-08-19)
+
+
+
+## 1.0.149 (2024-08-07)
+
+
+
+## 1.0.148 (2024-08-01)
+
+
+
+## 1.0.147 (2024-08-01)
+
+
+
+## 1.0.146 (2024-07-26)
+
+
+
+## 1.0.145 (2024-07-25)
+
+
+
+## 1.0.144 (2024-07-22)
+
+
+
+## 1.0.143 (2024-07-19)
+
+
+
+## 1.0.142 (2024-07-16)
+
+
+
+## 1.0.141 (2024-07-16)
+
+
+
+## 1.0.140 (2024-07-12)
+
+
+
+## 1.0.139 (2024-07-12)
+
+
+
+## 1.0.138 (2024-07-10)
+
+
+
+## 1.0.137 (2024-07-05)
+
+
+
+## 1.0.136 (2024-07-03)
+
+
+
+## 1.0.135 (2024-07-03)
+
+
+
+## 1.0.134 (2024-07-03)
+
+
+
+## 1.0.133 (2024-06-28)
+
+
+
+## 1.0.132 (2024-06-27)
+
+
+
+## 1.0.131 (2024-06-27)
+
+
+
+## 1.0.130 (2024-06-26)
+
+
+
+## 1.0.129 (2024-06-17)
+
+
+
+## 1.0.128 (2024-06-17)
+
+
+
+## 1.0.127 (2024-06-10)
+
+
+
+## 1.0.126 (2024-05-29)
+
+
+
+## 1.0.125 (2024-05-29)
+
+
+
+## 1.0.124 (2024-05-29)
+
+
+
+## 1.0.123 (2024-05-28)
+
+
+
+## 1.0.122 (2024-05-27)
+
+
+
+## 1.0.121 (2024-05-27)
+
+
+
+## 1.0.120 (2024-05-24)
+
+
+
+## 1.0.119 (2024-05-17)
+
+
+
+## 1.0.118 (2024-05-09)
+
+
+
+## 1.0.117 (2024-05-07)
+
+
+
+## 1.0.116 (2024-04-23)
+
+
+
+## 1.0.115 (2024-04-22)
+
+
+
+## 1.0.114 (2024-04-19)
+
+
+
+## 1.0.113 (2024-04-19)
+
+
+
+## 1.0.112 (2024-04-15)
+
+
+
+## 1.0.111 (2024-04-11)
+
+
+
+## 1.0.110 (2024-04-05)
+
+
+
+## 1.0.109 (2024-04-05)
+
+
+
+## 1.0.108 (2024-04-04)
+
+
+
+## 1.0.107 (2024-04-03)
+
+
+
+## 1.0.106 (2024-03-29)
+
+
+
+## 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.197 (2025-05-23)
 
 

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

@@ -10,10 +10,8 @@ var _charts = require("echarts/charts");
 var _components = require("echarts/components");
 var echarts = _interopRequireWildcard(require("echarts/core"));
 var _renderers = require("echarts/renderers");
-var _core2 = _interopRequireDefault(require("echarts-for-react/lib/core"));
 var _react = _interopRequireWildcard(require("react"));
 var _getOption = require("./getOption");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 && {}.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]);
@@ -65,9 +63,11 @@ const Chart = _ref => {
   return _react.default.createElement("div", {
     className: "lw-relative lw-w-full",
     "data-testid": "order-book-chart"
-  }, _react.default.createElement("div", null, data && _react.default.createElement(_core2.default, {
+  }, _react.default.createElement("div", null, data && _react.default.createElement(_labsWidgetCommon.BaseChart, {
     ref: echartRef,
+    chartHeight: isDesktop ? 450 : 390,
     echarts: echarts,
+    isDark: isDark,
     option: (0, _getOption.getOption)({
       data,
       precision,
@@ -75,12 +75,7 @@ const Chart = _ref => {
       isOrderBook,
       isDesktop,
       lang
-    }),
-    style: {
-      height: isDesktop ? '450px' : '390px',
-      width: '100%'
-    },
-    theme: isDark ? 'dark_theme' : 'light_theme'
+    })
   })));
 };
 exports.Chart = Chart;

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_monoI18n","_charts","_components","echarts","_interopRequireWildcard","_renderers","_core2","_interopRequireDefault","_react","_getOption","e","__esModule","default","_getRequireWildcardCache","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","useLayoutProvider","isDesktop","Size","DESKTOP","echartRef","useRef","useEffect","current","echartInstance","getEchartsInstance","on","getOption","color","colorPalette","bottleGreenLight","setOption","bottleGreenLight70","orange70","raspberryDark70","orange","raspberryDark","getResponsiveOption","createElement","className","ref","option","style","height","width","theme","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  colorPalette,\n  getChartTheme,\n  Size,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { CustomChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkLineComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport React, { useEffect, useRef } from 'react';\n\nimport { getOption, getResponsiveOption } from './getOption';\nimport type { 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 } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const echartRef = useRef<ReactEChartsCore | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.on('highlight', () => {\n        if (\n          (echartInstance.getOption().color as echarts.Color[])[0] ===\n          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      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(\n        getResponsiveOption({\n          isDark,\n          isOrderBook,\n          isDesktop,\n          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            ref={echartRef}\n            echarts={echarts}\n            option={getOption({\n              data,\n              precision,\n              isDark,\n              isOrderBook,\n              isDesktop,\n              lang,\n            })}\n            style={{\n              height: isDesktop ? '450px' : '390px',\n              width: '100%',\n            }}\n            theme={isDark ? 'dark_theme' : 'light_theme'}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_monoI18n","_charts","_components","echarts","_interopRequireWildcard","_renderers","_react","_getOption","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","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","useLayoutProvider","isDesktop","Size","DESKTOP","echartRef","useRef","useEffect","current","echartInstance","getEchartsInstance","on","getOption","color","colorPalette","bottleGreenLight","setOption","bottleGreenLight70","orange70","raspberryDark70","orange","raspberryDark","getResponsiveOption","createElement","className","BaseChart","ref","chartHeight","option","exports"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import type { BaseChartRef } from '@oanda/labs-widget-common';\nimport {\n  BaseChart,\n  colorPalette,\n  getChartTheme,\n  Size,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { CustomChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkLineComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React, { useEffect, useRef } from 'react';\n\nimport { getOption, getResponsiveOption } from './getOption';\nimport type { 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 } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const echartRef = useRef<BaseChartRef | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.on('highlight', () => {\n        if (\n          (echartInstance.getOption().color as echarts.Color[])[0] ===\n          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      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(\n        getResponsiveOption({\n          isDark,\n          isOrderBook,\n          isDesktop,\n          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          <BaseChart\n            ref={echartRef}\n            chartHeight={isDesktop ? 450 : 390}\n            echarts={echarts}\n            isDark={isDark}\n            option={getOption({\n              data,\n              precision,\n              isDark,\n              isOrderBook,\n              isDesktop,\n              lang,\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,10 +1,9 @@
-import { colorPalette, getChartTheme, Size, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
+import { BaseChart, colorPalette, getChartTheme, Size, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
 import { useLocale } from '@oanda/mono-i18n';
 import { CustomChart } from 'echarts/charts';
 import { DatasetComponent, DataZoomInsideComponent, GraphicComponent, GridSimpleComponent, MarkLineComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
 import React, { useEffect, useRef } from 'react';
 import { getOption, getResponsiveOption } from './getOption';
 echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent, CanvasRenderer, CustomChart, MarkLineComponent, ToolboxComponent, DataZoomInsideComponent, DatasetComponent]);
@@ -56,9 +55,11 @@ export const Chart = _ref => {
   return React.createElement("div", {
     className: "lw-relative lw-w-full",
     "data-testid": "order-book-chart"
-  }, React.createElement("div", null, data && React.createElement(ReactEChartsCore, {
+  }, React.createElement("div", null, data && React.createElement(BaseChart, {
     ref: echartRef,
+    chartHeight: isDesktop ? 450 : 390,
     echarts: echarts,
+    isDark: isDark,
     option: getOption({
       data,
       precision,
@@ -66,12 +67,7 @@ export const Chart = _ref => {
       isOrderBook,
       isDesktop,
       lang
-    }),
-    style: {
-      height: isDesktop ? '450px' : '390px',
-      width: '100%'
-    },
-    theme: isDark ? 'dark_theme' : 'light_theme'
+    })
   })));
 };
 //# sourceMappingURL=Chart.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.js","names":["colorPalette","getChartTheme","Size","Theme","useLayoutProvider","useLocale","CustomChart","DatasetComponent","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkLineComponent","TitleComponent","ToolboxComponent","TooltipComponent","echarts","CanvasRenderer","ReactEChartsCore","React","useEffect","useRef","getOption","getResponsiveOption","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","option","style","height","width","theme"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import {\n  colorPalette,\n  getChartTheme,\n  Size,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { CustomChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkLineComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport ReactEChartsCore from 'echarts-for-react/lib/core';\nimport React, { useEffect, useRef } from 'react';\n\nimport { getOption, getResponsiveOption } from './getOption';\nimport type { 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 } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const echartRef = useRef<ReactEChartsCore | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.on('highlight', () => {\n        if (\n          (echartInstance.getOption().color as echarts.Color[])[0] ===\n          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      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(\n        getResponsiveOption({\n          isDark,\n          isOrderBook,\n          isDesktop,\n          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            ref={echartRef}\n            echarts={echarts}\n            option={getOption({\n              data,\n              precision,\n              isDark,\n              isOrderBook,\n              isDesktop,\n              lang,\n            })}\n            style={{\n              height: isDesktop ? '450px' : '390px',\n              width: '100%',\n            }}\n            theme={isDark ? 'dark_theme' : 'light_theme'}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Chart.js","names":["BaseChart","colorPalette","getChartTheme","Size","Theme","useLayoutProvider","useLocale","CustomChart","DatasetComponent","DataZoomInsideComponent","GraphicComponent","GridSimpleComponent","MarkLineComponent","TitleComponent","ToolboxComponent","TooltipComponent","echarts","CanvasRenderer","React","useEffect","useRef","getOption","getResponsiveOption","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","chartHeight","option"],"sources":["../../../../../src/OrderBookWidget/components/Chart/Chart.tsx"],"sourcesContent":["import type { BaseChartRef } from '@oanda/labs-widget-common';\nimport {\n  BaseChart,\n  colorPalette,\n  getChartTheme,\n  Size,\n  Theme,\n  useLayoutProvider,\n} from '@oanda/labs-widget-common';\nimport { useLocale } from '@oanda/mono-i18n';\nimport { CustomChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  GraphicComponent,\n  GridSimpleComponent,\n  MarkLineComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport * as echarts from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport React, { useEffect, useRef } from 'react';\n\nimport { getOption, getResponsiveOption } from './getOption';\nimport type { 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 } = useLayoutProvider();\n  const isDesktop = size === Size.DESKTOP;\n\n  const echartRef = useRef<BaseChartRef | null>(null);\n\n  useEffect(() => {\n    if (echartRef.current) {\n      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.on('highlight', () => {\n        if (\n          (echartInstance.getOption().color as echarts.Color[])[0] ===\n          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      const echartInstance = echartRef.current.getEchartsInstance();\n\n      echartInstance.setOption(\n        getResponsiveOption({\n          isDark,\n          isOrderBook,\n          isDesktop,\n          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          <BaseChart\n            ref={echartRef}\n            chartHeight={isDesktop ? 450 : 390}\n            echarts={echarts}\n            isDark={isDark}\n            option={getOption({\n              data,\n              precision,\n              isDark,\n              isOrderBook,\n              isDesktop,\n              lang,\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oanda/labs-order-book-widget",
-  "version": "1.0.197",
+  "version": "1.0.198",
   "description": "Labs Order Book Widget",
   "main": "dist/main/index.js",
   "module": "dist/module/index.js",
@@ -12,7 +12,7 @@
   "author": "OANDA",
   "license": "UNLICENSED",
   "dependencies": {
-    "@oanda/labs-widget-common": "^1.0.197",
+    "@oanda/labs-widget-common": "^1.0.198",
     "@oanda/mono-i18n": "10.0.1",
     "echarts": "5.5.0",
     "echarts-for-react": "3.0.2",
@@ -23,5 +23,5 @@
     "@graphql-codegen/client-preset": "4.1.0",
     "@graphql-codegen/typescript": "4.0.1"
   },
-  "gitHead": "ecd6f0edf62d64f6537ce92408ae285fc012e18e"
+  "gitHead": "083781981c17b38576e6e46122dca29abd250b34"
 }

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

@@ -1,4 +1,6 @@
+import type { BaseChartRef } from '@oanda/labs-widget-common';
 import {
+  BaseChart,
   colorPalette,
   getChartTheme,
   Size,
@@ -19,7 +21,6 @@ import {
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
 import React, { useEffect, useRef } from 'react';
 
 import { getOption, getResponsiveOption } from './getOption';
@@ -46,7 +47,7 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
   const { isDark, size } = useLayoutProvider();
   const isDesktop = size === Size.DESKTOP;
 
-  const echartRef = useRef<ReactEChartsCore | null>(null);
+  const echartRef = useRef<BaseChartRef | null>(null);
 
   useEffect(() => {
     if (echartRef.current) {
@@ -96,9 +97,11 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
     <div className="lw-relative lw-w-full" data-testid="order-book-chart">
       <div>
         {data && (
-          <ReactEChartsCore
+          <BaseChart
             ref={echartRef}
+            chartHeight={isDesktop ? 450 : 390}
             echarts={echarts}
+            isDark={isDark}
             option={getOption({
               data,
               precision,
@@ -107,11 +110,6 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
               isDesktop,
               lang,
             })}
-            style={{
-              height: isDesktop ? '450px' : '390px',
-              width: '100%',
-            }}
-            theme={isDark ? 'dark_theme' : 'light_theme'}
           />
         )}
       </div>