@oanda/labs-order-book-widget 1.0.196 → 1.0.198
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1556 -0
- package/dist/main/OrderBookWidget/components/Chart/Chart.js +4 -9
- package/dist/main/OrderBookWidget/components/Chart/Chart.js.map +1 -1
- package/dist/main/translations/sources/en.json +1 -0
- package/dist/module/OrderBookWidget/components/Chart/Chart.js +5 -9
- package/dist/module/OrderBookWidget/components/Chart/Chart.js.map +1 -1
- package/dist/module/translations/sources/en.json +1 -0
- package/package.json +3 -3
- package/src/OrderBookWidget/components/Chart/Chart.tsx +6 -8
- package/src/translations/sources/en.json +1 -0
|
@@ -10,10 +10,8 @@ var _charts = require("echarts/charts");
|
|
|
10
10
|
var _components = require("echarts/components");
|
|
11
11
|
var echarts = _interopRequireWildcard(require("echarts/core"));
|
|
12
12
|
var _renderers = require("echarts/renderers");
|
|
13
|
-
var _core2 = _interopRequireDefault(require("echarts-for-react/lib/core"));
|
|
14
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
14
|
var _getOption = require("./getOption");
|
|
16
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
15
|
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); }
|
|
18
16
|
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; }
|
|
19
17
|
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 => {
|
|
|
65
63
|
return _react.default.createElement("div", {
|
|
66
64
|
className: "lw-relative lw-w-full",
|
|
67
65
|
"data-testid": "order-book-chart"
|
|
68
|
-
}, _react.default.createElement("div", null, data && _react.default.createElement(
|
|
66
|
+
}, _react.default.createElement("div", null, data && _react.default.createElement(_labsWidgetCommon.BaseChart, {
|
|
69
67
|
ref: echartRef,
|
|
68
|
+
chartHeight: isDesktop ? 450 : 390,
|
|
70
69
|
echarts: echarts,
|
|
70
|
+
isDark: isDark,
|
|
71
71
|
option: (0, _getOption.getOption)({
|
|
72
72
|
data,
|
|
73
73
|
precision,
|
|
@@ -75,12 +75,7 @@ const Chart = _ref => {
|
|
|
75
75
|
isOrderBook,
|
|
76
76
|
isDesktop,
|
|
77
77
|
lang
|
|
78
|
-
})
|
|
79
|
-
style: {
|
|
80
|
-
height: isDesktop ? '450px' : '390px',
|
|
81
|
-
width: '100%'
|
|
82
|
-
},
|
|
83
|
-
theme: isDark ? 'dark_theme' : 'light_theme'
|
|
78
|
+
})
|
|
84
79
|
})));
|
|
85
80
|
};
|
|
86
81
|
exports.Chart = Chart;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.js","names":["_labsWidgetCommon","require","_monoI18n","_charts","_components","echarts","_interopRequireWildcard","_renderers","
|
|
1
|
+
{"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":[]}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { colorPalette, getChartTheme, Size, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
|
|
1
|
+
import { BaseChart, colorPalette, getChartTheme, Size, Theme, useLayoutProvider } from '@oanda/labs-widget-common';
|
|
2
2
|
import { useLocale } from '@oanda/mono-i18n';
|
|
3
3
|
import { CustomChart } from 'echarts/charts';
|
|
4
4
|
import { DatasetComponent, DataZoomInsideComponent, GraphicComponent, GridSimpleComponent, MarkLineComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
|
|
5
5
|
import * as echarts from 'echarts/core';
|
|
6
6
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
7
|
-
import ReactEChartsCore from 'echarts-for-react/lib/core';
|
|
8
7
|
import React, { useEffect, useRef } from 'react';
|
|
9
8
|
import { getOption, getResponsiveOption } from './getOption';
|
|
10
9
|
echarts.use([GridSimpleComponent, GraphicComponent, TooltipComponent, TitleComponent, CanvasRenderer, CustomChart, MarkLineComponent, ToolboxComponent, DataZoomInsideComponent, DatasetComponent]);
|
|
@@ -56,9 +55,11 @@ export const Chart = _ref => {
|
|
|
56
55
|
return React.createElement("div", {
|
|
57
56
|
className: "lw-relative lw-w-full",
|
|
58
57
|
"data-testid": "order-book-chart"
|
|
59
|
-
}, React.createElement("div", null, data && React.createElement(
|
|
58
|
+
}, React.createElement("div", null, data && React.createElement(BaseChart, {
|
|
60
59
|
ref: echartRef,
|
|
60
|
+
chartHeight: isDesktop ? 450 : 390,
|
|
61
61
|
echarts: echarts,
|
|
62
|
+
isDark: isDark,
|
|
62
63
|
option: getOption({
|
|
63
64
|
data,
|
|
64
65
|
precision,
|
|
@@ -66,12 +67,7 @@ export const Chart = _ref => {
|
|
|
66
67
|
isOrderBook,
|
|
67
68
|
isDesktop,
|
|
68
69
|
lang
|
|
69
|
-
})
|
|
70
|
-
style: {
|
|
71
|
-
height: isDesktop ? '450px' : '390px',
|
|
72
|
-
width: '100%'
|
|
73
|
-
},
|
|
74
|
-
theme: isDark ? 'dark_theme' : 'light_theme'
|
|
70
|
+
})
|
|
75
71
|
})));
|
|
76
72
|
};
|
|
77
73
|
//# sourceMappingURL=Chart.js.map
|
|
@@ -1 +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","
|
|
1
|
+
{"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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-order-book-widget",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.198",
|
|
4
4
|
"description": "Labs Order Book Widget",
|
|
5
5
|
"main": "dist/main/index.js",
|
|
6
6
|
"module": "dist/module/index.js",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"author": "OANDA",
|
|
13
13
|
"license": "UNLICENSED",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@oanda/labs-widget-common": "^1.0.
|
|
15
|
+
"@oanda/labs-widget-common": "^1.0.198",
|
|
16
16
|
"@oanda/mono-i18n": "10.0.1",
|
|
17
17
|
"echarts": "5.5.0",
|
|
18
18
|
"echarts-for-react": "3.0.2",
|
|
@@ -23,5 +23,5 @@
|
|
|
23
23
|
"@graphql-codegen/client-preset": "4.1.0",
|
|
24
24
|
"@graphql-codegen/typescript": "4.0.1"
|
|
25
25
|
},
|
|
26
|
-
"gitHead": "
|
|
26
|
+
"gitHead": "083781981c17b38576e6e46122dca29abd250b34"
|
|
27
27
|
}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import type { BaseChartRef } from '@oanda/labs-widget-common';
|
|
1
2
|
import {
|
|
3
|
+
BaseChart,
|
|
2
4
|
colorPalette,
|
|
3
5
|
getChartTheme,
|
|
4
6
|
Size,
|
|
@@ -19,7 +21,6 @@ import {
|
|
|
19
21
|
} from 'echarts/components';
|
|
20
22
|
import * as echarts from 'echarts/core';
|
|
21
23
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
22
|
-
import ReactEChartsCore from 'echarts-for-react/lib/core';
|
|
23
24
|
import React, { useEffect, useRef } from 'react';
|
|
24
25
|
|
|
25
26
|
import { getOption, getResponsiveOption } from './getOption';
|
|
@@ -46,7 +47,7 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
|
|
|
46
47
|
const { isDark, size } = useLayoutProvider();
|
|
47
48
|
const isDesktop = size === Size.DESKTOP;
|
|
48
49
|
|
|
49
|
-
const echartRef = useRef<
|
|
50
|
+
const echartRef = useRef<BaseChartRef | null>(null);
|
|
50
51
|
|
|
51
52
|
useEffect(() => {
|
|
52
53
|
if (echartRef.current) {
|
|
@@ -96,9 +97,11 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
|
|
|
96
97
|
<div className="lw-relative lw-w-full" data-testid="order-book-chart">
|
|
97
98
|
<div>
|
|
98
99
|
{data && (
|
|
99
|
-
<
|
|
100
|
+
<BaseChart
|
|
100
101
|
ref={echartRef}
|
|
102
|
+
chartHeight={isDesktop ? 450 : 390}
|
|
101
103
|
echarts={echarts}
|
|
104
|
+
isDark={isDark}
|
|
102
105
|
option={getOption({
|
|
103
106
|
data,
|
|
104
107
|
precision,
|
|
@@ -107,11 +110,6 @@ export const Chart = ({ data, isOrderBook, precision }: ChartProps) => {
|
|
|
107
110
|
isDesktop,
|
|
108
111
|
lang,
|
|
109
112
|
})}
|
|
110
|
-
style={{
|
|
111
|
-
height: isDesktop ? '450px' : '390px',
|
|
112
|
-
width: '100%',
|
|
113
|
-
}}
|
|
114
|
-
theme={isDark ? 'dark_theme' : 'light_theme'}
|
|
115
113
|
/>
|
|
116
114
|
)}
|
|
117
115
|
</div>
|