lightweight-charts-react-components 2.6.0 → 2.7.0
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/README.md +71 -10
- package/dist/index.d.ts +15 -3
- package/dist/lightweight-charts-react-components.mjs +3 -3
- package/dist/lightweight-charts-react-components.mjs.map +1 -1
- package/dist/lightweight-charts-react-components.standalone.js +2 -2
- package/dist/lightweight-charts-react-components.standalone.js.map +1 -1
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -31,6 +31,10 @@
|
|
|
31
31
|
</picture>
|
|
32
32
|
</a>
|
|
33
33
|
|
|
34
|
+
<a href="https://dashboard.stryker-mutator.io/reports/github.com/ukorvl/lightweight-charts-react-components/main">
|
|
35
|
+
<img src="https://img.shields.io/endpoint?style=flat&url=https%3A%2F%2Fbadge-api.stryker-mutator.io%2Fgithub.com%2Fukorvl%2Flightweight-charts-react-components%2Fmain" alt="Mutation testing badge">
|
|
36
|
+
</a>
|
|
37
|
+
|
|
34
38
|
<a href="https://pkg.pr.new/~/ukorvl/lightweight-charts-react-components">
|
|
35
39
|
<img src="https://pkg.pr.new/badge/ukorvl/lightweight-charts-react-components" alt="pkg.pr.new">
|
|
36
40
|
</a>
|
|
@@ -42,10 +46,10 @@
|
|
|
42
46
|
</picture>
|
|
43
47
|
</a>
|
|
44
48
|
|
|
45
|
-
<a href="https://bundlephobia.com/package/lightweight-charts-react-components">
|
|
49
|
+
<a href="https://bundlephobia.com/package/lightweight-charts-react-components@2.7.0">
|
|
46
50
|
<picture>
|
|
47
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/bundlephobia/minzip/lightweight-charts-react-components?colorA=1e2029&colorB=1e2029&style=flat">
|
|
48
|
-
<img src="https://img.shields.io/bundlephobia/minzip/lightweight-charts-react-components?colorA=ffcc00&colorB=ffcc00&style=flat" alt="Minified size">
|
|
51
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/bundlephobia/minzip/lightweight-charts-react-components/2.7.0?cacheSeconds=31536000&colorA=1e2029&colorB=1e2029&style=flat">
|
|
52
|
+
<img src="https://img.shields.io/bundlephobia/minzip/lightweight-charts-react-components/2.7.0?cacheSeconds=31536000&colorA=ffcc00&colorB=ffcc00&style=flat" alt="Minified size">
|
|
49
53
|
</picture>
|
|
50
54
|
</a>
|
|
51
55
|
|
|
@@ -70,15 +74,28 @@
|
|
|
70
74
|
</picture>
|
|
71
75
|
</a>
|
|
72
76
|
|
|
73
|
-
<a href="https://coveralls.io/github/ukorvl/lightweight-charts-react-components">
|
|
77
|
+
<a href="https://coveralls.io/github/ukorvl/lightweight-charts-react-components?branch=main">
|
|
74
78
|
<picture>
|
|
75
79
|
<source
|
|
76
80
|
media="(prefers-color-scheme: dark)"
|
|
77
|
-
srcset="https://
|
|
81
|
+
srcset="https://coveralls.io/repos/github/ukorvl/lightweight-charts-react-components/badge.svg?branch=main"
|
|
78
82
|
>
|
|
79
83
|
<img
|
|
80
|
-
src="https://
|
|
81
|
-
alt="Coverage"
|
|
84
|
+
src="https://coveralls.io/repos/github/ukorvl/lightweight-charts-react-components/badge.svg?branch=main"
|
|
85
|
+
alt="Coverage Status"
|
|
86
|
+
>
|
|
87
|
+
</picture>
|
|
88
|
+
</a>
|
|
89
|
+
|
|
90
|
+
<a href="https://snyk.io/test/github/ukorvl/lightweight-charts-react-components">
|
|
91
|
+
<picture>
|
|
92
|
+
<source
|
|
93
|
+
media="(prefers-color-scheme: dark)"
|
|
94
|
+
srcset="https://snyk.io/test/github/ukorvl/lightweight-charts-react-components/badge.svg"
|
|
95
|
+
>
|
|
96
|
+
<img
|
|
97
|
+
src="https://snyk.io/test/github/ukorvl/lightweight-charts-react-components/badge.svg"
|
|
98
|
+
alt="Snyk Security"
|
|
82
99
|
>
|
|
83
100
|
</picture>
|
|
84
101
|
</a>
|
|
@@ -106,6 +123,7 @@ Check out the [Demo](https://ukorvl.github.io/lightweight-charts-react-component
|
|
|
106
123
|
- [Standalone browser build](#standalone-browser-build)
|
|
107
124
|
- [Usage](#usage)
|
|
108
125
|
- [Chart Container Sizing](#chart-container-sizing)
|
|
126
|
+
- [Agent skill](#agent-skill)
|
|
109
127
|
- [Examples](#examples)
|
|
110
128
|
- [Contributing](#contributing)
|
|
111
129
|
- [How to Contribute](#how-to-contribute)
|
|
@@ -252,15 +270,59 @@ const App = () => {
|
|
|
252
270
|
export { App };
|
|
253
271
|
```
|
|
254
272
|
|
|
273
|
+
`PriceScale` customizes a price scale of the pane it is rendered in. To give a series its own scale in the same pane (for example, volume under candlesticks), set a custom `priceScaleId` on the series and render `PriceScale` with the same `id` inside that series. A custom price scale exists only after a series that uses it is added, so nest `PriceScale` in that series or place it after the series:
|
|
274
|
+
|
|
275
|
+
```tsx
|
|
276
|
+
import React from "react";
|
|
277
|
+
import {
|
|
278
|
+
Chart,
|
|
279
|
+
CandlestickSeries,
|
|
280
|
+
HistogramSeries,
|
|
281
|
+
Pane,
|
|
282
|
+
PriceScale,
|
|
283
|
+
} from "lightweight-charts-react-components";
|
|
284
|
+
|
|
285
|
+
const candles = [
|
|
286
|
+
{ time: "2023-01-01", open: 100, high: 105, low: 98, close: 103 },
|
|
287
|
+
{ time: "2023-01-02", open: 103, high: 107, low: 101, close: 102 },
|
|
288
|
+
];
|
|
289
|
+
const volume = [
|
|
290
|
+
{ time: "2023-01-01", value: 1000 },
|
|
291
|
+
{ time: "2023-01-02", value: 1100 },
|
|
292
|
+
];
|
|
293
|
+
|
|
294
|
+
const App = () => {
|
|
295
|
+
return (
|
|
296
|
+
<Chart options={{ width: 600, height: 400 }}>
|
|
297
|
+
<Pane>
|
|
298
|
+
<CandlestickSeries data={candles} />
|
|
299
|
+
<HistogramSeries data={volume} options={{ priceScaleId: "volume" }}>
|
|
300
|
+
<PriceScale id="volume" options={{ scaleMargins: { top: 0.8, bottom: 0 } }} />
|
|
301
|
+
</HistogramSeries>
|
|
302
|
+
</Pane>
|
|
303
|
+
</Chart>
|
|
304
|
+
);
|
|
305
|
+
};
|
|
306
|
+
|
|
307
|
+
export { App };
|
|
308
|
+
```
|
|
309
|
+
|
|
255
310
|
Pane-wide overlays that belong to a whole pane rather than a single series can be mounted declaratively with `PanePrimitive` inside `Pane`. This works well for session bands, pane-scoped annotations, and background highlights that need access to both the chart and the target pane. See the `PanePrimitives` sample in the examples app for a full working example, and the upstream [pane primitives documentation](https://tradingview.github.io/lightweight-charts/docs/plugins/pane-primitives) for the underlying Lightweight Charts plugin contract.
|
|
256
311
|
|
|
257
312
|
### Chart Container Sizing
|
|
258
313
|
|
|
259
|
-
The `Chart` component
|
|
260
|
-
|
|
314
|
+
The `Chart` component needs a nonzero container size. Set fixed dimensions through
|
|
315
|
+
`options`, or enable `options={{ autoSize: true }}` and size the container through
|
|
316
|
+
`containerProps`. Automatic resizing requires `autoSize: true`.
|
|
261
317
|
|
|
262
318
|
There may be cases where the chart's parent HTML element has no size defined (for example, when the parent is a flex container with no defined height). In such cases, you need to ensure that the parent element has a defined size (width and height) for the chart to render properly.
|
|
263
319
|
|
|
320
|
+
## Agent skill
|
|
321
|
+
|
|
322
|
+
The project comes with an [agent skill](https://github.com/ukorvl/lightweight-charts-react-components/blob/main/skills/lightweight-charts-react-components) that provides recipes for common charting scenarios and guides on how to integrate the library into React applications. The skill is designed to help coding agents understand the library's design choices and common edge cases, making it produce higher-quality code when using the library.
|
|
323
|
+
|
|
324
|
+
For more information on how to use the skill, please refer to the [skill readme](https://github.com/ukorvl/lightweight-charts-react-components/blob/main/skills/lightweight-charts-react-components/README.md).
|
|
325
|
+
|
|
264
326
|
## Examples
|
|
265
327
|
|
|
266
328
|
The [examples](https://github.com/ukorvl/lightweight-charts-react-components/blob/main/examples/) app itself is a [Demo](https://ukorvl.github.io/lightweight-charts-react-components/) web application, but it contains a lot of examples of how to use the library. You can find the source code in the [samples folder](https://github.com/ukorvl/lightweight-charts-react-components/blob/main/examples/src/samples).
|
|
@@ -283,7 +345,6 @@ Thank you for helping improve this project!
|
|
|
283
345
|
## Related Projects
|
|
284
346
|
|
|
285
347
|
- [lightweight-charts](https://github.com/tradingview/lightweight-charts) - The original Lightweight Charts library by TradingView.
|
|
286
|
-
- [lightweight-charts-vue](https://github.com/ukorvl/lightweight-charts-vue) - Vue.js wrapper for Lightweight Charts.
|
|
287
348
|
|
|
288
349
|
## License
|
|
289
350
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/**!
|
|
3
|
-
* lightweight-charts-react-components v2.
|
|
3
|
+
* lightweight-charts-react-components v2.7.0
|
|
4
4
|
*
|
|
5
5
|
* This source code is licensed under the MIT license found in the
|
|
6
6
|
* LICENSE.md file in the root directory of this source tree.
|
|
@@ -170,6 +170,10 @@ export declare type ChartApiRef<HorzScaleItem = Time, TChartApi extends ChartApi
|
|
|
170
170
|
* Internal reference to the chart API instance.
|
|
171
171
|
*/
|
|
172
172
|
_chart: TChartApi | null;
|
|
173
|
+
/**
|
|
174
|
+
* Internal flag set while the chart is being removed along with its children.
|
|
175
|
+
*/
|
|
176
|
+
_isDisposing: boolean;
|
|
173
177
|
/**
|
|
174
178
|
* Function to get the chart API instance.
|
|
175
179
|
*/
|
|
@@ -600,7 +604,7 @@ export declare type PriceLineProps = {
|
|
|
600
604
|
};
|
|
601
605
|
|
|
602
606
|
/**
|
|
603
|
-
* PriceScale component that can be used to
|
|
607
|
+
* PriceScale component that can be used to customize a price scale of the pane it is rendered in.
|
|
604
608
|
*
|
|
605
609
|
* @param props - The properties for the price scale.
|
|
606
610
|
* @param ref - The ref to access the price scale API.
|
|
@@ -610,6 +614,11 @@ export declare type PriceLineProps = {
|
|
|
610
614
|
* @example
|
|
611
615
|
* ```tsx
|
|
612
616
|
* <PriceScale id="right" options={{}} />
|
|
617
|
+
*
|
|
618
|
+
* // Custom overlay price scale used by the parent series
|
|
619
|
+
* <HistogramSeries data={volume} options={{ priceScaleId: "volume" }}>
|
|
620
|
+
* <PriceScale id="volume" options={{ scaleMargins: { top: 0.8, bottom: 0 } }} />
|
|
621
|
+
* </HistogramSeries>
|
|
613
622
|
* ```
|
|
614
623
|
*/
|
|
615
624
|
export declare const PriceScale: ForwardRefExoticComponent<PriceScaleProps & RefAttributes<PriceScaleApiRef>>;
|
|
@@ -651,7 +660,10 @@ export declare type PriceScaleProps = {
|
|
|
651
660
|
*/
|
|
652
661
|
options?: PriceScaleOptions;
|
|
653
662
|
/**
|
|
654
|
-
* The ID of the price scale.
|
|
663
|
+
* The ID of the price scale: `"left"`, `"right"`, or a custom `priceScaleId` of a series in the same pane.
|
|
664
|
+
*
|
|
665
|
+
* A custom (overlay) price scale exists only after a series that uses it is added,
|
|
666
|
+
* so render `PriceScale` inside that series or after it.
|
|
655
667
|
*/
|
|
656
668
|
id: string;
|
|
657
669
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/**!
|
|
3
|
-
* lightweight-charts-react-components v2.
|
|
3
|
+
* lightweight-charts-react-components v2.7.0
|
|
4
4
|
*
|
|
5
5
|
* This source code is licensed under the MIT license found in the
|
|
6
6
|
* LICENSE.md file in the root directory of this source tree.
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
* @license MIT
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
|
-
import*as e from"lightweight-charts";import*as t from"react";let r=(e,t)=>{if(e){if("function"==typeof e)return void e(t);e.current=t}},i=(0,t.createContext)(null);i.displayName="ChartContext";let a={addDefaultPane:!1},n=({container:r,onClick:i,onCrosshairMove:n,options:l={},onDblClick:u,createChartApi:s=e.createChart})=>{let[c,f]=(0,t.useState)(!1),p=(0,t.useRef)({_chart:null,api(){return this._chart},init(){if(null===this._chart){let e=s(r,{...a,...l});this._chart=e}return c||f(!0),this._chart},clear(){null!==this._chart&&(f(!1),this._chart.remove(),this._chart=null)}});return(0,t.useLayoutEffect)(()=>(p.current.init(),()=>{p.current.clear()}
|
|
11
|
+
import*as e from"lightweight-charts";import*as t from"react";let r=(e,t)=>{if(e){if("function"==typeof e)return void e(t);e.current=t}},i=(0,t.createContext)(null);i.displayName="ChartContext";let a={addDefaultPane:!1},n=({container:r,onClick:i,onCrosshairMove:n,options:l={},onDblClick:u,createChartApi:s=e.createChart})=>{let[c,f]=(0,t.useState)(!1),p=(0,t.useRef)({_chart:null,_isDisposing:!1,api(){return this._chart},init(){if(null===this._chart){let e=s(r,{...a,...l});this._chart=e}return c||f(!0),this._chart},clear(){this._isDisposing=!1,null!==this._chart&&(f(!1),this._chart.remove(),this._chart=null)}});return(0,t.useLayoutEffect)(()=>(p.current.init(),()=>{p.current._isDisposing=!0}),[]),(0,t.useEffect)(()=>()=>{p.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(r){if(i){var e;null==(e=p.current.api())||e.subscribeClick(i)}return()=>{if(i){var e;null==(e=p.current.api())||e.unsubscribeClick(i)}}}},[i]),(0,t.useLayoutEffect)(()=>{if(r){if(n){var e;null==(e=p.current.api())||e.subscribeCrosshairMove(n)}return()=>{if(n){var e;null==(e=p.current.api())||e.unsubscribeCrosshairMove(n)}}}},[n]),(0,t.useLayoutEffect)(()=>{if(r){if(u){var e;null==(e=p.current.api())||e.subscribeDblClick(u)}return()=>{if(u){var e;null==(e=p.current.api())||e.unsubscribeDblClick(u)}}}},[u]),(0,t.useLayoutEffect)(()=>{var e;r&&(null==(e=p.current.api())||e.applyOptions({...a,...l}))},[l]),{chartApiRef:p,isReady:c}},l=(0,t.forwardRef)(({children:e,container:r,onClick:a,onCrosshairMove:l,options:u,onDblClick:s,chartKind:c="time",createChartApi:f},p)=>{let{chartApiRef:{current:o},isReady:d}=n({container:r,onClick:a,onCrosshairMove:l,options:u,onDblClick:s,createChartApi:f});return(0,t.useImperativeHandle)(p,()=>o,[o]),t.default.createElement(i.Provider,{value:{chartApiRef:o,isReady:d,chartKind:c}},e)});l.displayName="ChartComponent";let u=(0,t.forwardRef)(({children:i,containerProps:a,containerRef:n,...u},s)=>{let[c,f]=(0,t.useState)(),p=(0,t.useCallback)(e=>{f(e??void 0),r(n,e)},[n]);return t.default.createElement("div",{ref:p,"aria-hidden":(null==a?void 0:a["aria-hidden"])??!0,...a},!!c&&t.default.createElement(l,{ref:s,container:c,createChartApi:e.createChart,chartKind:"time",...u},i))});u.displayName="ChartWrapper";let s=(0,t.forwardRef)(({children:i,containerProps:a,containerRef:n,...u},s)=>{let[c,f]=(0,t.useState)(),p=(0,t.useCallback)(e=>{f(e??void 0),r(n,e)},[n]);return t.default.createElement("div",{ref:p,"aria-hidden":(null==a?void 0:a["aria-hidden"])??!0,...a},!!c&&t.default.createElement(l,{ref:s,container:c,createChartApi:e.createOptionsChart,chartKind:"options",...u},i))});s.displayName="OptionsChart";let c=(0,t.forwardRef)(({children:i,containerProps:a,containerRef:n,...u},s)=>{let[c,f]=(0,t.useState)(),p=(0,t.useCallback)(e=>{f(e??void 0),r(n,e)},[n]);return t.default.createElement("div",{ref:p,"aria-hidden":(null==a?void 0:a["aria-hidden"])??!0,...a},!!c&&t.default.createElement(l,{ref:s,container:c,createChartApi:e.createYieldCurveChart,chartKind:"yield-curve",...u},i))});c.displayName="YieldCurveChart";let f=(0,t.forwardRef)(({children:i,containerProps:a,containerRef:n,horzScaleBehavior:u,...s},c)=>{let[f,p]=(0,t.useState)(),o=(0,t.useCallback)(e=>{p(e??void 0),r(n,e)},[n]),d=(0,t.useCallback)((t,r)=>(0,e.createChartEx)(t,u,r),[u]);return t.default.createElement("div",{ref:o,"aria-hidden":(null==a?void 0:a["aria-hidden"])??!0,...a},!!f&&t.default.createElement(l,{ref:c,container:f,createChartApi:d,chartKind:"custom",...s},i))});f.displayName="CustomChart";let p=(0,t.createContext)(null);p.displayName="TimeScaleContext";let o="2.7.0";function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class h extends Error{constructor(e,{isOperational:t=!0,cause:r,docsPath:i}={}){super(e),d(this,"isOperational",void 0),d(this,"cause",void 0),this.name=this.constructor.name??"InternalError",this.isOperational=t,this.cause=r,this.message=`${e??"An error occurred"}`,i&&(this.message=`${this.message}
|
|
12
12
|
|
|
13
13
|
Docs: see ${"https://ukorvl.github.io/lightweight-charts-react-components/docs/"+i}`),o&&(this.message=`${this.message}
|
|
14
14
|
|
|
15
|
-
Version: lightweight-charts-react-components@${o}`),Object.setPrototypeOf(this,h.prototype)}}let m=(e,r)=>{let i=(0,t.useContext)(e);if(!i){let t=e.name??e.displayName??"Context";throw new h(r??`${t} not found.`,{isOperational:!0})}return i},v=(0,t.createContext)(null);v.displayName="PaneContext";let y=()=>{let e=(0,t.useContext)(v),r=!!e;return{isInsidePane:r,isPaneReady:!!(null==e?void 0:e.isReady),paneApiRef:null==e?void 0:e.paneApiRef}},R=({onVisibleTimeRangeChange:e,onVisibleLogicalRangeChange:r,onSizeChange:a,visibleRange:n,visibleLogicalRange:l,options:u={}})=>{let{isReady:s,chartApiRef:c}=m(i),{isPaneReady:f,isInsidePane:p}=y(),[o,d]=(0,t.useState)(!1),h=(0,t.useRef)({_timeScale:null,api(){return this._timeScale},init(){if(this._timeScale)return this._timeScale;let e=null==c?void 0:c.api();return e?(this._timeScale=e.timeScale(),this._timeScale.applyOptions(u),n&&this._timeScale.setVisibleRange(n),l&&this._timeScale.setVisibleLogicalRange(l),d(!0),this._timeScale):null},clear(){this._timeScale=null,d(!1)}});return(0,t.useLayoutEffect)(()=>{s&&(!p||f)&&h.current.init()},[s,p,f]),(0,t.useLayoutEffect)(()=>()=>{h.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(c&&u){var e,t;null==(t=h.current)||null==(e=t.api())||e.applyOptions(u)}},[u]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=h.current.api();return a&&e&&e.subscribeSizeChange(a),()=>{a&&e&&e.unsubscribeSizeChange(a)}},[c,o,a]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=h.current.api();return r&&e&&e.subscribeVisibleLogicalRangeChange(r),()=>{r&&e&&e.unsubscribeVisibleLogicalRangeChange(r)}},[c,o,r]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let t=h.current.api();return e&&t&&t.subscribeVisibleTimeRangeChange(e),()=>{e&&t&&t.unsubscribeVisibleTimeRangeChange(e)}},[c,o,e]),(0,t.useLayoutEffect)(()=>{if(c&&n){var e,t;null==(t=h.current)||null==(e=t.api())||e.setVisibleRange(n)}},[n]),(0,t.useLayoutEffect)(()=>{if(c&&l){var e,t;null==(t=h.current)||null==(e=t.api())||e.setVisibleLogicalRange(l)}},[l]),{timeScaleApiRef:h,isReady:o}},_=(0,t.forwardRef)(({children:e,...r},i)=>{let{timeScaleApiRef:{current:a},isReady:n}=R(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(p.Provider,{value:{timeScaleApiRef:a,isReady:n}},e)});_.displayName="TimeScale";let S=({options:e={},id:r})=>{let{isReady:a,chartApiRef:n}=m(i),{isInsidePane:l,isPaneReady:u}=y(),s=(0,t.useRef)({_priceScale:null,api(){return this._priceScale},init(){if(!this._priceScale){let t=null==n?void 0:n.api();if(!t)return null;this._priceScale=t.priceScale(r),this._priceScale.applyOptions(e)}return this._priceScale},setId(t){null!==this._priceScale&&null!==n&&(this._priceScale=n.api().priceScale(t),this._priceScale.applyOptions(e))},clear(){this._priceScale=null}});return(0,t.useLayoutEffect)(()=>{if(a){if(!l)throw new h("PriceScale must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});u&&s.current.init()}},[a,l,u]),(0,t.useLayoutEffect)(()=>()=>{s.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;n&&(null==(e=s.current)||e.setId(r))},[r]),(0,t.useLayoutEffect)(()=>{if(n&&e){var t,r;null==(r=s.current)||null==(t=r.api())||t.applyOptions(e)}},[e]),s},C=(0,t.forwardRef)((e,r)=>{let i=S(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});C.displayName="PriceScale";let g=({deps:e})=>{let{timeScaleApiRef:r,isReady:i}=m(p);(0,t.useLayoutEffect)(()=>{if(!i||!r)return;let e=r.api();queueMicrotask(()=>{e&&e.fitContent()})},[...e,i])},E=({deps:e})=>(g({deps:e}),null),L=(0,t.createContext)({seriesApiRef:null,isReady:!1});L.displayName="SeriesContext";let w=({type:e,data:r,options:a={},reactive:n=!0,seriesOrder:l,alwaysReplaceData:u=!1,...s})=>{let{isReady:c,chartApiRef:f,chartKind:p}=m(i),{isPaneReady:o,isInsidePane:d,paneApiRef:v}=y(),[R,_]=(0,t.useState)(!1),S=(0,t.useRef)({_series:null,api(){return this._series},init(){if(!this._series){var t,i,n;let u=null==f?void 0:f.api();if(!u)return null;let c=d?null==v||null==(t=v.api())?void 0:t.paneIndex():void 0;if("Custom"===e){let e=s.plugin;if(!e)throw new h("Custom series requires a plugin to be defined");this._series=u.addCustomSeries(e,a,c)}else{if("yield-curve"===p&&"Area"!==e&&"Line"!==e)throw new h("YieldCurveChart only supports LineSeries and AreaSeries.",{isOperational:!0});this._series=u.addSeries(b[e],a,c)}null==(i=this._series)||i.setData(r),void 0!==l&&(null==(n=this._series)||n.setSeriesOrder(l)),_(!0)}return this._series},clear(){if(null!==this._series){var e;null==f||null==(e=f.api())||e.removeSeries(this._series),this._series=null,_(!1)}}});return(0,t.useLayoutEffect)(()=>{c&&(!d||o)&&S.current.init()},[c,d,o]),(0,t.useLayoutEffect)(()=>()=>{S.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(f&&r&&n){let e=S.current.api();if(!e)return;let t=e.data();if(u||!k(t,r))return void e.setData(r);let i=r[r.length-1];e.update(i)}},[r,n,u]),(0,t.useLayoutEffect)(()=>{if(f&&a){var e;null==(e=S.current.api())||e.applyOptions(a)}},[a]),(0,t.useLayoutEffect)(()=>{if(f&&void 0!==l){var e;null==(e=S.current.api())||e.setSeriesOrder(l)}},[l]),{isReady:R,seriesApiRef:S}},b={Line:e.LineSeries,Candlestick:e.CandlestickSeries,Histogram:e.HistogramSeries,Area:e.AreaSeries,Baseline:e.BaselineSeries,Bar:e.BarSeries},k=(e,t)=>{let r=t.length-e.length;return 0!==e.length&&0!==t.length&&!(r<0)&&!(r>1)&&(0===r?P(e,t,e.length-1)&&A(e[e.length-1],t[t.length-1]):P(e,t,e.length)&&!A(e[e.length-1],t[t.length-1]))},P=(e,t,r)=>{for(let i=0;i<r;i+=1)if(e[i]!==t[i])return!1;return!0},A=(e,t)=>{let r=e.time,i=t.time;return r===i||N(r)&&N(i)&&O(r,i)},N=t=>(0,e.isBusinessDay)(t),O=(e,t)=>e.year===t.year&&e.month===t.month&&e.day===t.day,x=(0,t.forwardRef)(({children:e,...r},i)=>{let{seriesApiRef:{current:a},isReady:n}=w(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(L.Provider,{value:{seriesApiRef:a,isReady:n}},e)});x.displayName="SeriesTemplate";let I=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Line",ref:i,...r},e));I.displayName="LineSeries";let H=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Histogram",ref:i,...r},e));H.displayName="HistogramSeries";let B=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Candlestick",ref:i,...r},e));B.displayName="CandlestickSeries";let T=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Area",ref:i,...r},e));T.displayName="AreaSeries";let V=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Baseline",ref:i,...r},e));V.displayName="BaselineSeries";let W=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Bar",ref:i,...r},e));W.displayName="BarSeries";let D=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(x,{type:"Custom",ref:i,...r},e));D.displayName="CustomSeries";let M=({options:e,price:r})=>{let{isReady:i,seriesApiRef:a}=m(L),n=(0,t.useRef)({_priceLine:null,api(){return this._priceLine},init(){if(!this._priceLine){let t=null==a?void 0:a.api();if(!t)return null;this._priceLine=t.createPriceLine({price:r,...e})}return this._priceLine},clear(){if(null!==this._priceLine){var e;null==a||null==(e=a.api())||e.removePriceLine(this._priceLine),this._priceLine=null}}});return(0,t.useLayoutEffect)(()=>{i&&n.current.init()},[i]),(0,t.useLayoutEffect)(()=>()=>{n.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(a&&e){var t;null==(t=n.current.api())||t.applyOptions(e)}},[e]),(0,t.useLayoutEffect)(()=>{var e;a&&(null==(e=n.current.api())||e.applyOptions({price:r}))},[r]),n},$=(0,t.forwardRef)((e,r)=>{let i=M(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});$.displayName="PriceLine";let K=({reactive:r=!0,markers:i,options:a})=>{let{isReady:n,seriesApiRef:l}=m(L),u=(0,t.useRef)({_markers:null,api(){return this._markers},init(){if(null===this._markers){let t=null==l?void 0:l.api();if(!t)return null;this._markers=(0,e.createSeriesMarkers)(t,i,a)}return this._markers},clear(){null!==this._markers&&(this._markers.detach(),this._markers=null)}});return(0,t.useLayoutEffect)(()=>{n&&u.current.init()},[n]),(0,t.useLayoutEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(l&&i&&r){var e;null==(e=u.current.api())||e.setMarkers(i)}},[i,r]),u},Y=(0,t.forwardRef)(({...e},r)=>{let i=K(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});Y.displayName="Markers";let F=e=>{let r=(0,t.useRef)(e);return r.current=e,r},j=r=>{let{isReady:a,chartApiRef:n}=m(i),{isPaneReady:l,isInsidePane:u,paneApiRef:s}=y(),c=F(r),f=F(n),p=F(s),o=z(r),d=(0,t.useRef)({_watermark:null,api(){return this._watermark},init(){if(null===this._watermark){var t,r;let i=null==(t=f.current)?void 0:t.api(),a=null==(r=p.current)?void 0:r.api(),n=c.current;if(!i||!a)return null;if(G(n)){let{type:t,...r}=n;this._watermark=(0,e.createTextWatermark)(a,r)}else{let{type:t,src:r,...i}=n;this._watermark=(0,e.createImageWatermark)(a,r,i)}}return this._watermark},clear(){null!==this._watermark&&(this._watermark.detach(),this._watermark=null)}});return(0,t.useLayoutEffect)(()=>{if(a){if(!u)throw new h("Watermark must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});l&&(d.current.clear(),d.current.init())}},[a,l,u,o]),(0,t.useLayoutEffect)(()=>()=>{d.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;n&&r&&(null==(e=d.current.api())||e.applyOptions(q(r)))},[r]),d},q=e=>{if(G(e)){let{type:t,...r}=e;return r}let{type:t,src:r,...i}=e;return i},z=e=>{if(!G(e))return e.src},G=e=>"text"===e.type,J=(e,r)=>{let i=j(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null},Q=(0,t.forwardRef)((e,t)=>J({...e,type:"text"},t)),U=(0,t.forwardRef)((e,t)=>J({...e,type:"image"},t));Q.displayName="WatermarkText",U.displayName="WatermarkImage";let X=({isReady:e,props:r,primitiveIdentity:i,mountPrimitive:a})=>{let n=(0,t.useRef)(r),l=(0,t.useRef)(i),u=(0,t.useRef)(a),s=(0,t.useRef)(null);n.current=r,u.current=a;let c=(0,t.useRef)({_primitive:null,api(){return this._primitive},init(){if(!this._primitive){let e=u.current(n.current);if(!e)return null;s.current=e.detach,this._primitive=e.primitive}return this._primitive},clear(){if(null!==this._primitive){var e;null==(e=s.current)||e.call(s),s.current=null,this._primitive=null}}});return(0,t.useLayoutEffect)(()=>{e&&(l.current!==i&&(c.current.clear(),l.current=i),c.current.init())},[e,i]),(0,t.useLayoutEffect)(()=>()=>{c.current.clear()},[]),c},Z=e=>{let{isReady:r,chartApiRef:a}=m(i),{isInsidePane:n,isPaneReady:l,paneApiRef:u}=y(),s=(0,t.useRef)(a),c=(0,t.useRef)(u);s.current=a,c.current=u;let f=X({isReady:r&&n&&l,props:e,primitiveIdentity:e.plugin??e.render,mountPrimitive(e){var t,r;let i=null==(t=s.current)?void 0:t.api(),a=null==(r=c.current)?void 0:r.api();if(!i||!a)return null;let n=void 0!==e.plugin?e.plugin:e.render({chart:i,pane:a});return a.attachPrimitive(n),{primitive:n,detach:()=>a.detachPrimitive(n)}}});return(0,t.useLayoutEffect)(()=>{if(r&&!n)throw new h("PanePrimitive must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:"pane-primitives"})},[r,n]),f},ee=(0,t.forwardRef)((e,r)=>{let i=Z(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});ee.displayName="PanePrimitive";let et=e=>{let{isReady:r,chartApiRef:a}=m(i),{isReady:n,seriesApiRef:l}=m(L),u=(0,t.useRef)(a),s=(0,t.useRef)(l);return u.current=a,s.current=l,X({isReady:r&&n,props:e,primitiveIdentity:e.plugin??e.render,mountPrimitive(e){var t,r;let i=null==(t=s.current)?void 0:t.api(),a=null==(r=u.current)?void 0:r.api();if(!a||!i)return null;let n=void 0!==e.plugin?e.plugin:e.render({chart:a,series:i});return i.attachPrimitive(n),{primitive:n,detach:()=>i.detachPrimitive(n)}}})},er=(0,t.forwardRef)((e,r)=>{let i=et(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});er.displayName="SeriesPrimitive";let ei=({stretchFactor:e}={})=>{let{chartApiRef:r,isReady:a}=m(i),[n,l]=(0,t.useState)(!1),u=(0,t.useRef)({_pane:null,api(){return this._pane},init(){let t=null==r?void 0:r.api();if(!t)return null;let i=t.addPane(!0);return this._pane=i,l(!0),void 0!==e&&this._pane.setStretchFactor(e),this._pane},clear(){if(null!==this._pane){var e;null==r||null==(e=r.api())||e.removePane(this._pane.paneIndex()),l(!1),this._pane=null}}});return(0,t.useLayoutEffect)(()=>{a&&u.current.init()},[a]),(0,t.useEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(void 0===e)return;let t=u.current.api();t&&t.setStretchFactor(e)},[e]),{paneApiRef:u,isReady:n}},ea=(0,t.forwardRef)(({children:e,stretchFactor:r},i)=>{let{paneApiRef:{current:a},isReady:n}=ei({stretchFactor:r});return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(v.Provider,{value:{paneApiRef:a,isReady:n}},e)});ea.displayName="Pane";export{T as AreaSeries,W as BarSeries,V as BaselineSeries,B as CandlestickSeries,u as Chart,f as CustomChart,D as CustomSeries,H as HistogramSeries,I as LineSeries,Y as Markers,s as OptionsChart,ea as Pane,ee as PanePrimitive,$ as PriceLine,C as PriceScale,er as SeriesPrimitive,_ as TimeScale,E as TimeScaleFitContentTrigger,U as WatermarkImage,Q as WatermarkText,c as YieldCurveChart};
|
|
15
|
+
Version: lightweight-charts-react-components@${o}`),Object.setPrototypeOf(this,h.prototype)}}let m=(e,r)=>{let i=(0,t.useContext)(e);if(!i){let t=e.name??e.displayName??"Context";throw new h(r??`${t} not found.`,{isOperational:!0})}return i},v=(0,t.createContext)(null);v.displayName="PaneContext";let y=()=>{let e=(0,t.useContext)(v),r=!!e;return{isInsidePane:r,isPaneReady:!!(null==e?void 0:e.isReady),paneApiRef:null==e?void 0:e.paneApiRef}},R=({onVisibleTimeRangeChange:e,onVisibleLogicalRangeChange:r,onSizeChange:a,visibleRange:n,visibleLogicalRange:l,options:u={}})=>{let{isReady:s,chartApiRef:c}=m(i),{isPaneReady:f,isInsidePane:p}=y(),[o,d]=(0,t.useState)(!1),h=(0,t.useRef)({_timeScale:null,api(){return this._timeScale},init(){if(this._timeScale)return this._timeScale;let e=null==c?void 0:c.api();return e?(this._timeScale=e.timeScale(),this._timeScale.applyOptions(u),n&&this._timeScale.setVisibleRange(n),l&&this._timeScale.setVisibleLogicalRange(l),d(!0),this._timeScale):null},clear(){this._timeScale=null,d(!1)}});return(0,t.useLayoutEffect)(()=>{s&&(!p||f)&&h.current.init()},[s,p,f]),(0,t.useLayoutEffect)(()=>()=>{h.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(c&&u){var e,t;null==(t=h.current)||null==(e=t.api())||e.applyOptions(u)}},[u]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=h.current.api();return a&&e&&e.subscribeSizeChange(a),()=>{a&&e&&e.unsubscribeSizeChange(a)}},[c,o,a]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=h.current.api();return r&&e&&e.subscribeVisibleLogicalRangeChange(r),()=>{r&&e&&e.unsubscribeVisibleLogicalRangeChange(r)}},[c,o,r]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let t=h.current.api();return e&&t&&t.subscribeVisibleTimeRangeChange(e),()=>{e&&t&&t.unsubscribeVisibleTimeRangeChange(e)}},[c,o,e]),(0,t.useLayoutEffect)(()=>{if(c&&n){var e,t;null==(t=h.current)||null==(e=t.api())||e.setVisibleRange(n)}},[n]),(0,t.useLayoutEffect)(()=>{if(c&&l){var e,t;null==(t=h.current)||null==(e=t.api())||e.setVisibleLogicalRange(l)}},[l]),{timeScaleApiRef:h,isReady:o}},_=(0,t.forwardRef)(({children:e,...r},i)=>{let{timeScaleApiRef:{current:a},isReady:n}=R(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(p.Provider,{value:{timeScaleApiRef:a,isReady:n}},e)});_.displayName="TimeScale";let S=e=>{let r=(0,t.useRef)(e);return r.current=e,r},C=(0,t.createContext)({seriesApiRef:null,isReady:!1});C.displayName="SeriesContext";let g=({options:e={},id:r})=>{let{isReady:a,chartApiRef:n}=m(i),{isInsidePane:l,isPaneReady:u,paneApiRef:s}=y(),{seriesApiRef:c,isReady:f}=(0,t.useContext)(C),p=null===c||f,o=S(e),d=(0,t.useRef)({_priceScale:null,api(){return this._priceScale},init(){if(!this._priceScale){var e;let t=null==n?void 0:n.api();if(!t)return null;this._priceScale=t.priceScale(r,null==s||null==(e=s.api())?void 0:e.paneIndex()),this._priceScale.applyOptions(o.current)}return this._priceScale},setId(e){var t;null!==this._priceScale&&null!==n&&(this._priceScale=n.api().priceScale(e,null==s||null==(t=s.api())?void 0:t.paneIndex()),this._priceScale.applyOptions(o.current))},clear(){this._priceScale=null}});return(0,t.useEffect)(()=>{if(a){if(!l)throw new h("PriceScale must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});u&&p&&d.current.init()}},[a,l,u,p]),(0,t.useLayoutEffect)(()=>()=>{d.current.clear()},[]),(0,t.useEffect)(()=>{n&&d.current.setId(r)},[r,e]),d},E=(0,t.forwardRef)((e,r)=>{let i=g(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});E.displayName="PriceScale";let L=({deps:e})=>{let{timeScaleApiRef:r,isReady:i}=m(p);(0,t.useLayoutEffect)(()=>{if(!i||!r)return;let e=r.api();queueMicrotask(()=>{e&&e.fitContent()})},[...e,i])},w=({deps:e})=>(L({deps:e}),null),b=({type:e,data:r,options:a={},reactive:n=!0,seriesOrder:l,alwaysReplaceData:u=!1,...s})=>{let{isReady:c,chartApiRef:f,chartKind:p}=m(i),{isPaneReady:o,isInsidePane:d,paneApiRef:v}=y(),[R,_]=(0,t.useState)(!1),S=(0,t.useRef)({_series:null,api(){return this._series},init(){if(!this._series){var t,i,n;let u=null==f?void 0:f.api();if(!u)return null;let c=d?null==v||null==(t=v.api())?void 0:t.paneIndex():void 0;if("Custom"===e){let e=s.plugin;if(!e)throw new h("Custom series requires a plugin to be defined");this._series=u.addCustomSeries(e,a,c)}else{if("yield-curve"===p&&"Area"!==e&&"Line"!==e)throw new h("YieldCurveChart only supports LineSeries and AreaSeries.",{isOperational:!0});this._series=u.addSeries(k[e],a,c)}null==(i=this._series)||i.setData(r),void 0!==l&&(null==(n=this._series)||n.setSeriesOrder(l)),_(!0)}return this._series},clear(){if(null!==this._series){if(!(null==f?void 0:f._isDisposing)){var e;null==f||null==(e=f.api())||e.removeSeries(this._series)}this._series=null,_(!1)}}});return(0,t.useLayoutEffect)(()=>{c&&(!d||o)&&S.current.init()},[c,d,o]),(0,t.useLayoutEffect)(()=>()=>{S.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(f&&r&&n){let e=S.current.api();if(!e)return;let t=e.data();if(u||!P(t,r))return void e.setData(r);let i=r[r.length-1];e.update(i)}},[r,n,u]),(0,t.useLayoutEffect)(()=>{if(f&&a){var e;null==(e=S.current.api())||e.applyOptions(a)}},[a]),(0,t.useLayoutEffect)(()=>{if(f&&void 0!==l){var e;null==(e=S.current.api())||e.setSeriesOrder(l)}},[l]),{isReady:R,seriesApiRef:S}},k={Line:e.LineSeries,Candlestick:e.CandlestickSeries,Histogram:e.HistogramSeries,Area:e.AreaSeries,Baseline:e.BaselineSeries,Bar:e.BarSeries},P=(e,t)=>{let r=t.length-e.length;return 0!==e.length&&0!==t.length&&!(r<0)&&!(r>1)&&(0===r?A(e,t,e.length-1)&&N(e[e.length-1],t[t.length-1]):A(e,t,e.length)&&!N(e[e.length-1],t[t.length-1]))},A=(e,t,r)=>{for(let i=0;i<r;i+=1)if(e[i]!==t[i])return!1;return!0},N=(e,t)=>{let r=e.time,i=t.time;return r===i||x(r)&&x(i)&&O(r,i)},x=t=>(0,e.isBusinessDay)(t),O=(e,t)=>e.year===t.year&&e.month===t.month&&e.day===t.day,I=(0,t.forwardRef)(({children:e,...r},i)=>{let{seriesApiRef:{current:a},isReady:n}=b(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(C.Provider,{value:{seriesApiRef:a,isReady:n}},e)});I.displayName="SeriesTemplate";let H=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(I,{type:"Line",ref:i,...r},e));H.displayName="LineSeries";let B=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(I,{type:"Histogram",ref:i,...r},e));B.displayName="HistogramSeries";let D=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(I,{type:"Candlestick",ref:i,...r},e));D.displayName="CandlestickSeries";let T=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(I,{type:"Area",ref:i,...r},e));T.displayName="AreaSeries";let V=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(I,{type:"Baseline",ref:i,...r},e));V.displayName="BaselineSeries";let W=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(I,{type:"Bar",ref:i,...r},e));W.displayName="BarSeries";let M=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(I,{type:"Custom",ref:i,...r},e));M.displayName="CustomSeries";let $=({options:e,price:r})=>{let{isReady:i,seriesApiRef:a}=m(C),n=(0,t.useRef)({_priceLine:null,api(){return this._priceLine},init(){if(!this._priceLine){let t=null==a?void 0:a.api();if(!t)return null;this._priceLine=t.createPriceLine({price:r,...e})}return this._priceLine},clear(){if(null!==this._priceLine){var e;null==a||null==(e=a.api())||e.removePriceLine(this._priceLine),this._priceLine=null}}});return(0,t.useLayoutEffect)(()=>{i&&n.current.init()},[i]),(0,t.useLayoutEffect)(()=>()=>{n.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(a&&e){var t;null==(t=n.current.api())||t.applyOptions(e)}},[e]),(0,t.useLayoutEffect)(()=>{var e;a&&(null==(e=n.current.api())||e.applyOptions({price:r}))},[r]),n},K=(0,t.forwardRef)((e,r)=>{let i=$(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});K.displayName="PriceLine";let Y=({reactive:r=!0,markers:i,options:a})=>{let{isReady:n,seriesApiRef:l}=m(C),u=(0,t.useRef)({_markers:null,api(){return this._markers},init(){if(null===this._markers){let t=null==l?void 0:l.api();if(!t)return null;this._markers=(0,e.createSeriesMarkers)(t,i,a)}return this._markers},clear(){null!==this._markers&&(this._markers.detach(),this._markers=null)}});return(0,t.useLayoutEffect)(()=>{n&&u.current.init()},[n]),(0,t.useLayoutEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(l&&i&&r){var e;null==(e=u.current.api())||e.setMarkers(i)}},[i,r]),u},F=(0,t.forwardRef)(({...e},r)=>{let i=Y(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});F.displayName="Markers";let j=r=>{let{isReady:a,chartApiRef:n}=m(i),{isPaneReady:l,isInsidePane:u,paneApiRef:s}=y(),c=S(r),f=S(n),p=S(s),o=z(r),d=(0,t.useRef)({_watermark:null,api(){return this._watermark},init(){if(null===this._watermark){var t,r;let i=null==(t=f.current)?void 0:t.api(),a=null==(r=p.current)?void 0:r.api(),n=c.current;if(!i||!a)return null;if(G(n)){let{type:t,...r}=n;this._watermark=(0,e.createTextWatermark)(a,r)}else{let{type:t,src:r,...i}=n;this._watermark=(0,e.createImageWatermark)(a,r,i)}}return this._watermark},clear(){null!==this._watermark&&(this._watermark.detach(),this._watermark=null)}});return(0,t.useLayoutEffect)(()=>{if(a){if(!u)throw new h("Watermark must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});l&&(d.current.clear(),d.current.init())}},[a,l,u,o]),(0,t.useLayoutEffect)(()=>()=>{d.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;n&&r&&(null==(e=d.current.api())||e.applyOptions(q(r)))},[r]),d},q=e=>{if(G(e)){let{type:t,...r}=e;return r}let{type:t,src:r,...i}=e;return i},z=e=>{if(!G(e))return e.src},G=e=>"text"===e.type,J=(e,r)=>{let i=j(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null},Q=(0,t.forwardRef)((e,t)=>J({...e,type:"text"},t)),U=(0,t.forwardRef)((e,t)=>J({...e,type:"image"},t));Q.displayName="WatermarkText",U.displayName="WatermarkImage";let X=({isReady:e,props:r,primitiveIdentity:i,mountPrimitive:a})=>{let n=(0,t.useRef)(r),l=(0,t.useRef)(i),u=(0,t.useRef)(a),s=(0,t.useRef)(null);n.current=r,u.current=a;let c=(0,t.useRef)({_primitive:null,api(){return this._primitive},init(){if(!this._primitive){let e=u.current(n.current);if(!e)return null;s.current=e.detach,this._primitive=e.primitive}return this._primitive},clear(){if(null!==this._primitive){var e;null==(e=s.current)||e.call(s),s.current=null,this._primitive=null}}});return(0,t.useLayoutEffect)(()=>{e&&(l.current!==i&&(c.current.clear(),l.current=i),c.current.init())},[e,i]),(0,t.useLayoutEffect)(()=>()=>{c.current.clear()},[]),c},Z=e=>{let{isReady:r,chartApiRef:a}=m(i),{isInsidePane:n,isPaneReady:l,paneApiRef:u}=y(),s=(0,t.useRef)(a),c=(0,t.useRef)(u);s.current=a,c.current=u;let f=X({isReady:r&&n&&l,props:e,primitiveIdentity:e.plugin??e.render,mountPrimitive(e){var t,r;let i=null==(t=s.current)?void 0:t.api(),a=null==(r=c.current)?void 0:r.api();if(!i||!a)return null;let n=void 0!==e.plugin?e.plugin:e.render({chart:i,pane:a});return a.attachPrimitive(n),{primitive:n,detach:()=>a.detachPrimitive(n)}}});return(0,t.useLayoutEffect)(()=>{if(r&&!n)throw new h("PanePrimitive must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:"pane-primitives"})},[r,n]),f},ee=(0,t.forwardRef)((e,r)=>{let i=Z(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});ee.displayName="PanePrimitive";let et=e=>{let{isReady:r,chartApiRef:a}=m(i),{isReady:n,seriesApiRef:l}=m(C),u=(0,t.useRef)(a),s=(0,t.useRef)(l);return u.current=a,s.current=l,X({isReady:r&&n,props:e,primitiveIdentity:e.plugin??e.render,mountPrimitive(e){var t,r;let i=null==(t=s.current)?void 0:t.api(),a=null==(r=u.current)?void 0:r.api();if(!a||!i)return null;let n=void 0!==e.plugin?e.plugin:e.render({chart:a,series:i});return i.attachPrimitive(n),{primitive:n,detach:()=>i.detachPrimitive(n)}}})},er=(0,t.forwardRef)((e,r)=>{let i=et(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});er.displayName="SeriesPrimitive";let ei=({stretchFactor:e}={})=>{let{chartApiRef:r,isReady:a}=m(i),[n,l]=(0,t.useState)(!1),u=(0,t.useRef)({_pane:null,api(){return this._pane},init(){let t=null==r?void 0:r.api();if(!t)return null;let i=t.addPane(!0);return this._pane=i,l(!0),void 0!==e&&this._pane.setStretchFactor(e),this._pane},clear(){if(null!==this._pane){var e;null==r||null==(e=r.api())||e.removePane(this._pane.paneIndex()),l(!1),this._pane=null}}});return(0,t.useLayoutEffect)(()=>{a&&u.current.init()},[a]),(0,t.useEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(void 0===e)return;let t=u.current.api();t&&t.setStretchFactor(e)},[e]),{paneApiRef:u,isReady:n}},ea=(0,t.forwardRef)(({children:e,stretchFactor:r},i)=>{let{paneApiRef:{current:a},isReady:n}=ei({stretchFactor:r});return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(v.Provider,{value:{paneApiRef:a,isReady:n}},e)});ea.displayName="Pane";export{T as AreaSeries,W as BarSeries,V as BaselineSeries,D as CandlestickSeries,u as Chart,f as CustomChart,M as CustomSeries,B as HistogramSeries,H as LineSeries,F as Markers,s as OptionsChart,ea as Pane,ee as PanePrimitive,K as PriceLine,E as PriceScale,er as SeriesPrimitive,_ as TimeScale,w as TimeScaleFitContentTrigger,U as WatermarkImage,Q as WatermarkText,c as YieldCurveChart};
|
|
16
16
|
//# sourceMappingURL=lightweight-charts-react-components.mjs.map
|