lightweight-charts-react-components 2.2.0 → 2.4.0

package/README.md

@@ -252,6 +252,8 @@ const App = () => {
 export { App };
 ```
 
+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.
+
 ### Chart Container Sizing
 
 The `Chart` component requires explicit width and height to render correctly. You can set these dimensions directly via the `options` prop or make the chart container scale to its parent size using the `containerProps` prop.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 
 /**!
-* lightweight-charts-react-components v2.2.0
+* lightweight-charts-react-components v2.4.0
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
@@ -21,6 +21,7 @@ import { IHorzScaleBehavior } from 'lightweight-charts';
 import type { IImageWatermarkPluginApi } from 'lightweight-charts';
 import type { ImageWatermarkOptions } from 'lightweight-charts';
 import type { IPaneApi } from 'lightweight-charts';
+import type { IPanePrimitive } from 'lightweight-charts';
 import type { IPriceLine } from 'lightweight-charts';
 import type { IPriceScaleApi } from 'lightweight-charts';
 import type { IRange } from 'lightweight-charts';
@@ -259,6 +260,9 @@ export declare type GenericChartProps<HorzScaleItem = Time, TChartApi extends Ch
     children?: ReactNode;
     /**
      * The props for the container element on which the chart will be rendered.
+     * The wrapper sets `aria-hidden` to `true` by default because Lightweight Charts
+     * renders layout tables internally; override it explicitly if you provide your own
+     * accessible labelling strategy.
      */
     containerProps?: JSX.IntrinsicElements["div"];
     /**
@@ -295,6 +299,12 @@ declare type GenericPaneComponent = (<HorzScaleItem = Time>(props: PaneProps & {
     displayName: string;
 };
 
+declare type GenericPanePrimitiveComponent = (<HorzScaleItem = Time>(props: PanePrimitiveProps<HorzScaleItem> & {
+    ref?: ForwardedRef<PanePrimitiveApiRef<HorzScaleItem>>;
+}) => ReturnType<typeof PanePrimitiveRenderFunction>) & {
+    displayName: string;
+};
+
 declare type GenericSeriesPrimitiveComponent = (<T extends SeriesType, HorzScaleItem = Time>(props: SeriesPrimitiveProps<T, HorzScaleItem> & {
     ref?: ForwardedRef<SeriesPrimitiveApiRef<HorzScaleItem>>;
 }) => ReturnType<typeof SeriesPrimitiveRenderFunction>) & {
@@ -491,6 +501,62 @@ export declare type PaneApiRef<HorzScaleItem = Time> = {
     clear: () => void;
 };
 
+/**
+ * PanePrimitive component that can be used to create a primitive on a pane.
+ *
+ * @param props - The properties for the pane primitive.
+ * @param ref - The ref to access the pane primitive API.
+ * @returns A React component that renders the pane primitive.
+ * @see {@link https://ukorvl.github.io/lightweight-charts-react-components/docs/pane-primitives | Pane primitives documentation}
+ * @see {@link https://tradingview.github.io/lightweight-charts/docs/plugins/pane-primitives | TradingView documentation for pane primitive}
+ * @example
+ * ```tsx
+ * <Pane>
+ *   <PanePrimitive render={({ chart, pane }) => new MyPanePrimitive(chart, pane)} />
+ * </Pane>
+ * ```
+ */
+export declare const PanePrimitive: GenericPanePrimitiveComponent;
+
+/**
+ * Pane primitive API reference type that can be used to access the pane primitive plugin API.
+ */
+export declare type PanePrimitiveApiRef<HorzScaleItem = Time> = {
+    /**
+     * Internal reference to the pane primitive API instance.
+     */
+    _primitive: IPanePrimitive<HorzScaleItem> | null;
+    /**
+     * Function to get the pane primitive API instance.
+     */
+    api(): IPanePrimitive<HorzScaleItem> | null;
+    /**
+     * Function to initialize the pane primitive API instance.
+     */
+    init(): IPanePrimitive<HorzScaleItem> | null;
+    /**
+     * Function to clear the pane primitive API instance.
+     */
+    clear(): void;
+};
+
+/**
+ * Pane primitive properties that can be used to create a pane primitive.
+ */
+export declare type PanePrimitiveProps<HorzScaleItem = Time> = PanePrimitivePropsWithRender<HorzScaleItem> | PanePrimitivePropsWithPlugin<HorzScaleItem>;
+
+declare type PanePrimitivePropsWithPlugin<HorzScaleItem = Time> = {
+    plugin: IPanePrimitive<HorzScaleItem>;
+    render?: never;
+};
+
+declare type PanePrimitivePropsWithRender<HorzScaleItem = Time> = {
+    render: RenderPanePrimitive<HorzScaleItem>;
+    plugin?: never;
+};
+
+declare const PanePrimitiveRenderFunction: <HorzScaleItem = Time>(props: PanePrimitiveProps<HorzScaleItem>, ref: ForwardedRef<PanePrimitiveApiRef<HorzScaleItem>>) => JSX.Element | null;
+
 /**
  * Pane component props.
  */
@@ -613,6 +679,14 @@ export declare type PriceScaleProps = {
     id: string;
 };
 
+/**
+ * Render function type for pane primitives.
+ */
+export declare type RenderPanePrimitive<HorzScaleItem = Time> = ({ chart, pane, }: {
+    chart: IChartApiBase<HorzScaleItem>;
+    pane: IPaneApi<HorzScaleItem>;
+}) => IPanePrimitive<HorzScaleItem>;
+
 /**
  * Render function type for series primitives.
  */

package/dist/lightweight-charts-react-components.mjs

@@ -1,6 +1,6 @@
 
 /**!
-* lightweight-charts-react-components v2.2.0
+* lightweight-charts-react-components v2.4.0
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.md file in the root directory of this source tree.
@@ -8,9 +8,9 @@
 * @license MIT
 */
 
-import*as e from"lightweight-charts";import*as t from"react";let r=(0,t.createContext)(null);r.displayName="ChartContext";let i={addDefaultPane:!1},a=({container:r,onClick:a,onCrosshairMove:l,onInit:n,options:s={},onDblClick:u,createChartApi:c=e.createChart})=>{let[f,p]=(0,t.useState)(!1),o=(0,t.useRef)({_chart:null,api(){return this._chart},init(){if(null===this._chart){let e=c(r,{...i,...s});this._chart=e,n&&n(this._chart)}return f||p(!0),this._chart},clear(){null!==this._chart&&(p(!1),this._chart.remove(),this._chart=null)}});return(0,t.useLayoutEffect)(()=>(o.current.init(),()=>{o.current.clear()}),[]),(0,t.useLayoutEffect)(()=>{if(r){if(a){var e;null==(e=o.current.api())||e.subscribeClick(a)}return()=>{if(a){var e;null==(e=o.current.api())||e.unsubscribeClick(a)}}}},[a]),(0,t.useLayoutEffect)(()=>{if(r){if(l){var e;null==(e=o.current.api())||e.subscribeCrosshairMove(l)}return()=>{if(l){var e;null==(e=o.current.api())||e.unsubscribeCrosshairMove(l)}}}},[l]),(0,t.useLayoutEffect)(()=>{if(r){if(u){var e;null==(e=o.current.api())||e.subscribeDblClick(u)}return()=>{if(u){var e;null==(e=o.current.api())||e.unsubscribeDblClick(u)}}}},[u]),(0,t.useLayoutEffect)(()=>{var e;r&&(null==(e=o.current.api())||e.applyOptions({...i,...s}))},[s]),{chartApiRef:o,isReady:f}},l=({children:e,container:i,onClick:l,onCrosshairMove:n,onInit:s,options:u,onDblClick:c,chartKind:f="time",createChartApi:p})=>{let{chartApiRef:{current:o},isReady:d}=a({container:i,onClick:l,onCrosshairMove:n,onInit:s,options:u,onDblClick:c,createChartApi:p});return t.default.createElement(r.Provider,{value:{chartApiRef:o,isReady:d,chartKind:f}},e)},n=(0,t.forwardRef)(({children:r,containerProps:i,...a},n)=>{let[s,u]=(0,t.useState)(),c=(0,t.useCallback)(e=>{u(e??void 0),n&&("function"==typeof n?n(e):n.current=e)},[n]);return t.default.createElement("div",{ref:c,...i},!!s&&t.default.createElement(l,{container:s,createChartApi:e.createChart,chartKind:"time",...a},r))});n.displayName="ChartWrapper";let s=(0,t.forwardRef)(({children:r,containerProps:i,...a},n)=>{let[s,u]=(0,t.useState)(),c=(0,t.useCallback)(e=>{u(e??void 0),n&&("function"==typeof n?n(e):n.current=e)},[n]);return t.default.createElement("div",{ref:c,...i},!!s&&t.default.createElement(l,{container:s,createChartApi:e.createOptionsChart,chartKind:"options",...a},r))});s.displayName="OptionsChart";let u=(0,t.forwardRef)(({children:r,containerProps:i,...a},n)=>{let[s,u]=(0,t.useState)(),c=(0,t.useCallback)(e=>{u(e??void 0),n&&("function"==typeof n?n(e):n.current=e)},[n]);return t.default.createElement("div",{ref:c,...i},!!s&&t.default.createElement(l,{container:s,createChartApi:e.createYieldCurveChart,chartKind:"yield-curve",...a},r))});u.displayName="YieldCurveChart";let c=(0,t.forwardRef)(({children:r,containerProps:i,horzScaleBehavior:a,...n},s)=>{let[u,c]=(0,t.useState)(),f=(0,t.useCallback)(e=>{c(e??void 0),s&&("function"==typeof s?s(e):s.current=e)},[s]),p=(0,t.useCallback)((t,r)=>(0,e.createChartEx)(t,a,r),[a]);return t.default.createElement("div",{ref:f,...i},!!u&&t.default.createElement(l,{container:u,createChartApi:p,chartKind:"custom",...n},r))});c.displayName="CustomChart";let f=(0,t.createContext)(null);f.displayName="TimeScaleContext";let p="2.2.0";function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class d extends Error{constructor(e,{isOperational:t=!0,cause:r,docsPath:i}={}){super(e),o(this,"isOperational",void 0),o(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}
+import*as e from"lightweight-charts";import*as t from"react";let r=(0,t.createContext)(null);r.displayName="ChartContext";let i={addDefaultPane:!1},a=({container:r,onClick:a,onCrosshairMove:l,onInit:n,options:u={},onDblClick:s,createChartApi:c=e.createChart})=>{let[p,f]=(0,t.useState)(!1),o=(0,t.useRef)({_chart:null,api(){return this._chart},init(){if(null===this._chart){let e=c(r,{...i,...u});this._chart=e,n&&n(this._chart)}return p||f(!0),this._chart},clear(){null!==this._chart&&(f(!1),this._chart.remove(),this._chart=null)}});return(0,t.useLayoutEffect)(()=>(o.current.init(),()=>{o.current.clear()}),[]),(0,t.useLayoutEffect)(()=>{if(r){if(a){var e;null==(e=o.current.api())||e.subscribeClick(a)}return()=>{if(a){var e;null==(e=o.current.api())||e.unsubscribeClick(a)}}}},[a]),(0,t.useLayoutEffect)(()=>{if(r){if(l){var e;null==(e=o.current.api())||e.subscribeCrosshairMove(l)}return()=>{if(l){var e;null==(e=o.current.api())||e.unsubscribeCrosshairMove(l)}}}},[l]),(0,t.useLayoutEffect)(()=>{if(r){if(s){var e;null==(e=o.current.api())||e.subscribeDblClick(s)}return()=>{if(s){var e;null==(e=o.current.api())||e.unsubscribeDblClick(s)}}}},[s]),(0,t.useLayoutEffect)(()=>{var e;r&&(null==(e=o.current.api())||e.applyOptions({...i,...u}))},[u]),{chartApiRef:o,isReady:p}},l=({children:e,container:i,onClick:l,onCrosshairMove:n,onInit:u,options:s,onDblClick:c,chartKind:p="time",createChartApi:f})=>{let{chartApiRef:{current:o},isReady:d}=a({container:i,onClick:l,onCrosshairMove:n,onInit:u,options:s,onDblClick:c,createChartApi:f});return t.default.createElement(r.Provider,{value:{chartApiRef:o,isReady:d,chartKind:p}},e)},n=(0,t.forwardRef)(({children:r,containerProps:i,...a},n)=>{let[u,s]=(0,t.useState)(),c=(0,t.useCallback)(e=>{s(e??void 0),n&&("function"==typeof n?n(e):n.current=e)},[n]);return t.default.createElement("div",{ref:c,"aria-hidden":(null==i?void 0:i["aria-hidden"])??!0,...i},!!u&&t.default.createElement(l,{container:u,createChartApi:e.createChart,chartKind:"time",...a},r))});n.displayName="ChartWrapper";let u=(0,t.forwardRef)(({children:r,containerProps:i,...a},n)=>{let[u,s]=(0,t.useState)(),c=(0,t.useCallback)(e=>{s(e??void 0),n&&("function"==typeof n?n(e):n.current=e)},[n]);return t.default.createElement("div",{ref:c,"aria-hidden":(null==i?void 0:i["aria-hidden"])??!0,...i},!!u&&t.default.createElement(l,{container:u,createChartApi:e.createOptionsChart,chartKind:"options",...a},r))});u.displayName="OptionsChart";let s=(0,t.forwardRef)(({children:r,containerProps:i,...a},n)=>{let[u,s]=(0,t.useState)(),c=(0,t.useCallback)(e=>{s(e??void 0),n&&("function"==typeof n?n(e):n.current=e)},[n]);return t.default.createElement("div",{ref:c,"aria-hidden":(null==i?void 0:i["aria-hidden"])??!0,...i},!!u&&t.default.createElement(l,{container:u,createChartApi:e.createYieldCurveChart,chartKind:"yield-curve",...a},r))});s.displayName="YieldCurveChart";let c=(0,t.forwardRef)(({children:r,containerProps:i,horzScaleBehavior:a,...n},u)=>{let[s,c]=(0,t.useState)(),p=(0,t.useCallback)(e=>{c(e??void 0),u&&("function"==typeof u?u(e):u.current=e)},[u]),f=(0,t.useCallback)((t,r)=>(0,e.createChartEx)(t,a,r),[a]);return t.default.createElement("div",{ref:p,"aria-hidden":(null==i?void 0:i["aria-hidden"])??!0,...i},!!s&&t.default.createElement(l,{container:s,createChartApi:f,chartKind:"custom",...n},r))});c.displayName="CustomChart";let p=(0,t.createContext)(null);p.displayName="TimeScaleContext";let f="2.4.0";function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class d extends Error{constructor(e,{isOperational:t=!0,cause:r,docsPath:i}={}){super(e),o(this,"isOperational",void 0),o(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}
 
-Docs: see ${"https://ukorvl.github.io/lightweight-charts-react-components/docs/"+i}`),p&&(this.message=`${this.message}
+Docs: see ${"https://ukorvl.github.io/lightweight-charts-react-components/docs/"+i}`),f&&(this.message=`${this.message}
 
-Version: lightweight-charts-react-components@${p}`),Object.setPrototypeOf(this,d.prototype)}}let h=(e,r)=>{let i=(0,t.useContext)(e);if(!i){let t=e.name??e.displayName??"Context";throw new d(r??`${t} not found.`,{isOperational:!0})}return i},m=(0,t.createContext)(null);m.displayName="PaneContext";let y=()=>{let e=(0,t.useContext)(m),r=!!e;return{isInsidePane:r,isPaneReady:!!(null==e?void 0:e.isReady),paneApiRef:null==e?void 0:e.paneApiRef}},v=({onVisibleTimeRangeChange:e,onVisibleLogicalRangeChange:i,onSizeChange:a,visibleRange:l,visibleLogicalRange:n,options:s={}})=>{let{isReady:u,chartApiRef:c}=h(r),{isPaneReady:f,isInsidePane:p}=y(),[o,d]=(0,t.useState)(!1),m=(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(s),l&&this._timeScale.setVisibleRange(l),n&&this._timeScale.setVisibleLogicalRange(n),d(!0),this._timeScale):null},clear(){this._timeScale=null,d(!1)}});return(0,t.useLayoutEffect)(()=>{u&&(!p||f)&&m.current.init()},[u,p,f]),(0,t.useLayoutEffect)(()=>()=>{m.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(c&&s){var e,t;null==(t=m.current)||null==(e=t.api())||e.applyOptions(s)}},[s]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=m.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=m.current.api();return i&&e&&e.subscribeVisibleLogicalRangeChange(i),()=>{i&&e&&e.unsubscribeVisibleLogicalRangeChange(i)}},[c,o,i]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let t=m.current.api();return e&&t&&t.subscribeVisibleTimeRangeChange(e),()=>{e&&t&&t.unsubscribeVisibleTimeRangeChange(e)}},[c,o,e]),(0,t.useLayoutEffect)(()=>{if(c&&l){var e,t;null==(t=m.current)||null==(e=t.api())||e.setVisibleRange(l)}},[l]),(0,t.useLayoutEffect)(()=>{if(c&&n){var e,t;null==(t=m.current)||null==(e=t.api())||e.setVisibleLogicalRange(n)}},[n]),{timeScaleApiRef:m,isReady:o}},_=(0,t.forwardRef)(({children:e,...r},i)=>{let{timeScaleApiRef:{current:a},isReady:l}=v(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(f.Provider,{value:{timeScaleApiRef:a,isReady:l}},e)});_.displayName="TimeScale";let S=({options:e={},id:i})=>{let{isReady:a,chartApiRef:l}=h(r),{isInsidePane:n,isPaneReady:s}=y(),u=(0,t.useRef)({_priceScale:null,api(){return this._priceScale},init(){if(!this._priceScale){let t=null==l?void 0:l.api();if(!t)return null;this._priceScale=t.priceScale(i),this._priceScale.applyOptions(e)}return this._priceScale},setId(t){null!==this._priceScale&&null!==l&&(this._priceScale=l.api().priceScale(t),this._priceScale.applyOptions(e))},clear(){this._priceScale=null}});return(0,t.useLayoutEffect)(()=>{if(a){if(!n)throw new d("PriceScale must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});s&&u.current.init()}},[a,n,s]),(0,t.useLayoutEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;l&&(null==(e=u.current)||e.setId(i))},[i]),(0,t.useLayoutEffect)(()=>{if(l&&e){var t,r;null==(r=u.current)||null==(t=r.api())||t.applyOptions(e)}},[e]),u},R=(0,t.forwardRef)((e,r)=>{let i=S(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});R.displayName="PriceScale";let C=({deps:e})=>{let{timeScaleApiRef:r,isReady:i}=h(f);(0,t.useLayoutEffect)(()=>{if(!i||!r)return;let e=r.api();queueMicrotask(()=>{e&&e.fitContent()})},[...e,i])},E=({deps:e})=>(C({deps:e}),null),L=(0,t.createContext)({seriesApiRef:null,isReady:!1});L.displayName="SeriesContext";let g=({type:e,data:i,options:a={},reactive:l=!0,seriesOrder:n,alwaysReplaceData:s=!1,...u})=>{let{isReady:c,chartApiRef:f,chartKind:p}=h(r),{isPaneReady:o,isInsidePane:m,paneApiRef:v}=y(),[_,S]=(0,t.useState)(!1),R=(0,t.useRef)({_series:null,api(){return this._series},init(){if(!this._series){var t,r,l;let s=null==f?void 0:f.api();if(!s)return null;let c=m?null==v||null==(t=v.api())?void 0:t.paneIndex():void 0;if("Custom"===e){let e=u.plugin;if(!e)throw new d("Custom series requires a plugin to be defined");this._series=s.addCustomSeries(e,a,c)}else{if("yield-curve"===p&&"Area"!==e&&"Line"!==e)throw new d("YieldCurveChart only supports LineSeries and AreaSeries.",{isOperational:!0});this._series=s.addSeries(b[e],a,c)}null==(r=this._series)||r.setData(i),void 0!==n&&(null==(l=this._series)||l.setSeriesOrder(n)),S(!0)}return this._series},clear(){if(null!==this._series){var e;null==f||null==(e=f.api())||e.removeSeries(this._series),this._series=null,S(!1)}}});return(0,t.useLayoutEffect)(()=>{c&&(!m||o)&&R.current.init()},[c,m,o]),(0,t.useLayoutEffect)(()=>()=>{R.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(f&&i&&l){let e=R.current.api();if(!e)return;let t=e.data(),r=i.length-t.length;if(s||0===t.length||0===i.length||r<0||r>1)return void e.setData(i);let a=i[i.length-1];e.update(a)}},[i,l,s]),(0,t.useLayoutEffect)(()=>{if(f&&a){var e;null==(e=R.current.api())||e.applyOptions(a)}},[a]),(0,t.useLayoutEffect)(()=>{if(f&&void 0!==n){var e;null==(e=R.current.api())||e.setSeriesOrder(n)}},[n]),{isReady:_,seriesApiRef:R}},b={Line:e.LineSeries,Candlestick:e.CandlestickSeries,Histogram:e.HistogramSeries,Area:e.AreaSeries,Baseline:e.BaselineSeries,Bar:e.BarSeries},w=(0,t.forwardRef)(({children:e,...r},i)=>{let{seriesApiRef:{current:a},isReady:l}=g(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(L.Provider,{value:{seriesApiRef:a,isReady:l}},e)});w.displayName="SeriesTemplate";let k=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Line",ref:i,...r},e));k.displayName="LineSeries";let A=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Histogram",ref:i,...r},e));A.displayName="HistogramSeries";let P=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Candlestick",ref:i,...r},e));P.displayName="CandlestickSeries";let N=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Area",ref:i,...r},e));N.displayName="AreaSeries";let O=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Baseline",ref:i,...r},e));O.displayName="BaselineSeries";let x=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Bar",ref:i,...r},e));x.displayName="BarSeries";let I=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Custom",ref:i,...r},e));I.displayName="CustomSeries";let H=({options:e,price:r})=>{let{isReady:i,seriesApiRef:a}=h(L),l=(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&&l.current.init()},[i]),(0,t.useLayoutEffect)(()=>()=>{l.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(a&&e){var t;null==(t=l.current.api())||t.applyOptions(e)}},[e]),(0,t.useLayoutEffect)(()=>{if(a&&r){var e;null==(e=l.current.api())||e.applyOptions({price:r})}},[r]),l},T=(0,t.forwardRef)((e,r)=>{let i=H(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});T.displayName="PriceLine";let B=({reactive:r=!0,markers:i,options:a})=>{let{isReady:l,seriesApiRef:n}=h(L),s=(0,t.useRef)({_markers:null,api(){return this._markers},init(){if(null===this._markers){let t=null==n?void 0:n.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)(()=>{l&&s.current.init()},[l]),(0,t.useLayoutEffect)(()=>()=>{s.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(n&&i&&r){var e;null==(e=s.current.api())||e.setMarkers(i)}},[i,r]),s},V=(0,t.forwardRef)(({...e},r)=>{let i=B(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});V.displayName="Markers";let W=i=>{let{isReady:a,chartApiRef:l}=h(r),{isPaneReady:n,isInsidePane:s,paneApiRef:u}=y(),c=(0,t.useRef)({_watermark:null,api(){return this._watermark},init(){if(null===this._watermark){let t=null==l?void 0:l.api(),r=null==u?void 0:u.api();if(!t||!r)return null;if(M(i)){let{type:t,...a}=i;this._watermark=(0,e.createTextWatermark)(r,a)}else{let{type:t,src:a,...l}=i;this._watermark=(0,e.createImageWatermark)(r,a,l)}}return this._watermark},clear(){null!==this._watermark&&(this._watermark.detach(),this._watermark=null)}});return(0,t.useLayoutEffect)(()=>{if(a){if(!s)throw new d("Watermark must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});n&&c.current.init()}},[a,n,s]),(0,t.useLayoutEffect)(()=>()=>{c.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;if(!l||!i)return;let{type:t,...r}=i;null==(e=c.current.api())||e.applyOptions(r)},[i]),c},M=e=>"text"===e.type,D=(e,r)=>{let i=W(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null},$=(0,t.forwardRef)((e,t)=>D({...e,type:"text"},t)),K=(0,t.forwardRef)((e,t)=>D({...e,type:"image"},t));$.displayName="WatermarkText",K.displayName="WatermarkImage";let Y=({render:e,plugin:i})=>{let{isReady:a,chartApiRef:l}=h(r),{isReady:n,seriesApiRef:s}=h(L),u=(0,t.useRef)({_primitive:null,api(){return this._primitive},init(){if(!this._primitive){let t=null==s?void 0:s.api(),r=null==l?void 0:l.api();if(!r||!t)return null;let a=i||e({chart:r,series:t});t.attachPrimitive(a),this._primitive=a}return this._primitive},clear(){if(null!==this._primitive){var e;null==s||null==(e=s.api())||e.detachPrimitive(this._primitive),this._primitive=null}}});return(0,t.useLayoutEffect)(()=>{a&&n&&u.current.init()},[n,a]),(0,t.useLayoutEffect)(()=>()=>{u.current.clear()},[]),u},F=(0,t.forwardRef)((e,r)=>{let i=Y(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});F.displayName="SeriesPrimitive";let j=({stretchFactor:e}={})=>{let{chartApiRef:i,isReady:a}=h(r),[l,n]=(0,t.useState)(!1),s=(0,t.useRef)({_pane:null,api(){return this._pane},init(){let t=null==i?void 0:i.api();if(!t)return null;let r=t.addPane(!0);return this._pane=r,n(!0),void 0!==e&&this._pane.setStretchFactor(e),this._pane},clear(){if(null!==this._pane){var e;null==i||null==(e=i.api())||e.removePane(this._pane.paneIndex()),n(!1),this._pane=null}}});return(0,t.useLayoutEffect)(()=>{a&&s.current.init()},[a]),(0,t.useEffect)(()=>()=>{s.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(void 0===e)return;let t=s.current.api();t&&t.setStretchFactor(e)},[e]),{paneApiRef:s,isReady:l}},q=(0,t.forwardRef)(({children:e,stretchFactor:r},i)=>{let{paneApiRef:{current:a},isReady:l}=j({stretchFactor:r});return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(m.Provider,{value:{paneApiRef:a,isReady:l}},e)});q.displayName="Pane";export{N as AreaSeries,x as BarSeries,O as BaselineSeries,P as CandlestickSeries,n as Chart,c as CustomChart,I as CustomSeries,A as HistogramSeries,k as LineSeries,V as Markers,s as OptionsChart,q as Pane,T as PriceLine,R as PriceScale,F as SeriesPrimitive,_ as TimeScale,E as TimeScaleFitContentTrigger,K as WatermarkImage,$ as WatermarkText,u as YieldCurveChart};
+Version: lightweight-charts-react-components@${f}`),Object.setPrototypeOf(this,d.prototype)}}let h=(e,r)=>{let i=(0,t.useContext)(e);if(!i){let t=e.name??e.displayName??"Context";throw new d(r??`${t} not found.`,{isOperational:!0})}return i},m=(0,t.createContext)(null);m.displayName="PaneContext";let v=()=>{let e=(0,t.useContext)(m),r=!!e;return{isInsidePane:r,isPaneReady:!!(null==e?void 0:e.isReady),paneApiRef:null==e?void 0:e.paneApiRef}},y=({onVisibleTimeRangeChange:e,onVisibleLogicalRangeChange:i,onSizeChange:a,visibleRange:l,visibleLogicalRange:n,options:u={}})=>{let{isReady:s,chartApiRef:c}=h(r),{isPaneReady:p,isInsidePane:f}=v(),[o,d]=(0,t.useState)(!1),m=(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),l&&this._timeScale.setVisibleRange(l),n&&this._timeScale.setVisibleLogicalRange(n),d(!0),this._timeScale):null},clear(){this._timeScale=null,d(!1)}});return(0,t.useLayoutEffect)(()=>{s&&(!f||p)&&m.current.init()},[s,f,p]),(0,t.useLayoutEffect)(()=>()=>{m.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(c&&u){var e,t;null==(t=m.current)||null==(e=t.api())||e.applyOptions(u)}},[u]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let e=m.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=m.current.api();return i&&e&&e.subscribeVisibleLogicalRangeChange(i),()=>{i&&e&&e.unsubscribeVisibleLogicalRangeChange(i)}},[c,o,i]),(0,t.useLayoutEffect)(()=>{if(!c||!o)return;let t=m.current.api();return e&&t&&t.subscribeVisibleTimeRangeChange(e),()=>{e&&t&&t.unsubscribeVisibleTimeRangeChange(e)}},[c,o,e]),(0,t.useLayoutEffect)(()=>{if(c&&l){var e,t;null==(t=m.current)||null==(e=t.api())||e.setVisibleRange(l)}},[l]),(0,t.useLayoutEffect)(()=>{if(c&&n){var e,t;null==(t=m.current)||null==(e=t.api())||e.setVisibleLogicalRange(n)}},[n]),{timeScaleApiRef:m,isReady:o}},_=(0,t.forwardRef)(({children:e,...r},i)=>{let{timeScaleApiRef:{current:a},isReady:l}=y(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(p.Provider,{value:{timeScaleApiRef:a,isReady:l}},e)});_.displayName="TimeScale";let S=({options:e={},id:i})=>{let{isReady:a,chartApiRef:l}=h(r),{isInsidePane:n,isPaneReady:u}=v(),s=(0,t.useRef)({_priceScale:null,api(){return this._priceScale},init(){if(!this._priceScale){let t=null==l?void 0:l.api();if(!t)return null;this._priceScale=t.priceScale(i),this._priceScale.applyOptions(e)}return this._priceScale},setId(t){null!==this._priceScale&&null!==l&&(this._priceScale=l.api().priceScale(t),this._priceScale.applyOptions(e))},clear(){this._priceScale=null}});return(0,t.useLayoutEffect)(()=>{if(a){if(!n)throw new d("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,n,u]),(0,t.useLayoutEffect)(()=>()=>{s.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;l&&(null==(e=s.current)||e.setId(i))},[i]),(0,t.useLayoutEffect)(()=>{if(l&&e){var t,r;null==(r=s.current)||null==(t=r.api())||t.applyOptions(e)}},[e]),s},R=(0,t.forwardRef)((e,r)=>{let i=S(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});R.displayName="PriceScale";let C=({deps:e})=>{let{timeScaleApiRef:r,isReady:i}=h(p);(0,t.useLayoutEffect)(()=>{if(!i||!r)return;let e=r.api();queueMicrotask(()=>{e&&e.fitContent()})},[...e,i])},E=({deps:e})=>(C({deps:e}),null),L=(0,t.createContext)({seriesApiRef:null,isReady:!1});L.displayName="SeriesContext";let b=({type:e,data:i,options:a={},reactive:l=!0,seriesOrder:n,alwaysReplaceData:u=!1,...s})=>{let{isReady:c,chartApiRef:p,chartKind:f}=h(r),{isPaneReady:o,isInsidePane:m,paneApiRef:y}=v(),[_,S]=(0,t.useState)(!1),R=(0,t.useRef)({_series:null,api(){return this._series},init(){if(!this._series){var t,r,l;let u=null==p?void 0:p.api();if(!u)return null;let c=m?null==y||null==(t=y.api())?void 0:t.paneIndex():void 0;if("Custom"===e){let e=s.plugin;if(!e)throw new d("Custom series requires a plugin to be defined");this._series=u.addCustomSeries(e,a,c)}else{if("yield-curve"===f&&"Area"!==e&&"Line"!==e)throw new d("YieldCurveChart only supports LineSeries and AreaSeries.",{isOperational:!0});this._series=u.addSeries(g[e],a,c)}null==(r=this._series)||r.setData(i),void 0!==n&&(null==(l=this._series)||l.setSeriesOrder(n)),S(!0)}return this._series},clear(){if(null!==this._series){var e;null==p||null==(e=p.api())||e.removeSeries(this._series),this._series=null,S(!1)}}});return(0,t.useLayoutEffect)(()=>{c&&(!m||o)&&R.current.init()},[c,m,o]),(0,t.useLayoutEffect)(()=>()=>{R.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(p&&i&&l){let e=R.current.api();if(!e)return;let t=e.data(),r=i.length-t.length;if(u||0===t.length||0===i.length||r<0||r>1)return void e.setData(i);let a=i[i.length-1];e.update(a)}},[i,l,u]),(0,t.useLayoutEffect)(()=>{if(p&&a){var e;null==(e=R.current.api())||e.applyOptions(a)}},[a]),(0,t.useLayoutEffect)(()=>{if(p&&void 0!==n){var e;null==(e=R.current.api())||e.setSeriesOrder(n)}},[n]),{isReady:_,seriesApiRef:R}},g={Line:e.LineSeries,Candlestick:e.CandlestickSeries,Histogram:e.HistogramSeries,Area:e.AreaSeries,Baseline:e.BaselineSeries,Bar:e.BarSeries},w=(0,t.forwardRef)(({children:e,...r},i)=>{let{seriesApiRef:{current:a},isReady:l}=b(r);return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(L.Provider,{value:{seriesApiRef:a,isReady:l}},e)});w.displayName="SeriesTemplate";let k=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Line",ref:i,...r},e));k.displayName="LineSeries";let P=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Histogram",ref:i,...r},e));P.displayName="HistogramSeries";let A=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Candlestick",ref:i,...r},e));A.displayName="CandlestickSeries";let N=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Area",ref:i,...r},e));N.displayName="AreaSeries";let O=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Baseline",ref:i,...r},e));O.displayName="BaselineSeries";let x=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Bar",ref:i,...r},e));x.displayName="BarSeries";let I=(0,t.forwardRef)(({children:e,...r},i)=>t.default.createElement(w,{type:"Custom",ref:i,...r},e));I.displayName="CustomSeries";let H=({options:e,price:r})=>{let{isReady:i,seriesApiRef:a}=h(L),l=(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&&l.current.init()},[i]),(0,t.useLayoutEffect)(()=>()=>{l.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(a&&e){var t;null==(t=l.current.api())||t.applyOptions(e)}},[e]),(0,t.useLayoutEffect)(()=>{var e;a&&(null==(e=l.current.api())||e.applyOptions({price:r}))},[r]),l},T=(0,t.forwardRef)((e,r)=>{let i=H(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});T.displayName="PriceLine";let B=({reactive:r=!0,markers:i,options:a})=>{let{isReady:l,seriesApiRef:n}=h(L),u=(0,t.useRef)({_markers:null,api(){return this._markers},init(){if(null===this._markers){let t=null==n?void 0:n.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)(()=>{l&&u.current.init()},[l]),(0,t.useLayoutEffect)(()=>()=>{u.current.clear()},[]),(0,t.useLayoutEffect)(()=>{if(n&&i&&r){var e;null==(e=u.current.api())||e.setMarkers(i)}},[i,r]),u},V=(0,t.forwardRef)(({...e},r)=>{let i=B(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});V.displayName="Markers";let W=e=>{let r=(0,t.useRef)(e);return r.current=e,r},M=i=>{let{isReady:a,chartApiRef:l}=h(r),{isPaneReady:n,isInsidePane:u,paneApiRef:s}=v(),c=W(i),p=W(l),f=W(s),o=$(i),m=(0,t.useRef)({_watermark:null,api(){return this._watermark},init(){if(null===this._watermark){var t,r;let i=null==(t=p.current)?void 0:t.api(),a=null==(r=f.current)?void 0:r.api(),l=c.current;if(!i||!a)return null;if(K(l)){let{type:t,...r}=l;this._watermark=(0,e.createTextWatermark)(a,r)}else{let{type:t,src:r,...i}=l;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 d("Watermark must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:""});n&&(m.current.clear(),m.current.init())}},[a,n,u,o]),(0,t.useLayoutEffect)(()=>()=>{m.current.clear()},[]),(0,t.useLayoutEffect)(()=>{var e;l&&i&&(null==(e=m.current.api())||e.applyOptions(D(i)))},[i]),m},D=e=>{if(K(e)){let{type:t,...r}=e;return r}let{type:t,src:r,...i}=e;return i},$=e=>{if(!K(e))return e.src},K=e=>"text"===e.type,Y=(e,r)=>{let i=M(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null},F=(0,t.forwardRef)((e,t)=>Y({...e,type:"text"},t)),j=(0,t.forwardRef)((e,t)=>Y({...e,type:"image"},t));F.displayName="WatermarkText",j.displayName="WatermarkImage";let q=({render:e,plugin:i})=>{let{isReady:a,chartApiRef:l}=h(r),{isInsidePane:n,isPaneReady:u,paneApiRef:s}=v(),c=(0,t.useRef)({_primitive:null,api(){return this._primitive},init(){if(!this._primitive){let t=null==l?void 0:l.api(),r=null==s?void 0:s.api();if(!t||!r)return null;let a=i||e({chart:t,pane:r});r.attachPrimitive(a),this._primitive=a}return this._primitive},clear(){if(null!==this._primitive){var e;null==s||null==(e=s.api())||e.detachPrimitive(this._primitive),this._primitive=null}}});return(0,t.useLayoutEffect)(()=>{if(a){if(!n)throw new d("PanePrimitive must be used inside a pane. Please ensure that the component is wrapped in a pane component.",{isOperational:!0,docsPath:"pane-primitives"});u&&c.current.init()}},[a,n,u]),(0,t.useLayoutEffect)(()=>()=>{c.current.clear()},[]),c},z=(0,t.forwardRef)((e,r)=>{let i=q(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});z.displayName="PanePrimitive";let G=({render:e,plugin:i})=>{let{isReady:a,chartApiRef:l}=h(r),{isReady:n,seriesApiRef:u}=h(L),s=(0,t.useRef)({_primitive:null,api(){return this._primitive},init(){if(!this._primitive){let t=null==u?void 0:u.api(),r=null==l?void 0:l.api();if(!r||!t)return null;let a=i||e({chart:r,series:t});t.attachPrimitive(a),this._primitive=a}return this._primitive},clear(){if(null!==this._primitive){var e;null==u||null==(e=u.api())||e.detachPrimitive(this._primitive),this._primitive=null}}});return(0,t.useLayoutEffect)(()=>{a&&n&&s.current.init()},[n,a]),(0,t.useLayoutEffect)(()=>()=>{s.current.clear()},[]),s},J=(0,t.forwardRef)((e,r)=>{let i=G(e);return(0,t.useImperativeHandle)(r,()=>i.current,[i]),null});J.displayName="SeriesPrimitive";let Q=({stretchFactor:e}={})=>{let{chartApiRef:i,isReady:a}=h(r),[l,n]=(0,t.useState)(!1),u=(0,t.useRef)({_pane:null,api(){return this._pane},init(){let t=null==i?void 0:i.api();if(!t)return null;let r=t.addPane(!0);return this._pane=r,n(!0),void 0!==e&&this._pane.setStretchFactor(e),this._pane},clear(){if(null!==this._pane){var e;null==i||null==(e=i.api())||e.removePane(this._pane.paneIndex()),n(!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:l}},U=(0,t.forwardRef)(({children:e,stretchFactor:r},i)=>{let{paneApiRef:{current:a},isReady:l}=Q({stretchFactor:r});return(0,t.useImperativeHandle)(i,()=>a,[a]),t.default.createElement(m.Provider,{value:{paneApiRef:a,isReady:l}},e)});U.displayName="Pane";export{N as AreaSeries,x as BarSeries,O as BaselineSeries,A as CandlestickSeries,n as Chart,c as CustomChart,I as CustomSeries,P as HistogramSeries,k as LineSeries,V as Markers,u as OptionsChart,U as Pane,z as PanePrimitive,T as PriceLine,R as PriceScale,J as SeriesPrimitive,_ as TimeScale,E as TimeScaleFitContentTrigger,j as WatermarkImage,F as WatermarkText,s as YieldCurveChart};
 //# sourceMappingURL=lightweight-charts-react-components.mjs.map