@oanda/labs-widget-common 1.0.217 → 1.0.219
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 +1724 -0
- package/dist/main/chart/BaseChart.js +7 -2
- package/dist/main/chart/BaseChart.js.map +1 -1
- package/dist/module/chart/BaseChart.js +7 -2
- package/dist/module/chart/BaseChart.js.map +1 -1
- package/package.json +2 -2
- package/src/chart/BaseChart.tsx +21 -12
- package/test/chart/BaseChart.test.tsx +12 -6
|
@@ -20,15 +20,20 @@ const BaseChart = exports.BaseChart = (0, _react.forwardRef)((_ref, ref) => {
|
|
|
20
20
|
(0, _react.useEffect)(() => {
|
|
21
21
|
void document.fonts.ready.then(() => setReady(true));
|
|
22
22
|
}, []);
|
|
23
|
-
return _react.default.createElement(_core.default, _extends({}, props, {
|
|
23
|
+
return _react.default.createElement(_react.default.Fragment, null, ready ? _react.default.createElement(_core.default, _extends({}, props, {
|
|
24
24
|
ref: ref,
|
|
25
25
|
"data-testid": "charts-container",
|
|
26
|
-
showLoading: !ready,
|
|
27
26
|
style: {
|
|
28
27
|
height: `${chartHeight}px`,
|
|
29
28
|
width: '100%'
|
|
30
29
|
},
|
|
31
30
|
theme: isDark ? 'dark_theme' : 'light_theme'
|
|
31
|
+
})) : _react.default.createElement("div", {
|
|
32
|
+
className: "lw-w-full",
|
|
33
|
+
"data-testid": "charts-placeholder",
|
|
34
|
+
style: {
|
|
35
|
+
height: `${chartHeight}px`
|
|
36
|
+
}
|
|
32
37
|
}));
|
|
33
38
|
});
|
|
34
39
|
BaseChart.displayName = 'BaseChart';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseChart.js","names":["_core","_interopRequireDefault","require","_react","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BaseChart","exports","forwardRef","_ref","ref","isDark","chartHeight","props","ready","setReady","useState","useEffect","document","fonts","then","createElement","
|
|
1
|
+
{"version":3,"file":"BaseChart.js","names":["_core","_interopRequireDefault","require","_react","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","BaseChart","exports","forwardRef","_ref","ref","isDark","chartHeight","props","ready","setReady","useState","useEffect","document","fonts","then","createElement","Fragment","style","height","width","theme","className","displayName"],"sources":["../../../src/chart/BaseChart.tsx"],"sourcesContent":["import ReactEChartsCore from 'echarts-for-react/lib/core';\nimport type { EChartsReactProps } from 'echarts-for-react/lib/types';\nimport React, { forwardRef, useEffect, useState } from 'react';\n\nimport type { BaseChartRef } from './types';\n\ntype BaseChartProps = EChartsReactProps & {\n isDark: boolean;\n chartHeight: number;\n};\n\nexport const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(\n ({ isDark, chartHeight, ...props }, ref) => {\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n void document.fonts.ready.then(() => setReady(true));\n }, []);\n\n return (\n <>\n {ready ? (\n <ReactEChartsCore\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n ref={ref}\n data-testid=\"charts-container\"\n style={{\n height: `${chartHeight}px`,\n width: '100%',\n }}\n theme={isDark ? 'dark_theme' : 'light_theme'}\n />\n ) : (\n <div\n className=\"lw-w-full\"\n data-testid=\"charts-placeholder\"\n style={{ height: `${chartHeight}px` }}\n />\n )}\n </>\n );\n }\n);\n\nBaseChart.displayName = 'BaseChart';\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,15 +11,20 @@ export const BaseChart = forwardRef((_ref, ref) => {
|
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
void document.fonts.ready.then(() => setReady(true));
|
|
13
13
|
}, []);
|
|
14
|
-
return React.createElement(ReactEChartsCore, _extends({}, props, {
|
|
14
|
+
return React.createElement(React.Fragment, null, ready ? React.createElement(ReactEChartsCore, _extends({}, props, {
|
|
15
15
|
ref: ref,
|
|
16
16
|
"data-testid": "charts-container",
|
|
17
|
-
showLoading: !ready,
|
|
18
17
|
style: {
|
|
19
18
|
height: `${chartHeight}px`,
|
|
20
19
|
width: '100%'
|
|
21
20
|
},
|
|
22
21
|
theme: isDark ? 'dark_theme' : 'light_theme'
|
|
22
|
+
})) : React.createElement("div", {
|
|
23
|
+
className: "lw-w-full",
|
|
24
|
+
"data-testid": "charts-placeholder",
|
|
25
|
+
style: {
|
|
26
|
+
height: `${chartHeight}px`
|
|
27
|
+
}
|
|
23
28
|
}));
|
|
24
29
|
});
|
|
25
30
|
BaseChart.displayName = 'BaseChart';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseChart.js","names":["ReactEChartsCore","React","forwardRef","useEffect","useState","BaseChart","_ref","ref","isDark","chartHeight","props","ready","setReady","document","fonts","then","createElement","
|
|
1
|
+
{"version":3,"file":"BaseChart.js","names":["ReactEChartsCore","React","forwardRef","useEffect","useState","BaseChart","_ref","ref","isDark","chartHeight","props","ready","setReady","document","fonts","then","createElement","Fragment","_extends","style","height","width","theme","className","displayName"],"sources":["../../../src/chart/BaseChart.tsx"],"sourcesContent":["import ReactEChartsCore from 'echarts-for-react/lib/core';\nimport type { EChartsReactProps } from 'echarts-for-react/lib/types';\nimport React, { forwardRef, useEffect, useState } from 'react';\n\nimport type { BaseChartRef } from './types';\n\ntype BaseChartProps = EChartsReactProps & {\n isDark: boolean;\n chartHeight: number;\n};\n\nexport const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(\n ({ isDark, chartHeight, ...props }, ref) => {\n const [ready, setReady] = useState(false);\n\n useEffect(() => {\n void document.fonts.ready.then(() => setReady(true));\n }, []);\n\n return (\n <>\n {ready ? (\n <ReactEChartsCore\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...props}\n ref={ref}\n data-testid=\"charts-container\"\n style={{\n height: `${chartHeight}px`,\n width: '100%',\n }}\n theme={isDark ? 'dark_theme' : 'light_theme'}\n />\n ) : (\n <div\n className=\"lw-w-full\"\n data-testid=\"charts-placeholder\"\n style={{ height: `${chartHeight}px` }}\n />\n )}\n </>\n );\n }\n);\n\nBaseChart.displayName = 'BaseChart';\n"],"mappings":";AAAA,OAAOA,gBAAgB,MAAM,4BAA4B;AAEzD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAS9D,OAAO,MAAMC,SAAS,GAAGH,UAAU,CACjC,CAAAI,IAAA,EAAoCC,GAAG,KAAK;EAAA,IAA3C;IAAEC,MAAM;IAAEC,WAAW;IAAE,GAAGC;EAAM,CAAC,GAAAJ,IAAA;EAChC,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAGR,QAAQ,CAAC,KAAK,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACd,KAAKU,QAAQ,CAACC,KAAK,CAACH,KAAK,CAACI,IAAI,CAAC,MAAMH,QAAQ,CAAC,IAAI,CAAC,CAAC;EACtD,CAAC,EAAE,EAAE,CAAC;EAEN,OACEX,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAAgB,QAAA,QACGN,KAAK,GACJV,KAAA,CAAAe,aAAA,CAAChB,gBAAgB,EAAAkB,QAAA,KAEXR,KAAK;IACTH,GAAG,EAAEA,GAAI;IACT,eAAY,kBAAkB;IAC9BY,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGX,WAAW,IAAI;MAC1BY,KAAK,EAAE;IACT,CAAE;IACFC,KAAK,EAAEd,MAAM,GAAG,YAAY,GAAG;EAAc,EAC9C,CAAC,GAEFP,KAAA,CAAAe,aAAA;IACEO,SAAS,EAAC,WAAW;IACrB,eAAY,oBAAoB;IAChCJ,KAAK,EAAE;MAAEC,MAAM,EAAE,GAAGX,WAAW;IAAK;EAAE,CACvC,CAEH,CAAC;AAEP,CACF,CAAC;AAEDJ,SAAS,CAACmB,WAAW,GAAG,WAAW","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oanda/labs-widget-common",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.219",
|
|
4
4
|
"description": "Labs Widget Common",
|
|
5
5
|
"main": "dist/main/index.js",
|
|
6
6
|
"module": "dist/module/index.js",
|
|
@@ -21,5 +21,5 @@
|
|
|
21
21
|
"tailwind-merge": "2.2.2",
|
|
22
22
|
"usehooks-ts": "3.0.2"
|
|
23
23
|
},
|
|
24
|
-
"gitHead": "
|
|
24
|
+
"gitHead": "39a4ba7320ad2596a931ebc3b19cda09da14f9de"
|
|
25
25
|
}
|
package/src/chart/BaseChart.tsx
CHANGED
|
@@ -18,18 +18,27 @@ export const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(
|
|
|
18
18
|
}, []);
|
|
19
19
|
|
|
20
20
|
return (
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
21
|
+
<>
|
|
22
|
+
{ready ? (
|
|
23
|
+
<ReactEChartsCore
|
|
24
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
25
|
+
{...props}
|
|
26
|
+
ref={ref}
|
|
27
|
+
data-testid="charts-container"
|
|
28
|
+
style={{
|
|
29
|
+
height: `${chartHeight}px`,
|
|
30
|
+
width: '100%',
|
|
31
|
+
}}
|
|
32
|
+
theme={isDark ? 'dark_theme' : 'light_theme'}
|
|
33
|
+
/>
|
|
34
|
+
) : (
|
|
35
|
+
<div
|
|
36
|
+
className="lw-w-full"
|
|
37
|
+
data-testid="charts-placeholder"
|
|
38
|
+
style={{ height: `${chartHeight}px` }}
|
|
39
|
+
/>
|
|
40
|
+
)}
|
|
41
|
+
</>
|
|
33
42
|
);
|
|
34
43
|
}
|
|
35
44
|
);
|
|
@@ -58,22 +58,23 @@ describe('BaseChart component', () => {
|
|
|
58
58
|
|
|
59
59
|
it('should show loading state initially', () => {
|
|
60
60
|
render(<BaseChart {...defaultProps} />);
|
|
61
|
-
const
|
|
62
|
-
expect(
|
|
61
|
+
const placeholder = screen.getByTestId('charts-placeholder');
|
|
62
|
+
expect(placeholder).toBeInTheDocument();
|
|
63
63
|
});
|
|
64
64
|
|
|
65
65
|
it('should render chart after fonts are ready', async () => {
|
|
66
66
|
render(<BaseChart {...defaultProps} />);
|
|
67
67
|
|
|
68
|
-
const
|
|
69
|
-
expect(
|
|
68
|
+
const placeholder = screen.getByTestId('charts-placeholder');
|
|
69
|
+
expect(placeholder).toBeInTheDocument();
|
|
70
70
|
|
|
71
71
|
await act(async () => {
|
|
72
72
|
resolveFontsReady();
|
|
73
73
|
await document.fonts.ready;
|
|
74
74
|
});
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
const chart = screen.getByTestId('charts-container');
|
|
77
|
+
expect(chart).toBeInTheDocument();
|
|
77
78
|
});
|
|
78
79
|
|
|
79
80
|
it('should apply dark theme when isDark is true', async () => {
|
|
@@ -113,9 +114,14 @@ describe('BaseChart component', () => {
|
|
|
113
114
|
expect(chart).toHaveStyle({ height: `${height}px` });
|
|
114
115
|
});
|
|
115
116
|
|
|
116
|
-
it('should forward ref to BaseChartRef', () => {
|
|
117
|
+
it('should forward ref to BaseChartRef', async () => {
|
|
117
118
|
const ref = React.createRef<BaseChartRef>();
|
|
118
119
|
render(<BaseChart {...defaultProps} ref={ref} />);
|
|
120
|
+
|
|
121
|
+
await act(async () => {
|
|
122
|
+
resolveFontsReady();
|
|
123
|
+
await document.fonts.ready;
|
|
124
|
+
});
|
|
119
125
|
expect(ref.current).toBeTruthy();
|
|
120
126
|
});
|
|
121
127
|
});
|